Cómo informarle a Google que hay versiones localizadas de tu página

Si tienes múltiples versiones de una página para distintos idiomas o regiones, indícale a Google las diferentes variantes. De esa manera, la Búsqueda de Google podrá dirigir a los usuarios a la versión más adecuada de tu página según el idioma o la región.

Ten en cuenta que, incluso si no lo haces, es posible que Google igual encuentre versiones de tu página en otros idiomas. Sin embargo, lo mejor es que indiques de manera explícita las páginas específicas según el idioma o la región.

A continuación, se detallan algunas situaciones de ejemplo en las que se recomienda indicar las páginas alternativas:

  • Si el contenido principal está en un solo idioma y solo se traduce la plantilla, como la barra de navegación y el pie de página. Las páginas que incluyen contenido generado por usuarios, como los foros, suelen hacer eso.
  • Si el contenido incluye pequeñas variantes regionales con contenido similar en un solo idioma. Por ejemplo, puedes tener contenido en inglés orientado a EE.UU., Irlanda y el Reino Unido.
  • Si el contenido de tu sitio está traducido por completo a varios idiomas. Por ejemplo, si cuentas con versiones en inglés y alemán de cada página.

Las versiones localizadas de una página solo se consideran versiones duplicadas cuando el contenido principal de la página está sin traducir.

Métodos para indicar páginas alternativas

Existen tres maneras de indicarle a Google que hay múltiples versiones de una página según el idioma o la región:

Los tres métodos son equivalentes desde la perspectiva de Google y puedes elegir el que sea más conveniente para tu sitio. Si bien puedes usar los tres métodos al mismo tiempo, la Búsqueda no obtiene ningún beneficio (de hecho, puede ser mucho más difícil administrar tres implementaciones que elegir una).

Usa hreflang para informarle a Google sobre las variantes de tu contenido a fin de que podamos comprender que estas páginas son versiones localizadas del mismo contenido. Google no usa hreflang ni el atributo HTML lang para detectar el idioma de una página, en su lugar, usamos algoritmos.

Lineamientos para todos los métodos

  • Cada versión de idioma también debe incluirse en el detalle, además de todas las otras versiones.
  • Las URL alternativas deben estar completamente calificadas, incluido el método de transporte ("http" o "https"). Por lo tanto, debería ser:
    https://example.com/foo, no //example.com/foo ni /foo
  • No es necesario que las URL alternativas estén en el mismo dominio.
  • Si tienes varias URL alternativas orientadas a usuarios con el mismo idioma, pero en distintas regiones, te recomendamos que proporciones una URL genérica para los usuarios de ese idioma sin especificaciones geográficas. Por ejemplo, si tienes URL específicas para hablantes de inglés en Irlanda (en-ie), Canadá (en-ca) y Australia (en-au), debes proporcionar una página de inglés genérico (en) para las personas de EE.UU., Reino Unido y el resto de las ubicaciones en las que se habla inglés. Si lo deseas, puede ser una de las páginas específicas.
  • Si dos páginas no se dirigen la una a la otra, se ignorarán las etiquetas. De esa forma, una persona de otro sitio no podrá crear de manera arbitraria una etiqueta que se autodenomine como una versión alternativa de una de tus páginas.
  • Si se te complica mantener un conjunto completo de vínculos bidireccionales para cada idioma, puedes omitir algunos idiomas en ciertas páginas. Google procesará de todas formas las que se dirijan entre sí. Sin embargo, es importante incluir vínculos bidireccionales a los idiomas originales o dominantes en las páginas de idiomas que se hayan agregado recientemente. Por ejemplo, si tu sitio se creó originalmente en francés con las URL en .fr, es más importante vincular de manera bidireccional páginas más nuevas en español mexicano (.mx) y de España (.es) a la presencia sólida de .fr, en lugar de vincular de manera bidireccional las nuevas páginas de variantes en español (.mx y .es) entre sí.
  • Procura agregar una página de resguardo para idiomas sin coincidencias, especialmente en selectores de idioma o país, o bien en páginas principales con redireccionamiento automático. Usa el valor x-default:
    <link rel="alternate" href="https://example.com/" hreflang="x-default" />

Etiquetas HTML

Agrega elementos <link rel="alternate" hreflang="lang_code"... > al encabezado de tu página para indicarle a Google todas las variantes de idioma y región de una página. Esto es útil si no tienes un mapa del sitio ni la capacidad para especificar los encabezados de respuesta HTTP de tu sitio.

Para cada versión de la página, incluye un conjunto de elementos <link> en el elemento <head>, un vínculo para cada variante de la página, incluida la propia página. El conjunto de vínculos es idéntico para todas las versiones de la página. Consulta los lineamientos adicionales.

A continuación, se detalla la sintaxis de cada elemento link:

<link rel="alternate" hreflang="lang_code" href="url_of_page" />
Sintaxis
lang_code Un código regional o de idioma compatible al que se orienta esta versión de la página o x-default para que coincida con cualquier idioma que no esté detallado de manera explícita por una etiqueta hreflang en la página.
url_of_page Es la URL completamente calificada de la versión de esta página correspondiente a la región o el idioma especificado.

Las etiquetas <link> deben estar dentro de una sección<head> con un formato válido del código HTML. En caso de duda, pega el código de tu página renderizada en un validador de HTML para garantizar que los vínculos estén dentro del elemento <head>. Además, no combines etiquetas link para representaciones alternativas del documento, por ejemplo, no combines anotaciones hreflang con otros atributos, como media, en una sola etiqueta <link>.

Ejemplo

Example Widgets, Inc tiene un sitio web para usuarios de EE.UU., el Reino Unido y Alemania. Las siguientes URL incluyen básicamente el mismo contenido, pero con variaciones regionales:

URL con variaciones regionales
https://en.example.com/page.html Es la página principal en inglés genérico, que incluye información sobre tarifas de envíos internacionales desde EE.UU.
https://en-gb.example.com/page.html Es la página principal del Reino Unido que muestra precios en libras esterlinas.
https://en-us.example.com/page.html Es la página principal de EE.UU. que muestra los precios en dólares estadounidenses.
https://de.example.com/page.html Página principal en alemán
https://www.example.com/ Es la página predeterminada que no está orientada a ningún idioma ni región. Incluye selectores para que los usuarios puedan elegir estas opciones.

Ten en cuenta que los subdominios específicos de un idioma en estas URL (en, en-gb, en-us, de) no se utilizan en Google para determinar los usuarios objetivo de la página. Por este motivo, debes asignarlos explícitamente.

A continuación, se detalla el código HTML que debería aparecer en la sección <head> de todas las páginas enumeradas en la tabla de URL con variaciones regionales. De esa forma, se dirige a los hablantes de inglés genérico, inglés de EE.UU., inglés del Reino Unido y alemán a las páginas localizadas, y el resto verá una página principal genérica. La Búsqueda de Google muestra el resultado adecuado para el usuario según la configuración de su navegador.

<head>
 <title>Widgets, Inc</title>
  <link rel="alternate" hreflang="en-gb"
       href="https://en-gb.example.com/page.html" />
  <link rel="alternate" hreflang="en-us"
       href="https://en-us.example.com/page.html" />
  <link rel="alternate" hreflang="en"
       href="https://en.example.com/page.html" />
  <link rel="alternate" hreflang="de"
       href="https://de.example.com/page.html" />
 <link rel="alternate" hreflang="x-default"
       href="https://www.example.com/" />
</head>

Encabezados HTTP

Puedes mostrar un encabezado HTTP con la respuesta GET de tu página para informarle a Google todas las variantes de idioma y región de una página. Eso es útil para archivos que no son HTML (por ejemplo, PDF).

A continuación, se detalla el formato del encabezado:

Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
Sintaxis
<url_x> Es la URL completamente calificada de la página alternativa que corresponde a la string de configuración regional asignada al atributo hreflang asociado. La URL debe incluir las marcas < y > circundantes. Ejemplo: <https://www.google.com>
lang_code_x Es un código regional o de idioma compatible al que se orienta esta versión de la página o x-default para que coincida con cualquier idioma que no esté detallado de manera explícita por una etiqueta hreflang en la página.

Debes especificar un conjunto de valores <url>, rel="alternate" y hreflang para cada versión de la página, incluida la versión solicitada. Las versiones se separan con comas, como en el ejemplo que se muestra a continuación. El encabezado Link: que se muestra para cada versión de una página es idéntico. Consulta los lineamientos adicionales.

Ejemplo

A continuación, se incluye un encabezado Link: mostrado por un sitio que tiene tres versiones de un archivo PDF: una para hablantes de inglés, otra para hablantes de alemán de Suiza y una última para el resto de los hablantes de alemán.

Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
      <https://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch",
      <https://de.example.com/file.pdf>; rel="alternate"; hreflang="de"

Mapa del sitio

Puedes usar un mapa del sitio en formato XML para indicarle a Google todas las variantes de idioma y región de cada URL. Para hacerlo, agrega un elemento <loc> que especifique una única URL con entradas secundarias de <xhtml:link> que detallen cada variante de idioma o región de la página, incluida la página misma. Por lo tanto, si tienes 3 versiones de una página, el mapa del sitio tendrá entradas para las URLs de cada versión y cada entrada tendrá 3 entradas secundarias idénticas.

Reglas de los mapas del sitio:

  • Especifica el espacio de nombres "xhtml" de la siguiente forma: 
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
  • Crea un elemento <url> separado para cada URL como lo harías con cualquier otro mapa del sitio.
  • Cada elemento <url> debe incluir un elemento secundario <loc> que indique la URL de la página.
  • Cada elemento <url> debe tener un elemento secundario <xhtml:link rel="alternate" hreflang="supported_language-code"> que enumere todas las versiones alternativas de la página, incluida la página misma. No importa el orden de los elementos secundarios <xhtml:link>. Sin embargo, te recomendamos que los mantengas en el mismo orden para que te sea más fácil detectar errores. Los elementos secundarios no se consideran para el límite de URL de los mapas del sitio.
  • Sube el mapa del sitio a un directorio de tu sitio al que se aplique. Ten en cuenta que un mapa del sitio solo puede contener URLs subordinadas del directorio donde se aloja el mapa del sitio.
  • Nuestra documentación sobre mapas del sitio también se aplica a las extensiones de mapas del sitio. Asegúrate de seguir los lineamientos del mapa del sitio generales.
  • Consulta los lineamientos adicionales.

Ejemplo

A continuación, se detalla una página en idioma inglés orientada a hablantes de ese idioma de todo el mundo, que cuenta con versiones equivalentes de la página orientadas a hablantes de alemán de todo el mundo y a hablantes de alemán que viven en Suiza. Estas son todas las URLs presentes en tu sitio:

  • www.example.com/english/page.html se orienta a hablantes de inglés.
  • www.example.de/deutsch/page.html se orienta a hablantes de alemán.
  • www.example.de/schweiz-deutsch/page.html se orienta a hablantes de alemán en Suiza.

Este es el mapa del sitio de esas tres páginas:

<?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>https://www.example.com/english/page.html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="de"
               href="https://www.example.de/deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="de-ch"
               href="https://www.example.de/schweiz-deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="en"
               href="https://www.example.com/english/page.html"/>
  </url>
  <url>
    <loc>https://www.example.de/deutsch/page.html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="de"
               href="https://www.example.de/deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="de-ch"
               href="https://www.example.de/schweiz-deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="en"
               href="https://www.example.com/english/page.html"/>
  </url>
  <url>
    <loc>https://www.example.de/schweiz-deutsch/page.html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="de"
               href="https://www.example.de/deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="de-ch"
               href="https://www.example.de/schweiz-deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="en"
               href="https://www.example.com/english/page.html"/>
  </url>
</urlset>

Códigos de idioma y región compatibles

El valor del atributo hreflang consta de uno o, de forma opcional, dos valores, separados por un guion. Por ejemplo, en-US. El primer código del atributo hreflang es el código de idioma (en formato ISO 639-1) seguido de un segundo código opcional que representa el código regional (en formato ISO 3166-1 Alpha 2) de una URL alternativa.

Para realizar la segmentación a hablantes de diferentes idiomas en Bélgica, puedes usar los siguientes códigos de idioma y región:

  • Bueno (alemán para los usuarios de Bélgica): de-be
  • Bueno (holandés para los usuarios de Bélgica): nl-be
  • Bueno (francés para los usuarios de Bélgica): fr-be
  • Malo porque el primer código es para el idioma (be es el código de idioma bielorruso): be

Para simplificar el etiquetado, puedes especificar un código de idioma por sí mismo. Por ejemplo:

  • de: Contenido en idioma alemán, independientemente de la región
  • en-GB: Contenido en idioma inglés para usuarios de Gran Bretaña
  • de-ES: Contenido en idioma alemán para usuarios de España

Para las variantes de la secuencia de comandos de idioma, la secuencia adecuada deriva del país. Por ejemplo, si usas zh-TW para usuarios de Taiwán, automáticamente se deriva la secuencia de comandos del idioma (por ejemplo, chino tradicional). También puedes especificar la secuencia de comandos misma de manera explícita usando ISO 15924, tal como se describe a continuación:

  • zh-Hant: Chino (tradicional)
  • zh-Hans: Chino (simplificado)

Al igual que con otros códigos de idioma, también puedes especificar una región opcional. Por ejemplo, usa zh-Hans-US a fin de especificar chino (simplificado) para usuarios de Estados Unidos.

Usa el valor x-default para idiomas sin coincidencia

El valor reservado x-default se usa cuando no hay ningún otro idioma o región que coincida con la configuración de navegador del usuario. Se recomienda este valor a fin de especificar la página de resguardo para los usuarios cuya configuración de idioma no coincida con ninguna de las versiones localizadas de tu sitio. Si bien puedes usar el valor x-default para cualquier página, se diseñó para las páginas de selector de idioma, por lo que funcionará mejor en ellas.

No es necesario especificar un código de idioma para el valor x-default; la página está orientada a usuarios cuya configuración de idioma no coincide en tu sitio, por lo que el idioma de la página es irrelevante.

Para implementar la anotación hreflang="x-default", agrega una etiqueta link adicional a las anotaciones hreflang existentes y configura el atributo href en la URL a la que quieres que lleguen los usuarios si tu sitio no admite su idioma. Por ejemplo, una implementación de HTML podría verse así: 

<link rel="alternate" href="https://example.com/en-gb" hreflang="en-gb" />
<link rel="alternate" href="https://example.com/en-us" hreflang="en-us" />
<link rel="alternate" href="https://example.com/en-au" hreflang="en-au" />
<link rel="alternate" href="https://example.com/country-selector" hreflang="x-default" />

Solución de problemas

Errores comunes

Los siguientes son los errores más comunes en el uso de hreflang:

  • Falta el vínculo que se mostrará: Si la página X se vincula con Y, esta última debe incluir un vínculo para volver a la página X. Si este no es el caso de todas las páginas que se incluyan anotaciones hreflang, es posible que se ignoren esas anotaciones o que no se interpreten correctamente. Por ejemplo, si usas este vínculo en https://de.example.com/index.html: 
    <link rel="alternate" hreflang="en-gb" href="https://en-gb.example.com/index.html" />
    También debes tener un vínculo hreflang en https://en-gb.example.com/index.html que apunte a la versión de del contenido: 
    <link rel="alternate" hreflang="de" href="https://de.example.com/index.html" />
  • Códigos de idioma incorrectos: Asegúrate de que todos los códigos que uses identifiquen el idioma correcto (en formato ISO 639-1) y, de manera opcional, la región (en formato ISO 3166-1 Alpha 2) de una URL alternativa. No es válido especificar solo la región.

Cómo depurar errores de hreflang

Hay muchas herramientas de terceros disponibles que puedes usar para depurar anotaciones hreflang. A continuación, se detallan algunas de las más populares. Google no mantiene ni verifica esos recursos.