Cómo agregar etiquetas Hreflang: HTML, encabezados y métodos de mapa del sitio

Una guía paso a paso para agregar etiquetas hreflang con ejemplos de HTML listo para copiar, encabezado HTTP y mapa del sitio XML, códigos de idioma válidos, notas de plataforma y una lista de verificación previa a la publicación.
Sin datos de tarjeta Sin compromiso

· Actualizado · Alex B · Blog

Para agregar etiquetas hreflang, enumere cada idioma o versión regional de una página, proporcione a cada una un código de idioma (opcionalmente con una región, como en-GB), y luego poner el mismo conjunto completo de <link rel="alternate" hreflang="…" href="…"> líneas en el <head> de cada versión, incluida una línea para la página misma. Si no puede editar el encabezado HTML, puede colocar la misma información en los encabezados HTTP o en su mapa del sitio XML; Google trata los tres métodos como equivalentes.

Conclusiones clave

  • Hreflang aparece en páginas que tienen equivalentes traducidos o regionales en otras URL. Los sitios en un solo idioma no lo necesitan.
  • Utilice un solo método: encabezado HTML, encabezados HTTP o mapa del sitio. Google dice que combinarlos no aporta ningún beneficio.
  • Cada versión se enumera a sí misma y a todas las demás versiones, con valores absolutos https:// URL. Las parejas que no se vinculan entre sí se ignoran.
  • Los códigos son un lenguaje ISO 639-1, luego una región ISO 3166-1 Alpha 2 opcional: fr, fr-CA, en-GB. Nunca una región sola.
  • Agregar x-default para visitantes que no coinciden con ninguna de sus versiones.
  • En WordPress, Shopify y la mayoría de las herramientas de traducción, se puede generar hreflang para usted. Compruébelo una vez y luego vuelva a verificarlo después de los cambios de tema o complemento.

Antes de comenzar: mapea tus versiones

Hreflang describe las relaciones, por lo que necesita la lista completa de URL relacionadas antes de escribir una sola etiqueta. Haz una tabla pequeña para cada tipo de página:

VersiónCódigoURL
Inglés (predeterminado)enhttps://example.com/pricing/
Francésfrhttps://example.com/fr/pricing/
Francés para Canadáfr-CAhttps://example.com/fr-ca/pricing/
Retrocesox-defaulthttps://example.com/pricing/

En esta tabla entran tres decisiones.

1. ¿Solo idioma o idioma más región? Utilice un código de idioma simple (fr) a menos que el contenido realmente difiera según el país, por ejemplo en precios, moneda, ortografía o texto legal. La orientación de Google es que cuando tienes varias versiones regionales de un idioma, es una buena idea proporcionar también una versión genérica para hablantes de ese idioma en otros lugares (Centro de búsqueda de Google). En la tabla anterior, fr atrapa a francófonos en Francia, Bélgica y en todas partes, mientras fr-CA es para Canadá.

2. ¿Qué códigos son válidos? Google admite códigos de idioma ISO 639-1 y códigos de región ISO 3166-1 Alpha 2, además de códigos de script ISO 15924 para casos como zh-Hant y zh-Hans. Establece que otros códigos, como es-419, no son compatibles y que se reservan valores como EU, UN y UK no tienen ningún efecto. Para el Reino Unido, escriba en-GB. Nuestro Lista de códigos de idioma de Hreflang tiene los comunes en un solo lugar.

3. ¿cuál es la alternativa? x-default nombra la página para los visitantes cuya configuración de idioma no coincide con ninguna de sus versiones. Google dice que fue diseñado para páginas selectoras de idiomas y que funciona mejor allí, pero muchos sitios lo apuntan a su página de idioma principal.

Confirme también que cada URL sea la dirección final: devuelve 200, no se redirige y es canónica. La documentación canónica de Google dice que cuando usas hreflang, debes especificar una página canónica en el mismo idioma (Centro de búsqueda de Google).

Método 1: agregue etiquetas hreflang al encabezado HTML

Este es el método que utilizan la mayoría de los sitios. Google lo recomienda cuando no tienes un mapa del sitio o no puedes configurar encabezados de respuesta HTTP.

Para la página de precios de la tabla, cada una de las tres versiones obtiene exactamente este bloque dentro <head>:

<link rel="alternate" hreflang="en" href="https://example.com/pricing/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/pricing/" />
<link rel="alternate" hreflang="fr-CA" href="https://example.com/fr-ca/pricing/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/pricing/" />

Paso a paso:

  1. Abra la plantilla que genera <head> para ese tipo de página (en WordPress, generalmente el tema header.php o un gancho; en un sitio estático, el archivo de diseño).
  2. Genere el bloque a partir de datos, no a mano. Las etiquetas escritas a mano en cientos de páginas no están sincronizadas. Cree la lista a partir de la misma fuente que crea las URL de su idioma.
  3. Incluya la página actual en su propia lista. Google: “Cada versión de idioma debe enumerarse a sí misma, así como todas las demás versiones de idioma”
  4. Utilice URL absolutas. https://example.com/fr/pricing/, no /fr/pricing/ o //example.com/fr/pricing/.
  5. Conservar cada uno <link> monoparental. Google advierte que no se debe combinar hreflang con otros atributos como media en una sola etiqueta.
  6. Compruebe que la cabeza esté bien formada. Las etiquetas deben estar dentro de un archivo válido <head>. Si un script o un elemento perdido se rompe antes de tiempo, es posible que Google no los vea. Pegue el HTML renderizado en un validador si no está seguro.

Método 2: agregar hreflang con encabezados HTTP

Utilice encabezados para archivos que no tengan encabezado HTML, como archivos PDF. El servidor devuelve un Link: encabezado que enumera cada versión, incluida la solicitada, y el encabezado es idéntico para cada versión:

Link: <https://example.com/guide.pdf>; rel="alternate"; hreflang="en",
      <https://example.com/fr/guide.pdf>; rel="alternate"; hreflang="fr",
      <https://example.com/guide.pdf>; rel="alternate"; hreflang="x-default"

Las URL van dentro de corchetes angulares y las entradas están separadas por comas. En Apache o nginx, puede configurar esto por archivo o por ubicación; en una CDN, con una regla de encabezado de respuesta. Pruébalo con curl -I en cada URL para confirmar que el encabezado aparece en todas ellas.

Método 3: agregue hreflang a su mapa del sitio XML

Un mapa del sitio mantiene todas las anotaciones en un solo archivo, lo que se adapta a sitios o equipos grandes que no pueden cambiar las plantillas. Las reglas de la documentación de Google:

  • Declarar el espacio de nombres xmlns:xhtml="http://www.w3.org/1999/xhtml" en <urlset>.
  • Crea un separado <url> entrada para cada versión, con la suya propia <loc>.
  • Dentro de cada entrada, agregue una <xhtml:link rel="alternate" hreflang="…" href="…"/> para cada versión, incluida ella misma. Tres versiones significan tres entradas, cada una con los mismos tres hijos.
  • El orden no importa y los enlaces secundarios no cuentan para el límite de URL del mapa del sitio.
<?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://example.com/pricing/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/pricing/"/>
    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/pricing/"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/pricing/"/>
  </url>
  <url>
    <loc>https://example.com/fr/pricing/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/pricing/"/>
    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/pricing/"/>
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/pricing/"/>
  </url>
</urlset>

Envíe el mapa del sitio en Search Console. Tenga en cuenta que un mapa del sitio solo puede enumerar las URL en el directorio donde está alojado, por lo que un mapa del sitio en /fr/ No se pueden enumerar las páginas en inglés desde la raíz.

¿Qué método debes elegir?

Si tu situación es…Uso
Un CMS o sitio donde usted (o un complemento) controla el cabezalEtiquetas HTML
PDF y otras descargas en varios idiomasEncabezados HTTP
Miles de URL o plantillas que no puedes cambiarMapa del sitio
Una plataforma o herramienta de traducción que genera hreflangSu salida incorporada; no agregue un segundo conjunto

La posición de Google es que los tres métodos son equivalentes y que usarlos todos no da “ningún beneficio en la búsqueda”, solo más para mantener (Centro de búsqueda de Google).

Agregar hreflang en plataformas comunes

WordPress. WordPress en sí no tiene una capa multilingüe, por lo que hreflang proviene de lo que crea tus páginas traducidas. Verifique la configuración de su complemento de traducción antes de escribir el código y asegúrese de que su complemento de SEO no genere también un conjunto conflictivo. Si utiliza ConveyThis, consulte la sección siguiente.

Shopify. Shopify genera hreflang automáticamente desde la configuración de sus mercados e idiomas cuando cada mercado o idioma tiene su propio dominio, subdominio o subcarpeta, y agrega un x-default apuntando al dominio primario. La función está activada de forma predeterminada y se puede desactivar en las preferencias de la Tienda en línea (Shopify Centro de ayuda). Si lo desactiva para administrar las etiquetas usted mismo, usted se vuelve responsable de mantener cada conjunto completo.

Sitios estáticos y aplicaciones personalizadas. Genere el bloque en su diseño a partir de un mapa de un solo idioma (un JSON o archivo de configuración que enumera cada configuración regional y su patrón de URL). Construya el mapa del sitio a partir del mismo mapa para que los dos nunca estén en desacuerdo.

Una lista de verificación antes de publicar

  1. El mismo conjunto de etiquetas aparece en cada versión de la página.
  2. Cada versión se incluye a sí misma.
  3. Cada URL es absoluta, devuelve 200 y es autocanónica.
  4. Los códigos son primero el idioma; las regiones son códigos ISO reales (GB, no UK).
  5. Hay uno x-default.
  6. Sólo se utiliza un método.
  7. El contenido visible de la página en realidad está en el idioma que afirma la etiqueta. Google detecta el idioma a partir del contenido visible, no del código (Centro de búsqueda de Google), por lo que una página “en francés” que esté mayoritariamente en inglés no se comportará como una página en francés.

Porque el informe de segmentación internacional de Search Console se retiró en 2022 (Ayuda de la consola de búsqueda), verifique con un rastreador que siga a hreflang e informe los enlaces de retorno faltantes. La propia página de Google menciona la herramienta de prueba hreflang de Merkle y el generador de Aleyda Solis como opciones populares de terceros que no mantiene. Si una herramienta dice que no encontró nada en absoluto, trabaje Nuestra guía sobre la advertencia “sin etiquetas hreflang”.

Cómo ConveyThis agrega hreflang para usted

Cuando traduces un sitio con ConveyThis y publicas cada idioma en su propia subcarpeta (/fr/) o subdominio (fr.example.com), hreflang se genera automáticamente. En WordPress, el complemento imprime los enlaces alternativos en el encabezado de cada página, uno por idioma más un x-default apuntando a su página en idioma original e incluye los idiomas alternativos en su mapa del sitio. Las etiquetas se crean a partir de la misma lista de idiomas y reglas de URL que las páginas traducidas, por lo que agregar un idioma actualiza todo el conjunto a la vez.

Eso le deja dos cosas que verificar: que su caché o complemento de optimización sirva el encabezado intacto y que ningún otro complemento establezca un punto canónico que dirija las páginas traducidas al original. El Descripción general del SEO multilingüe muestra cómo las URL traducidas, los metadatos y hreflang funcionan juntos Personalización de URL traducidas explica cómo localizar babosas y el Integración de WordPress La página cubre la configuración del complemento. Para cada caso extremo, desde variantes regionales hasta paginación, consulte Guía completa de implementación de hreflang.

Preguntas frecuentes

¿A dónde van exactamente las etiquetas hreflang?

En <head> de cada versión lingüística de una página, como <link rel="alternate" hreflang="code" href="absolute-url"> elementos. Alternativamente, coloque la misma información en un HTTP Link: encabezado o en su mapa del sitio XML.

¿Necesito una etiqueta hreflang para la página en sí?

Sí. Google requiere que cada versión se incluya a sí misma, así como todas las demás versiones. El conjunto de enlaces es idéntico en todas las versiones.

¿es en-UK un código hreflang válido?

No. Reino Unido es un código reservado y no tiene ningún efecto en la búsqueda de Google. Utilice en-GB para inglés en el Reino Unido.

¿Debo agregar hreflang en el HTML y el mapa del sitio?

No. Google trata los métodos como equivalentes y dice que usar más de uno no aporta ningún beneficio de búsqueda y al mismo tiempo hace que la configuración sea más difícil de mantener.

¿Cuánto tiempo pasará hasta que Google utilice nuevas etiquetas hreflang?

Google tiene que volver a rastrear las páginas involucradas, por lo que depende de la frecuencia con la que se rastreen sus páginas. Asegúrese de que todas las versiones sean indexables y estén vinculadas desde su sitio, y verifique las URL traducidas con Inspección de URL en Search Console.

Omitir el trabajo manual

Mantener hreflang completo en cada página e idioma es más fácil cuando el mismo sistema crea las URL traducidas y las etiquetas. Puedes empieza con ConveyThis y conecta tu sitio.

Compartir:
G2 High Performer Spring 2023
G2 Easiest Setup Fall 2024
G2 Best Support Spring 2025