Elemento meta
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Descripción
El elemento meta
provee metadatos que no pueden ser expresados con otros elementos del encabezado (head
), como title
, base
, link
, style
y script
. Este elemento puede ser utilizado de tres maneras diferentes.
Con el atributo charset
En este caso, el atributo debe estar solo y tener un valor que represente al conjunto de caracteres utilizado por el documento. Sólo puede haber una declaración meta
con el atributo charset
por documento.
Con el atributo name
El elemento provee metadatos a nivel de documento organizados en pares nombre-valor. El "nombre" en este par es provisto por el atributo name
, mientras que el "valor" es provisto por el atributo content
en cada caso.
A continuación hay una referencia para los nombres estándar que se pueden utilizar para este propósito, y una descripción de la información que debería proveer el atributo content
. Todos estos nombres son insensibles a mayúsculas/minúsculas
- application-name: el nombre de la aplicación web que este documento representa. Las traducciones del nombre pueden ser provistas en conjunto con el atributo
lang
. No debe existir más de un nombre de aplicaciónmeta
para un lenguaje específico. - author: el nombre del autor del documento. Múltiples autores pueden ser declarados con múltiples declaraciones
meta
. - description: una breve descripción del documento o su propósito. Solo puede haber una descripción
meta
en el documento. - generator: el nombre de uno de los programas utilizados para generar el documento. Múltiples generadores pueden ser declarados con múltiples declaraciones
meta
. - keywords: un conjunto de identificadores separados por comas, cada uno de los cuales es una palabra clave que describe de alguna manera los contenidos del documento.
- referrer: la política de remitentes por defecto para el documento, representada por alguno de los siguientes valores:
- no-referrer: Ninguna información acerca del remitente es enviada en todas las peticiones.
- no-referrer-when-downgrade: Una URL completa es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
- same-origin: Una URL completa es enviada únicamente en las peticiones hechas en el mismo origen.
- origin: Una URL compuesta por protocolo, servidor y puerto es enviada en todas las peticiones.
- strict-origin: Una URL compuesta por protocolo, servidor y puerto es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
- origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes.
- strict-origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes, únicamente en peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
- unsafe-url: Una URL completa es enviada en todas las peticiones.
Nota: la cadena vacía, se interpreta como el valor
no-referrer
. - theme-color: un color CSS para ser usado por los navegadores a modo de sugerencia para personalizar la visualización de la página o de la interfaz de usuario circundante. Por ejemplo, un navegador podría colorear la barra de título de la página, o resaltar la barra de pestañas o el intercambiador de tareas. No debe existir más de una elemento
meta
con el nombretheme-color
por documento. - color-scheme: un dato para los navegadors, que los ayuda a presentar el fondo de la página con el esquema de color deseado de inmediato (en lugar de esperar que se carguen todos los estilos CSS). El valor para esta declaración puede ser cualquiera de los siguientes:
- normal: El documento no está al tanto de los esquemas de color y, por lo tanto, debería ser presentado con la combinación de colores predeterminada del navegador.
- light: Representa una combinación de colores clara, con colores de fondo claros y colores de primer plano oscuros.
- dark: Representa una combinación de colores oscura, con colores de fondo oscuros y colores de primer plano claros.
Los autores pueden crear sus propios nombres de metadatos sin requerimientos de ningún tipo (opcionalmente registrándolos en la página de la Wiki de MetaExtensiones del WHATWG), excepto en las siguientes situaciones:
- Cuando el nombre o el contenido asociado es una URL. En tal caso, es preferible registrarlo como un tipo de vínculo en la página de la wiki de microformatos para valores rel existentes.
- Cuando se espera que los metadatos tengan requerimientos de procesamiento en navegadores. En tales casos deberían ser estandarizados.
Con el atributo http-equiv
El elemento representa una directiva pragma y su tipo es declarado en el atributo http-equiv
. Los valores para su interpretación son definidos en el atributo content
.
Existe un conjunto de directivas pragma estándares que se describe en la lista a continuación, donde el nombre de cada directiva es asociado a una descripción de cómo debería ser el valor del atributo content
.
- content-type: esta directiva es una alternativa a la declaración
meta
con el atributocharset
. Especifica el conjunto de caracteres utilizado por el documento pero en este caso, el valor es precedido por la cadena "text/html; charset=
".Ejemplo
<meta http-equiv="content-type" content="text/html; charset=utf-8">
- default-style: el nombre de la hoja de estilos predeterminada. Su valor debe coincidir con el atributo
title
de algún elementolink
en el documento que enlace a una hoja de estilos, o con el atributotitle
de un elementostyle
. Esta directiva es útil cuando hay más de una hoja de estilos en un solo documento. - refresh: establece el número de segundos que el navegador debería esperar antes de redireccionar automáticamente al usuario a otra página. Los valores pueden ser establecidos de dos formas:
- Con un entero positivo, que define el número de segundos a esperar antes de recargar la página.
- Con un entero positivo, que define el número de segundos a esperar, seguido de la cadena "
; URL=
") y el URL a donde el navegador debería redireccionar al usuario luego del tiempo especificado.Ejemplo
<meta http-equiv="refresh" content="60; URL=http://www.htmlquick.com/">
- content-security-policy: impone una Política de Seguridad de Contenido sobre el documento. La lista separada por puntos y comas puede contener:
- default-src: define una política predeterminada para la carga de recursos en el documento.
- script-src: indica qué programas pueden ser cargados.
- object-src: indica qué plugins pueden ser cargados.
- style-src: define qué hojas de estilo pueden ser cargadas.
- img-src: define qué imágenes pueden ser visualizadas.
- media-src: define qué medios (audio y video) pueden ser reproducidos.
- frame-src: especifica qué contenido puede ser incrustado dentro de un marco.
- font-src: define qué fuentes pueden ser utilizadas.
- connect-src: especifica qué URIs pueden ser cargadas por programas.
- form-src: indica qué URIs pueden ser usadas en el atributo
action
de los formularios. - script-nonce: requiere la presencia de un "número de utilización única" en elementos
script
. - plugin-types: define qué tipos de plugins pueden ser cargados.
- reflected-xss: indica si el navegador debería hacer uso de la heurística para filtrar o bloquear ataques de programas ajenos al sitio.
Un valor puede ser asignada a cualquiera de estas directivas, que puede ser una URI, opcionalmente con comodines, o cualquiera de los siguientes valores, encerrados por comillas simples:
none
,self
,unsafe-inline
óunsafe-eval
.Ejemplo
<meta http-equiv="content-security-policy" content="script-src 'self'; object-src 'none'; style-src https://estilos.estesitio.info">
Ejemplos
En el siguiente ejemplo declararemos un conjunto de elementos meta
para proveer la siguiente información acerca del documento: el juego de caracteres utilizado, dos autores, una descripción y una redirección programada.
<head>
<title>Derrocando a un imperio intergaláctico</title>
<meta charset="utf-8">
<meta name="author" content="Luke Skywalker">
<meta name="author" content="Darth Vader">
<meta name="description" content="Guía completa para derrocar a un imperio intergaláctico, con representaciones y ejemplos prácticos">
<meta http-equiv="refresh" content="15; url=http://www.basurarebelde.com/">
</head>
Atributos
Atributos específicos
name
El nombre en un par nombre-valor, compuesto por este atributo y el atributo content
. Existe un número de nombres estándares en HTML5:
- application-name: el nombre de la aplicación web que este documento representa. Las traducciones del nombre pueden ser provistas en conjunto con el atributo
lang
. No debe existir más de un nombre de aplicaciónmeta
para un lenguaje específico. - author: el nombre del autor del documento. Múltiples autores pueden ser declarados con múltiples declaraciones
meta
. - description: una breve descripción del documento o su propósito. Solo puede haber una descripción
meta
en el documento. - generator: el nombre de uno de los programas utilizados para generar el documento. Múltiples generadores pueden ser declarados con múltiples declaraciones
meta
. - keywords: un conjunto de identificadores separados por comas, cada uno de los cuales es una palabra clave que describe de alguna manera los contenidos del documento.
- referrer: la política de remitentes por defecto para el documento, representada por alguno de los siguientes valores:
- no-referrer: Ninguna información acerca del remitente es enviada en todas las peticiones.
- no-referrer-when-downgrade: Una URL completa es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
- same-origin: Una URL completa es enviada únicamente en las peticiones hechas en el mismo origen.
- origin: Una URL compuesta por protocolo, servidor y puerto es enviada en todas las peticiones.
- strict-origin: Una URL compuesta por protocolo, servidor y puerto es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
- origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes.
- strict-origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes, únicamente en peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
- unsafe-url: Una URL completa es enviada en todas las peticiones.
Nota: la cadena vacía, se interpreta como el valor
no-referrer
. - theme-color: un color CSS para ser usado por los navegadores a modo de sugerencia para personalizar la visualización de la página o de la interfaz de usuario circundante. Por ejemplo, un navegador podría colorear la barra de título de la página, o resaltar la barra de pestañas o el intercambiador de tareas. No debe existir más de una elemento
meta
con el nombretheme-color
por documento. - color-scheme: un dato para los navegadors, que los ayuda a presentar el fondo de la página con el esquema de color deseado de inmediato (en lugar de esperar que se carguen todos los estilos CSS). El valor para esta declaración puede ser cualquiera de los siguientes:
- normal: El documento no está al tanto de los esquemas de color y, por lo tanto, debería ser presentado con la combinación de colores predeterminada del navegador.
- light: Representa una combinación de colores clara, con colores de fondo claros y colores de primer plano oscuros.
- dark: Representa una combinación de colores oscura, con colores de fondo oscuros y colores de primer plano claros.
Los autores pueden crear sus propios nombres de metadatos sin requerimientos de ningún tipo (opcionalmente registrándolos en la página de la Wiki de MetaExtensiones del WHATWG), excepto en las siguientes situaciones:
- Cuando el nombre o el contenido asociado es una URL. En tal caso, es preferible registrarlo como un tipo de vínculo en la página de la wiki de microformatos para valores rel existentes.
- Cuando se espera que los metadatos tengan requerimientos de procesamiento en navegadores. En tales casos deberían ser estandarizados.
Ejemplo
<meta name="author" content="Master Yoda">
<meta name="description" content="Especificaciones para la nave X-wing con información, planos e imágenes">
http-equiv
Un valor que indica el tipo de directiva pragma que representa el elemento. Existen tres valores posibles, insensibles a mayúsculas/minúsculas:
- content-type: esta directiva es una alternativa a la declaración
meta
con el atributocharset
. Especifica el conjunto de caracteres utilizado por el documento pero éste es precedido por la cadena "text/html; charset=
". - default-style: el nombre de la hija de estilos predeterminada utilizada para la renderización del documento. Su valor debe coincidir con el atributo
title
de algún elementolink
en el documento que enlace a una hoja de estilos, o con el atributotitle
de un elementostyle
. Esta directiva es útil cuando hay más de una hoja de estilos en un solo documento. - refresh: establece el número de segundos que el navegador debería esperar antes de redireccionar automáticamente al usuario a otra página. Los valores pueden ser establecidos de dos formas:
- Con un entero positivo, que define el número de segundos a esprar antes de recargar la página.
- Con un entero positivo, que define el número de segundos a esperar, seguido de la cadena "
; URL=
") y el URL a donde el navegador debería redireccionar al usuario luego del tiempo especificado.
Ejemplo
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="default-style" content="Hoja de estilos principal">
<meta http-equiv="refresh" content="300; url=/clasica/lista.html">
content
El valor en un par nombre-valor, compuesto por este atributo y uno de los atributos name
y http-equiv
. Los valores posibles dependen del contexto y son especificados en las descripciones de los atributos name
y http-equiv
.
Ejemplo
<meta name="application-name" content="LinkScanner 2.0">
<meta name="description" content="Escanea automáticamente todos los vínculos en tu sitio sin intervenciones">
<meta http-equiv="refresh" content="90">
scheme
Una cadena con información adicional para ayudar a los navegadores a comprender las propiedades declaradas por el elemento.
Este atributo ha sido removido del estándar HTML5. Los autores deberían recurrir ahora a la wiki de HTML5 (wiki de extensiones pragma y wiki de extensiones meta).
Ejemplo
<meta name="date" content="2015-04-22" scheme="YYYY-MM-DD">
<meta name="code" content="0553293354" scheme="ISBN-10">
Atributos globales
Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.
Eventos
Eventos globales
Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.