Alfafar, Valencia
+34 963 21 87 28

Cómo configurar correctamente hreflang para sitio multilingüe

Cómo configurar correctamente hreflang para sitio multilingüe

 

Ayuda al robot de búsqueda a no enredarse en tus versiones de idioma

¡Si quieres ayudar al robot de búsqueda a no enredarse en tus versiones de idioma, entonces necesitas el atributo hreflang y leer este artículo! Hreflang ayuda a los motores de búsqueda a determinar en qué idioma está escrita la página, y si hay versión alternativa en otro idioma y país.

hreflang-idioma

Arquitectura del sitio para la web multi-idioms

Para configurar el atributo hreflang no importa qué arquitectura o CMS usa tu sitio web y pero si es importante como están estructurados los idiomas en la web:

  1. Diferentes zonas de dominio: es decir, tu registras tu sitio para cada región. Por ejemplo: mydomen.es para España, mydomen.fr para Francia, mydomen.de para Alemania.
  2. Subdominios: registras el dominio principal en la zona internacional y para cada idioma/país crea el subdominio. Por ejemplo: mydomen.com es para el idioma \ país (cualquiera) y después creamos para cada idioma \ país un subdominio – es.mydomen.com – para España\ idioma Español, de.mydomen.com – para Alemania \ idioma alemán, etc.
  3. Subcarpetas: es decir,  tienes el dominio y cada versión de idioma del sitio está en una carpeta independiente. mydomen.com/es/ — para España\idioma Español, mydomen.com/de/ — para Alemania\idioma alemán, etc.

¿Cómo configurar hreflang en el sitio?

El atributo hreflang se puede configurar no sólo para la versión de idioma del país, sino también para el par de valores idioma-país, es decir, que puedes tener una versión separada para los alemanes nativos y otra versión para germanófobos en Suiza.

O la versión del sitio en español y una versión separada para personas de habla hispana para Mejico.

Valores de los atributos de idioma

Los valores de los atributos de idioma que se necesitan utilizar se especifican en el formato ISO 639-1 y para países en el formato ISO 3166-1 .

Tres opciones de realización de hreflang:

  1. El atributo hreflang enhead del documento.
  2. El encabezado Link en respuesta HTTP de página.
  3. Archivo Sitemap.

Veremos paso a paso:

  1. El atributo hreflang en head del documento

Más comun: el código del atributo hreflang debe estar situado en cada página del sitio en head del documento.

Veremos la opción, cuando el sitio tiene 5 versiones de idioma: principal — http://mydomen.me/ y 4 adicionales: en inglés, ucraniano, alemán, sueco.

En la página principal el código se verá así:

 

Codigo:

1

2

3

4

5

<link rel=»alternate» hreflang=»ru» href=»http://mydomen.me/» />

<link rel=»alternate» hreflang=»en» href=»http://mydomen.me/eng/» />

<link rel=»alternate» hreflang=»uk» href=»http://mydomen.me/ukr/» />

<link rel=»alternate» hreflang=»de» href=»http://mydomen.me/deu/» />

<link rel=»alternate» hreflang=»sv» href=»http://mydomen.me/swe/» />

 

En el resto de las páginas /{idioma}/XXXXXXX/ código en head:

 

1

2

3

4

5

<link rel=»alternate» hreflang=»ru» href=»http://mydomen.me/rus/{XXXXXXX}/» />

<link rel=»alternate» hreflang=»en» href=»http://mydomen.me/ukr/{XXXXXXX}/» />

<link rel=»alternate» hreflang=»uk» href=»http://mydomen.me/ukr/{XXXXXXX}/» />

<link rel=»alternate» hreflang=»de» href=»http://mydomen.me/deu/{XXXXXXX}/» />

<link rel=»alternate» hreflang=»sv» href=»http://mydomen.me/swe/{XXXXXXX}/» />

Si tienes la página de selección de idioma, debes agregar una línea de código con el atributo hreflang y el valor «predeterminado».

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

El valor x-default del atributo hreflang dice que esta página no tiene ningún idioma específico, configuraciones regionales o es la página dependiente de IP, en otras palabras, esta es la página predeterminada.

Si no tienes una versión especial de idioma para el usuario, él verá la página predeterminada.

  1. Encabezado Link en respuesta HTTP de página

Además del elemento link, se puede utilizar el encabezado Link en la respuesta HTTP para especificar el idioma y/o región de la página. Si la página es http://mydomen.com/in con el idioma principal, hay dos versiones lingüísticas en español y ruso, entonces hay que utilizar el siguiente encabezado HTTP para especificar la dirección URL en otros idiomas:

1 Link: <http://mydomen.com/ru/>; rel=»alternate»; hreflang=»ru», <http://mydomen.com/es/>; rel=»alternate»; hreflang=»es»,

Es decir, hay que especificar todas las versiones alternativas, separándolas con comas.

Código php:

1 header(‘Link: <http://mydomen.com/ru/>; rel=»alternate»; hreflang=»ru», <http://mydomen.com/es/>; rel=»alternate»; hreflang=»es»‘);

Puedes comprobar el código de respuesta del servidor, por ejemplo, aquí. Debe salir algo así:

  1. Archivo Sitemap

A pesar de que en el año 2013 Google informo acerca de cómo mostrar contenido a los usuarios de diferentes países, Sitemap no es compatible con el motor de búsqueda Yandex (Rusia) y Baidu (China), pero con Google este formato es compatible perfectamente.

Un ejemplo para la opción, cuando la página en inglés http://mydomen.com/en/ tiene dos versiones alternativas: en alemán para todo el mundo y en alemán para Suiza.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

 

 

 

 

<?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://mydomen.com/en/</loc>

<xhtml:link rel=»alternate» hreflang=»de» href=»http://mydomen.com/de/» />

<xhtml:link rel=»alternate» hreflang=»de-ch» href=»http://mydomen.com/sc-de/» />

<xhtml:link rel=»alternate» hreflang=»en» href=»http://mydomen.com/en/» />

</url>

 

<url>

<loc>http://mydomen.com/de/</loc>

<xhtml:link rel=»alternate» hreflang=»en» href=»http://mydomen.com/en/» />

<xhtml:link rel=»alternate» hreflang=»de-ch» href=»http://mydomen.com/sc-de/» />

<xhtml:link rel=»alternate» hreflang=»de» href=»http://mydomen.com/de/» />

</url>

<url>

<loc>http://www.mydomen.com/sc-de/</loc>

<xhtml:link rel=»alternate» hreflang=»de» href=»http://mydomen.com/de/» />

<xhtml:link rel=»alternate» hreflang=»en» href=»http://mydomen.com/en/» />

<xhtml:link rel=»alternate» hreflang=»de-ch» href=»http://mydomen.com/sc-de/» />

</url>

</urlset>

En conclusión:

Sea cual sea el sistema elegido es fundamental hacer hincapié en la correcta configuración del hreflang, un fallo podría tirar por suelo toda la estrategia internacional del proyecto.

Espero que los ejemplos os sirvan para mejorar en vuestra estrategia de internacionalización,  no olvides compartir en redes sociales si te ha gustado, tal vez le pueda servir a otros. ✌

Sobre el post del autor

Deja una Respuesta

Su dirección de correo electrónico no será publicada.Los campos necesarios están marcados *