En esta entrada vamos a tratar de ayudarte comprender mejor la etiqueta hreflang y a mejorar tu web cuando esté publicada en diferentes idiomas. Es importante tener en cuenta que no sirven las traducciones “al vuelo” mediante el uso de plugins o api de Google Translate. Todo el contenido debe de existir traducido y a ser posible, por un experto en cada idioma.
Si quieres una consultoría o asesoría SEO realizada por nuestro equipo de expertos, no dudes en ponerte en contacto con Millennials Consulting.
¿Qué es y para qué sirve la etiqueta hreflang?
La etiqueta hreflang es un atributo HTML muy útil en nuestras webs cuando trabajamos el contenido en varios idiomas. Empleando esta etiqueta estamos ayudando a los robots de rastreo a localizar la versión adecuada de nuestra web según idioma o región.
La etiqueta hreflang indica a los motores de búsqueda si una web se muestra en diferentes idiomas, la localización de la web y en que versiones se sirve el contenido. El uso de esta etiqueta es recomendable tanto para la traducción a varios idiomas como variaciones de idioma, como por ejemplo, español en sudamérica. Aplicando esta etiqueta ayudamos a Google a conocer mejor en qué idioma se ofrece nuestra web para así mostrarla a los usuarios según su procedencia. Si disponemos de varias versiones de la misma página, con esta etiqueta hreflang estamos indicando a Google cual de todas las versiones queremos mostrar al usuario.
Si disponemos de una web o ecommerce multidioma esta etiqueta resulta muy conveniente para mejorar el posicionamiento de nuestros contenidos en diferentes partes del mundo.
Empleando esta etiqueta podremos atraer nuevas audiencias a nuestra web.
- Usuarios del mismo país que hablan diferentes idiomas
- Usuarios de diferentes países que hablan otros idiomas
- Usuarios de diferentes países que hablan el mismo idioma
¿Cómo emplear la etiqueta hreflang?
Basta con incluir en la sección head de nuestra web el link siguiente con el código de idioma adecuado. Debemos de colocar cada una de estas etiquetas en su correspondiente idioma, tantas como idiomas ofrezca nuestra web. Hoy día, existen mucho plugins para la traducción de webs que en sus versiones de pago ofrecen esta función de forma automática.
El formato adecuado para la implementación de la etiqueta hreflang debe ser el siguiente:
<link rel=»alternate» hreflang=»lang_code» href=”www.example.com/”/ >
<link rel=”alternate” hreflang=”es-ES” href=”https://www.tudominio.com/“/>
- link rel=“alternate”: El enlace que aparece en esta etiqueta es una versión alternativa de esta página.
- hreflang=“x”: Es alternativa porque está en otro idioma y ese idioma es x.
- href=“https://midominio.com/pagina-alternativa”: La página alternativa está en esta dirección.
Hreflang les da información importante a los motores de búsqueda sobre tu contenido, ya que indica códigos de idioma y códigos de país para cada contenido. Este código le dice a los motores de búsqueda a qué idioma y región se dirige el contenido. Es importante tener en cuenta que el valor del atributo debe de contener tanto el idioma como el país “es-ES”.
Existen generadores de tags como este.
Relación entre etiquetas hreflang
La relación entre etiquetas hreflang significa que debe hacer referencia a sí misma y al resto de versiones. Cuando hablamos de relación bidireccional cada etiqueta debe estar emparejada con una etiqueta en el contenido alternativo.
Por ejemplo, si la página ES se conecta a la página EN, entonces la página EN debe conectarse de nuevo a la página ES.
Códigos de idiomas y regiones
El valor del atributo hreflang indica el idioma (en formato ISO 639-1) y, en ocasiones, la región (en formato ISO 3166-1 Alpha 2) de una URL alternativa. Si solo se indica un código, Google lo considera un código de idioma. No hace falta que el idioma esté relacionado con la región. Por ejemplo:
de: contenido en alemán, independientemente de la región
en-GB: contenido en inglés dirigido a usuarios británicos
de-ES: contenido en alemán para usuarios que estén en España
VER TODOS LOS CÓDIGOS AL FINAL DEL POST
Etiqueta x-default para mostrar una versión concreta a los usuarios de idiomas no indicados
La variante X-default crea una versión predeterminada de una página que no está dirigida a un idioma específico donde se les pide a los usuarios que seleccionen idioma. Esto es muy útil para usuarios que no tenga un idioma predeterminado en la configuración de su navegador <link rel=”alternate” href=”http://ejemplo.com/” hreflang=”x-default” />
Por ejemplo, si servimos nuestra web en idioma ES y EN y accede un usuario desde China, por defecto podemos indicar que la web se sirva en Inglés.
En un valor opcional, pero se recomienda incluirlo para controlar qué versión se muestra a los usuarios de idiomas que no has especificado. No es necesario especificar un código de idioma en el valor x-default.
Ejemplo.
- <link rel=»alternate» href=»http://example.com/en-gb» hreflang=»en-GB» /> REINO UNIDO
- <link rel=»alternate» href=»http://example.com/en-us» hreflang=»en-US» /> USA
- <link rel=»alternate» href=»http://example.com/en-au» hreflang=»en-AU» /> AUSTRALIA
- <link rel=»alternate» href=»http://example.com/» hreflang=»x-default» /> POR DEFECTO / resto de usarios
¿Qué función tiene la etiqueta hreflang en SEO?
La función principal de esta etiqueta es la de mejorar la usabilidad de la web ya que facilitamos a los usuarios la localización de nuestro contenido en su idioma o localización. Esto además nos puede ayudar al posicionamiento ya que si una web en un idioma tiene un buen posicionamiento este puede repercutir en otras variaciones de idioma.
¿Cómo nos ayuda la etiqueta hreflang en el SEO internacional?
En primer lugar el empleo de esta etiqueta nos ayuda a mejorar el posicionamiento SEO internacional ya definimos la versión correcta para cada idioma y así lo detectan los rastreadores como el robot de Google. De esta forma ayudamos a los buscadores a indexar las palabras clave en el idioma correcto.
La implementación de la etiqueta hreflang ayuda a evitar el contenido duplicado dado que estamos indicando las diferentes versiones de nuestro sitio web.
¿Cuando emplear la etiqueta hreflang?
En ocasiones Google puede detectar las versiones en diferentes idiomas de una web pero interesa indicarlo. Google nos recomienda indicar versiones localizadas en Google Search Console en los siguientes casos:
- Cuando el contenido está únicamente en un idioma pero hay variaciones regionales con contenidos muy parecidos. Por ejemplo, páginas con contenido en español dirigido a México, España o Colombia.
- Cuando el contenido de la Web está en un idioma y se hace una traducción de la plantilla, del menú de navegación y footer web. Esta situación suele darse en páginas con contenido generado por usuarios, como los foros.
- El contenido está completamente traducido a varios idiomas. Por ejemplo, páginas con una versión en inglés y otra en español.
- Cuando nuestra página de inicio está creada para todos los usuarios a excepción de los visitantes con un idioma específico. En este caso la página web está traducida parcialmente y sólo proporciona contenido a ciertos usuarios específicos en algunos idiomas o regiones. El resto de usuarios serán dirigidos a la home page por defecto.
Métodos para indicar páginas alternativas
Puedes indicarnos que una página tiene versiones en otros idiomas o dirigidas a regiones determinadas de tres maneras distintas:
HTML
<link rel=»alternate» hreflang=»lang_code» href=»url_of_page» />
Encabezados HTTP
Link: <url1>; rel=»alternate»; hreflang=»lang_code_1″, <url2>; rel=»alternate»; hreflang=»lang_code_2″, …
Sitemap
Especifica el espacio de nombres xhtml de este modo:
xmlns:xhtml=»http://www.w3.org/1999/xhtml»
Crea un elemento <url> distinto para cada URL.
Cada elemento <url> debe incluir un elemento secundario <loc> que indique la URL de la página.
Cada elemento <url> debe tener un elemento secundario <xhtml:link rel=»alternate» hreflang=»supported_language-code»> con todas las variantes de la página, incluida la del propio elemento. El orden de estos elementos secundarios <xhtml:link> no es importante, pero te recomendamos que uses siempre el mismo para que te resulte más fácil comprobar si hay errores.
Ejemplo.
<?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>https://www.example.com/english/page.html</loc>
<xhtml:link
rel=»alternate»
hreflang=»de»
href=»https://www.example.com/deutsch/page.html»/>
<xhtml:link
rel=»alternate»
hreflang=»de-ch»
href=»https://www.example.com/schweiz-deutsch/page.html»/>
<xhtml:link
rel=»alternate»
hreflang=»en»
href=»https://www.example.com/english/page.html»/>
</url>
</urlset>
Errores habituales con la etiqueta hreflang
Faltan enlaces recíprocos: si en una página X se incluye un enlace a una página Y, en esta página Y tiene que haber un enlace a la página X. Si no se cumple esta condición en todas las páginas que usan anotaciones hreflang es posible que estas anotaciones se ignoren o no se interpreten correctamente. Por ejemplo, si en https://de.example.com/index.html se incluye este enlace:
<link rel=»alternate» hreflang=»en-gb» href=»https://en-gb.example.com/index.html» />
También se debe incluir un enlace hreflang en https://en-gb.example.com/index.html que devuelva a la versión de del contenido:
<link rel=»alternate» hreflang=»de» href=»https://de.example.com/index.html» />
Códigos de idioma incorrectos: asegúrate de que los códigos de idioma que usas identifiquen el idioma en formato ISO 639-1 y, opcionalmente, la región en formato ISO 3166-1 Alpha 2 de las URLs alternativas. No se puede especificar únicamente la región.
Test hreflang
Puedes usar esta herramienta para verificar la correcta implementación de esta etiqueta.
https://app.hreflang.org/
Fuentes
https://developers.google.com
