Etiqueta meta en HTML: charset, descripción y viewport

La etiqueta <meta> declara metadatos del documento, como la codificación de caracteres, la descripción o la configuración de la ventana gráfica. Úsala en la cabecera para indicar cómo interpretar el texto y presentar la página en móviles, o para proporcionar información a otros consumidores. Por ejemplo, ayuda a que una lección muestre correctamente «á» y «ñ» cuando el archivo está guardado en UTF-8. HTML Living Standard: <meta>.

Ejemplo mínimo

Estas tres declaraciones van dentro de <head>:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Aprende HTML con ejercicios explicados.">

Para probarlas, guarda este documento completo como meta-minimo.html con codificación UTF-8 y ábrelo en el navegador:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Aprende HTML con ejercicios explicados.">
    <title>Mi primera prueba de meta</title>
  </head>
  <body>
    <p>¡Qué fácil! Mañana habrá otra lección.</p>
  </body>
</html>

Verás el párrafo con sus acentos. La codificación interviene al interpretar los bytes del archivo; el viewport orienta el tamaño de la ventana de diseño en móviles. La descripción no añade texto visible. Inspecciona <head> en las herramientas de desarrollo para encontrarla. No necesitas JavaScript, archivos adicionales ni servidor.

Sintaxis y contexto válido

<meta> es un elemento vacío: no contiene texto y no lleva </meta>. Para estos usos, colócalo en la cabecera <head>. Escribe una declaración por función; no combines charset, name y http-equiv en el mismo elemento.

Las formas con name o http-equiv requieren content. Existe también itemprop para microdatos, con contextos propios, incluso fuera de la cabecera; no lo mezcles con las tres formas anteriores. Sintaxis, atributos y contextos en MDN.

Charset: cómo usar UTF-8

Coloca <meta charset="utf-8"> al principio de <head>, antes del título, estilos o comentarios extensos. La declaración completa debe quedar dentro de los primeros 1.024 bytes del documento, no simplemente de sus primeros 1.024 caracteres. Mantén una sola declaración de codificación. Reglas de codificación de HTML.

El archivo también debe guardarse en UTF-8: la etiqueta no convierte una codificación distinta ni repara texto ya corrupto. Al publicar, comprueba que el servidor no anuncie una codificación contradictoria en Content-Type. Si ves «lección», revisa primero cómo se guardó el archivo y después la respuesta HTTP; añadir más declaraciones no resuelve la contradicción.

Viewport: tamaño móvil y accesibilidad

En content="width=device-width, initial-scale=1", width=device-width orienta el ancho hacia el del dispositivo en píxeles CSS; initial-scale=1 establece la escala inicial. Son claves dentro de content, no atributos HTML independientes. Sin esta declaración, algunos navegadores móviles usan una ventana virtual más ancha y reducen la página. Definición del viewport en CSS.

El viewport no sustituye al CSS adaptable: una caja de ancho fijo puede desbordarse igualmente. Evita user-scalable=no y límites de ampliación que impidan leer. Comprueba que el contenido siga accesible al aumentar el texto o usar zoom. MDN: viewport y W3C: ampliar texto.

Caso práctico: cabecera de una lección

Guarda este segundo archivo como leccion-meta.html, también en UTF-8. Incluye todo lo necesario:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Practica párrafos en HTML con una lección breve y un ejercicio de escritura.">
    <title>Párrafos en HTML — Lección 2</title>
    <style>
      body {
        margin: 0;
        font-family: system-ui, sans-serif;
        line-height: 1.6;
      }
      main {
        max-width: 38rem;
        margin-inline: auto;
        padding: 1rem;
        overflow-wrap: anywhere;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Párrafos en HTML</h1>
      <p>Una lección para escribir textos claros con acentos y eñes.</p>
      <h2>Ejercicio</h2>
      <p>Escribe dos párrafos sobre tu día: ¿qué aprendiste y qué practicarás mañana?</p>
    </main>
  </body>
</html>

1. Ábrelo y comprueba «Párrafos», «lección» y «mañana». El título identifica la pestaña; el <h1> nombra el contenido visible.
2. Activa la emulación móvil de las herramientas de desarrollo a 375 píxeles y recarga. El texto debe ajustarse al ancho. En escritorio, el CSS limita el ancho de lectura.
3. Retira únicamente el viewport, guarda y recarga en emulación móvil: puede aparecer una versión reducida por la ventana virtual. Restáuralo y prueba ampliar la página sin perder texto.
4. Cambia o elimina description: el cuerpo permanece igual. Retirar charset puede conservar los acentos si el navegador obtiene la codificación por otra vía; no demuestra que sea seguro omitirla en cualquier archivo.

Fíjate en la diferencia entre el viewport y el CSS: el primero configura la ventana de diseño y el segundo adapta el contenido a ella.

Description, robots y Open Graph

Escribe una descripción específica de la página, coherente con su contenido, y conserva una sola declaración name="description". Google puede usarla como fragmento de búsqueda, pero también puede seleccionar texto del cuerpo según la consulta. Cambiarla no garantiza que cambie el fragmento. Google: cómo se generan los fragmentos.

¿Meta description mejora automáticamente el ranking? No. Su función es describir la página; no asegura una posición ni una mejora automática. Tampoco conviertas name="keywords" en una estrategia de posicionamiento: Google indica que no lo utiliza para indexar ni ordenar resultados. Metadatos admitidos por Google.

name="robots" content="noindex" tiene otro propósito: pide a los buscadores que respetan esa regla excluir la página del índice. Deben poder acceder a ella para leerla; no protege contenido privado ni reemplaza una contraseña. Reglas de robots.

Open Graph es un vocabulario externo para describir contenido compartido: utiliza declaraciones como property="og:title", distintas de name="description". property pertenece a esa integración, no a los atributos específicos básicos de <meta> definidos por HTML. Cada plataforma decide cómo consumir los datos y presentar la vista previa. Protocolo Open Graph.

Otros atributos, errores y etiquetas relacionadas

media se usa en <meta> únicamente con name="theme-color", para condicionar el color sugerido a la interfaz del navegador mediante una consulta de medios. Sin media, la condición es all. No lo añadas a description o viewport; tampoco pinta el fondo de la página. Atributo media.

http-equiv solo admite directivas definidas, con reglas propias. No puedes inventar cualquier encabezado HTTP ni configurar con él el estado de una respuesta. Para mover una página publicada, prefiere una redirección HTTP adecuada; las recargas o redirecciones temporizadas con refresh pueden interrumpir la lectura. Directivas y límites de http-equiv.

¿Meta es visible para el usuario? Generalmente aporta datos al navegador y otros consumidores; sus efectos, como la interpretación de acentos o el tamaño móvil, sí pueden percibirse. Para un título usa <title>; para un texto visible, un encabezado o párrafo; para conectar una hoja CSS o un icono, usa <link>.

Compatibilidad y fuentes

Revisión del 3 de octubre de 2026: <meta>, charset y los metadatos básicos tienen soporte consolidado. El viewport mostrado está disponible en navegadores móviles actuales; no esperes el mismo cambio al retirarlo en escritorio. theme-color depende del navegador y su interfaz: el registro de MDN señala que Firefox no lo implementa y que Safari, desde la versión 26, lo usa solo en aplicaciones web instaladas. Comprueba la función concreta en los datos de compatibilidad de MDN. El soporte del elemento no garantiza que un buscador o una red social utilice sus datos.