hreflang: atributo HTML para webs multilingües

Quien quiera presentar su proyecto online a un público internacional y, por tanto, publicar su página web en varios idiomas se enfrenta a diferentes tareas, entre ellas, la optimización de páginas multilingües. Los crawlers solo pueden categorizar correctamente diferentes versiones lingüísticas 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.

¿Qué es hreflang?

En diciembre de 2011, Google presentó la etiqueta hreflang (también 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. El atributo indica a los crawlers que el contenido de la página actual está disponible en diferentes versiones lingüísticas. La URL de la página web en cuestión ha de integrarse 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 la etiqueta hreflang con el código de país “en”. El elemento completo tendría la siguiente forma:

<link rel="alternate" hreflang="en" href="URL de la web" />

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 región de destino. 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 y ISO 3166.

¿Por qué vale la pena implementar una etiqueta hreflang en el SEO?

La razón principal para el uso de atributos tales como la canonical tag o la etiqueta hreflang es evitar el contenido duplicado. En proyectos multilingües, 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 en el contenido y que, por lo tanto, acabe siendo casi idéntico en varias regiones. 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 que identifiquen el contenido como contenido duplicado.

Mientras la etiqueta canónica declara a una URL como variante dominante y excluye a todas las otras versiones alternativas de la indexación, el atributo hreflang señala al motor de búsqueda qué versión se debe mostrar a un público específico (idioma y/o país). Por esta razón, esta etiqueta 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. Aunque el atributo no tiene influencia directa en la posición de los motores de búsqueda, implementarlo de la forma adecuada tendrá sus frutos a largo plazo, ya que tanto el crawler como los usuarios de diferentes regiones podrán acceder más fácilmente a tu página web.

Estructura de hreflang

La etiqueta hreflang se basa en el elemento link de HTML. <link /> es un elemento vacío y su propósito es asignar los atributos correspondientes a una URL especificada. Aunque solo es posible utilizarlo en el encabezado del documento HTML, puede hacerse tantas veces como sea necesario. Para enlazar las diferentes versiones lingüísticas con hreflang, se necesitan tanto el hreflang tag como los atributos 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 enlazado. El valor alternate indica al motor de búsqueda que el documento externo contiene una versión alternativa de la página web.

• hreflang: hreflang describe el idioma en el que está escrito el documento vinculado y, opcionalmente, también puede identificar la región para la que es relevante. En lingoes.net puedes encontrar un breve resumen de las combinaciones posibles.

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

El siguiente ejemplo de hreflang sirve para mostrar lo anterior:

<link rel="alternate" hreflang="abreviatura de idioma-abreviatura de país" href="URL de la página web" />

Cuando los usuarios llegan a una página web y no se puede determinar automáticamente la versión en el idioma más adecuado, el motor de búsqueda decide qué página mostrar basándose en su ranking. Esto puede resultar en la pérdida de lectores potenciales si los usuarios, al encontrar la página en un idioma diferente al que esperaban, deciden abandonarla. Sin embargo, con la opción de Google "x-default", se puede evitar esta situación. Este elemento indica al motor de búsqueda que la URL enlazada es la solución predeterminada para todos los usuarios para los que no existe una versión de idioma especificada de forma explícita. Un ejemplo.

<link rel="alternate" hreflang="x-default" href="URL de la página predeterminada" />

Para una visión más detallada, puedes acceder a la entrada del blog de Google sobre “x-default hreflang” para páginas de destino internacionales, que trata el elemento con más detalle.

¿Cómo se implementa hreflang?

El enlace con la etiqueta hreflang puede implementarse de tres formas distintas. La forma más común es a través del encabezado del documento HTML correspondiente. Si el documento no estuviese en formato HTML (por ejemplo, un archivo PDF), el elemento puede insertarse en la cabecera HTTP. Asimismo, también se puede incluir el atributo específico de idioma o país en el sitemap.

Para incluir el enlace en una cabecera HTTP, deben también referenciarse todas las versiones del idioma disponibles. La sintaxis aplicada se diferencia solo en algunos aspectos del enlace para encabezado HTML:

Link: <http://dominiodeejemplo.de/es/downloads/manuals.pdf/>; rel="alternate"; hreflang="es"

Recurrir a un sitemap XML para indicar un atributo hreflang es útil sobre todo en los proyectos web internacionales de gran envergadura. Si ofreces contenidos multilingües a gran escala, la implementación de HTML estándar supondría un esfuerzo elevado. Incluso en los sitemaps, es necesario enumerar individualmente todas las versiones de idioma individualmente, especificando la URL correspondiente. Cada URL se especifica además mediante un elemento xhtml:link, que hace referencia a las demás versiones disponibles:

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

Tendrías que repetir la etiqueta <url> de la misma manera para cada versión lingüística de su artículo.

Para comprender el campo de aplicación del atributo hreflang, hay una característica 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 un enlace hreflang a la versión en inglés, si esta a su vez 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 ejemplodedominio.de 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:

<link rel="alternate" href="http://ejemplodedominio.de/" hreflang="de" />
<link rel="alternate" href="http://ejemplodedominio.de/it/" hreflang="it" />
<link rel="alternate" href="http://ejemplodedominio.de/es/" hreflang="es" />
<link rel="alternate" href="http://ejemplodedominio.de/en/" hreflang="en" />

Los errores más comunes durante la integración del hreflang tag

Los anteriores ejemplos del atributo hreflang demuestran que la implementación de categorización de páginas web multilingües automatizada 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 de la URL

La etiqueta hreflang siempre tiene que estar vinculada a una URL específica, por lo que debe aplicarse a ese nivel. En otras palabras, si solo se asigna el atributo a las 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 subpáginas o URL individuales o, como alternativa, trabajar con la variante del sitemap.

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

Muchos administradores de páginas web etiquetan correctamente las URL de otros idiomas con el atributo hreflang, pero olvidan que cada URL también debe dirigirse a sí mismas. En este caso, la estructura de enlaces queda incompleta y no puede ser interpretada por Google u otros motores de búsqueda.

También debes especificar una página predeterminada usando hreflang x-default, ya que de lo contrario no estarías aprovechando el potencial de optimización.

Códigos ISO incorrectos

Cuando se trata de los códigos de país o región, 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”. Comprueba siempre las abreviaturas de países que utiliza el estándar ISO 639-1.

Referencia a direcciones URL antiguas o inexistentes

Una causa común de etiquetas hreflang erróneas es usar URL que ya no existen. Esto tiene lugar cuando se automatiza su inclusión en todas las subpáginas, pero no todas estas subpáginas tienen una versión disponible en cada variante lingüística ofrecida. También se pueden encontrar URL obsoletas si se han realizado cambios en la estructura de enlaces y no se han transferido a los elementos “link”.

Uso inconsistente de la etiqueta canonical y la etiqueta hreflang

Muchos proveedores de páginas web internacionales implementan la canonical tag para que los crawlers no indexen subpá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 subpágina contiene ambas etiquetas, los buscadores reciben información contradictoria e ignoran las dos señales.

La hreflang tag solo debería implementarse para páginas que no refieran a otras páginas mediante la 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 utiliza dominios de nivel superior genéricos (en el caso de las extensiones de dominios de país, Google asume automáticamente la asignación geográfica del contenido correspondiente). No cabe duda de que esto beneficia a los administradores de páginas web, pues Google utiliza esta información para clasificar un proyecto de manera óptima. Por ello, merece la pena informar a Google sobre las versiones localizadas de tu proyecto web.

Si, además, tu página web incluye el atributo hreflang, la información no puede ser contradictoria. De lo contrario, podría suceder, por ejemplo, que una página solo se marcase con un código de idioma y sin especificación regional, mientras que al mismo tiempo en la herramienta para webmasters se indica un país específico.

hreflang: herramientas útiles

Queda claro que integrar etiquetas hreflang en todas las páginas HTML relevantes de un proyecto web lleva asociado 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 las etiquetas y verificar su funcionamiento en intervalos regulares. Algunos ejemplos interesantes se pueden encontrar en la siguiente lista:

• [Generador hreflang de SISTRIX](https://www.sistrix.es/hreflang-guide/hreflang-generator/ “SISTRIX: generador online para el elemento “link” hreflang”): 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 una 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.

• Hreflang Checker: esta herramienta permite obtener rápidamente los atributos hreflang presentados de forma clara. La herramienta indica incluso la fuente de la que se han tomado los atributos en cuestión (HTML, http, etc.,). Además, ofrece sugerencias sobre cómo mejorar la implementación de hreflang.