El marcador de idiomas hreflang sirve principalmente para indicar a Google cual es el enfoque adecuado para el contenido de la web en función de su idioma o región. Esto es especialmente útil cuando una misma web tiene contenido parecido entre las diferentes versiones en función de cada país. También es muy útil cuando tenemos solo diferentes idiomas y queremos indicar cual es la misma URL en función de cada idioma.
Formas de marcar los hreflang
Hay varias formas de marcar las etiquetas y la más usada es la de las cabeceras del código HTML dentro del <head>.
1- El marcado hreflang como elemento de enlace HTML en la cabecera <head> de una página web. Que tiene una estructura parecida a esta:
<link rel="alternate" hreflang="xx-YY" href="http://www.ejemplo...."/> <link rel="alternate" hreflang="xx-YY" href="http://www.ejemplo...."/>
Nota: Documentación de Google sobre los enlaces dentro del head
2- El marcado hreflang integrado dentro de un Sitemap.xml, con estructura del tipo:
<?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.ejemplo.com/en/</loc>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://www.ejemplo.com/es/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://www.ejemplo.com/de/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://www.ejemplo.com/en/"
/>
</url>
...
</urlset>Nota: Documentación de Google sobre la estructura dentro del mapa de sitio
3- Dentro de un elemento que no sea un HTML, como un pdf. Especialmente útil cuando tenemos varios archivos iguales en diferentes idiomas.
Link: <http://www.ejemplo.com/downloads/archivo-en.pdf/>; rel=”alternate”; hreflang=”en” Link: <http://www.ejemplo.de/downloads/archivo-de.pdf/>; rel=”alternate”; hreflang=”de” Link: <http://www.ejemplo.es/downloads/archivo-es.pdf/>; rel=”alternate”; hreflang=”es”
¿Cómo se implementa correctamente la segmentación internacional?
Para implementar correctamente la segmentación internacional media el uso de etiquetas hreflang, tenemos que saber en que situaciones tenemos que usarlo. Pueden darse estos casos:
1- Que cambie solo un poco el contenido en función de una región o país (orientar el contenido geográficamente, aunque no cambie el idioma). Un ejemplo de ello podría ser, al orientar por un lado el contenido para los usuarios de México y otro para los usuarios de España. En este caso el idioma es el mismo, pero el tipo de lenguaje puede variar ligeramente, según las expresiones de cada país o se puede orientar el target de forma diferente en función de lo que más se busque en cada país. Para saber el código correcto de región o país se usa el formato ISO 3166-1 Alpha 2 y para el idioma el ISO 639-1. En la etiqueta hreflang, primero va el código del idioma y después la del país (se suele poner en mayúscula, para diferenciarla correctamente).
Ejemplo:
<link rel="alternate" hreflang="es-MX" href="http://www.ejemplo.mx"/> <link rel="alternate" hreflang="es-ES" href="http://www.ejemplo.es"/>
Nota: El dominio puede ser un subdominio (ej. es.ejemplo.com), un ccTLD del país(ej. www.ejemplo.es), un directorio (ej. www.ejemplo.com/es/) o una combinación de todos.
2- Que solo se traduzca la web en diferentes idiomas, independientemente del país o región. Este por ejemplo, sería el caso típico de una web en español, que traduce todo su contenido en francés o inglés, para abarcar a más publico objetivo solo en función de su idioma. Suele ser el más utilizado, sobre todo para webs que no tienen una presencia internacional muy importante.
<link rel="alternate" hreflang="es" href="http://www.ejemplo.com/es/"/> <link rel="alternate" hreflang="fr" href="http://www.ejemplo.com/fr/"/>
3- Orientar a los usuarios de un mismo país en función del idioma que hable el usuario. Con las etiquetas oportunas, podremos orientar, por ejemplo, que el contenido va orientado a personas de un mismo país, pero con idiomas distintos.
<link rel="alternate" hreflang="nl-BE" href="http://www.ejemplo.be/fr/"/> <link rel="alternate" hreflang="fr-BE" href="http://www.ejemplo.be/nl/"/>
4- Orientar a diferentes usuarios en diferentes idiomas y diferentes regiones o países. Este punto equivaldría a poner una mezcla de todos. En este caso se puede poner un elemento x-default, para en caso de que algún usuario no quede cubierto, definir la versión por defecto. Sirve sobre todo para indicar web neutras, como una página de inicio, donde el usuario selecciona el país o idioma, o donde no se segmente en absoluto.
<link rel="alternate" hreflang="en-GB" href="http://www.ejemplo.com/en/"/> <link rel="alternate" hreflang="es-MX" href="http://www.ejemplo.mx"/> <link rel="alternate" hreflang="es-ES" href="http://www.ejemplo.es"/> <link rel="alternate" hreflang="nl-BE" href="http://www.ejemplo.be/fr/"/> <link rel="alternate" hreflang="fr-BE" href="http://www.ejemplo.be/nl/"/> <link rel="alternate" hreflang="x-default" href="http://www.ejemplo.com/">
Errores típicos al implementar el marcado de hreflang
Hay una serie de errores comunes que se suelen hacer al implementar el código y que suelen ocasionar problemas a la hora de mostrar correctamente en las SERP las URLs del idioma o región del usuario que hace la consulta.
1- Uno de las más comunes es el no indicar la propia URL del idioma que se está mostrando. Por ejemplo, estamos en una web en español y las etiquetas hreflang solo indican las versiones alternativas de los otros idiomas, sin indicar la propia:
URL principal: http://www.ejemplo.com
Mal implementado:
<link rel="alternate" hreflang="en" href="http://www.ejemplo.com/en/"/> <link rel="alternate" hreflang="fr" href="http://www.ejemplo.com/fr/"/>
Bien implementado:
<link rel="alternate" hreflang="es" href="http://www.ejemplo.com/"/> <link rel="alternate" hreflang="en" href="http://www.ejemplo.com/en/"/> <link rel="alternate" hreflang="fr" href="http://www.ejemplo.com/fr/"/>
2- Otro error común es el de poner solo el código de región o país, sin añadir el idoma de este, pensando que está bien implementado. Por ejemplo, poniendo el código de idioma BE, pensando que se está orientando para los usuarios de Bélgica cuando en realidad se está orientando a los de habla bielorrusa.
URL principal: http://www.ejemplo.be
Mal implementado:
<link rel="alternate" hreflang="be" href="http://www.ejemplo.be"/> <link rel="alternate" hreflang="fr" href="http://www.ejemplo.fr"/>
Bien implementado:
<link rel="alternate" hreflang="fr-BE" href="http://www.ejemplo.be"/> <link rel="alternate" hreflang="fr-FR" href="http://www.ejemplo.fr"/>
3- Se puede poner la orientación de idioma en países donde ese idioma no es oficial. Eso NO es un error, pero muchos usuarios se piensan que si. Como por ejemplo, poner orientado en alemán o francés en España. El uso que le demos dependerá en exclusiva de nuestro proyecto y como queramos orientarlo.
URL principal: http://www.ejemplo.es
Bien implementado:
<link rel="alternate" hreflang="es" href="http://www.ejemplo.es"/> <link rel="alternate" hreflang="fr-ES" href="http://www.ejemplo.es/fr/"/> <link rel="alternate" hreflang="de-ES" href="http://www.ejemplo.es/de/"/>
4- A veces hay plugins o extensiones que generan automáticamente los hreflang. Algunos de estos tienen la opción de redirigir al usuario automáticamente en función del idioma del navegador (aunque se puede poner manualmente por código). Esta opción no es un problema del código implementado, pero puede afectar a las SERP y en como se muestran los resultados. Por lo tanto es recomendable desactivar siempre que sea posible este tipo de redirecciones automáticas. Además si se tienen correctamente implementados los códigos, como hemos visto en el artículo, se mostraran correctamente en el idioma y país que se busque.
5- Poner canonicals en URLs poco importantes apuntando a otra principal y que esta tenga los Hreflangs implementados. Lo ideal es si tenemos una página poco importante es añadirle solo el canonical, sin implementar las versiones alternativas, ya que el canonical ya indica cual es la versión alternativa a esa página.
Hay otros errores que se pueden dar al implementar los hreflang, una buena herramienta es la que proporciona el propio Search Console donde nos puede ayudar a determinar cual es el error y donde se encuentra.
Lo has explicado genial. Como nadie y mira que llevo leído…
Felicidades.