Asiste al evento de SEO más avanzado del año

Implementación de los Hreflang

Insertar hreflang con HTML, encabezados HTTP y Sitemaps, paso a paso de cada una de las formas

Autor:
Carlos Sánchez
Temática:
Internacional
,
Metaetiquetas
,
Servidores
Fecha de publicación:
2022-03-26

Última revisión:
2024-02-06

Los hreflang son el elemento técnico más importante que tenemos de cara al SEO Internacional.

El atributo hreflang es lo que permite a los motores de búsqueda y especialmente a Google, diferenciar versiones idiomáticas alternativas. Y el hreflang sería la forma correcta de hacerlo, puesto que otras alternativas como el atributo lang dentro de la etiqueta HTML no esclarece las versiones alternativas de idiomas por varias razones.

Para entenderlo, tenemos que comprender que es un hreflang y para que sirve. Aquí estará explicado, no obstante, siempre se puede complementar con la información oficial de la documentación de Google [Recomendado].

Básicamente el hreflang son variaciones lingüísticas de un mismo contenido. Ni es lo mismo que una canonical, ni se consideran páginas distintas. Te puede ayudar e entenderlo mi artículo de préstamos lingüísticos.

Aquí me voy a centrar más en como se hace la implementación de cada una de dichas prácticas.

Implementación de hreflang por HTML

Implementación de hreflang por HTTP

Implementación de hreflang por Sitemap

Y para ello es necesario ver también que aspectos tienen en común.

Aspectos en común hreflang

Para el correcto funcionamiento de los hreflang, no se debe nunca realizar redirecciones al usuario en función de su idioma.

Llamar a todas las versiones

Desde cada una de las versiones alternativas de idioma por página, se tienen que incluir todas las versiones. Incluyendo la propia.

Esto se debe a poder evitar "hackeos" en las implementaciones y a la propia naturaleza. Lo explico mejor en el vídeo que pongo al final de este artículo.

URL Absolutas

Al igual que ocurre con todas las metaetiquetas como el canonical, las URLs deben ser con la ruta absoluta. Es decir con el protocolo http/https y con www o no www.

Las URLs alternativas pueden estar en cualquier dominio

Esto permite geolocalizar aún más tus webs y poner como versiones alternativas a webs como example.es y example.fr

Códigos de idioma y región admitidos

Se debe utilizar siempre el código de idioma en el formato ISO 639-1 de forma obligatoria en caso de utilizar un hreflang.

Luego opcionalmente, se pueden añadir alfabetos en concreto con el ISO 15924, y también de forma opcional, se pueden añadir regiones en concreto, con el ISO 3166-1.

x-Default

Se utiliza para indicar donde se debe ir si no se cumplen ninguno de los idiomas disponibles en el hreflang. Este x-default puede ser una versión alternativa, o un lugar donde especificar el idioma.

Implementación de hreflang por HTML

Es la más común y la más óptima (por la facilidad de implementación) en páginas multilingües que cuelgan del mismo dominio.

<link rel="alternate" hreflang="en" href="http://hreflang.test/"/>
<link rel="alternate" hreflang="es" href="http://hreflang.test/es"/>

Recordemos que debería ir el mismo código en todas y cada una de las páginas alternativas, y es una implementación bastante sencilla de automatizar.

Implementación de hreflang por HTTP

En este caso voy a hacer la implementación por medio de Apache, no obstante, si recibo peticiones de cómo realizarlo por medio de NGINX, no tengo problema alguno. También puedes extrapolar y ayudarte de cierta información que puse de acuerdo a la implementación del x-robots.

Sobre todo esta implementación es recomendada para archivos multimedia como PDF donde no se pueden hacer estas implementaciones por medio de HTML

Segmentándolo dentro de FILES o FILEMATCH de Apache se debería añadir dentro de un Header de HTTP.

En este caso, os enseño una forma burda de ponerlo, poniendo el archivo .htaccess en la misma carpeta de dichos PDF. Dependiendo de la cantidad de PDF o donde estén situados, hay formas más óptimas de ponerlo.

<Files ~ "\.pdf$>
Header add Link "<http://hreflang.test/pdf/english.pdf>; rel=\"alternate\" hreflang=\"en\", <http://hreflang.test/pdf/spanish.pdf>; rel=\"alternate\" hreflang=\"es\", "
</Files>

El resultado final al poner este código cuando se examina el encabezado HTTP de dicho PDF, debería ser como lo especifica Google en su documentación.

Puedes ver una configuración más completa en el artículo sobre x-default, donde verás ejemplos con apache y con nginx.

Implementación de hreflang por Sitemap

Realmente sería aplicar lo mismo que en las implementaciones mencionadas previamente, pero dentro de un Sitemap.

Hay dos formas, si cuelga todo del mismo dominio, se vería así:

<?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://hreflang.test/</loc>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://hreflang.test/es"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://hreflang.test/"/>
</url>
<url>
<loc>http://hreflang.test/es</loc>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://hreflang.test/"/>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://hreflang.test/es"/>
</url>
</urlset>

Si estuvieran las versiones alternativas en dos dominios distintos se repartiría así:

Formato español

<?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://hreflangtest.es</loc>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://hreflangtest.uk/"/>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://hreflangtest.es"/>
</url>
</urlset>

Formato en el dominio inglés

<?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://hreflangtest.uk/</loc>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://hreflangtest.uk/"/>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://hreflangtest.es"/>
</url>
</urlset>

Videos

Implementación de los hreflangs

Archivo Github del vídeo

Aspectos a tener en cuenta de SEO internacional

Si te gusta este artículo, me ayudarías un montón compartiendo mi contenido:
No se te da mal el SEO Técnico

Te falta mi máster. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB

¡Accede al Máster de SEO Técnico!
Tal vez te interesen otros artículos:
Artículos de SEO

Si te ha gustado esta publicación, siempre me lo puedes agradecer dándome like en esta publicación de LinkedIn sobre este mismo artículo.

Usamos cookies para asegurar que te damos la mejor experiencia en nuestra web. Aquí tienes nuestra política de privacidad.