Vivimos en plena era digital donde la globalización, internet y los teléfonos móviles marcan el mercado. Las empresas en este entorno expanden sus áreas de actuación, y es habitual que operen en otros países o zonas, con páginas web de servicios, tiendas online, páginas corporativas.
Para el SEO es importante indicarle a Google que una página web está destinada a un país o idioma específico, para que pueda indexarla en mejores posiciones para las búsquedas realizadas en ese país.
La etiqueta hreflang es una herramienta fundamental para marcar una página para un país o idioma específico, implementando en el código HTML del sitio web.
Tabla de contenidos
¿Qué son las etiquetas Hreflang?
El uso de la etiqueta hreflang en HTML permite indicar que una página web está enfocada para un país o idioma en concreto. Se trata de una etiqueta imprescindible para webs multiidioma o que operen en diferentes países.
Si analizamos el nombre de esta etiqueta, podemos apreciar que se trata de la unión de dos palabras, href (que se utiliza en HTML para crear enlaces) y lang (que hace referencia a idioma o lenguage, en inglés).
Existen tres razones por las que Google recomienda el uso de este tipo de etiquetas:
- Cuando el contenido principal de la web permanece en un único idioma, y solo se traduce el contenido, práctica habitual en los foros, por ejemplo.
- La web se encuentra en un único idioma, pero dispone de contenido específico en un lenguaje determinado.
- Los sitios multiidioma que tienen todo su contenido traducido a cada uno de los idiomas.
¿Cuáles son los beneficios de utilizar la etiqueta hreflang?
Las etiquetas hreflang aportan dos ventajas fundamentales para una página web, eCommerce o blog que las utilice:
Mejora el posicionamiento web local (en un país)
Esta etiqueta permite que Google separe el posicionamiento web por países, ayudando a mejorar el SEO internacional de sitio web. Al utilizar esta etiqueta, Google tendrá en cuenta el posicionamiento en cada uno de los idiomas de la web. Si se omite, Google se centrará en posicionarla en un solo idioma, pasando desapercibida en el resto.
Imaginemos una tienda online que opera en España, Francia y Alemania. Con el uso de etiquetas hreflang, Google posicionará el eCommerce en las búsquedas de cada país, mientras que, si no se implementan, sólo lo hará en español, y no aparecerá el negocio en los resultados de búsqueda de Francia y Alemania.
Evitar problemas por duplicidad de contenido
Al utilizar páginas multiidiomas se puede tener problemas de contenido duplicado que pueden perjudicar de forma seria el posicionamiento web del sitio. Aplicando de forma correcta la etiqueta hreflang, Google sabrá identificar este contenido y no lo confundirá con contenido duplicado, evitando cualquier problema de posicionamiento relacionado.
¿Cómo implementar hreflang con etiquetas HTML?
La etiqueta hreflang se debe incluir en la cabecera o de la página web, y deben incluirse tantas etiquetas como idiomas o países estén disponibles el sitio.
El formato para incluir las etiquetas hreflang en HTML es el siguiente:
<link rel="alternate" href="https://en.nombrededominio.com" hreflang="en"> <link rel="alternate" href="https://es.nombrededominio.com" hreflang="es"> <link rel="alternate" href="https://fr.nombrededominio.com" hreflang="fr"> El enlace que se incluye en el atributo href debe coincidir con la URL de la web para ese idioma. En el ejemplo anterior, hemos utilizado .es para España, pero podría ser perfectamente .com u otra extensión de dominio.
Si la web no utiliza un dominio diferente para cada idioma, sino que las páginas de los diferentes idiomas están en subdominios, debe utilizarse el siguiente formato.
<link rel="alternate" href="https://www.nombrededominio.com/en/" hreflang="en"> <link rel="alternate" href="https://www.nombrededominio.com/es/" hreflang="es"> <link rel="alternate" href="https://www.nombrededominio.com/fr/" hreflang="fr"> ¿Cómo verificar la implementación de hreflang?
Se puede comprobar si la implementación de las etiquetas hreflang se ha realizado con éxito. Para ello, se puede acudir a Google Search Console en la opción Tráfico de búsquedas / Segmentación internacional / Pestaña Idiomas, y se podrá comprobar si el atributo hreflang está bien implementado en cada URL.
Códigos de idioma y región
Utilizar de forma correcta los códigos de idioma y región admitidos por Google es fundamental para implementar de forma correcta la etiqueta hreflang.
- El valor del idioma debe estar en formato ISO 639-1.
- El valor de la región debe presentarse en formato ISO 3166-1 Alpha 2.
La importancia de la etiqueta x-default
Utilizar el valor x-default en la etiqueta hreflang es importante para indicar a Google que muestre esa URL en todos los idiomas para los que no se incluye una etiqueta hreflang.
Por ejemplo, Si se incluye etiquetas hreflang para España, Reino Unido y Francia, añadiendo una etiqueta hreflang con el valor x-default y una URL a la web en inglés, mostrará a todos los usuarios del resto de países (menos a los de España y Francia), la página en inglés.
<link rel="alternate" href="https://www.nombrededominio.com/en/" hreflang="x-default"> <link rel="alternate" href="https://www.nombrededominio.com/es/" hreflang="es"> <link rel="alternate" href="https://www.nombrededominio.com/fr/" hreflang="fr"> Otras maneras de implementar hreflang
Veamos cómo se pueden utilizar las etiquetas hreflang utilizando encabezados HTTP, sitemaps o en WordPress.
Encabezados HTTP
Es posible devolver encabezados HTTP con respuestas GET para informar a Google de las variaciones de idiomas y regiones que dispone una web. El formato de estos encabezados es el siguiente:
Link: <url>; rel = "alternate"; hreflang = "lang_code_x"</url> Añadiendo comas se pueden incluir más URLs con distintos idiomas.
Podemos ver que el encabezado cuenta con dos partes importantes:
- . Es la URL de la web correspondiente al código de idioma que se debe indicar a continuación. Se incluye entre los caracteres <> sin utilizar comillas.
- lang_code_x. Es un código del idioma o región al que se dirige la URL anterior. En este enlace se pueden consultar los códigos de cada idioma o región. Cabe resaltar que si el valor de lang_code_x es x-default, se indicará que esta versión de la web se debe mostrar para los usuarios de los idiomas que no se mencionan en la etiqueta hreflang.
Etiquetas hreflang con sitemaps
Los sitemaps son archivos en formato XML o TXT que contienen una lista de las URLs de un sitio que se utilizan para indicar a Google, enviándolos a través de Search Console, sobre URLs que debe rastrear e indexar.
Google permite el uso de estos archivos para recibir información sobre el idioma o región de todas las URLs de un sitio web.
Veamos un ejemplo de un archivo sitemap para indicar a Google que la web está localizada en tres idiomas (español, alemán e inglés) y que cuenta con contenido dirigido a personas que hablan alemán en Suiza.
<?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://www.example.com/</loc> <xhtml:link rel="alternate" hreflang="es" href="http://www.example.com/" /> <xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/de/" /> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/en/" /> </url> </urlset> Plugins multi idioma de WordPress que aplican la etiqueta hreflang
Para los sitios creados y gestionados con el CMS WordPress es muy sencillo trabajar con las etiquetas hreflang para sitios multi idiomas gracias al uso de plugins de traducción.
Por ejemplo, el plugin WPML, uno de los más populares y completos para traducir un sitio WordPress a múltiples idiomas, facilita la inclusión de las etiquetas necesarias en el head del sitio para los diferentes idiomas.
También existen complementos específicos para añadir los atributos hreflang, como son el Language selector related, que permite añadir en cada entradas y páginas del sitio el atributo hreflang, o el Hreflang Manager Codecanyon, que permite conectar páginas y post entre los diferentes idiomas.
Errores comunes que se cometen con las hreflang
Veamos algunos de los errores habituales que se cometen al utilizar las etiquetas hreflang:
Introducir valores incorrectos de los códigos de región y país
Los principales problemas relacionados con las etiquetas hreflang están relacionados con fallos cometidos a la hora de introducir o seleccionar los códigos de región o país. Si se introduce el código incorrecto de un país, Google no podrá posicionar la web para el mismo.
Cometer errores ortográficos o utilizar un formato no aceptado por Google (ISO 639-1 para idiomas, o ISO 3166-1 Alpha 2 para regiones) son dos de los errores habituales a la hora de implementar este tipo de etiquetas para multiidioma.
Los principales errores ortográficos que se suelen cometer al introducir el valor del código de país o región son:
- Guiones bajos. No se deben utilizar guiones bajos para separar los valores de país e idioma (práctica habitual en los programadores web).
- Uso de abreviaturas comunes. Estos códigos tienen sus propias abreviaturas, y las que se utilizan habitualmente no coinciden, como es el caso de ENG para el ingles, que se usa comúnmente, pero que en la etiqueta hreflang debe ser EN.
- No incluir el código del idioma. Google indica que siempre debe incluirse el código de idioma si se utiliza el código de país. Incluir el código de país solamente no tendrá efecto en la etiqueta hreflang.
- Orden erróneo de los códigos. Es necesario introducir los códigos de país e idioma de forma correcta, primero el código de idioma y luego el del país. Si se hace de forma inversa la etiqueta hreflang no será entendida por Google.
Otros errores
También se pueden dar otros errores relacionados con las etiquetas hreflang, como carencia de etiquetas de autorreferencia, conflictos con la etiqueta canonical, o que más de una URL tenga el mismo valor de hreflang.
Cabe destacar, que si la URL que se introduce en la etiqueta es incorrecta, el resultado no será el deseado a la hora de posicionar la web en Google.
Implementar la etiqueta hreflang es una práctica necesaria para los sitios web que operen en diferentes países u ofrezcan contenido en diferentes idiomas. Google utiliza esta etiqueta para saber cómo posicionar una web en distintos países o regiones de forma correcta.
Esta etiqueta también es muy útil para evitar penalizaciones en el posicionamiento web por contenido duplicado, algo que puede suceder en páginas multiidiomas con facilidad.
