La etiqueta hreflang sirve normalmente para indicar a Google y resto de buscadores el idioma específico en el que está una página web en concreto. Los motores de búsqueda utilizan estas etiquetas hreflang para en cierto modo redireccionar a los usuarios a la página con el idioma correcto dependiendo de su ubicación, configuración o navegador, pero ¿Qué es hreflang y cómo debemos utilizarlo?
Posiblemente si tienes una web pequeña no sea muy relevante, pero si tienes un sitio en varios idiomas (o en uno solo) y empieza a tener un tamaño considerable, posiblemente te interese tener en cuenta las etiquetas hreflang para indicar el idioma de cada una de tus páginas, así como las traducciones en otros idiomas en caso de que existan.
¿Qué es multilenguaje?
Cuando hablamos de páginas web nos estamos refiriendo principalmente al hecho de que una misma página esté disponible en varios idiomas diferentes. Para tener un ejemplo más claro podríamos utilizar cualquier artículo de la Wikipedia, en el que podremos encontrar una lista con los idiomas en los que está disponible el mismo artículo.
Deberías utilizar hreflang si…
Tu página web está disponible en varios idiomas, o tu sitio está disponible en más de un idioma, entonces deberías tener muy en cuenta el uso de la etiqueta hreflang. Desde luego hay varias formas en las que esta etiqueta puede ayudar a Google a entender el contenido de nuestra página, así como de sus variaciones.
Si buscamos en las recomendaciones del buscador, podremos encontrar que se menciona el uso de rel=»alternate» hreflang=»xx» como mínimo en estos casos:
- Traducir únicamente partes del diseño o template de la página, como la navegación, cabecero y pie de la página, mientras utilizamos otro idioma para el contenido. Un buen ejemplo de una página de este tipo sería un foro, donde los usuarios publican contenido en su idioma.
- En los casos en los que hay diferencias geográficas con dialectos diferentes de un idioma parecido, por ejemplo entre catalán y valenciano, inglés americano e inglés de reino unido, etc.
- Las páginas del sitio están completamente traducidas, como en wikipedia.
Ubicaciones del tag hreflang
Hay un poco de controversia acerca de donde colocar las etiquetas de idioma en las páginas, pero según recomendaciones de Google y experiencias propias sobre el funcionamiento la ubicación del código debe ser dentro del <head> de nuestra página, preferiblemente al principio, antes del resto de etiquetas link.
El ejemplo de código a poner en nuestro sitio sería el siguiente, teniendo en cuenta que nuestra página está en español y queremos enlazar la página en inglés:
<link rel="alternate" hreflang="en" href="http://en.vichaunter.org/" />
Por otro lado, si queremos hacer lo mismo para archivos que no son páginas, como por ejemplo imágenes o pdfs, podemos incluir un código como este en nuestro .htaccess:
Link: <http://en.vichaunter.org/>; rel="alternate"; hreflang="en"
También se pueden añadir a los sitemaps en xml, pero su inclusión es algo diferente y no la veremos en este artículo.
Ejemplos de uso de la etiqueta hreflang
Hay varias formas de utilizar este tag, por lo que vamos a revisar un poco cuales son las que más nos van a interesar, y cómo podemos combinarlas. La página predeterminada, es decir, el idioma principal que nosotros usemos como orígen para todos los demás idiomas podremos indicarlo con x-default de la siguiente manera:
<link rel="alternate" href="//www.vichaunter.org/" hreflang="x-default" />
Después de esto, cada uno de los idiomas en los que tengamos nuestra página podremos indicarlos colocando las etiquetas necesarias en la misma sección que la anterior, por ejemplo supongamos que la misma página estaría en inglés americano, inglés de reino unido y francés, nos quedaría de la siguiente forma:
<link rel="alternate" href="http://en.vichaunter.org/" hreflang="en-us" /> <link rel="alternate" href="http://gb.vichaunter.org/" hreflang="en-gb" /> <link rel="alternate" href="http://fr.vichaunter.org/" hreflang="fr" />
Así estaríamos indicando a los motores de búsqueda que tenemos varios idiomas, e incluso que algunos de ellos son de un tipo de idioma algo más concreto que lo que podría ser por ejemplo indicar simplemente inglés.
Como nota adicional me gustaría remarcar que nos podría resultar interesante indicar las páginas alternativas vía opengraph, lo cual sería un código como el siguiente:
<meta property="og:locale" content="es_ES" /> <meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="en_GB" />
La primera línea estaría indicando el idioma predeterminado de nuestra página, y las otras que añadamos indicarían los otros idiomas en los que estaría disponible la misma página.
¿Tiene efecto hreflang en nuestro SEO?
Esta es la pregunta por excelencia cuando hablamos de esta etiqueta en concreto, y a pesar de que parece depender de unas cuantas variables que no siempre se tienen en cuenta de la misma forma, la respuesta parece bastante simple.
Sí que tiene impacto en nuestro posicionamiento el uso de este tipo de etiquetas, que según los buscadores deberían utilizarse. Sabiendo esto y si realizamos una pequeña investigación al respecto seremos conscientes de que tiene ciertos efectos, que no siempre son significativos, pero que nos puede ayudar a conseguir un público más acorde con nuestro sitio web.
¿Utilizas hreflang en tu página? ¿Cuántos idiomas tienes?
