
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
ySCSU
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 nombreContent-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">
dondeIANAcharset
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 content
es poner la cadena text/html
seguida de la codificación de caracteres que se declara en la forma ; charset=IANAcharset
donde IANAcharset
es 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 charset
con 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-equiv
o 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 name
otros 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 . | |
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. | |
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 archivorobots.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
ynofollow
, 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.
- Elemento summary en HTML
- Elemento details en HTML
- Elemento meter en HTML
- Elemento legend en HTML
- Elemento textarea en HTML
- Elemento select en HTML
- Elemento progress en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento track en HTML
- Elemento label en HTML
- Elemento input en HTML
- Elemento form en HTML
- Elemento fieldset en HTML
- Elemento datalist en HTML
- Elemento button en HTML
- Elemento tr en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tbody en HTML
- Elemento tfoot en HTML
- Elemento table en HTML
- Elemento td en HTML
- Elemento colgroup en HTML
- Elemento col en HTML
- Elemento caption en HTML
- Elemento del en HTML
- Elemento script en HTML
- Elemento noscript en HTML
- Elemento canvas en HTML
- Elemento picture en HTML
- Elemento ins en HTML
- Elemento video en HTML
- Elemento source en HTML
- Elemento param en HTML
- Elemento object en HTML
- Elemento embed en HTML
- Elemento map en HTML
- Elemento img en HTML
- Elemento audio en HTML
- Elemento area en HTML