Cada página de un sitio web contiene diferentes etiquetas que son utilizadas por los motores de búsqueda para entender y clasificar el contenido de dicha URL en relación con el resto de páginas del sitio web. Hreflang es una de esas etiquetas.
Contenidos
¿Qué es la etiqueta Hreflang?
La etiqueta hreflang=”x” junto con rel=”alternate” se utiliza para indicarle a los motores de búsqueda, como Google o Yandex, el idioma y el público objetivo de la página.
Esta anotación les ayuda a mostrar la URL en la página de resultados cuando la búsqueda se haga en el idioma o desde la región indicada.
La etiqueta hreflang se muestra, una vez implementada, de esta forma:
<link rel="alternate" href="https://www.ejemplo.com/es/" hreflang="es">¿Cuándo es necesario utilizarla?
Si tu sitio web dispone únicamente de un idioma, no es necesario informar a Google del idioma utilizado en la página. Si, además, se utiliza un dominio geográfico (ccTLD), como por ejemplo “.es”, el motor de búsqueda sabrá que el público objetivo de la página se encuentra en España.
Si se pretende entregar una página en diferentes idiomas o ubicaciones, el uso de la etiqueta hreflang es necesario. Podemos encontrarnos con distintas situaciones:
Distinto país y distinto idioma
Este es el caso más común de los sitios web que cuentan con una versión de sus páginas para diferentes idiomas.
Si tu negocio tiene un enfoque internacional, necesitarás diferenciar el contenido de tu sitio en función del idioma del público al que quieras llegar. La etiqueta hreflang te ayudará en este caso a entregar la página en el idioma y el país adecuados.
<link rel="alternate" href="https://www.ejemplo.com/" hreflang="en">
<link rel="alternate" href="https://www.ejemplo.com/es/" hreflang="es">En este ejemplo, la página www.ejemplo.com tendría su contenido en inglés y va, por tanto, destinada al público de habla inglesa, mientras que www.ejemplo.com/es/ está en español.
Mismo idioma y distinto país
Si tu empresa dispone de una página web diferente para diferentes países en los que se habla el mismo idioma, la etiqueta se utilizará para indicarle a Google cual debe entregar en cada uno de los países.
Por ejemplo, podemos disponer de dos versiones de una página para el público de habla hispana en España y México. Así pues, la etiqueta hreflang le indica a Google que URL va destinada a cada país gracias al código de país añadido al final.
<link rel="alternate" href="https://www.ejemplo.com/es/" hreflang="es-es">
<link rel="alternate" href="https://www.ejemplo.com/mx/" hreflang="es-mx">En este caso, la URL www.ejemplo.com/es/ va destinada al público español y www.ejemplo.com/mx/ al mexicano.
Además, es interesante utilizar una etiqueta de idioma genérica para indicar que versión debe mostrarse al resto de personas de habla hispana que no se encuentran en esos dos países. Así pues, al ejemplo anterior habría que añadirle una tercera etiqueta:
<link rel="alternate" href="https://www.ejemplo.com/es/" hreflang="es-es">
<link rel="alternate" href="https://www.ejemplo.com/mx/" hreflang="es-mx">
<link rel="alternate" href="https://www.ejemplo.com/es/" hreflang="es">
De esta forma, indicamos a los motores de búsqueda que www.ejemplo.com/es/ es la versión que deben mostrar en la página de resultados en el resto de países cuando se haga una búsqueda en español.
Mismo país y distinto idioma
Si en un mismo país se hablan varios idiomas diferentes sería interesante indicarle a los motores de búsqueda que versión de la web ofrecer en función del idioma utilizado en la búsqueda.
En este ejemplo vamos a utilizar el caso de Canadá, un país en el que sus habitantes hablan tanto inglés como francés. Así pues, si nuestro sitio web ofrece contenido en ambos idiomas, la etiqueta hreflang le indicará a Google que URL ofrecer.
<link rel="alternate" href="https://www.ejemplo.ca/en/" hreflang="en-ca">
<link rel="alternate" href="https://www.ejemplo.ca/fr/" hreflang="fr-ca">Redirección automática
El último caso se utiliza cuando contamos con una página de selección de idioma o de auto-redirección basada en la geolocalización del usuario a través de su dirección IP, el idioma de su dispositivo o el almacenamiento de cookies con una elección pasada del usuario. La etiqueta utilizada en esta situación es x-default.
<link rel="alternate" href="https://www.ejemplo.com/" hreflang="x-default">Implementación de la etiqueta hreflang
Existen tres alternativas para implementar la etiqueta hreflang en tu sitio web: como un elemento HTML en la cabecera de la página, a través del sitemap o a través de la cabecera HTTP. La elección de una u otra alternativa se hará en función del proyecto y la dificultad de implementación de cada una de ellas en dicho proyecto.
Elemento HTML
La implementación como un elemento HTML se hará dentro de la sección <head> de la página. En ella se indicará la URL de todas las versiones disponibles, incluyendo la versión que se está visualizando en ese momento.
<head>
...
<link rel="alternate" href="https://www.ejemplo.com/" hreflang="en">
<link rel="alternate" href="https://www.ejemplo.com/es/" hreflang="es">
<link rel="alternate" href="https://www.ejemplo.com/fr/" hreflang="fr">
<link rel="alternate" href="https://www.ejemplo.com/mx/" hreflang="es-mx">
...
</head>Sitemap XML
La información sobre las diferentes versiones también se puede entregar a los motores de búsqueda a través del sitemap del sitio web.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.ejemplo.com/es/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://www.ejemplo.com/"/>
<xhtml:link rel="alternate" hreflang="es" href="https://www.ejemplo.com/es/"/>
<xhtml:link rel="alternate" hreflang="fr" href="https://www.ejemplo.com/fr/"/>
<xhtml:link rel="alternate" hreflang="es-mx" href="https://www.ejemplo.com/mx/"/>
</url>
<url>
<loc>https://www.ejemplo.com/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://www.ejemplo.com/"/>
<xhtml:link rel="alternate" hreflang="es" href="https://www.ejemplo.com/es/"/>
<xhtml:link rel="alternate" hreflang="fr" href="https://www.ejemplo.com/fr/"/>
<xhtml:link rel="alternate" hreflang="es-mx" href="https://www.ejemplo.com/mx/"/>
...
</url>
</urlset>Header HTTP
El header HTTP se utiliza para indicar el idioma o la región cuando el archivo publicado no es HTML. Un ejemplo muy común es un archivo PDF.
Link: <https://www.ejemplo.com/es/documento.pdf>; rel="alternate"; hreflang="es-es"En este caso le estaríamos indicando a Google que documento.pdf se encuentra en idioma español y, además, va destinado a usuarios de España.
En definitiva, la etiqueta hreflang se utiliza cuando disponemos de un versión distinta de nuestra web para diferentes idiomas y/o regiones. Para implementarla, contamos con tres alternativas, todas ellas igualmente válidas en términos de SEO.
Si tienes alguna duda sobre la etiqueta hreflang o su implementación, puedes dejarla en la sección de comentarios. Además, te invito a compartir el artículo en redes sociales utilizando los botones que encontrarás a continuación.
