En esta publicación
Las etiquetas hreflang y las etiquetas canónicas son indicadores para Google y otros motores de búsqueda sobre qué páginas web indexar y mostrar a determinados usuarios. Ambas son factores importantes para SEO multilingüe.
Sin embargo, los dos tipos de etiquetas tienen funciones diferentes. Por eso es importante no confundirlas ni usarlas indistintamente. De lo contrario, podría dar lugar a consecuencias imprevistas y malos resultados para su sitio web.
Para evitarlo, en esta entrada analizaremos en profundidad las etiquetas hreflang y canónicas. Hablaremos de qué son, de las mejores prácticas y de los errores más comunes a la hora de utilizarlas, así como de cómo configurarlas correctamente, tanto de forma manual como con la ayuda de plugins de WordPress.
¿Qué son las etiquetas hreflang y canónicas (y por qué importan)?
Para comprender bien este tema, definamos primero los dos tipos de etiquetas. .
Etiquetas hreflang explicadas
Las etiquetas hreflang son fragmentos de código introducidos por Google en 2011 para ayudar a los sitios web internacionales. Su función es indicar a los rastreadores de búsqueda el idioma y la ubicación geográfica a los que está destinada una página web. Por ejemplo, así es como se ve una etiqueta hreflang dirigida a Francia y Suiza.
<link rel="alternate" href="https://yoursite.com/ch" hreflang="fr-ch" />Consta de dos partes, el rel="alternate", que indica que se trata de una versión alternativa de una página web ya existente, y el hreflang="fr-ch" parte que especifica su destino. francés significa el idioma y ch para el país, basado en el idioma ISO y códigos de país.
Esto es especialmente importante para los sitios web internacionales que pueden tener páginas con un contenido prácticamente idéntico, pero dirigidas a mercados de diferentes idiomas. Las etiquetas «hreflang» te permiten indicar a los motores de búsqueda que dispones de versiones localizadas para los usuarios de esos mercados.
Es más, no solo puedes dirigirte a otro idioma, sino también a una configuración regional concreta. Por ejemplo, aunque hay varios países de habla hispana en el mundo, a pesar de compartir el mismo idioma, difieren en cuanto a dialecto, cultura y gustos de los consumidores.
Mediante los atributos hreflang, es posible crear páginas web dirigidas a cada mercado y etiquetarlas en consecuencia. De este modo, puedes localizarlos para el público al que van dirigidas, sin dejar de utilizar el mismo lenguaje.
Las etiquetas canónicas en pocas palabras
Las etiquetas «canonical» cumplen una función similar a la de las etiquetas «hreflang». También son fragmentos de código HTML que indican a los motores de búsqueda qué URL es la más relevante para los usuarios. Este es su aspecto:
<link rel="canonical" href="https://yoursite.com" />Sin embargo, en lugar de diferenciar entre variedades lingüísticas, las etiquetas canónicas indican que una página web debe considerarse la versión oficial o el original entre las páginas con un contenido idéntico o muy similar.
¿Por qué se incluiría el mismo contenido en varias páginas web? Hay varias razones:
- Una página contiene http:// delante de él, el otro https://
- Estás volviendo a publicar un artículo que ya existe en otra página web (con permiso, por supuesto). O bien, publicas el mismo contenido en otra plataforma, como Medium, para ampliar tu alcance.
- Parámetros de la URL que indican pequeños cambios en una página web, como los filtros en sitios web de comercio electrónico (p. ej.,. https://www.yourwebsite.com/Camping-Hiking/b?ie=UTF8&node=16435151)
En todos estos casos, una etiqueta canónica puede indicar a los motores de búsqueda cuál deben considerar la versión principal de la página en cuestión y que deben indexarla en lugar de las demás.
Ventajas de las etiquetas «hreflang» y «canonical» para el SEO
¿Por qué deberías tomarte la molestia de añadir estas etiquetas a tu página web? Porque ofrecen numerosas ventajas en materia de SEO:
- Evita los problemas relacionados con el contenido duplicado — Marcar tu contenido de forma explícita evita que los motores de búsqueda consideren que tus páginas son duplicadas. De este modo, es menos probable que muestren una URL incorrecta a los usuarios o que te penalicen por contenido de baja calidad.
- Transferir señales de clasificación — La autoridad procedente de los enlaces entrantes y otras señales de posicionamiento se transfiere a la página canónica y la comparten todas las versiones lingüísticas.
- Mayor participación de los usuarios — Enviar a los visitantes a la versión correcta de tus páginas, por ejemplo, el idioma que prefieren, es bueno para las conversiones, el tiempo de permanencia, la interacción del usuario, etc. Todas estas son cosas que se teoriza que tienen un impacto positivo en las clasificaciones de búsqueda.
- Evita malgastar tiempo de rastreo — Con las etiquetas canónicas, puedes evitar que los motores de búsqueda indexen determinadas páginas. Eso significa que no malgastan el presupuesto de rastreo en contenido sin importancia, en lugar de dedicarlo a lo que tú quieres que se indexe.
Lo importante es darse cuenta de que estas etiquetas son señales, no directrices vinculantes. Las usas para pedirle a los motores de búsqueda que hagan algo (por favor), pero depende de ellos y de su algoritmo cumplir con tu solicitud.
Etiquetas hreflang y canonicas: Mejores practicas y errores comunes
Ahora que sabemos qué son estas etiquetas, examinemos cómo utilizarlas correctamente.
Colócalos en los lugares correctos
Su primera pregunta es probablemente dónde deben aparecer estos enlaces. Las etiquetas hreflang y canónicas se incluyen comúnmente en el <head> sección del marcado HTML de una página web.
De hecho, para las etiquetas canónicas esa es la única opción. Sus primos hreflang también pueden aparecer en las cabeceras HTTP o en un sitemap XML. Hablaremos de cómo los llevas allí en detalle a continuación.
Formatee correctamente sus etiquetas
Una de las cosas más importantes que hay que saber es que las dos etiquetas no se pueden combinar. Algo como el ejemplo de abajo no será entendido por los motores de búsqueda.
<link rel="canonical" rel="alternate" href="https://yoursite.com" hreflang="fr-ch" />En su lugar, debes mostrar ambos tipos de etiquetas por separado, de la siguiente manera:
De las dos señales, las etiquetas canónicas son las más sencillas de implementar. Básicamente solo necesita contener rel="canonical" así como el destino.
Las etiquetas hreflang son un poco más inestables. Lo primero que hay que señalar aquí es que no es necesario incluir tanto el código de idioma como el de país. Solo el idioma es suficiente. Esto le permite configurar una página más general para personas de todo el mundo que realizan búsquedas en él.
Al mismo tiempo, el uso de un código de país te permite crear páginas dirigidas a un público muy específico. Ya hemos hablado de ello anteriormente en el contexto del español. Importante: si utilizas un código regional, asegúrate de que aparezca en segundo lugar, y no en primer lugar, en la etiqueta hreflang. Comprueba también que el idioma y códigos de país.
Al mismo tiempo, ten en cuenta que las versiones en otros idiomas no tienen por qué estar en el mismo dominio. Si utilizas direcciones web distintas para las diferentes versiones lingüísticas, puedes seguir utilizando la etiqueta «hreflang» para aclarar que forman parte del mismo conjunto.
Además, para ambos tipos de etiquetas, debes incluir las URL completas de tus páginas, no las relativas. Esta es la diferencia:
- URL completa: https://yoursite.com/shop/pants
- URL relativa: /tienda/pantalones
Al utilizar direcciones URL absolutas, dejas totalmente claro a qué páginas te refieres y evitas ambigüedades y errores. Si te cuesta crear tus etiquetas, también puedes utilizar un generador de etiquetas hreflang o generador de etiquetas canónicas.
Haz que sean bidireccionales y autorreferenciales
El siguiente punto importante es en qué páginas debes colocar las etiquetas. Empecemos por las etiquetas hreflang.
Un aspecto importante en este sentido es que, Todas las versiones lingüísticas deben incluir referencias «hreflang» a todas las alternativas disponibles.. Dicho de otro modo, todas tus páginas deben enlazarse entre sí. Si no es así y una etiqueta hreflang solo apunta en una dirección, Google la ignorará.
Por ejemplo, si tienes una página en inglés, español y francés dirigida a EE. UU., Canadá, España, Colombia y Francia, tus etiquetas hreflang se verían así:
Este código exacto debe ir a cada una de las páginas mencionadas en él.
Esto es importante, ya que establece una relación entre estas páginas y permite a Google saber que se trata de varias versiones del mismo contenido en diferentes idiomas y dirigidas a distintos grupos de usuarios.
Esto también significa que una etiqueta hreflang siempre apunta a la página en la que aparece. Esto se denomina “autorreferencia” y es una buena práctica tanto para las etiquetas hreflang como para las canónicas.
Incluir una etiqueta «canonical» en una página web que apunte a sí misma es una señal de que se trata de la versión oficial. Refuerza el mensaje de las etiquetas que apuntan a la misma página desde otras ubicaciones. Por ejemplo, si la página A es la página principal y la página B es un duplicado, ambas tendrían la misma etiqueta «canonical» a continuación.
<link rel="canonical" href="https://yoursite.com/page-a" />Evita declaraciones contradictorias
Es muy importante elegir las URL adecuadas tanto para las etiquetas hreflang como para las canónicas, sobre todo si se utilizan conjuntamente. Esto se debe a que, aunque tienen una función similar, lo que indican a los motores de búsqueda es bastante diferente.
Las etiquetas hreflang son inclusivas, mientras que las etiquetas canónicas son exclusivas. Las primeras dicen: “indexadme». y ”la otra página, pero para diferentes configuraciones regionales“, mientras que la segunda dice: ”no me indexes, indexa la otra página».
Por lo tanto, si tienes una página con etiquetas hreflang que además tiene una etiqueta canónica que apunta a cualquier sitio menos a sí misma, esto daría lugar a dos indicaciones muy confusas. Básicamente, dice: “indexadme a mí y a esta otra página, y además no me indexéis a mí, sino a la otra página”.
En ese caso, los motores de búsqueda podrían tomar sus propias decisiones, que quizá no se ajusten a tus deseos. Por lo tanto, ten mucho cuidado con esto. Aparte de eso, el orden de las etiquetas no importa, siempre y cuando estén presentes y sean correctas.
Uso de hreflang="x-default"”
Por último, cabe mencionar aquí la etiqueta «x-default». Se trata de una etiqueta que puedes utilizar para establecer una página predeterminada entre las diferentes versiones lingüísticas. Al hacerlo, los motores de búsqueda recurrirán a ella si no existe una versión más específica para el idioma y/o la configuración regional del usuario que realiza la búsqueda.
Esto también te permite establecer una versión preferida si tienes páginas en el mismo idioma pero para diferentes configuraciones regionales (por ejemplo, inglés de EE. UU. e inglés del Reino Unido). Esto resulta útil cuando alguien realiza una búsqueda en ese idioma pero no pertenece a ninguna de esas configuraciones regionales.
Así es como se ve la etiqueta «x-default»:
<link rel="alternate" href="https://yoursite.com" hreflang="x-default" />Ten en cuenta que no contiene ninguna información sobre el idioma o la configuración regional. Además, el uso de la etiqueta «x-default» no es obligatorio, pero se considera una buena práctica.
Cómo configurar manualmente etiquetas hreflang y canónicas
If you have followed along so far, you should theoretically be ready to implement hreflang and canonical tags on your own website.
The only question that remains is, how do you do that?
Let’s go over that now, starting with how to do it manually. Here, you basically have two options to place them:
- The aforementioned HTML
<head>sección - Your website’s XML sitemap
(Another options are HTTP headers but those are only important for content like PDF documents.)
Using the <head> section
This option is most feasible for small sites with few and mostly static pages where you edit the HTML files directly. It’s not very practical for larger websites that are created dynamically (like in WordPress).
Once you have created your tags using the tips and/or generators above, open your HTML files with a code editor and copy and paste them between the <head> y </head> tags, preferably toward the top.
Save and you are done. If in doubt or if doesn’t seem to work, run your pages through an HTML validator.
This method is relatively easy, however, it can also be annoying if you ever make changes to your site structure or URLs. In that case you would have to edit each page individually again.
Including hreflang Tags in the Sitemap
If you are going to implement your tags manually, the sitemap might actually be the best choice. It allows you to make changes all in one place, which is easier to manage should there be any URL changes or simply new language versions to add to it. The format looks like this:
<url>
<loc>https://yoursite.com</loc>
<xhtml:link rel="alternate" hreflang="en-us" href="https://yoursite.com" />
<xhtml:link rel="alternate" hreflang="en-gb" href="https://yoursite.com/uk" />
<xhtml:link rel="alternate" hreflang="es-es" href="https://yoursite.es" />
<xhtml:link rel="alternate" hreflang="es-co" href="https://yoursite.es/col" />
<xhtml:link rel="alternate" hreflang="fr-fr" href="https://yoursite.fr" />
</url>Each page with different languages versions has to be wrapped in <url> brackets. The <loc> element at the top defines the original URL, while the <xhtml: link> element defines each language alternative. It basically use the same format as the HTML version.
Here, too, you can use the aforementioned generator tools to create the hreflang tags. As explained before, canonical tags have to go in the <head> section, you can not define them in the sitemap. Finally, if you don’t know how to create an XML sitemap for your website to begin with, Google has an explanation.
Implementación de etiquetas mediante plugins de WordPress
We can probably agree that the methods above seem a bit time-consuming. Therefore, if you are running a website based on WordPress an easier way to implement hreflang and canonical tags is using plugins.
For canonical tags, you can use an plugin de SEO. Pretty much all of them come with options to define canonical URLs and also generate canonical tags automatically.
Por ejemplo, Yoast SEO adds self-referential canonical tag to all your pages by default.
On the other hand, a great option to implement hreflang tags is TranslatePress.
Why is that?
Because the plugin literally does it for you. All you have to do is configure which languages you want to add to your site under Configuración → TranslatePress.
Once you have done so and saved your choices, TranslatePress takes care of the rest. It adds relevant hreflang tags to the HTML of all language versions of your web pages as well as your XML sitemap.
Plus, TranslatePress can differentiate between regional versions of languages, such as Brazilian Portuguese, Mexican Spanish, or Swiss French. When you pick the respective options in the settings, it sets up your hreflang tags so that they reflect both the language and locale.
Other TranslatePress Benefits
If you like the above, you might be interested to hear what else TranslatePress has to offer. It’s not just good for hreflang tags but also has many more features that make it a perfect solution for creating international and multilingual websites.
First of all, there is the super simple translation interface.
Use the preview on the right to navigate your website and pick text to translate directly from the screen or the list in the upper left corner.
Then, add the translation in the appropriate field and save.
After that, the translated content automatically appears on your website, where visitors can use the built-in selector de idioma to pick their preferred language.
That’s it. You can also use the same method to show language-specific images and, to make things faster, use automatic traducción automática via Google Translate.
This is all part of the free plugin, which lets you add one additional language to your website. If you want more than that, there is TranslatePress Pro, which also comes with these additional features:
- Traducción automática con DeepL — Instead of Google Translate, use the more accurate DeepL translation software.
- Paquete SEO multilingüe — Translate other important SEO markers such as URL slugs, SEO titles, meta descriptions, ALT tags, and more.
- Navegación específica para el idioma del usuario – Display different menus depending on the language of your visitors.
- Detección automática del idioma del usuario – Automatically reroute visitors to their preferred language version (via browser settings or location).
- Cuentas de traductor — Make working with agencias de traducción y autónomos easier by giving them direct access to your site.
- Navegar como rol de usuario – Mira tu sitio como un rol de usuario específico en el editor de traducción.
TranslatePress Pro comes with three different planes de precios so you can choose one that fits your needs.
¿Listo para dominar las etiquetas hreflang y canónicas?
The two tags we talked about in this post are useful signals for search engines on how they should index and rank your web pages. Hreflang tags allow you to define page versions for particular languages and countries. Canonical tags, on the other hand, denote the official version among similar content pieces.
Here are the most important points to remember:
- Hreflang tags are inclusive, while canonical tags are exclusive
- Include hreflang links to every language version on each localized page as well as links to the page itself
- Don’t try to combine both tags into one statement
- Any web page with an hreflang tag can not have a canonical tag pointing anywhere else but itself
- Use x-default statements to define default and fallback language versions
When you first learn about these tags, it can seem a bit scary and technical. However, as you have hopefully seen, they are not all that hard to implement, especially if you have a tool that can do it automatically like TranslatePress. It not only helps you translate your WordPress website, but also set up hreflang tags without you having to lift a finger. Give it a try now!
TranslatePress Multilingüe
Do you have any questions concerning the usage of hreflang and canonical tags? Please ask them in the comments below!
