Atributo content de HTML
El atributo content de HTML establece el valor asociado al atributo name o http-equiv de una etiqueta meta. Aprende sus usos para SEO, viewport y más.
El atributo content contiene el valor de una declaración de metadatos. Por sí solo no tiene significado — siempre es la mitad de un par clave-valor, y aporta los datos para lo que el atributo name o http-equiv de la etiqueta meta denomina.
Solo se puede usar content en el elemento <meta>, que se coloca dentro del <head> del documento. Piensa en name/http-equiv como la clave y en content como el valor:
name+content— metadatos a nivel de documento para navegadores, motores de búsqueda y plataformas sociales (descripción, palabras clave, viewport, etc.).http-equiv+content— una directiva pragma que simula una cabecera de respuesta HTTP (por ejemplo, una recarga de página o un tipo de contenido).
Si escribes una etiqueta <meta> con un atributo name o http-equiv pero sin content, la declaración no tiene efecto.
Sintaxis
<meta name="description" content="A description of the document">Valores comunes de name y su content
El valor de content se interpreta según el name con el que se empareja. Estos son los que usarás con más frecuencia:
name | Qué contiene content |
|---|---|
viewport | Cómo se adapta la página a la pantalla del dispositivo. El valor estándar es width=device-width, initial-scale=1, que hace que la página se renderice de forma responsiva en móvil. |
description | Un breve resumen de la página. Los motores de búsqueda suelen mostrarlo como el fragmento bajo tu resultado, así que mantente por debajo de ~160 caracteres. |
keywords | Una lista de palabras clave separadas por comas. En gran medida ignorada por los motores de búsqueda modernos, pero sigue siendo habitual en código heredado. |
robots | Instrucciones para los rastreadores de motores de búsqueda (consulta el desglose a continuación). |
author | El nombre del autor de la página. |
El meta de viewport es el más importante que debes recordar — sin él, los navegadores móviles asumen un diseño con ancho de escritorio y reducen el zoom:
<meta name="viewport" content="width=device-width, initial-scale=1">Los valores de la directiva robots
El content de un meta robots es una lista de directivas separadas por comas que indican a los rastreadores qué pueden hacer con la página. Las dos más incomprendidas — noindex y nofollow — controlan cosas diferentes:
| Valor | Qué indica al rastreador |
|---|---|
index | La página puede aparecer en los resultados de búsqueda. Este es el valor predeterminado, por lo que rara vez necesitas escribirlo. |
follow | El rastreador puede seguir los enlaces de la página para descubrir otras páginas. También es el valor predeterminado. |
noindex | No mostrar esta página en los resultados de búsqueda — aunque el rastreador todavía puede leerla y seguir sus enlaces. |
nofollow | No seguir los enlaces de esta página. La página en sí aún puede ser indexada. |
Como son independientes, a menudo se combinan. Por ejemplo, para ocultar una página de la búsqueda y evitar que los rastreadores sigan sus enlaces:
<meta name="robots" content="noindex, nofollow">Metadatos de Open Graph y compartición en redes sociales
Cuando una página se comparte en plataformas sociales (Facebook, LinkedIn, Slack, etc.), la plataforma lee las etiquetas meta de Open Graph para construir la tarjeta de vista previa. Open Graph usa el atributo property (en lugar de name) junto con content:
<meta property="og:title" content="HTML content Attribute - W3docs" />
<meta property="og:description" content="Learn how the HTML content attribute pairs with a meta tag's name or http-equiv to set page metadata." />
<meta property="og:image" content="https://www.w3docs.com/assets/preview.png" />og:title— el titular que se muestra en la tarjeta de compartición (si se omite, usa el título de la página).og:description— el texto de resumen bajo el título.og:image— una URL absoluta a la imagen en miniatura. Usa siempre una URLhttps://completa; las rutas relativas no se resolverán en otros sitios.
Estos son algunos de los usos más comunes de content en el mundo real, por lo que vale la pena añadirlos junto a tu meta description.
Valores comunes de http-equiv y su content
El atributo http-equiv permite que una etiqueta <meta> sustituya a una cabecera HTTP. El atributo content lleva entonces el valor de esa cabecera:
http-equiv | Qué contiene content |
|---|---|
refresh | El número de segundos antes de que la página se recargue. Añade ;url=... para redirigir en su lugar — por ejemplo, content="5;url=https://www.w3docs.com". Consulta la advertencia de accesibilidad a continuación. |
content-type | El tipo MIME y el juego de caracteres del documento, por ejemplo text/html; charset=UTF-8. En HTML5 se prefiere la forma abreviada <meta charset="UTF-8">. |
El valor X-UA-Compatible (por ejemplo, IE=edge) solo afectaba al modo de renderizado de Internet Explorer. Internet Explorer ha llegado al fin de su vida útil, por lo que esta directiva es heredada y puede omitirse sin problemas en páginas nuevas.
Usar <meta http-equiv="refresh"> para redirigir a otra página está desaconsejado por razones de accesibilidad. Es un fallo documentado de WCAG 2.2 (Criterios de éxito 2.2.1 y 3.2.5): no da al usuario control sobre el tiempo y puede desorientar a personas que usan lectores de pantalla o que necesitan más tiempo para leer. Prefiere una redirección HTTP real en el servidor (una respuesta 301/302). Si debes redirigir desde el cliente, establece el retraso en 0 para que ocurra de inmediato, o proporciona un enlace visible que el usuario pueda activar por sí mismo.
Ejemplo del atributo content de HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git, with runnable examples to learn web development step by step." />
<meta name="keywords" content="HTML,CSS,JavaScript,PHP, Git" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<h1>Example of the HTML "content" attribute</h1>
<p>Lorem ipsum, or lorem ipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Esto es lo que hace cada valor de content en el ejemplo anterior:
width=device-width, initial-scale=1indica al navegador que adapte el diseño al ancho de pantalla del dispositivo y comience con un zoom del 100 %.- El valor de
description("Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git…") es el resumen de la página que un motor de búsqueda puede mostrar como fragmento del resultado. "HTML,CSS,JavaScript,PHP, Git"es la lista de palabras clave separadas por comas."30"en la directivarefreshrecarga la página cada 30 segundos. Usa la recarga automática con moderación — consulta la nota de accesibilidad anterior antes de confiar en ella.