En esta publicación
Si estás creando un sitio web multilingüe, probablemente hayas visto el término etiquetas hreflang. De hecho, probablemente por eso estés leyendo este artículo ahora mismo.
Entonces, ¿qué es hreflang? ¿Y por qué debes preocuparte por las etiquetas hreflang si usas varios idiomas en tu sitio web?
Bueno, si sigues leyendo, podrás responder a esas preguntas, ¡y muchas más!
En nuestra guía completa, vas a aprender todo lo que necesitas saber sobre las etiquetas hreflang, incluyendo lo siguiente:
- ¿Qué son las etiquetas hreflang?
- Impactos del SEO Hreflang
- Algunos ejemplos de hreflang de cuándo debes usarlos
- Implementación de hreflang, incluida una forma sencilla de configurar etiquetas hreflang si usas WordPress
¡Vamos a empezar!
¿Qué son las etiquetas hreflang?
Las etiquetas hreflang son pequeños fragmentos de código oculto que identifican el idioma y la región geográfica de una página de tu sitio web.
Los motores de búsqueda pueden usar estas etiquetas para entender su sitio y proporcionar el contenido más relevante a los usuarios.
Más específicamente, las etiquetas hreflang te permiten vincular contenido entre sí para que los motores de búsqueda puedan entender que estas páginas están conectadas, pero dirigidas a diferentes idiomas o regiones.
Por ejemplo, digamos que tienes una página en inglés en https://yoursite.com/hello-world/ y luego el mismo contenido traducido al español en https://yoursite.com/es/hola-mundo/.
Con las etiquetas hreflang, puedes decirles a los motores de búsqueda: “Oigan, estas dos páginas tienen el mismo contenido o propósito, pero una página es para angloparlantes y la otra página es para hispanohablantes”.
También puedes ir más allá solo idioma y también indicar a los motores de búsqueda que tus páginas están dirigidas a diferentes áreas geográficas con fines de localización.
Por ejemplo, “Oye, estas dos páginas tienen el mismo contenido y ambas están en inglés, pero una es para personas en EE. UU. y la otra es para personas en el Reino Unido”.
Aquí tienes un ejemplo de cómo se ven las etiquetas hreflang en el HTML de tu sitio:
Impacto e Importancia del Hreflang en el SEO
Si bien las etiquetas hreflang no son un factor de posicionamiento SEO principal de la misma manera que lo son los backlinks y la investigación de palabras clave, usarlas correctamente es una parte importante de SEO on-page para sitios multilingües o sitios con múltiples ubicaciones.
Hay tres principales Beneficios SEO de usar etiquetas hreflang.
1. Prevenir problemas de contenido duplicado
El primero es que hreflang ayuda a prevenir problemas de contenido duplicado en tu sitio. Por ejemplo, digamos que tienes dos casi páginas de contenido idénticas, excepto que una se dirige a personas de habla inglesa en los EE. UU. y la otra se dirige a personas de habla inglesa en Australia.
Al añadir la etiqueta hreflang correspondiente para el idioma y la región, puedes dejar claro a los motores de búsqueda que estas páginas no son contenido duplicado, sino que están optimizadas para diferentes públicos.
2. Optimizar páginas para diferentes públicos de búsqueda
Sigamos con el ejemplo anterior. Además de prevenir problemas con contenido duplicado, añadir la etiqueta hreflang a tu contenido dirigido a EE. UU. y Australia también garantiza que todos los usuarios encuentren el camino hacia el contenido optimizado para ellos.
Básicamente, Google puede posicionar la versión de EE. UU. para las personas que buscan en EE. UU. y la versión australiana para las personas que buscan en Australia.
Cada usuario llega a la página optimizada para él, lo que también puede tener algunos beneficios SEO terciarios adicionales, como un mayor CTR, una menor tasa de rebote, etc.
3. Benefíciese de las señales de clasificación compartidas
En una sesión de preguntas y respuestas de 2017 con Gary Illyes de Google, Gary sugiere que las etiquetas hreflang también pueden tener un impacto más directo en el SEO porque las páginas que están en el mismo grupo de hreflang compartirán las señales de clasificación entre sí hasta cierto punto.
Por ejemplo, si tienes muchos enlaces que apuntan a la versión en inglés de la página, esos enlaces también pueden tener un efecto positivo en la versión en español de la página (asumiendo que ambas páginas estén agrupadas usando hreflang).
No sabemos cómo mucho se comparte, y es poco probable que estés obteniendo todo el “jugo de enlaces”, por decirlo de algún modo. Pero incluso un pequeño impulso de las señales de clasificación compartidas hace que valga la pena dedicar tiempo a configurar correctamente las etiquetas hreflang.
¿Es Hreflang bueno para el SEO?
En resumen, usar correctamente la etiqueta hreflang es bueno para el SEO porque te ayuda a optimizar cómo los motores de búsqueda indexan tu sitio y a crear la mejor experiencia posible para los usuarios.
Google también ha insinuado que podría haber beneficios más directos, como que las páginas que se encuentran en el mismo grupo de hreflang compartan señales de clasificación.
Un ejemplo real de hreflang: Tres situaciones comunes
Casi tocamos este tema en la sección anterior, pero repasemos algunos ejemplos de cuándo querrías usar la etiqueta hreflang en tu sitio.
Contenido en diferentes idiomas
Si tienes contenido en tu sitio que has traducido a varios idiomas, querrás añadir la etiqueta hreflang para que Google sepa que estas páginas están asociadas entre sí; es decir, es la misma versión de la página, solo que en diferentes idiomas.
Contenido en el mismo idioma pero para diferentes variantes locales
Como mencionamos en la sección de SEO, es posible que aún quieras usar la etiqueta hreflang incluso si tu contenido está en el mismo idioma. Por ejemplo, si tienes diferentes versiones de una página para visitantes de habla inglesa de EE. UU., el Reino Unido y Australia, querrás usar etiquetas hreflang para especificar la configuración regional de cada página.
Es posible que sientas curiosidad por las razones para implementar etiquetas hreflang para contenido idéntico en varias regiones.
Además de los beneficios de SEO que repasamos al implementar etiquetas hreflang, los sitios web pueden garantizar que los usuarios sean dirigidos a la versión más relevante de una página según su ubicación.
Esto es especialmente importante para los sitios web de comercio electrónico, ya que les permite mostrar los precios en la moneda local, adaptarse a los hábitos de compra locales y ofrecer una experiencia de usuario más personalizada. Comprender la moneda y los hábitos de los usuarios en diferentes regiones permite a las empresas adaptar sus ofertas, promociones y contenidos para conectar mejor con cada audiencia, lo que en última instancia mejora la participación del usuario y fomenta las conversiones.
Por lo tanto, la incorporación de etiquetas hreflang y la consideración de diferentes configuraciones regionales pueden influir significativamente en la visibilidad, la usabilidad y, en última instancia, el éxito de un sitio web en los mercados globales.
Contenido en diferentes dominios/subdominios
En algunas situaciones, es posible que crees sitios multilingües separados utilizando subdominios o nombres de dominio completamente diferentes. Por ejemplo, yoursite.com y yoursite.es.
Puedes seguir utilizando la etiqueta «hreflang» para vincular tus sitios web entre sí, aunque utilicen nombres de dominio distintos.
Consejos generales para la implementación de Hreflang
La forma en que añadas la etiqueta hreflang a tu sitio dependerá de cómo lo hayas construido.
Por ejemplo, ¿has programado tu página web desde cero? ¿O utilizas un sistema de gestión de contenidos autohospedado, como WordPress, o un creador de páginas web, como Squarespace o Wix?
Si estás usando WordPress, es muy fácil añadir la etiqueta hreflang usando un complemento como TranslatePress.
Para los creadores de sitios web alojados, es una de cal y otra de arena. Algunos creadores de sitios web añadirán automáticamente el hreflang por ti, mientras que otros requieren que lo hagas manualmente tú mismo.
¿Cómo se crea una etiqueta hreflang?
Antes de hablar sobre la implementación de hreflang para plataformas específicas, hablemos de cómo hacer una etiqueta hreflang en general.
Cuando creas una etiqueta hreflang, tienes dos opciones:
- Solo idioma – solo puedes especificar el idioma de la página añadiendo su código de dos letras. Por ejemplo, “esta es la versión en español de la página”.
- Idioma Y configuración regional – puedes ir más allá del idioma y especificar también una configuración regional añadiendo tanto el código de idioma como el código de configuración regional. Por ejemplo, “esta es la versión en español de la página para personas en México” y “esta es la versión en español de la página para personas en España”.
Si tienes varias páginas en el mismo idioma dirigidas a diferentes regiones, debes especificar ambas utilizando la etiqueta hreflang.
Sin embargo, si solo estás creando una sola página en el idioma para todas las áreas, entonces puedes simplemente especificar el idioma.
El formato básico de la etiqueta hreflang se ve así:
<link rel="alternate" hreflang="[LANGUAGE]-[LOCALE]" href="[URL]" />
Aquí tienes un ejemplo de hreflang que indica que la página está en inglés para todas las regiones:
<link rel="alternate" hreflang="en" href="https://yoursite.com/hello-world/" />
Y aquí hay un ejemplo que indica que la página está en español y para personas en México:
<link rel="alternate" hreflang="es-mx" href="https://yoursite.com/es/hola-mundo/" />
Aquí hay unas notas:
- Código de país y configuración regional – para los códigos de país y configuración regional, conviene utilizar los códigos ISO de dos letras. Todos los códigos de país. Todos los códigos de idioma.
- URL – asegúrate de especificar la URL completa, incluyendo la parte HTTPS o HTTP.
¿Cuántas etiquetas hreflang necesitas añadir?
Google dice que debes agregar todas las etiquetas hreflang a cada versión de un fragmento de contenido, incluida la versión actual.
Por ejemplo, supongamos que tienes tres versiones de una página:
- Inglés
- Hispanohablantes en México
- Alemán
Cada versión incluiría las tres etiquetas para que Google sepa que todas están conectadas en un grupo.
Es decir, la versión en inglés seguiría incluyendola etiqueta hreflang en inglés (cuál es autorreferencial en términos técnicos), así como las dos etiquetas hreflang para las otras versiones de la página.
Aquí tienes un ejemplo de cómo se verían las etiquetas hreflang para cada página del grupo:
<link rel="alternate" hreflang="en" href="https://yoursite.com/hello-world/" />
<link rel="alternate" hreflang="es-mx" href="https://yoursite.com/es/hola-mundo/" />
<link rel="alternate" hreflang="de" href="https://yoursite.com/de/hallo-welt/" />
Si las páginas de un grupo «hreflang» no se enlazan entre sí, es posible que Google ignore la etiqueta «hreflang», por lo que es importante asegurarse de añadir la etiqueta «hreflang» en todos los lugares donde sea necesario.
Google también recomienda que añada una página “predeterminada” para los visitantes que no utilicen uno de los idiomas o configuraciones regionales que ha especificado.
Puedes configurar esto usando el x-default etiqueta hreflang. Aquí tienes un ejemplo:
<link rel="alternate" hreflang="x-default" href="https://yoursite.com/hello-world/" />
¿Dónde se coloca la etiqueta hreflang?
Hay dos lugares principales para colocar la etiqueta hreflang:
- HTML – Debes añadir las etiquetas hreflang en la sección de tu sitio web..
- Mapa del sitio – incluye las etiquetas hreflang en tu mapa del sitio XML que envías a Google y otros motores de búsqueda.
También puedes añadir la etiqueta hreflang con cabeceras HTTP, pero esto solo es realmente necesario para archivos que no son HTML, como los PDF u otros documentos. que estás alojando en tu servidor.
Para obtener los mejores resultados, probablemente querrás agregar la etiqueta hreflang a ambos el mapa del sitio HTML y XML de tu sitio. Esto es lo que hacen la mayoría de las herramientas automatizadas (más sobre eso próximamente).
Aquí tienes un hreflang ejemplo de Moodle para añadir código a la de una página:
Puedes ver que hay etiquetas hreflang para cinco idiomas diferentes, además de una opción predeterminada.
Y aquí tienes un ejemplo de hreflang de un mapa del sitio XML: puedes ver que el mapa del sitio incluye entradas para todas las versiones diferentes en el grupo de hreflang. En este caso, se trata de una versión para inglés de EE. UU. y otra para español de España:
Cómo configurar Hreflang para diferentes herramientas de creación de sitios web
Ahora que hemos cubierto algunos consejos generales sobre la implementación de hreflang, hablemos de cómo configurar las etiquetas hreflang para plataformas específicas, incluyendo las siguientes:
- WordPress
- Squarespace
- Wix
- Webflow
Guía de Hreflang para WordPress
Antes de entrar en el tutorial, aquí tienes un breve vídeo que explica rápidamente el proceso de añadir etiquetas hreflang a WordPress:
Si quieres añadir hreflang a WordPress, puedes utilizar el plugin TranslatePress.
TranslatePress ofrece todo lo que necesitas para crear un sitio de WordPress multilingüe. Puede ayudarte a traducir tu contenido de forma manual y/o automáticamente a través de Google Translate o DeepL. Luego, creará versiones optimizadas para SEO para cada idioma, incluida la adición automática de la etiqueta hreflang correspondiente.
Añadirá la etiqueta hreflang tanto en el código HTML de cada página como en su mapa del sitio XML desde plugins de SEO populares tales como Yoast SEO.
Las etiquetas hreflang que aparecen en las dos capturas de pantalla de ejemplo que os mostramos en la sección anterior fueron generadas automáticamente por TranslatePress.
Para obtener más información, consulta nuestra guía sobre la etiqueta hreflang de WordPress. También tenemos un tutorial sobre Cómo crear una página web multilingüe en WordPress con TranslatePress.
TranslatePress Multilingüe
Guía de Hreflang de Squarespace
Añadir hreflang dinámico a Squarespace es un poco complicado porque a menudo requiere que añadas manualmente la etiqueta hreflang a tu página mediante código personalizado.
Puedes generar las etiquetas hreflang adecuadas utilizando esta herramienta generadora. A continuación, tendrás que utilizar la opción de código personalizado de Squarespace para añadir esas etiquetas a la ..
Si quieres añadir la etiqueta hreflang al mapa del sitio XML de tu sitio de Squarespace, eso también requerirá cierto esfuerzo manual. Puedes utiliza Screaming Frog para rastrear su sitio de Squarespace y generar un mapa del sitio XML. Luego, deberá editar manualmente ese mapa del sitio para incluir las etiquetas hreflang.
Lamentablemente, Squarespace simplemente no hace un buen trabajo manejando sitios multilingües en este momento, razón por la cual la implementación de hreflang en Squarespace requiere soluciones manuales.
Si quieres una experiencia multilingüe más fluida, puedes considerar cambiar a WordPress.
Guía de Hreflang de Wix
En comparación con Squarespace, Wix ofrece una funcionalidad multilingüe mucho más sólida. Si utilizas la función multilingüe de Wix para crear tu sitio multilingüe, Wix añadirá automáticamente las etiquetas hreflang adecuadas a tus páginas; no es necesario ningún esfuerzo manual por tu parte.
Guía de Hreflang de Webflow
Webflow utiliza el mismo enfoque general que Squarespace, lo que significa que serás responsable de configurar manualmente las etiquetas hreflang adecuadas si estás creando un sitio web multilingüe.
Es decir, tendrás que añadir manualmente las etiquetas hreflang a la sección y también tendrás que crear manualmente tu mapa del sitio (utilizando una herramienta como Screaming Frog) si quieres incluir etiquetas hreflang en él..
Comience hoy con la etiqueta hreflang
Si tienes un sitio web multilingüe y/o un sitio web que tiene contenido diferente para distintas regiones geográficas, es importante añadir correctamente la etiqueta hreflang a su sitio para mejorar el SEO y la experiencia del usuario.
La etiqueta hreflang utiliza una sintaxis sencilla que puedes añadir a la y/o a tu mapa del sitio XML. Solo tienes que asegurarte de añadir todo de las etiquetas hreflang relevantes a cada página para que los motores de búsqueda puedan ver claramente cómo se conectan todas las versiones de la página.
Si has creado tu sitio con WordPress, la forma más fácil de empezar con hreflang es utiliza el complemento TranslatePress.
Si utilizas TranslatePress para crear una web multilingüe, añadirá automáticamente las etiquetas hreflang adecuadas al código HTML y al mapa del sitio XML de tu web, todo ello sin que tengas que mover un dedo.
Para obtener más información sobre las etiquetas hreflang en WordPress, consulta nuestro tutorial de hreflang para WordPress.
Y para aprender a utilizar TranslatePress, echa un vistazo a nuestro guía sobre cómo crear un sitio de WordPress multilingüe.
TranslatePress Multilingüe
¿Todavía tienes alguna pregunta sobre la etiqueta hreflang o sobre cómo usarla? ¡Déjanos saber en los comentarios!
Si encontraste útil esta publicación, por favor visita nuestro Canal de YouTube, donde subimos constantemente tutoriales en video cortos y fáciles de seguir. También puedes seguirnos en Facebook y Twitter ser el primero en enterarte cada vez que publicamos.
