<meta>
Metadata del documento
Void element que provee metadatos del documento al navegador y a los motores de búsqueda. Sus usos principales son charset (codificación), viewport (responsive), description (SEO) y Open Graph (redes sociales). No produce contenido visible.
<meta> es un void element (sin etiqueta de cierre, sin contenido) que provee metadatos del documento HTML al navegador, a los motores de búsqueda y a otras aplicaciones que consumen el documento. No produce ningún contenido visible en la página — su efecto es siempre indirecto: le dice al navegador cómo interpretar el documento, configura el comportamiento del viewport en dispositivos móviles, o suministra información a servicios externos como buscadores o redes sociales.
Un solo documento puede tener múltiples elementos <meta>, cada uno con un propósito distinto. La combinación de <meta charset>, <meta name="viewport"> y <meta name="description"> forma la base de cualquier documento HTML moderno — el “head canónico” que todo front-end developer debe poder escribir de memoria. Cada uno resuelve un problema diferente: la codificación de caracteres garantiza que el texto se lea correctamente, el viewport hace posible el diseño responsive, y la description mejora la presencia del sitio en buscadores.
<meta> no tiene semántica de contenido — no nombra elementos, no crea estructuras, no produce output que el usuario vea. Su valor es de configuración y comunicación: le dice al procesador (navegador, crawler, cliente de redes sociales) qué saber antes de presentar o indexar el documento. En ese sentido es análogo a las cabeceras HTTP: información sobre el recurso, no el recurso en sí.
Cómo funciona
<meta> funciona a través de sus atributos — no tiene contenido propio. Los dos patrones principales son:
name+content: el atributonamedeclara qué tipo de metadato es, ycontentcontiene el valor. Se usa paraviewport,description,robotsy Open Graph (propertyen vez dename).charset: un atributo standalone que declara la codificación del documento.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Café Aroma — café de especialidad en el centro." />
<title>Café Aroma</title>
</head>Modelo de contenido
<meta> es un void element — no tiene etiqueta de cierre (</meta> no existe), no puede contener nada. Va exclusivamente dentro de <head>. La barra de cierre (<meta ... />) es válida en HTML5 pero innecesaria.
Atributos y usos
charset — codificación de caracteres
<meta charset="UTF-8"> es el primer elemento que debe aparecer dentro de <head>. Declara la codificación de caracteres del documento. Sin esta declaración, el navegador intenta adivinar la codificación — a veces acierta, a veces renderiza ñ como ñ y á como á.
Por qué UTF-8 y no otra: UTF-8 es la codificación universal de la web. Soporta todos los caracteres de todos los sistemas de escritura humanos: tildes, eñes, caracteres chinos, árabes, emojis. Es el estándar de facto desde hace años.
La regla de los 1024 bytes: debe aparecer dentro de los primeros 1024 bytes del documento (WHATWG HTML Living Standard). Si aparece más abajo, el navegador puede haber empezado a decodificar el documento con la codificación incorrecta, y algunos caracteres ya quedan mal. Por eso la convención es ponerlo como primer elemento absoluto del <head>.
<head>
<meta charset="UTF-8" /> <!-- siempre primero -->
...
</head>name="viewport" — configuración para móviles
<meta name="viewport"> es la declaración que hace posible el diseño responsive. Sin ella, los navegadores móviles simulan una pantalla de escritorio de 980px (o similar) y reducen toda la página para que quepa, produciendo texto diminuto que el usuario debe pellizcar para leer.
El valor canónico — el que siempre se usa:
<meta name="viewport" content="width=device-width, initial-scale=1" />width=device-width— el ancho del viewport es el ancho real de la pantalla del dispositivo.initial-scale=1— el zoom inicial es 1 (100%); el usuario ve el contenido a tamaño real.
Por qué es la base del responsive: este meta no hace que la página sea responsive por sí sola — eso requiere media queries y diseño mobile-first (CAT-27). Pero sin este meta, las media queries no tienen efecto en el dispositivo porque el navegador móvil sigue operando en el ancho de escritorio simulado.
name="description" — descripción para buscadores
<meta name="description"> provee el texto que los motores de búsqueda pueden mostrar debajo del título en los resultados.
<meta
name="description"
content="Café Aroma — café de especialidad con orígenes de Colombia, Etiopía y Guatemala."
/>No se ve en la página. Es metadata invisible para el visitante. Los motores pueden ignorarla y mostrar otro fragmento del contenido si lo consideran más relevante — es una sugerencia, no una instrucción.
Longitud óptima: 150–160 caracteres (Google muestra hasta ~160 antes de truncar). Una description bien escrita puede aumentar el CTR (porcentaje de clics) en resultados de búsqueda.
name="robots" — control de indexación
Indica a los robots de motores de búsqueda qué deben hacer con la página.
<meta name="robots" content="noindex, nofollow" />Valores comunes:
index(default) — el robot puede indexar la página.noindex— el robot no debe indexar la página (no aparece en resultados).follow(default) — el robot puede seguir los enlaces de la página.nofollow— el robot no debe seguir los enlaces.
Útil para páginas de administración, páginas de agradecimiento después de un formulario, o cualquier página que no debe aparecer en búsquedas.
property="og:..." — Open Graph (redes sociales)
El protocolo Open Graph (creado por Facebook, adoptado por todas las redes) permite controlar cómo se ve un enlace cuando se comparte en redes sociales: la imagen, el título y la descripción que aparecen en la tarjeta de vista previa.
<meta property="og:title" content="Café Aroma — Menú de temporada" />
<meta property="og:description" content="Descubrí los cafés de origen de la nueva temporada." />
<meta property="og:image" content="https://cafearoma.com/imagen-og.jpg" />
<meta property="og:url" content="https://cafearoma.com/menu" />Usa el atributo property (no name) porque Open Graph es un vocabulario externo. Sin estas etiquetas, las redes sociales generan la vista previa automáticamente del contenido de la página — a veces con resultados incorrectos o sin imagen.
http-equiv — equivalentes de cabeceras HTTP
http-equiv simula cabeceras HTTP desde el HTML. Hoy su uso es mínimo:
<!-- Redirigir después de 5 segundos — casi no se usa hoy -->
<meta http-equiv="refresh" content="5; url=https://example.com" />
<!-- Política de Content Security Policy desde el HTML -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />En la práctica, las cabeceras HTTP reales (enviadas por el servidor) son preferibles a los equivalentes en HTML. http-equiv es mayoritariamente un residuo histórico, salvo para casos específicos de CSP donde no hay acceso a la configuración del servidor.
Accesibilidad
<meta> no tiene rol en el árbol de accesibilidad — no produce contenido que los lectores de pantalla lean directamente. Su impacto en accesibilidad es indirecto: <meta charset> garantiza que los caracteres se rendericen correctamente (un documento con caracteres rotos es inaccesible para todos los usuarios), y <meta name="viewport"> con initial-scale=1 preserva la capacidad del usuario de hacer zoom en el navegador (nunca usar user-scalable=no o maximum-scale=1 — impide a usuarios con baja visión ampliar el contenido).
Notas, gotchas e interacción
<meta charset>va primero — siempre. Si no está en los primeros 1024 bytes, puede causar caracteres rotos. La convención es que sea el primer elemento de<head>, antes incluso que<title>.user-scalable=noen viewport es un antipatrón de accesibilidad.<meta name="viewport" content="..., user-scalable=no">impide el zoom del usuario en móvil — es una violación de WCAG 1.4.4 (Resize text). Nunca usarlo.- Open Graph necesita
<meta property>, no<meta name>.<meta name="og:title">no funciona — debe serproperty="og:title". name="description"no afecta el ranking en buscadores. Google ha confirmado que no usa la description como señal de ranking. Su valor es el CTR (cómo se ve el resultado en la SERP), no la posición.- Cicatriz de este sitio (A.0.5): los efectos de
<meta>no se ven en el sandbox/preview (la pestaña del navegador es la del iframe, el favicon no carga, la description no se muestra). El efecto real se aprecia abriendo el HTML como archivo en el navegador.
Vigente / legacy
<meta> es completamente vigente. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> es la forma legacy de declarar el charset (HTML4/XHTML) — reemplazada por el más conciso <meta charset="UTF-8"> en HTML5. Los atributos scheme y lang de <meta> son legacy y ya no se usan.
Aprendelo en el recorrido
Esta entrada complementa las lecciones Los elementos del head y El head canónico completo del módulo Metadata, donde <meta charset>, <meta name="viewport"> y <meta name="description"> se practican como parte del head canónico obligatorio.