hreflang: el tag HTML para webs multilingües

Quien quiera internacionalizar su proyecto online y ofertar su web en varios idiomas se enfrenta a diferentes tareas, entre ellas la de traducir todo el contenido y ajustar la oferta al mercado, encontrar una solución para cada uno de los dominios (eventualmente para cada país) o registrar las extensiones correspondientes, así como conseguir una estructura de servidor adecuada para garantizar un tiempo de carga constante de la web. Desde la perspectiva de la optimización para los motores de búsqueda se ha demostrado que la creación de diferentes versiones lingüísticas de una web es una tarea difícil pero necesaria. Por otra parte, los crawlers solo pueden categorizar correctamente dichas versiones y presentarlas al público apropiado basándose en las medidas SEO específicas para cada país.

Uno de los instrumentos de SEO más eficaces para este propósito es la implementación de la etiqueta hreflang.

En diciembre de 2011, Google presentó el hreflang tag como una solución simple y eficaz para informar al motor de búsqueda acerca de las versiones alternativas de una página web. Para lograrlo, solo hay que integrarlo dentro de un elemento "link" de HTML e incluir el código del idioma correspondiente. Si se quiere, por ejemplo, caracterizar a una página web en inglés como tal, se implementa el hreflang tag con el código de país "en". El elemento completo tendría la siguiente forma:

Si este elemento se incluye en una página española, el motor de búsqueda dirigirá automáticamente a la versión inglesa a todos aquellos usuarios con direcciones IP que sugieran un contexto anglosajón.

La etiqueta hreflang también se implementa para resaltar las variantes de una misma lengua. En este caso, solo es necesario añadir al atributo la ubicación de la zona deseada. Retomando el ejemplo mencionado anteriormente, es concebible una división de los usuarios anglosajones en hablantes de inglés norteamericano ("hreflang="en-US") y de inglés del Reino Unido ("hreflang="en-GB"). El listado de los posibles códigos de idioma y país está definido en los estándares ISO 639 e ISO 3166.

Ahora bien, hreflang no es el equivalente de una redirección y, por lo tanto, puede ser eclipsado por otros metadatos. Así, para que, a pesar de implementar el atributo correctamente, el usuario no se encuentre con el idioma incorrecto, es importante cubrir otras áreas de la optimización internacional para motores de búsqueda.

La etiqueta hreflang puede implementarse de tres formas diferentes. La manera más común es su integración en el encabezado del documento HTML. Para aquellos documentos que no estén disponibles en HTML (por ejemplo, un archivo PDF), el elemento se puede integrar alternativamente en el encabezado HTTP. Por último, también existe la posibilidad de instalar el atributo de lenguaje o de país en el mapa del sitio. La estructura del elemento "link" es utilizada generalmente para adjudicar las estructuras de relación y fue presentada brevemente en el ejemplo anterior con la versión en inglés. Para ilustrar la estructura general, te presentamos una forma no específica del código:

La etiqueta <link /> es un elemento vacío y su propósito es el de implementar los atributos correspondientes. Aunque solo es posible utilizarlo en el encabezado, puede hacerse tantas veces como sea necesario. Para enlazar las diferentes versiones lingüísticas con hreflang, se necesitan tanto el hreflang tag como rel y href. Las funciones de estos tres componentes son:

• rel: rel es un atributo obligatorio que especifica la relación entre el documento subyacente y el documento vinculado. El valor "alternate" indica al motor de búsqueda que el documento externo contiene una versión alternativa de la web.

• hreflang: el hreflang tag describe el idioma en el que está escrito el documento vinculado y, opcionalmente, también puede identificar el país para el que es particularmente relevante. Como valores se utilizan los códigos regionales y de idioma de acuerdo con las normas ISO 639-1 y 3166-1. Si se incluyen ambas entradas, se separan con un guion. En lingoes.net encuentras un breve resumen de las posibles combinaciones.

• href: el atributo href específica dónde se encuentra la versión idiomática alternativa y, como valor alternativo, aduce la dirección URL absoluta del documento externo.

El uso de hreflang está destinado a dirigir a los usuarios hacia la web en el idioma apropiado. Por supuesto, también es posible que, sobre todo en el caso de mucha variedad y a pesar de incluir el código de idioma o de país, los usuarios sean conducidos a una página diferente a la asignada. Si estos usuarios llegan a tu web a través de un motor de búsqueda, el ranking es el que determina cuál de las variantes lingüísticas aparecerá en los resultados. Así, en caso de encontrarse con una versión en el idioma equivocado es posible que se pierda a algunos posibles lectores. Con "x-default", Google proporciona una opción para hacer frente a esta situación.

El valor que se puede establecer como alternativa a los códigos ISO indica al motor de búsqueda que el URL enlazado es una solución estándar para todos aquellos usuarios a los que no se les puede asignar un lenguaje expresamente. En esta página estándar puedes, por ejemplo, presentar una descripción con la opción para seleccionar el idioma para que la selección del idioma quede en manos de los visitantes. La línea de código correspondiente que se debe añadir al encabezado de cada versión alternativa es la siguiente:

Para comprender el campo de aplicación de hreflang hay una característica de este atributo que es fundamental: el atributo une uno o más documentos bidireccionales y no, como en una redirección, unidireccionales. En otras palabras, no es suficiente si la versión española de una web contiene unenlace hreflang a la versión en inglés, si esta no enlaza a la española. El motor de búsqueda solo puede reconocer la estructura de tu proyecto web y adaptar los resultados de la búsqueda a tus usuarios cuando el hreflang tag se ha implementado en todos los documentos en todas las direcciones disponibles (idiomas).

El siguiente código hreflang de ejemplo para la página web midominio.es con las versiones en alemán, italiano, español e inglés tendría que incluirse en cada uno de los encabezados de los cuatro documentos HTML:

La integración en el encabezado HTTP utiliza prácticamente el mismo patrón, pues allí también es necesario hacer referencia a todos los idiomas existentes. Solo hay algunas diferencias menores en la sintaxis. En caso de que quieras ofrecer manuales en formato PDF para los cuatro ejemplos idiomáticos anteriores y señalizarlo a los motores de búsqueda, el código se vería de la siguiente manera:

Marcar el atributo hreflang en un mapa del sitio de XML es una alternativa útil para adjudicar los idiomas a cada página, sobre todo si se trata de un proyecto web internacional de gran envergadura. Si ofreces contenido en varios idiomas a gran escala, la implementación habitual en HTML conllevaría un considerable esfuerzo. Recuerda que todas las versiones lingüísticas tienen que incluirse individualmente en el sitemap especificando los URL correspondientes. Además, cada URL se especifica a través de un elemento xhtml:link que referencia a las otras opciones disponibles:

Los anteriores ejemplos del atributo hreflang demuestran que la implementación de esta práctica y automatizada categorización de webs multilingües no es una tarea tan complicada. Sin embargo, no se debe subestimar el esfuerzo necesario y el potencial de errores, algo que va de la mano con la reciprocidad de sus numerosas referencias. En ocasiones, esto da lugar a pequeños o grandes fallos que bien pueden afectar solo a las páginas individuales, pero que en parte también pueden poner en peligro la funcionalidad del hreflang tag para todo el proyecto web. A continuación, resumimos algunas de las fuentes de error más comunes:

hreflang no está implementado al nivel del URL

Debido a que la etiqueta hreflang siempre tiene que estar vinculada a un URL específico, invariablemente debe hacerse a ese nivel. En otras palabras, si solo se asigna el atributo a los URL principales de cada versión, la asignación automática de usuarios solo se hará para dichas páginas de inicio y no para el proyecto web completo. Así, una de las tareas es implementar el elemento "link" para todas las páginas o URL individuales o, como alternativa, trabajar con la variante del mapa del sitio como se ha mencionado arriba.

Una o más versiones de un idioma no dirigen a sí mismas

Muchos propietarios de páginas web cometen el error de caracterizar correctamente los URL de otros idiomas con el atributo hreflang, pero olvidan que cada uno de estos sitios debe dirigir a sí mismo. En este caso, la estructura de enlaces queda incompleta y no puede ser interpretada por Google u otros motores de búsqueda.

Códigos ISO incorrectos

Cuando se trata de los códigos de país e idioma, muchos profesionales en SEO tratan de ser creativos. Sin embargo, esto no siempre es eficaz y, a menudo, conduce a errores en el elemento hreflang. Aunque la combinación "en-UK" parece ser una elección acertada, en caso de que el contenido de la web esté dirigido específicamente a la audiencia del Reino Unido la combinación correcta sería "en-GB". La combinación "dk-DK" también parece obvia si se busca alcanzar a los usuarios daneses. No obstante, y aunque el código ISO de país para Dinamarca es, de hecho, "DK", el estándar para códigos de lenguaje ISO 639-1 especifica "da" para el danés, con lo que el hreflang tag correcto sería "da-DK".

No usar hreflang x-default

Independientemente de que trabajes con un menú inicial de selección de idioma en la página principal, redirecciones automáticamente por el idioma del navegador o sobre la base de la dirección IP, en principio no hay ninguna razón para renunciar a la página por defecto o default site. Una página de este tipo actúa como una especie de comodín que te ayuda a fidelizar a aquellos usuarios cuyo idioma o país no están representados en tu proyecto web. Además, Google valora positivamente la utilización de esta variable.

Referencia a direcciones URL antiguas o inexistentes

Una causa común de etiquetas hreflang erróneas es el uso de URL inactivas o que ya no existen. La primera tiene lugar cuando su integración en todas las subpáginas se automatiza, pero no todas tienen una versión disponible en dicho idioma. A menudo, los webmasters se olvidan de incorporar la lógica correspondiente para que solo los URL existentes se muestren como destinos alternativos. Lógicamente, los URL desactualizados aparecen cuando realizas cambios en la estructura de enlaces y no los transfieres a los elementos "link".

Uso inconsistente del canonical y hreflang tag

Muchos proveedores de páginas web internacionales implementan el canonical tag para que los crawlers no indexen páginas con el mismo contenido por partida doble. Aunque este método es una excelente opción a la hora de solucionar el problema del contenido duplicado, su uso es incompatible con el atributo hreflang. Si una página contiene ambas etiquetas, los buscadores reciben la siguiente información contradictoria:

• Ignora esta página y más bien dirígete a esta otra (canonical tag).

• Además de esta página, hay sitios alternativos con condiciones más adecuadas para el usuario. Esta página debe ser reconocida e indexada como una posible opción (hreflang tag).

Por un lado, un URL de este tipo refiere a sí mismo y, por otro, se trata de un URL que a su vez contiene un backlink. Como resultado, el motor de búsqueda ignora ambas señales y trata de identificar la estructura de otra manera. En conclusión, el hreflang tag solo debería implementarse para páginas que no refieran a otras páginas mediante el canonical tag.

Los ajustes en Google Webmaster Tools envían señales contradictorias

Quien registre su página web en Google Webmaster Tools (Search Console) puede definir el enfoque internacional de un dominio o URL si se utilizan los dominios genéricos de nivel superior. En el caso de las terminaciones geográficas, Google se encarga incluso de su asignación. No cabe duda de que como propietario de una web te beneficias de esta característica, pues Google utiliza esta información para clasificar tu proyecto de manera óptima. Sin embargo, no debes olvidar incluir estos valores en tus medidas SEO. Si también incluyes el atributo hreflang no debería crearse ninguna contradicción. Así, puede suceder rápidamente que, por ejemplo, a una página se le asigne únicamente un código de lenguaje sin especificación regional, pero cuyo país sea especificado en las Webmaster Tools.

Ya queda claro que la integración de etiquetas hreflang en todas las páginas HTML relevantes de un proyecto web está ligada a un gran trabajo. Cuanto más compleja sea la página web, mayor es la posibilidad de que se presenten problemas durante su implementación, incluso si conoces y tienes en cuenta las posibles fuentes de error. Por esta razón, es recomendable utilizar herramientas para crear los tags y verificar su funcionamiento en intervalos regulares. Algunos ejemplos interesantes se pueden encontrar en la siguiente lista:

• Generador hreflang de SISTRIX: con el generador hreflang gratuito de SISTRIX es posible crear etiquetas <link> con el atributo hreflang para el encabezado HTML de tus contenidos multilingües. Para este propósito, basta con introducir las direcciones URL y los códigos de país e idioma correspondientes y, por último, hacer clic en “Generar código”. Adicionalmente es posible definir una página por defecto.

• hreflang Validator de SISTRIX: si ya has implementado referencias para las diferentes versiones de tu proyecto, puedes hacer uso del validador online de SISTRIX. Este servicio gratuito comprueba si las etiquetas hreflang de un URL son correctas.

• Google Search Console: el registro en Google no solo hace que sea más fácil para el motor de búsqueda detectar tu web, sino que también permite acceder a una variedad de herramientas de análisis para optimizar tu proyecto. Bajo el título “Segmentación internacional”, el panel de control proporciona información sobre las etiquetas hreflang utilizadas, incluyendo una lista de backlinks ausentes.

La razón principal para el uso de atributos tales como el canonical tag o el hreflang tag es evitar el contenido duplicado para proyectos web en varios idiomas. Es común que se implemente el mismo contenido, pero traducido, a diferentes mercados. Para aquellos países en los que se habla el mismo idioma, la situación es aún más complicada. A causa de diferencias regionales o culturales (vocabulario, moneda, información de contacto, etc.) es posible que solo se apliquen cambios mínimos y que, por lo tanto, el contenido acabe siendo casi idéntico en varios lugares. Debido a que, por lo general, también se utiliza el mismo dominio, es importante enviar señales claras a los motores de búsqueda para evitar una clasificación negativa.

Si bien el canonical tag declara a un URL como variante dominante y excluye a todas las otras versiones alternativas de la indexación, el atributo hreflang señala al buscador qué versión se debe mostrar a un público específico (lenguaje y/o país) durante su búsqueda. Por esta razón, este tag HTML resulta de gran utilidad si quieres lograr el éxito a nivel internacional con tu proyecto web, así como contar con el contenido multilingüe apropiado. Incluso si el atributo no tiene influencia directa en la posición de los motores de búsqueda, su correcta implementación dará sus frutos a largo plazo debido a que tanto el rastreador como los usuarios de diferentes países podrán acceder más fácilmente a tu web.