Las etiquetas <meta> en <head> proporcionan metadatos sobre la página — codificación de caracteres, comportamiento de viewport, descripciones SEO y vistas previas de redes sociales. No se renderizan pero son leídas por navegadores, motores de búsqueda y plataformas sociales.
charset asegura que el texto (especialmente non-ASCII) se decodifique correctamente. Ponlo primero.viewport es lo que hace que un sitio sea responsive en dispositivos móviles — sin él, los teléfonos se renderan con un ancho falso de 980px y se alejan, rompiendo tu CSS responsive.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
El <title> y la description son lo que aparecen en los resultados de Google, por lo que impulsan los clics. canonical le dice a los motores de búsqueda la URL autorizada.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Estas controlan la tarjeta que aparece cuando tu enlace se comparte en Facebook, LinkedIn, Slack, X, etc. — sin ellas obtienes una vista previa fea o vacía.
charset y viewport son innegociables para renderizado correcto y capacidad de respuesta en dispositivos móviles; title/description/canonical impulsan SEO; las etiquetas Open Graph controlan cómo se ven tus enlaces cuando se comparten.
Juntas son la capa de metadatos que hace que una página se renderice correctamente, se clasifique bien y se comparta adecuadamente.