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 also recommends that you add a “default” page for visitors who aren’t using one of the languages/locales that you’ve specified.
You can set this up using the x-default hreflang tag. Here’s an example:
<link rel="alternate" hreflang="x-default" href="https://yoursite.com/hello-world/" />
Where Do You Put the Hreflang Tag?
There are two main places to put the hreflang tag:
- HTML – you add the hreflang tags in the <head> section of your site.
- Mapa del sitio – you include the hreflang tags in your XML sitemap that you submit to Google and other search engines.
You can also add the hreflang tag with HTTP headers, but this is only really needed for non-HTML files such as PDFs or other documents that you’re hosting on your server.
For best results, you’ll probably want to add the hreflang tag to ambos your site’s HTML and XML sitemap. This is what most automated tools do (more on those next).
Here’s a hreflang example from Moodle for adding code to the HTML <head> section of a page:
You can see that there are hreflang tags for five different languages, plus a default option.
And here’s a hreflang example from an XML sitemap – you can see that the sitemap includes entries for all different versions in the hreflang cluster. In this case, that’s one version for English-USA and one for Spanish-Spain:
Cómo configurar Hreflang para diferentes herramientas de creación de sitios web
Now that we’ve covered some general tips on hreflang implementation, let’s talk about how to set up hreflang tags for specific platforms including the following:
- WordPress
- Squarespace
- Wix
- Webflow
WordPress Hreflang Guide
Before I get into the tutorial, here’s a short video that quickly explains the process of adding hreflang tags to WordPress:
If you want to add hreflang to WordPress, you can use the TranslatePress plugin.
TranslatePress offers everything that you need to create a multilingual WordPress site. It can help you translate your content manually and/or automatically via Google Translate or DeepL. Then, it will create SEO-friendly versions for each language, including automatically adding the relevant hreflang tag.
It will add the hreflang tag both in each page’s HTML, as well as in su mapa del sitio XML desde popular SEO plugins tales como Yoast SEO.
The hreflang tags in both of the example screenshots that we showed you in the previous section were automatically generated by TranslatePress.
To learn more, check out our guide to the WordPress hreflang tag. We also have a tutorial on how to make a multilingual WordPress site with TranslatePress.
TranslatePress Multilingüe
Squarespace Hreflang Guide
Adding dynamic hreflang to Squarespace is a bit tricky because it often requires you to manually add the hreflang tag to your page via custom code.
You can generate the proper hreflang tags using this generator tool. Then, you’ll need to use Squarespace’s custom code option to add those tags to your site’s <head> section.
If you want to add the hreflang tag to your Squarespace site’s XML sitemap, that will also require some manual effort. You can use Screaming Frog to crawl your Squarespace site and generate an XML sitemap. Then, you’ll need to manually edit that sitemap to include the hreflang tags.
Unfortunately, Squarespace just doesn’t do a good job of handling multilingual sites at this time, which is why the Squarespace hreflang implementation requires manual workarounds.
If you want a smoother multilingual experience, you can consider switching to WordPress.
Wix Hreflang Guide
Compared to Squarespace, Wix offers much stronger multilingual functionality. If you use Wix’s multilingual feature to create your multilingual site, Wix will automatically add the proper hreflang tags to your pages – there’s no need for any manual effort on your part.
Webflow Hreflang Guide
Webflow uses the same general approach as Squarespace, which means you’ll be responsible for manually setting up the proper hreflang tags if you’re creating a multilingual site.
That is, you’ll need to manually add the hreflang tags to each page’s <head> section and you’ll also need to manually construct your sitemap (using a tool like Screaming Frog) if you want to include hreflang tags in your sitemap.
Comience hoy con la etiqueta hreflang
If you have un sitio web multilingüe and/or a website that has different content for different geographic locales, it’s important to properly add the hreflang tag to your site to improve SEO and user experience.
The hreflang tag uses a simple syntax that you can add to your HTML’s <head> section and/or your XML sitemap. Just make sure to add todo of the relevant hreflang tags to each page so that search engines can clearly see how all versions of the page connect.
If you’ve built your site with WordPress, the easiest way to get started with hreflang is to use the TranslatePress plugin.
If you use TranslatePress to create a multilingual site, it will automatically add the proper hreflang tags to your site’s HTML and XML sitemap – all without you ever needing to lift a finger.
To learn more about hreflang tags on WordPress, check out our WordPress hreflang tutorial.
And to learn how to use TranslatePress, check out our guide on how to create a multilingual WordPress site.
TranslatePress Multilingüe
Do you still have any questions about the hreflang tag or how to use it? Let us know in the comments!
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.
