¿Qué son las metaetiquetas?.

Metaetiquetas HTML

Las metaetiquetas HTML describen el contenido de una página web y son fundamentales para comunicar información concreta a los rastreadores de los buscadores. Son la base de la optimización SEO on-page y se encuentran en la sección <head> del sitio. Google puede usar esa información para crear fragmentos enriquecidos u ordenar los resultados de búsqueda.

Sintaxis de los metadatos

La sintaxis de los metadatos se basa en dos atributos: «name», que identifica el tipo de información de la etiqueta, y «content», que describe su contenido real.

<head>
  <meta name="tipo_de_informacion" content="contenido_real">
</head>

Además de estos dos, se puede añadir un tercer atributo, «http-equiv», que indica al navegador que son valores de cabecera HTTP.

Entre las características de los metadatos destacamos tres:

• Unicidad: cada página del sitio debería tener metaetiquetas únicas que reflejen con precisión su contenido. Esto es especialmente importante para la etiqueta title y la meta description, que son los puntos de contacto entre el sitio y el visitante directamente en la SERP.
• La longitud es otro factor clave que siempre hay que tener en cuenta para evitar cortes en la SERP. Lo que cuenta no es el número de caracteres sino los píxeles: basta pensar que una «M» mayúscula ocupa más que una «i» minúscula, y esto pesa aún más con la indexación mobile first. Para resolverlo, usa la pestaña «SERP Snippet» de Screaming Frog, que muestra en tiempo real la vista previa de tus titles y descriptions en escritorio y móvil.
• Pertinencia: las metaetiquetas deben ser coherentes con el contenido y no un intento de sobreoptimización SEO que, con los últimos algoritmos de Google, podría acabar en penalizaciones.

Las metaetiquetas

• Etiqueta title: define el título de la página y la usan los buscadores en los fragmentos de la SERP. Contribuye al ranking y debe optimizarse en longitud y pertinencia; de lo contrario, el algoritmo de Google puede reescribirla o cortarla. Como es el primer punto de contacto con el visitante, debe explicar con claridad el contenido de la página para aumentar el CTR.

Una buena práctica para el title es incluir la palabra clave principal, mejor al principio. Eso no significa llenar el título de palabras clave, sino escribir un título conciso y coherente con el verdadero objetivo de todo SEO: ¡la intención de búsqueda del documento!

• Meta description: un resumen del contenido de la página. En términos de marketing tradicional, son los primeros «10 segundos» en los que cada sitio debe presentarse y causar buena impresión. A diferencia del title, no contribuye al ranking, pero ayuda a aumentar el CTR.
• Metaetiquetas robots: indicaciones sobre cómo deben comportarse Google y los demás buscadores al analizar el sitio. Las más usadas son:
  • noindex: pide al bot que no muestre el elemento rastreado en sus resultados.
  • nofollow: evita que el buscador siga los enlaces de la página. También es útil para no transmitir link juice a la página enlazada. Para bloquear un enlace concreto, no uses este atributo en el head sino directamente en el código del enlace.
  • none: el cierre máximo para el bot del buscador, equivale a noindex, nofollow.
  • noarchive: impide que Google muestre un enlace «en caché» en la SERP.
  • noimageindex: impide la indexación de las imágenes en la SERP.

Las metaetiquetas robots se analizan muy fácilmente con Screaming Frog en la pestaña 1Directives.

• Hreflang: atributo usado para la internacionalización de un proyecto; presenta al buscador las versiones de idioma, evita el contenido duplicado y aumenta las posibilidades de aparecer en las SERP geolocalizadas.
• Canonical: un atributo muy valioso que declara qué contenido es el principal y cuál el secundario (o duplicado). No lo confundas con hreflang: se parecen, pero tienen objetivos distintos. Se recomienda añadir un canonical autorreferenciado en todas las páginas (salvo que estén canonicalizadas).
• Etiqueta meta keywords: obsoleta
• Etiqueta viewport: en un mundo cada vez más móvil, este atributo controla cómo se muestra el contenido en los dispositivos móviles. Con la indexación mobile first es crucial para el ranking y para una buena experiencia de usuario.

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

La parte width=device-width ajusta el ancho de la página al ancho de la pantalla del dispositivo (que varía según el dispositivo).

La parte initial-scale=1.0 fija el nivel de zoom inicial cuando el navegador carga la página por primera vez.

• Etiquetas Open Graph: definen cómo se mostrará el contenido en las redes sociales al compartirlo.
• Meta charset: una etiqueta muy importante para codificar los caracteres de una página, para no empeorar la experiencia del visitante ni aumentar la tasa de rebote. Hay decenas de codificaciones, pero las más comunes son:
  • UTF‑8 – codificación de caracteres Unicode;
  • ISO-8859–1 — codificación de caracteres del alfabeto latino.

<meta charset=UTF-8">

• Redirección meta refresh: indica al navegador que redirija a otra página tras un intervalo de tiempo. Empeora la experiencia de navegación, así que se recomienda una redirección 301 (permanente) o 302 (temporal).

<meta http-equiv="refresh" content="3;url="https://example.com/">

Como desaconsejo las redirecciones meta refresh, puedes encontrarlas fácilmente con los filtros de la pestaña Response Codes de SEO Spider.