Elemento meta en HTML

El elemento meta representa metadatos que no puede ser representado usando relacionados con metadatos elementos HTML tales como <base>, <link>, <script>, <style> o <title>.

Ejemplo de uso del elemento <meta> para establecer la codificación de caracteres en UTF-8:

< meta  charset = "utf-8" >

Clasificaciones de contenido	Metadatos
Contenido permitido	Ninguno, este artículo está vacío.
Acrónimo	Dado que este elemento está vacío, se debe proporcionar la etiqueta de inicio y se debe omitir la etiqueta de finalización.
Elementos del padre	El elemento <head>.
Interfaz DOMO	`HTMLMetaElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento se pueden utilizar propiedades globales.

Nota: La propiedad pública tiene name un significado especial en el elemento <meta>.

`charset`

Esta propiedad define qué codificación de caracteres se utiliza en la página. Esta propiedad debe contener un nombre de codificación de caracteres estándar. Es cierto que la especificación no requiere el uso de una notación específica, pero recomienda lo siguiente:

Se recomienda que los desarrolladores utilicen la codificación UTF-8.
Los desarrolladores no deben utilizar codificaciones que no sean ASCII para evitar los riesgos de seguridad de interpretar el texto como HTML.
Los desarrolladores no deben utilizar codificaciones CESU-8, UTF-7, BOCU-1 y SCSU la posibilidad de ataques de secuencias de comandos entre sitios con estas notaciones.
No se debe utilizar UTF-32 porque no todos los algoritmos de codificación HTML5 pueden diferenciarlo de UTF-16.

Ejemplo de uso del elemento <meta>para establecer la codificación de caracteres en UTF-8:

< meta  charset = "utf-8" >

Propiedades del elemento meta

La codificación de caracteres debe coincidir con la codificación con la que se sirve la página, para evitar distorsiones de caracteres o vulnerabilidades de seguridad.
El elemento <meta> que define la codificación de caracteres debe estar dentro del elemento y <head> dentro de los primeros 1024 bytes del documento HTML, porque algunos navegadores buscan un cierto rango de bytes antes de elegir automáticamente una codificación para el documento.
El elemento <meta> es parte del algoritmo de codificación de caracteres en la página, por lo que el encabezado HTTP con nombre Content-Type tiene prioridad sobre ese elemento.
Es muy recomendable definir la codificación de caracteres, ya que si la codificación de caracteres no está definida para la página, puede representar un riesgo para la seguridad.
El elemento <meta> con la propiedad charset es equivalente al siguiente elemento que se utilizó en HTML5: <meta http-equiv="Content-Type" content="text/html; charset="IANAcharset"> donde IANAcharset es el nombre de la codificación de tipos de letra que se acepta como propiedad charset. El formato antiguo todavía es compatible, pero no se recomienda su uso.

`content`

Esta propiedad contiene el valor correspondiente a la propiedad http-equiv o name, según el contexto de su uso.

`http-equiv`

Esta propiedad contiene el nombre de uno de los encabezados HTTP. Tenga en cuenta que el nombre de esta propiedad es una abreviatura de http-equiv. Esta propiedad define una instrucción que puede modificar el comportamiento del servidor o navegador. El valor de esta propiedad está contenido dentro de la propiedad content.

Estos son algunos de los valores que toma esta propiedad:

`"content-type"`

Esta instrucción define el tipo MIME del documento, seguido de la codificación de caracteres, que tiene la misma forma que el popular encabezado HTTP content-type, pero se define dentro de la página HTML.

Tenga en cuenta que es imposible utilizar valores distintos de los text/html documentos HTML, por lo que la forma correcta de la propiedad contentes poner la cadena text/html seguida de la codificación de caracteres que se declara en la forma ‎; charset=IANAcharset donde IANAcharsetes el nombre de la codificación de caracteres que el la propiedad acepta charset.

Cabe señalar que se recomienda no utilizar este valor sino utilizar la propiedad charsetcon el elemento <meta>.

`"refresh"`

Esta instrucción específica:

La cantidad de segundos que se esperará para que se recargue la página, si el valor de la propiedad content contiene sólo un número entero positivo.
Número de segundos para esperar hasta que se redirija a otra página, si la propiedad contiene content un número entero positivo seguido de una cadena de texto y ;url=luego el enlace URL correctamente.

Ejemplo de redireccionamiento de la página a un sitio bigcode.es después de tres segundos:

< meta  http-equiv = "refresh"  content = "3; url = http: //bigcode.es" >

`name`

Esta propiedad define el nombre de los metadatos en el documento y no se puede establecer si el elemento <meta> contiene un itemprop, http-equivo charset.

Los metadatos asociados con la propiedad name tienen un valor definido dentro de la propiedad content. A continuación, se muestran algunos valores que se pueden usar con la propiedad name:

application-name: Define el nombre de la aplicación que se ejecuta en la página web. Los navegadores pueden usar este valor para identificar la aplicación, y este valor es diferente de un elemento <title> que puede contener el nombre de la aplicación, pero puede incluir otra información como el nombre del documento o el estado de la aplicación.
author: Identifique al autor de este documento.
description: Contiene una breve explicación y un resumen preciso del contenido de la página; Varios navegadores, como Firefox y Opera, utilizan este valor como descripción predeterminada para las páginas de favoritos.
generator: Contiene el identificador del software que generó la página.
keywords: Contiene una lista de palabras clave relacionadas con el contenido de la página, separadas por una coma ,.

Ejemplo de uso del elemento <meta>para agregar palabras clave, una breve explicación del documento y el nombre del autor de la página:

< meta  name =  "keywords"  content =  "HTML, meta tag, metadata" >  
< meta  name =  "description"  content =  "Breve descripción del documento" > 
< meta  name =  "author"  content = "Jon Doe" >

Hay una lista de nameotros valores de propiedad de uso común, pero no son estándar:

creator: Identifica el nombre del creador del documento, como la organización o instituto responsable de la página; Si hay más de un valor, se puede utilizar más de una etiqueta <meta>.
publisher: Define el nombre del editor del documento.
robots: Define el comportamiento de las arañas de los motores de búsqueda (robots) que deben seguir al interactuar con la página, y sus valores asociados están separados por comas:

Valor	Descripción	Usado desde
`index`	Permitir que las arañas indexen la página (valor predeterminado).	todas
`noindex`	Pídale a las arañas que no indexen la página.	todas
`follow`	Permitir que las arañas sigan los enlaces de la página (valor predeterminado).	todas
`none`	Este valor es equivalente a usar `noindex, nofollow`.	Google
`noodp`	Evite que la descripción del proyecto de Open Directory se utilice como descripción de página en los resultados del motor de búsqueda.	Google, Yahoo, Bing
`noarchive`	Pedir a los motores de búsqueda que no almacenen en caché el contenido de la página.	Google, Yahoo, Bing
`nosnippet`	Evite que los motores de búsqueda muestren cualquier descripción en la página de resultados de búsqueda.	Google, Bing
`noimageindex`	Solicite que esta página no se muestre como la página de referencia para una página indexada.	Google
`nocache`	Un valor equivalente `noarchive`.	Bing

Descripción

Las reglas anteriores no son obligatorias, pero algunas arañas que cooperan las siguen, así que no espere que las arañas maliciosas que recopilan direcciones de correo electrónico las eviten.
Las arañas necesitarán acceder a la página para leer las reglas anteriores, por lo que para ahorrar el consumo de mensajes de red, se recomienda utilizar un archivo robots.txt.
Si desea eliminar una página, use el valor noindex, pero se eliminará después de que la araña la visite nuevamente, así que asegúrese de que el archivo robots.txt no impida que las arañas de búsqueda vuelvan a visitarla. Vale la pena señalar que algunos motores de búsqueda tienen herramientas de desarrollo que permiten eliminar la página de forma rápida y sencilla.
Algunos valores son intercambiables como index, noindex, follow y nofollow, si ambos valores se utilizan juntos el comportamiento de las arañas será indefinido y varían entre ellos.
Algunas arañas como Google, Yahoo y Bing admiten algunos valores en el encabezado HTTP con nombre X-Robot-Tags. Esto permite que las reglas anteriores se utilicen con otros tipos de archivos, como imágenes.

googlebot: Es el valor equivalente, robots pero solo Googlebot, que es la araña de búsqueda de Google, seguirá sus instrucciones.
slurp: Es un valor equivalente, robots pero solo Slurp, que es la araña de búsqueda de Yahoo, seguirá sus instrucciones.
viewport: Eso da una idea del tamaño inicial de la ventana gráfica y solo lo utilizan los teléfonos móviles. Valores utilizables en un elemento <meta name="viewport"‎>

Valor	Subvalores	Descripción
`width`	Entero positivo o cadena `device-width`	Especifique el ancho de la ventana gráfica en píxeles o permita que la ventana gráfica se ajuste al ancho de la pantalla del dispositivo.
`height`	Entero positivo o cadena `device-height`	Especifica la altura de la ventana gráfica. Ningún navegador utiliza este valor.
`initial-scale`	Un número positivo entre `0.0` y `10.0`	Define la relación entre el ancho del dispositivo (es decir, `device-width` en la posición vertical del dispositivo o `device-height` en la posición horizontal del dispositivo) y las dimensiones de la ventana gráfica.
`maximum-scale`	Un número positivo entre `0.0` y `10.0`	Defina la mayor aproximación, este valor debe ser mayor o igual, de lo `minimum-scale` contrario su efecto es indefinido. Este valor se puede ignorar en la configuración del navegador, y iOS 10 + lo ignora de forma predeterminada.
`user-scalable`	`yes` o `no`	Si se establece en `no`, el usuario no podrá acercar o alejar la página. El valor predeterminado es `yes`, este valor se puede ignorar desde la configuración del navegador, y iOS 10 + lo ignora de forma predeterminada.

Resumen

Es cierto que los valores anteriores no siguen un estándar específico, pero la mayoría de los navegadores móviles los respetan.
Los valores predeterminados varían entre dispositivos y navegadores.

Ejemplo de configuración de las dimensiones de la ventana gráfica en teléfonos móviles:

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

Dependiendo de las propiedades utilizadas en el elemento <meta>, los metadatos pueden caer en una de las siguientes categorías:

Si se establece la propiedad name, los metadatos se aplicarán a toda la página.
Si la función está configurada, http-equiv proporcionará información que generalmente proporciona el servidor.
Si se establece la propiedad, charset determina qué codificación de caracteres se utiliza en la página.
Si se establece la propiedad, itemprop se definirán los metadatos del usuario.