HTML <meta> Tag

La etiqueta <meta> lleva metadatos — información sobre la página en lugar de contenido visible en ella. Los navegadores, los motores de búsqueda y las redes sociales leen estos metadatos para decidir cómo renderizar la página, cómo indexarla y cómo mostrarla cuando se comparte. Nada dentro de un elemento <meta> aparece en la página en sí.

Un documento puede contener varias etiquetas <meta>, y casi todas las páginas modernas necesitan al menos un par de ellas (codificación de caracteres y el viewport). Todas las etiquetas <meta> viven dentro del elemento <head>, junto con las etiquetas <title> y <link>.

Esta página cubre las etiquetas meta que usarás realmente en el día a día: codificación, el viewport, la description para SEO, la simulación de cabeceras con http-equiv y las etiquetas Open Graph / Twitter que controlan cómo se ven los enlaces al compartirlos.

Sintaxis

La etiqueta <meta> es un elemento vacío — no tiene contenido ni etiqueta de cierre. En XHTML debe cerrarse en sí misma (<meta />).

Una etiqueta <meta> usa uno de dos patrones:

Un par name/content (o property/content para Open Graph) — name indica qué tipo de metadato es, y content es su valor.
Un atributo charset independiente, o un par http-equiv/content que simula una cabecera de respuesta HTTP.

Debes proporcionar el atributo content siempre que name o http-equiv estén presentes. El atributo content no se usa junto con charset.

Codificación de caracteres: `<meta charset>`

Esta etiqueta indica al navegador qué codificación de caracteres usar al decodificar el documento. Debe ser lo primero dentro del <head>, y siempre debe ser UTF-8:

<meta charset="UTF-8">

¿Por qué UTF-8? Puede representar todos los caracteres de todos los idiomas — acentos, emojis, símbolos de moneda, caracteres CJK — usando una única codificación universal. Sin una codificación declarada (o correctamente detectada), caracteres como é, — o " pueden convertirse en "mojibake" ilegible. UTF-8 es la codificación de la web moderna; el estándar HTML lo exige para los nuevos documentos.

Colócalo al principio para que el navegador conozca la codificación antes de analizar cualquier texto.

La etiqueta meta del viewport

La etiqueta viewport es lo que hace que una página sea responsive en teléfonos y tabletas. Sin ella, los navegadores móviles asumen que la página fue construida para escritorio y la renderizan con un ancho de aproximadamente 980px, reduciendo el resultado — dejando texto pequeño y alejado del zoom. Agrega esta línea y la página se adapta al dispositivo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Lo que hace cada parte:

width=device-width — establece el viewport de diseño al ancho propio del dispositivo (p. ej., 390px en un teléfono) en lugar de un ancho de escritorio ficticio de 980px.
initial-scale=1.0 — comienza en un nivel de zoom 1:1, para que un píxel CSS corresponda a un píxel independiente del dispositivo al cargar.

Esta única línea es necesaria para cualquier sitio que quiera verse bien en móvil. Evita agregar user-scalable=no o un maximum-scale inferior a 5 — bloquea el zoom con pellizco y perjudica la accesibilidad para usuarios con baja visión.

SEO: la etiqueta meta `description`

La description es el resumen que los motores de búsqueda suelen mostrar bajo el título de tu página en los resultados, y al que recurren las plataformas sociales como alternativa. Apunta a una frase concisa y convincente de aproximadamente 150–160 caracteres — el texto más largo se trunca con puntos suspensivos.

<meta name="description" content="Learn how the HTML meta tag controls encoding, the viewport, SEO, and social sharing — with copy-paste examples.">

La description no mejora directamente el posicionamiento, pero un resumen claro y relevante mejora las tasas de clics desde la página de resultados.

Otros valores `name`/`content`

El atributo name nombra el tipo de metadato; content contiene su valor. Valores comunes:

<!-- Author of the page -->
<meta name="author" content="Jane Doe">

<!-- Software that generated the page -->
<meta name="generator" content="Next.js">

<!-- Control how search engines crawl and index this page -->
<meta name="robots" content="index, follow">
<!-- ...or keep a page out of search results -->
<meta name="robots" content="noindex, nofollow">

<!-- Tint the mobile browser UI to match your brand -->
<meta name="theme-color" content="#10b981">

<!-- Limit the referrer information sent to other sites -->
<meta name="referrer" content="strict-origin-when-cross-origin">

Nota: La etiqueta meta keywords (<meta name="keywords" content="…">) es ignorada por todos los motores de búsqueda importantes hoy en día y puede omitirse sin problema. El antiguo atributo scheme fue eliminado en HTML5 y no debe usarse.

Simulación de cabeceras HTTP: `http-equiv`

El atributo http-equiv permite que una etiqueta <meta> sustituya a una cabecera de respuesta HTTP. Los valores más comunes:

<!-- Declare the content type and encoding (legacy alternative to charset) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Auto-refresh the page every 60 seconds -->
<meta http-equiv="refresh" content="60">

<!-- ...or redirect to another URL after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://www.w3docs.com">

Advertencia de accesibilidad: Evita http-equiv="refresh". Una página que se actualiza o redirige automáticamente puede desorientar a los usuarios, interrumpir los lectores de pantalla y dificultar a las personas que necesitan más tiempo para leer — incumple los criterios de éxito de WCAG. Prefiere una redirección HTTP real del lado del servidor, o un enlace visible que el usuario pueda pulsar.

Compartir en redes sociales: Open Graph y tarjetas de Twitter

Cuando alguien comparte tu enlace en Facebook, LinkedIn, Slack o X, esas plataformas leen las etiquetas de Open Graph para construir la tarjeta de vista previa (título, resumen, imagen). Las etiquetas Open Graph usan el atributo property en lugar de name:

<meta property="og:title" content="HTML meta Tag — Full Guide">
<meta property="og:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">
<meta property="og:url" content="https://www.w3docs.com/learn-html/html-meta-tag.html">
<meta property="og:type" content="website">

X (Twitter) añade sus propias etiquetas encima, usando name:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML meta Tag — Full Guide">
<meta name="twitter:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta name="twitter:image" content="https://www.w3docs.com/images/meta-preview.png">

Proporciona una URL absoluta para og:image (alrededor de 1200×630px) para que las vistas previas muestren una imagen grande y nítida en lugar de una miniatura pequeña o ninguna.

Un ejemplo completo de `<head>`

Así es como estas etiquetas encajan en un documento real:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML meta Tag — Full Guide</title>
    <meta name="description" content="Encoding, viewport, SEO, and social meta tags explained with copy-paste examples.">
    <meta name="author" content="Jane Doe">
    <meta name="theme-color" content="#10b981">

    <!-- Open Graph -->
    <meta property="og:title" content="HTML meta Tag — Full Guide">
    <meta property="og:description" content="Everything the meta tag controls, with examples.">
    <meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Page content goes here</h1>
  </body>
</html>

Atributos

Atributo	Valor	Descripción
`charset`	character_set	Define la codificación de caracteres del documento (usa `UTF-8`).
`content`	text	Define el valor de los atributos `name`, `property` o `http-equiv`.
`http-equiv`	content-type, default-style, refresh	Simula una cabecera de respuesta HTTP y determina su procesamiento.
`name`	application-name, author, description, generator, keywords, robots, theme-color, referrer, viewport	Nombra los metadatos contenidos en `content`.
`property`	og:title, og:description, og:image, …	Nombra una propiedad de Open Graph (usada por las plataformas sociales).

La etiqueta <meta> también admite los Atributos Globales y los Atributos de Evento.

Etiquetas relacionadas

<head> — el contenedor de todos los metadatos.
<title> — el título de la página que se muestra en las pestañas y los resultados de búsqueda.
<link> — enlaza recursos externos como hojas de estilo y favicons.
<base> — establece una URL base para todos los enlaces relativos de la página.
<style> — inserta CSS directamente en el head.

Práctica

¿Cuál es el propósito de una etiqueta meta en HTML?

Proporciona metadatos sobre el documento HTML, como el conjunto de caracteres, la descripción y la configuración del viewport.Muestra el contenido de la página web al usuario.Es el contenedor principal para los elementos visibles de la página.Se usa para mostrar imágenes en la página web.

Sintaxis

Codificación de caracteres: <meta charset>