hreflang: atributo HTML para webs mu­l­ti­li­n­gües

Quien quiera presentar su proyecto online a un público in­te­r­na­cio­nal y, por tanto, publicar su página web en varios idiomas se enfrenta a di­fe­re­n­tes tareas, entre ellas, la op­ti­mi­za­ción de páginas mu­l­ti­li­n­gües. Los crawlers solo pueden ca­te­go­ri­zar co­rre­c­ta­me­n­te di­fe­re­n­tes versiones li­n­güí­s­ti­cas y pre­se­n­tar­las al público apropiado basándose en las medidas SEO es­pe­cí­fi­cas para cada país. Uno de los in­s­tru­me­n­tos de SEO más eficaces para este propósito es la im­ple­me­n­ta­ció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 al­te­r­na­ti­vas de una página web. El atributo indica a los crawlers que el contenido de la página actual está di­s­po­ni­ble en di­fe­re­n­tes versiones li­n­güí­s­ti­cas. La URL de la página web en cuestión ha de in­te­grar­se dentro de un elemento “link” de HTML e incluir el código del idioma co­rre­s­po­n­die­n­te. Si se quiere, por ejemplo, ca­ra­c­te­ri­zar a una página web en inglés como tal, se im­ple­me­n­ta 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á au­to­má­ti­ca­me­n­te a la versión inglesa a todos aquellos usuarios con di­re­c­cio­nes IP que sugieran un contexto an­glo­sa­jón.

La etiqueta hreflang también se im­ple­me­n­ta 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 me­n­cio­na­do an­te­rio­r­me­n­te, es co­n­ce­bi­ble una división de los usuarios an­glo­sa­jo­nes en hablantes de inglés no­r­te­ame­ri­cano ("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 es­tá­n­da­res ISO 639 y ISO 3166.

¿Por qué vale la pena im­ple­me­n­tar 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 mu­l­ti­li­n­gües, es común que se im­ple­me­n­te el mismo contenido, pero traducido, a di­fe­re­n­tes mercados. Para aquellos países en los que se habla el mismo idioma, la situación es aún más co­m­pli­ca­da. A causa de di­fe­re­n­cias re­gio­na­les o cu­l­tu­ra­les (vo­ca­bu­la­rio, moneda, in­fo­r­ma­ció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 im­po­r­ta­n­te enviar señales claras a los motores de búsqueda para evitar que ide­n­ti­fi­quen el contenido como contenido duplicado.

Mientras la etiqueta canónica declara a una URL como variante dominante y excluye a todas las otras versiones al­te­r­na­ti­vas de la in­de­xa­ción, el atributo hreflang señala al motor de búsqueda qué versión se debe mostrar a un público es­pe­cí­fi­co (idioma y/o país). Por esta razón, esta etiqueta HTML resulta de gran utilidad si quieres lograr el éxito a nivel in­te­r­na­cio­nal con tu proyecto web, así como contar con el contenido mu­l­ti­li­n­güe apropiado. Aunque el atributo no tiene in­flue­n­cia directa en la posición de los motores de búsqueda, im­ple­me­n­tar­lo de la forma adecuada tendrá sus frutos a largo plazo, ya que tanto el crawler como los usuarios de di­fe­re­n­tes regiones podrán acceder más fá­ci­l­me­n­te a tu página web.

Es­tru­c­tu­ra 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 co­rre­s­po­n­die­n­tes a una URL es­pe­ci­fi­ca­da. Aunque solo es posible uti­li­zar­lo en el en­ca­be­za­do del documento HTML, puede hacerse tantas veces como sea necesario. Para enlazar las di­fe­re­n­tes versiones li­n­güí­s­ti­cas con hreflang, se necesitan tanto el hreflang tag como los atributos rel y href. Las funciones de estos tres co­m­po­ne­n­tes son:

• rel: rel es un atributo obli­ga­to­rio que es­pe­ci­fi­ca la relación entre el documento su­b­ya­ce­n­te y el documento enlazado. El valor alternate indica al motor de búsqueda que el documento externo contiene una versión al­te­r­na­ti­va de la página web.

• hreflang: hreflang describe el idioma en el que está escrito el documento vinculado y, op­cio­na­l­me­n­te, también puede ide­n­ti­fi­car la región para la que es relevante. En lingoes.net puedes encontrar un breve resumen de las co­m­bi­na­cio­nes posibles.

• href: el atributo href es­pe­ci­fi­ca dónde se encuentra la versión idio­má­ti­ca al­te­r­na­ti­va y, como valor al­te­r­na­ti­vo, 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 de­te­r­mi­nar au­to­má­ti­ca­me­n­te 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 po­te­n­cia­les si los usuarios, al encontrar la página en un idioma diferente al que esperaban, deciden aba­n­do­nar­la. 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 pre­de­te­r­mi­na­da para todos los usuarios para los que no existe una versión de idioma es­pe­ci­fi­ca­da 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 in­te­r­na­cio­na­les, que trata el elemento con más detalle.

¿Cómo se im­ple­me­n­ta hreflang?

El enlace con la etiqueta hreflang puede im­ple­me­n­tar­se de tres formas distintas. La forma más común es a través del en­ca­be­za­do del documento HTML co­rre­s­po­n­die­n­te. Si el documento no estuviese en formato HTML (por ejemplo, un archivo PDF), el elemento puede in­se­r­tar­se en la cabecera HTTP. Asimismo, también se puede incluir el atributo es­pe­cí­fi­co de idioma o país en el sitemap.

Para incluir el enlace en una cabecera HTTP, deben también re­fe­re­n­ciar­se todas las versiones del idioma di­s­po­ni­bles. La sintaxis aplicada se di­fe­re­n­cia solo en algunos aspectos del enlace para en­ca­be­za­do 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 in­te­r­na­cio­na­les de gran en­ve­r­ga­du­ra. Si ofreces co­n­te­ni­dos mu­l­ti­li­n­gües a gran escala, la im­ple­me­n­ta­ción de HTML estándar supondría un esfuerzo elevado. Incluso en los sitemaps, es necesario enumerar in­di­vi­dua­l­me­n­te todas las versiones de idioma in­di­vi­dua­l­me­n­te, es­pe­ci­fi­ca­n­do la URL co­rre­s­po­n­die­n­te. Cada URL se es­pe­ci­fi­ca además mediante un elemento xhtml:link, que hace re­fe­re­n­cia a las demás versiones di­s­po­ni­bles:

<?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 li­n­güí­s­ti­ca de su artículo.

Para co­m­pre­n­der el campo de apli­ca­ción del atributo hreflang, hay una ca­ra­c­te­rí­s­ti­ca fu­n­da­me­n­tal: el atributo une uno o más do­cu­me­n­tos bi­di­re­c­cio­na­les y no, como en una re­di­re­c­ción, uni­di­re­c­cio­na­les. En otras palabras, no es su­fi­cie­n­te 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 es­tru­c­tu­ra de tu proyecto web y adaptar los re­su­l­ta­dos de la búsqueda a tus usuarios cuando el hreflang tag se ha im­ple­me­n­ta­do en todos los do­cu­me­n­tos en todas las di­re­c­cio­nes di­s­po­ni­bles (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 en­ca­be­za­dos de los cuatro do­cu­me­n­tos 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 in­te­gra­ción del hreflang tag

Los an­te­rio­res ejemplos del atributo hreflang de­mue­s­tran que la im­ple­me­n­ta­ción de ca­te­go­ri­za­ción de páginas web mu­l­ti­li­n­gües au­to­ma­ti­za­da no es una tarea tan co­m­pli­ca­da. Sin embargo, no se debe su­b­e­s­ti­mar el esfuerzo necesario y el potencial de errores, algo que va de la mano con la re­ci­pro­ci­dad de sus numerosas re­fe­re­n­cias. En ocasiones, esto da lugar a pequeños o grandes fallos que bien pueden afectar solo a las páginas in­di­vi­dua­les, pero que en parte también pueden poner en peligro la fu­n­cio­na­li­dad del hreflang tag para todo el proyecto web. A co­n­ti­nua­ción, resumimos algunas de las fuentes de error más comunes:

hreflang no está im­ple­me­n­ta­do al nivel de la URL

La etiqueta hreflang siempre tiene que estar vinculada a una URL es­pe­cí­fi­ca, por lo que debe aplicarse a ese nivel. En otras palabras, si solo se asigna el atributo a las URL pri­n­ci­pa­les de cada versión, la asi­g­na­ción au­to­má­ti­ca de usuarios solo se hará para dichas páginas de inicio y no para el proyecto web completo. Así, una de las tareas es im­ple­me­n­tar el elemento “link” para todas las su­b­pá­gi­nas o URL in­di­vi­dua­les o, como al­te­r­na­ti­va, trabajar con la variante del sitemap.

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

Muchos ad­mi­ni­s­tra­do­res de páginas web etiquetan co­rre­c­ta­me­n­te 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 es­tru­c­tu­ra de enlaces queda in­co­m­ple­ta y no puede ser in­te­r­pre­ta­da por Google u otros motores de búsqueda.

También debes es­pe­ci­fi­car una página pre­de­te­r­mi­na­da usando hreflang x-default, ya que de lo contrario no estarías apro­ve­cha­n­do el potencial de op­ti­mi­za­ción.

Códigos ISO in­co­rre­c­tos

Cuando se trata de los códigos de país o región, muchos pro­fe­sio­na­les 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 co­m­bi­na­ción “en-uk” parece ser una elección acertada, en caso de que el contenido de la web esté dirigido es­pe­cí­fi­ca­me­n­te a la audiencia del Reino Unido la co­m­bi­na­ción correcta sería “en-gb”. Comprueba siempre las abre­via­tu­ras de países que utiliza el estándar ISO 639-1.

Re­fe­re­n­cia a di­re­c­cio­nes URL antiguas o in­e­xi­s­te­n­tes

Una causa común de etiquetas hreflang erróneas es usar URL que ya no existen. Esto tiene lugar cuando se au­to­ma­ti­za su inclusión en todas las su­b­pá­gi­nas, pero no todas estas su­b­pá­gi­nas tienen una versión di­s­po­ni­ble en cada variante li­n­güí­s­ti­ca ofrecida. También se pueden encontrar URL obsoletas si se han realizado cambios en la es­tru­c­tu­ra de enlaces y no se han tra­n­s­fe­ri­do a los elementos “link”.

Uso in­co­n­si­s­te­n­te de la etiqueta canonical y la etiqueta hreflang

Muchos pro­vee­do­res de páginas web in­te­r­na­cio­na­les im­ple­me­n­tan la canonical tag para que los crawlers no indexen su­b­pá­gi­nas con el mismo contenido por partida doble. Aunque este método es una excelente opción a la hora de so­lu­cio­nar el problema del contenido duplicado, su uso es in­co­m­pa­ti­ble con el atributo hreflang. Si una subpágina contiene ambas etiquetas, los bu­s­ca­do­res reciben in­fo­r­ma­ción co­n­tra­di­c­to­ria e ignoran las dos señales.

La hreflang tag solo debería im­ple­me­n­tar­se para páginas que no refieran a otras páginas mediante la canonical tag.

Los ajustes en Google Webmaster Tools envían señales co­n­tra­di­c­to­rias

Quien registre su página web en Google Webmaster Tools (Search Console) puede definir el enfoque in­te­r­na­cio­nal de un dominio o URL si utiliza dominios de nivel superior genéricos (en el caso de las ex­te­n­sio­nes de dominios de país, Google asume au­to­má­ti­ca­me­n­te la asi­g­na­ción geo­grá­fi­ca del contenido co­rre­s­po­n­die­n­te). No cabe duda de que esto beneficia a los ad­mi­ni­s­tra­do­res de páginas web, pues Google utiliza esta in­fo­r­ma­ción para cla­si­fi­car un proyecto de manera óptima. Por ello, merece la pena informar a Google sobre las versiones lo­ca­li­za­das de tu proyecto web.

Si, además, tu página web incluye el atributo hreflang, la in­fo­r­ma­ción no puede ser co­n­tra­di­c­to­ria. De lo contrario, podría suceder, por ejemplo, que una página solo se marcase con un código de idioma y sin es­pe­ci­fi­ca­ción regional, mientras que al mismo tiempo en la he­rra­mie­n­ta para we­b­ma­s­te­rs se indica un país es­pe­cí­fi­co.

hreflang: he­rra­mie­n­tas útiles

Queda claro que integrar etiquetas hreflang en todas las páginas HTML re­le­va­n­tes de un proyecto web lleva asociado un gran trabajo. Cuanto más compleja sea la página web, mayor es la po­si­bi­li­dad de que se presenten problemas durante su im­ple­me­n­ta­ción, incluso si conoces y tienes en cuenta las posibles fuentes de error. Por esta razón, es re­co­me­n­da­ble utilizar he­rra­mie­n­tas para crear las etiquetas y verificar su fu­n­cio­na­mie­n­to en in­te­r­va­los regulares. Algunos ejemplos in­te­re­sa­n­tes 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 en­ca­be­za­do HTML de tus co­n­te­ni­dos mu­l­ti­li­n­gües. Para este propósito, basta con in­tro­du­cir las di­re­c­cio­nes URL y los códigos de país e idioma co­rre­s­po­n­die­n­tes y, por último, hacer clic en “Generar código”. Adi­cio­na­l­me­n­te es posible definir una página por defecto.

• hreflang Validator de SISTRIX: si ya has im­ple­me­n­ta­do re­fe­re­n­cias para las di­fe­re­n­tes 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 he­rra­mie­n­tas de análisis para optimizar tu proyecto. Bajo el título “Se­g­me­n­ta­ción in­te­r­na­cio­nal”, el panel de control pro­po­r­cio­na in­fo­r­ma­ción sobre las etiquetas hreflang uti­li­za­das, in­clu­ye­n­do una lista de backlinks ausentes.

• Hreflang Checker: esta he­rra­mie­n­ta permite obtener rá­pi­da­me­n­te los atributos hreflang pre­se­n­ta­dos de forma clara. La he­rra­mie­n­ta indica incluso la fuente de la que se han tomado los atributos en cuestión (HTML, http, etc.,). Además, ofrece su­ge­re­n­cias sobre cómo mejorar la im­ple­me­n­ta­ción de hreflang.