La etiqueta HTML <meta>
Metadatos e información del documento HTML
Quizás, una de las etiquetas HTML más populares que se colocan en el <head> de un documento HTML es la etiqueta <meta>. Se trata de una etiqueta que nos permite indicar metadatos o información interna del documento HTML. Estos datos no se suelen mostrar visualmente en la página, sino que el navegador los lee para conocer información relevante y utilizarlos en situaciones específicas.
La etiqueta de metadatos
Por norma general, la etiqueta <meta> tiene los atributos name y content. Dependiendo del valor que le demos a name, tendremos que indicar un valor content correspondiente. Sin embargo, también existen algunas excepciones donde no hay que añadir estos atributos, sino otros diferentes.
Tipo de codificación
La etiqueta <meta> más popular probablemente sea <meta charset="utf-8">: una etiqueta que permite indicar el tipo de codificación de nuestro documento HTML. ¿Qué es el tipo de codificación? Pues a grandes rasgos, la forma en la que se muestran los carácteres de texto de una página.
Si en alguna ocasión has visto textos como código o también es porque probablemente tenga una codificación incorrecta o no se le haya establecido esta etiqueta:
<head>
<title>Título del documento</title>
<meta charset="utf-8">
</head>En el valor del atributo charset realmente se puede indicar cualquier tipo de codificación, pero la más utilizada y recomendada es utf-8, la cuál permite tener un buen sistema de codificación, muy extendido y que soporta una gran variedad de carácteres, suficiente para la mayoría de idiomas y textos.
Datos del documento
No obstante, existen otras etiquetas <meta> donde se utilizan los atributos name y content para indicar metadatos en el documento. Veamos algunos de los más conocidos que sirven para indicar datos importantes de una página:
| Valor name | Valor content | Descripción |
|---|---|---|
description |
texto | Indica la descripción de la página que aparece en buscadores. |
keywords |
palabras clave | Lista de palabras clave separadas por comas. Google no la tiene en cuenta. |
author |
nombre | Indica el nombre del autor de la página. |
application-name |
nombre | Indica el nombre de la aplicación web. Debería usarse sólo si es una webapp. |
generator |
software | Indica el software utilizado para crear la página web. |
La etiqueta meta description sirve para indicar unas breves frases donde se explique el contenido de la página actual. Entre otras cosas, sirve para las descripciones que salen bajo los enlaces de los resultados de búsqueda en Google, cuando la página es indexada. En general, suele ser un texto entre 50-160 carácteres.
Por su parte, la etiqueta meta keywords solicita una lista de palabras clave separadas por comas que tengan relación con el sitio web. Actualmente, Google no las considera (se abusaba de ellas para hacer spam), sin embargo, otros buscadores o sistemas sí que lo hacen.
Veamos ahora un ejemplo con dichas etiquetas aplicadas:
<head>
<meta name="description" content="En esta página encontrarás documentación sobre HTML.">
<meta name="keywords" content="html, lenguaje, lenguaje de marcado, código html, etiqueta">
<meta name="author" content="Manz">
<meta name="application-name" content="ManzDev Skynet">
<meta name="generator" content="VSCode">
</head>Otras etiquetas meta como author, application-name o generator se utilizan para aportar información que podría ser de utilidad, pero que no se utiliza en ningún sitio específico.
Tema de color del navegador
En los navegadores que lo soporten, una etiqueta <meta> muy curiosa es la que proporciona la posibilidad de establecer un tema de color para personalizar los colores de la interfaz del navegador que estemos utilizando. Para ello, tenemos que utilizar el atributo name="theme-color" y asociarle un color en hexadecimal:
| Valor name | Valor content | Descripción |
|---|---|---|
theme-color |
color | Color en hexadecimal de la barra de navegación. |
Al establecer este atributo en una etiqueta <meta>, el navegador coloreará la barra de direcciones con el color hexadecimal indicado en el atributo content de nuestro fragmento de código:
<head>
<meta name="theme-color" content="#1e7bbf">
</head>Así pues, con esto conseguiremos que por ejemplo, un dispositivo móvil con Android y Google Chrome, muestre la barra de navegación de la siguiente forma:
Sin embargo, actualmente, el soporte para esta característica es muy irregular, y muchos navegadores aún no lo soportan. Por ejemplo, en Chrome, sólo funciona en dispositivos móviles donde el sistema tenga el modo claro activado.
Metadatos SEO para Google
Algunas de las etiquetas <meta> son bien conocidas como etiquetas que pueden mejorar el SEO (posicionamiento) de una página en buscadores como Google. Al margen de etiquetas <meta> como description o <title>, que son las principales en temas de posicionamiento, Google es capaz de leer otros metadatos que le indicarán como realizar ciertas acciones:
| Valor name | Valor content | Descripción |
|---|---|---|
google |
nositelinkssearchbox |
Indica a Google que no muestre el minibuscador en los sitelinks. |
google |
notranslate |
Indica a Google que no debe traducir la página. |
robots |
parámetros | Indica al robot de un buscador si debe indexar o no la página. |
Un pequeño ejemplo de esta etiqueta con los citados atributos:
<head>
<meta name="google" content="nositelinkssearchbox">
<meta name="google" content="notranslate">
<meta name="robots" content="index, nofollow">
</head>Observa que la etiqueta <meta name="robots"> puede tener varios parámetros (separados por comas) para indicarle a Google diferentes detalles. Veamos que valores podemos establecer:
| Parámetros | Significado |
|---|---|
index |
Sugiere a Google que se quiere indexar el contenido de la página en el buscador. |
noindex |
Indica a Google que no debe indexar el contenido de la página en el buscador. |
follow |
Sugiere a Google que siga los enlaces que encuentre en la página. |
nofollow |
Indica a Google que no debe seguir los enlaces que encuentre en la página. |
nosnippet |
Indica a Google que no muestre fragmentos (descripción, etc...). |
noodp |
Indica a Google que no use la descripción alternativa de DMOZ. Obsoleto actualmente. |
noarchive |
Indica a Google que no almacene una versión en caché de la página. |
unavailable_after fecha |
Establece una fecha de caducidad para que no se rastree más la página. |
noimageindex |
Indica a Google que no indexe la página en resultados de Google Imágenes. |
none |
Equivalente a indicar los parámetros noindex, nofollow. |
De esta lista, el desarrollador puede elegir los valores correspondientes que más le interesen e indicarlos mediante la etiqueta <meta name="robots">. Mucho cuidado con no indicar valores que tengan significados opuestos.
Viewport del navegador
Otro metadato muy utilizado hoy en día es el que se puede indicar con la etiqueta <meta name="viewport">. Para entenderlo, hay que tener muy claro primero que significa exactamente viewport: la región visible del navegador, esto es, la parte que se ve a simple vista de la página en nuestro navegador.
| Valor name | Valor content | Descripción |
|---|---|---|
viewport |
parámetros | Comportamiento de la región visible del navegador. Ver Responsive. |
Y es que esta etiqueta permite establecer como se va a comportar el responsive en nuestra página. Muchas veces te habrás encontrado con páginas que en móvil simplemente aparecen igual que en escritorio y simplemente permiten que el usuario haga zoom para verlo mejor.
Con esta etiqueta, podemos evitar ese comportamiento y establecer una escala mucho más grande, para luego con CSS aplicar una configuración diferente para dispositivos móviles, donde sea más cómoda su visualización e interacción.
Por ejemplo, veamos un fragmento de código típico que suele utilizarse con esta etiqueta. Observa que todos los parámetro se incluyen en el atributo content, separándose con comas y estableciendo sus valores con =:
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>Así pues, la etiqueta <meta name="viewport"> nos permite indicar ciertos parámetros o comportamientos que queremos aplicar a dicha región visible del navegador, generalmente relacionados con el responsive. Los parámetros que podemos utilizar son los siguientes:
| Parámetro | Valor por defecto | Descripción |
|---|---|---|
width |
device-width |
Establece el tamaño del viewport. Permite valores numéricos. |
height |
device-height |
Idem al anterior, pero respecto al alto. Permite valores numéricos. |
initial-scale |
1 |
Establece la escala inicial que tendrá el dispositivo. Valores entre 0.1 y 10. |
minimum-scale |
0.1 |
Idem al anterior, pero estableciendo la escala mínima que tendrá el dispositivo. |
maximum-scale |
10 |
Idem al anterior, pero estableciendo la escala máxima que tendrá el dispositivo. |
user-scalable |
1 |
Mediante 1 o yes se permite que el usuario haga zoom. Con 0 o no, se impide. |
interactive-widget |
resizes-visual |
Comportamiento de widgets de UI como el teclado virtual. Otros valores posibles: resizes-content o overlays-content. |
Habitualmente, los valores indicados suelen ser width y initial-scale, sin embargo, el desarrollador puede especificar los que considere necesarios.
Metadatos simulados de servidor
Existe una serie de etiquetas de metadatos especiales que indican a los robots del buscador o al navegador, que deben modificar las cabeceras HTTP para realizar acciones que suelen hacerse habitualmente desde el lado del servidor. Estas operaciones, en la mayoría de los casos, es mejor hacerlas directamente desde el servidor, sin embargo, proporcionan una alternativa en el caso que no sea posible.
Para diferenciarlas, en lugar de utilizar el atributo name, se utiliza el atributo http-equiv. Sin embargo, recuerda que estas etiquetas pueden ser ignoradas por algunos navegadores o robots de búsqueda, o incluso ser contraproducentes o afectar negativamente al rendimiento. Muchas de ellas existen sólo por motivos históricos.
Redirección Javascript
La etiqueta <meta http-equiv="refresh"> nos permite establecer redirecciones desde el lado del cliente. Hay que tener mucho cuidado, ya que las redirecciones que queremos hacer por motivos SEO o similares, deben hacerse desde servidor y establecer un código de error concreto, como 301 o 302. Además, desde cliente la web se carga y luego hace redirección, al contrario que en servidor, donde no se carga, sino que hace primero la redirección.
La sintaxis es la siguiente:
| Valor http-equiv | Valor content | Descripción |
|---|---|---|
refresh |
segundos;url=URL |
Redirige a la URL después del número de segundos indicado. |
Veamos esta etiqueta en acción por si no se entiende bien:
<head>
<meta http-equiv="refresh" content="30;url=https://manz.dev/">
</head>En este caso, estamos estableciendo que al cargarse la web y transcurrir 30 segundos, el navegador debería realizar una redirección y moverse desde la página actual a la página https://manz.dev/.
Etiquetas de caché
Otros ejemplos clásicos de etiquetas <meta http-equiv> son las que tienen que ver con el caché de la página. Nuevamente, mencionar que estos detalles hoy en día suelen definirse en el lado del servidor, en lugar de mediante estas etiquetas. Algunos ejemplos de los atributos que se pueden utilizar son los siguientes:
| Valor http-equiv | Valor content | Descripción |
|---|---|---|
expires |
fecha | Fecha a partir de la cuál se considera caché expirada. |
cache-control |
max-age=N |
Indica que la caché es válida hasta que transcurran N segundos. |
cache-control |
must-revalidate |
Usado con el anterior, permite guardar y evaluar si se puede usar caché. |
cache-control |
public |
Indica al navegador que puede ser guardada en una caché pública. |
cache-control |
private |
Indica al navegador que sólo puede guardarse en caché de navegador. |
cache-control |
no-cache |
Indica al navegador que evalue si utilizar el caché o no. |
cache-control |
no-store |
Indica al navegador que la página no debería guardarse en caché. |
Y finalmente, un ejemplo aplicando cada una de estas etiquetas:
<head>
<meta http-equiv="expires" content="Fri, 29 Apr 2016 12:56:00 GMT">
<meta http-equiv="cache-control" content="no-cache">
</head>Antiguamente también existían algunas etiquetas como <meta http-equiv="pragma"> que actualmente se encuentran marcadas como obsoletas y que deben evitar utilizarse.
