Las etiquetas meta son una parte del código HTML de una página web que dan información extra, muchas veces sobre el contexto a diferentes plataformas y ayuda a que estas entiendan qué información ofrecer a sus visitantes.
Las más conocidas, y que han pasado a tener etiqueta propia, son <title> y <description>, y definen el título principal de la página y una descripción de lo que hay en esta. Estos datos no tienen influencia en el contenido de la página pero permiten que los sistemas automáticos (buscadores, redes sociales, agregadores de notícias…) puedan ofrecer unos datos básicos sobre dónde va el enlace que ofrecen. Además la información contenida en estas etiquetas tiene una importancia muy considerable en el posicionamiento orgánico de las páginas (SEO) y por ello debe estar bastante estudiado qué términos usar y el orden en el que aparecen.
Debemos tener en cuenta que esta información es la que casi siempre se muestra cuando realizamos una búsqueda en internet y se nos muestran los resultados por lo que tiene mucha importancia establecer un texto atractivo y que incite a hacer clic en él.
A partir de aquí encontramos ya todas las etiquetas <meta> que usualmente contienen los atributos «name» y «content» los cuales informarán del nombre de la etiqueta y su contenido respectivamente.
Contenidos
Metaetiqueta keywords
Antiguamente esta etiqueta estaba muy en uso y era materia de estudio detallado pero actualmente ha quedado obsoleta. Contenía palabras clave en la página para que los buscadores las tuvieran en cuenta.
Metaetiqueta robots
Esta metaetiqueta sugerirá a los bots rastradores de páginas cómo se deberán comportar cuando accedan a esta. Los bots rastreadores son los sistemas que usan los buscadores de internet para localizar e indexar las páginas, dándole la relevancia que creen conveniente según las búsquedas de los usuarios.
Entonces podemos indicar que indexe la página, estableciendo el valor de content como «index«. Este además será el valor por defecto si no se indica esta etiqueta:
<meta name="robots" content="index"/>También que no la indexe, cosa útil cuando no es información relevante (un texto legal, una página de login…) o con información que no queremos que sea fácilmente encontrable, lo cuál indicaremos con un «content» con valor «noindex«
<meta name="robots" content="noindex"/>También permite indicar si deseamos que se sigan los enlaces que pongamos en la página para que el buscador los encuentre y los pueda ofrecer como resultados o no queremos que actúe así, estableciendo los valores «follow» o «nofollow«. Se pueden combinar los valores si lo deseamos:
<meta name="robots" content="nofollow"/>
<meta name="robots" content="index,nofollow" />
<meta name="robots" content="index,follow" />
<meta name="robots" content="noindex,nofollow" />Se debe remarcar que estas etiquetas «robots» son recomendaciones para los buscadores pero no ocultan el contenido de la página y seguirá siendo localizable, navegable e indexable si el bot visitante no hace caso de la recomendación.
También se debe tener en cuenta que el uso del fichero robots.txt te puede facilitar mucho estas tareas de gestión de indexación.
Estas etiquetas son totalmente opcionales y dan información sobre la autoría de la página.
<meta name="author" content="Nombre del autor" />
<meta name="copyright" content="Propietario del copyright" />Metaetiqueta charset
Es muy recomendable indicar esta etiqueta para que los navegadores sepan cómo interpretar el contenido, proporcionando la codificación de caracteres adecuada y así evitar que aparezcan caracteres extraños entre el texto.
<meta charset="utf-8"/>Aquí observamos que la sintaxis de la etiqueta ya cambia, incluyendo un único atributo «charset» cuyo valor en el ejemplo es la codificación de caracteres «utf-8», la más común para la escritura con símbolos latinos.
Metaetiqueta viewport
Grosso modo, la etiqueta viewport define la dimensión de la pantalla que usará el motor del navegador para mostrar la información. En la mayoría de las ocasiones estará tal y como está en este ejemplo:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Esta etiqueta es la que permitirá que una página sea responsive y lo primero que debemos mirar si vemos que una página no se adapta.
Metaetiqueta canonical
Las etiquetas canonical son muy importantes en SEO para indicar equivalencias de páginas internas similares a la actual para que no cuenten como contenidos duplicados.
El funcionamiento no es simple y daría para un artículo o dos solo para este tema pero intentaré hacer un resumen breve con lo más básico al respecto.
Digamos que con esta etiqueta se intenta informar a los buscadores cuál es el contenido principal de una página. Tener el contenido idéntico o similar en dos URLs diferentes puede darse en casos como al disponer de una web multiidioma o una URL con parámetros que no afecten de manera relevante al contenido de la página.
Como ejemplo, podemos tener https://dominio.com/contenido y https://dominio.com/contenido?session_id=XXXXXXX. Ambas URLs son diferentes pero el contenido es el mismo. Es por ello que es muy adecuado indicar cuál es el contenido «bueno», el principal, y lo podemos indicar mediante la siguiente etiqueta en todas las páginas:
<link rel="canonical" href="https://dominio.com/contenido" />
Esta etiqueta, combinada con rel=»alternate», también nos servirá para el caso de disponer una web multiidioma.
Metaetiqueta alternate
Como he indicidado en el anterior punto, el rel=»canonical» podría establecer la página principal con el añadido de que una web puede estar en varios idiomas con el mismo contenido traducido. En este caso es muy recomendable además usar las etiquetas rel=»alernate»:
<link rel="alternate" hreflang="es_ES" href="url_pagina_traduccida" />
Estas etiquetas informan de las URLs de las traducciones del mismo contenido de la página, indicando en el atributo hreflang el código ISO del idioma de la traducción y en el href la URL en la que se encuentra. Pueden haber tantas etiquetas como idiomas tenga la web.
Metaetiquetas de caché
Para aumentar la rapidez de respuesta de las páginas, algunos componentes pueden estar almacenados en el propio navegador. Si anteriormente se ha visitado la página y se han cargado las imágenes, ¿Para qué volver a descargarlas? Se puede guardar una copia un tiempo por si se vuelve a visitar y mostrarlas directamente, mejorando mucho tiempos de carga. Con esta filosofia es con la que trabajan las memorias caché.
Entonces también podemos indicar a traves de etiquetas si por algún motivo no queremos que los contenidos se guarden en caché para esta página. Lo haríamos mediante la siguiente línea:
<meta http-equiv="cache-control" content="no-cache"/>Puede ser interesante en casos de que cierto contenido, como pueden ser imágenes, vaya cambiando pero no lo haga el nombre de estas y recupere automáticamente contenido antiguo almacenado en el navegador.
También es posible indicar por cuánto tiempo queremos que la información se almacene mediante el atributo http-equiv=»expires». Se puede indicar el tiempo en segundos:
<meta http-equiv="expires" content="segundos que perdurará la caché"/>O en formato fecha y hora:
<meta http-equiv="expires" content="Thu, 31 Dec 2020 00:00:00 GMT"/>Metaetiqueta Refresh
Por último, también podemos indicar que la página se recargue sola o se desvíe a otra URL al cabo de un tiempo determinado. No es un método muy recomendado, a veces molesto, pero puede tener cierta utilidad para la recarga de contenidos dinámicos en tiempo real. La estructura sería la siguiente:
<meta http-equiv="refresh" content="segundos; url=url_destino"/>Resultando una línea como esta, que esperará 10 segundos y redirigirá a https://dominio.com/contenido:
<meta http-equiv="refresh" content="10; url=https://dominio.com/contenido"/>Metaetiquetas Open Graph
Las etiquetas Open Graph están pensadas para compartir la información de la página en otras plataformas. Al compartir una página en entornos como Facebook, LinkedIn, Google My Business,… estos leen la información incluida en estas etiquetas para incluirla en los posts.
Como la especificación de estas etiquetas está bien detallada en https://ogp.me/ y tiene múltiples variantes, aquí me limitaré a recalcar la importancia de incluir esta información en tu página web para hacerla usable y entendible por todos los sistemas que permiten compartir contenido, además de dotar a este de más contexto.
También me gustaría señalar que Twitter tiene su propio esquema Twitter Cards, muy similar, pero que también se deberá implementar para que esta plataforma pueda entender la información que se provee en la página.
——
Estas son las etiquetas de uso más común, y no hay que confundirlas con los metadatos, que contendrán información estructurada sobre el contenido de la página y a los que dedicaré otro artículo ya que es un tema bastante complejo e importante para el buen uso de la información.
