Estamos dominando un mercado con nuestro producto/servicio y nos disponemos a internacionalizarlo. El proceso parece sencillo pero debemos prestar atención a una serie de detalles si queremos hacerlo bien y conseguir los resultados deseados. En esta guía verás como implementar las Etiquetas Hreflang para tu estrategia de SEO Internacional.

¿Qué son las etiquetas Hreflang?

Las etiquetas hreflang son unas porciones de código que se muestran en el encabezado de las páginas cuya utilidad es la de indicarle a Google las versiones en otros idiomas de nuestras páginas.

Parece una obviedad pero hay muchos casos en los cuales las empresas traducen su contenido pero entonces se olvidan de añadir las etiquetas hreflang y entonces se suelen producir dos casos:

  • En el mejor de los casos, Google no rastrea el contenido.
  • En el peor de los casos, Google lo rastrea y al ver que se trata de contenido duplicado, no tan solo no lo muestra en los resultados de búsqueda sino que además, disminuye la «autoridad» global de la web.

En palabras de Google: 

«Las versiones localizadas de una página solo se consideran duplicadas si su contenido principal no está traducido.»

Maneras de realizar la implementación

Tal y cómo informa Google, en sus guías oficiales, en la actualidad existen tres maneras de realizar la implementación de etiquetas que indiquen que una página tiene versiones alternativas en otros idiomas:

Etiquetas HTML (Recomendado)

Una de las maneras más comunes de indicar que una página tiene equivalencias en otros idiomas, son las etiquetas HTML en el encabezado:

<link rel=»alternate» hreflang=»código_idioma» href=»url_de_la_página» />

Imaginemos que tenemos una web principal (en inglés), la cual está también disponible en otros países e idiomas (UK, USA y Alemania). En este caso, deberíamos de añadir el siguiente código en el encabezado de cada página:

<head>
<title>Widgets, Inc</title>
<link rel=»alternate» hreflang=»en-gb» href=»http://en-gb.example.com/page.html» />
<link rel=»alternate» hreflang=»en-us» href=»http://en-us.example.com/page.html» />
<link rel=»alternate» hreflang=»en» href=»http://en.example.com/page.html» />
<link rel=»alternate» hreflang=»de» href=»http://de.example.com/page.html» />
<link rel=»alternate» hreflang=»x-default» href=»http://www.example.com/» />
</head>

De esta manera, le indicaremos a los motores de búsqueda que las otras páginas no son duplicadas sino que son las traducciones de la web en otros idiomas.

Encabezados HTTP

Si lo que queremos hacer es indicar las versiones en otros idiomas de documentos y otros archivos que no sean HTML, tenemos a nuestra disposición los encabezados HTTP:

En el siguiente caso, se trata de un documento PDF que está disponible en inglés, en alemán para los usuarios de Suiza y la otra para todos los usuarios que hablen alemán.

Link:

<http://example.com/file.pdf>; rel=»alternate»; hreflang=»en»,
<http://de-ch.example.com/file.pdf>; rel=»alternate»; hreflang=»de-ch»,
<http://de.example.com/file.pdf>; rel=»alternate»; hreflang=»de»

Sitemap

Otra de las maneras que muchas webs han utilizado con el paso del tiempo es la de indicar las versiones internacionales a través del Sitemap. Cabe destacar que se trata de un método bastante más complejo a nivel técnico y más susceptible a errores ya que es muy fácil omitir algunas de las páginas.

Ejemplo de sitemap con una página:

<?xml version=»1.0″ encoding=»UTF-8″?>
<urlset xmlns=»http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:xhtml=»http://www.w3.org/1999/xhtml»>
<url>
<loc>http://www.example.com/english/page.html</loc>
<xhtml:link
rel=»alternate»
hreflang=»de»
href=»http://www.example.com/deutsch/page.html»/>
<xhtml:link
rel=»alternate»
hreflang=»de-ch»
href=»http://www.example.com/schweiz-deutsch/page.html»/>
<xhtml:link
rel=»alternate»
hreflang=»en»
href=»http://www.example.com/english/page.html»/>
</url>

HERRAMIENTA: Esta extensión para Chrome, nos permite validar las implementaciones. Aún así, no olvides comprobarlas manualmente en el código para verificarlas al 100%.

Href Lang Tag Checker

Mediante esta extensión, podremos comprobar nuestras implementaciones de etiquetas hreflang.

Códigos de Idioma y Región

Una vez visto el tema del marcado de datos internacionales, vamos con uno de los temas más interesante en el proceso de SEO Internacional. Se trata de los códigos de idioma y región. Hasta hace poco, no había abundante información sobre el tema y no era nada fácil evitar los errores en el marcado de idiomas y países.

Cada país y cada idioma son un mundo. Todos ellos tienen sus diferencias, peculiaridades, culturas, valores… y es por ello que muchos negocios se adaptan a ello para intentar proporcionar el contenido de la forma más nativa posible. Un ejemplo claro se produce entre el Español que se habla en España y el que se habla en México. Pese a que compartimos muchas expresiones, hay otras que no se parecen nada y al usuario de cada país le gusta encontrarse con la versión que le sea más familiar.

Google pone a nuestra disposición la posibilidad de añadir los códigos de idioma y región en las etiquetas hreflang.

Por ejemplo:

  • de: este contenido iría destinado a los usuarios que hablen alemán independientemente de su región.
  • es-MX: este contenido irá destinado a los usuarios que hablen español y además sean de México.
  • en-GB: este contenido irá destinado a los usuarios que hablen inglés en el Reino Unido.
href lang SEO

Ejemplo de etiquetas hreflang en Chess.com (uno de nuestros clientes más grandes) con algunos de los idiomas disponibles (+40 en total). 

¿Qué sucede si no marcamos todos los países en los cuales se puede hablar un idioma?

Como es lógico, esto es inviable de añadir. Es por eso que disponemos de la etiqueta: hreflang=»x-default», la cual nos permitirá servirle esta versión al usuario cuando su configuración del navegador no coincide con ninguno de los idiomas ni regiones que hemos indicado.

<link rel=»alternate» href=»http://example.com/» hreflang=»x-default» />

Errores Comunes

¿A qué suena fácil todo lo anterior? El único detalle importante es que Google es bastante minucioso con las implementaciones. Si nos equivocamos en una letra o nos dejamos un enlace, nos devolverá un error y no admitirá nuestro marcado. A continuación, puedes ver algunos de los errores más comunes que se suelen producir (y algunos de experiencia propia):

Olvidarse de los enlaces recíprocos

Si nuestra página A tiene un enlace hreflang hacia la página B pero esta última no le devuelve otro enlace hreflang a la página A, Google no creará la asociación y por lo tanto seguirá detectando esas páginas como duplicadas.

Cambiar los códigos de región o país

Mientras que en las urls, tenemos flexibilidad para utilizar los códigos que queramos, por ejemplo utilizar uk, gb o cualquier otra variación para Reino Unido, lo mismo no sucede con las etiquetas hreflang. Si utilizamos uk en lugar de la correcta en-GB, Google no podrá interpretar la información y por lo tanto no dará cómo válida la implementación.

En este caso, para asegurarnos de utilizar siempre formatos correctos, debemos seguir los formatos:

  • ISO 639-1
  • ISO 3166-1 Alpha 2 (opcional)

Analizar las etiquetas hreflang de una web

Hasta hace pocas semanas, Google Search Console mostraba un informe detallado de las validaciones y errores de nuestra implementación hreflang. Sin embargo, con el lanzamiento de la nueva interfaz, esta funcionalidad está quedando obsoleta y muy pronto ya no estará disponible.

En este caso, pese a que existen decenas de herramientas SEO en la red para trabajar este tema, desde nuestro punto de vista, la herramienta #1 que hace que este proceso sea rápido y fácil de analizar sin duda es Screaming Frog. No tan solo nos indica todas las urls que ha detectado con marcado sino que las clasifica si tienen errores y nos indica exactamente qué tipo de error tiene para que lo podamos validar.

Hreflang Screaming Frog

Vista del análisis Hreflang que realiza Screaming Frog con toda la información en formato esquema.

Casos de Éxito

Pese a que la mayor parte de las acciones SEO requieren cierto tiempo hasta mostrar los primeros resultados, las etiquetas hreflang sean seguramente uno de esos quick-wins que debemos implementar lo antes posible en aquellos proyectos en los que sea posible. Uno de los casos de éxito SEO más claros de esto fue ChessKid.com, uno de nuestros clientes, el cual tenía la web traducida a casi 20 idiomas. ¿El problema? No tenía los hreflang implementados y además escondía el cambio de idioma mediante login, con lo que las versiones internacionales eran totalmente inaccesibles.

¿Qué hicimos?

  • Crear un desplegable con los idiomas en el footer.
  • Añadir las etiquetas hreflang a todas las páginas que lo requerían.

¿Los resultados?

Ahrefs SEO

Resultados de las implementaciones de las etiquetas Hreflang en ChessKid.com

¿Tienes dudas? ¿Quieres que te ayudemos a implementar las etiquetas hreflang en tu negocio? ¡Te ayudamos encantados!

Referencias