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 tener consecuencias imprevistas y malos resultados para su sitio web.
Para evitarlo, en este artículo profundizaremos en las etiquetas hreflang y canónicas. Hablaremos de qué son, las mejores prácticas y errores comunes en su uso, y 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" />Consiste en dos partes, el rel="alternate", que dice que esta es una versión alternativa a una página web existente, y el hreflang="fr-ch" parte que especifica su destino. francés representa el idioma y ch para el país, basado en el Idioma ISO y códigos de país.
Esto importa especialmente para los sitios web internacionales que pueden tener páginas con contenido prácticamente idéntico pero dirigido a diferentes mercados lingüísticos. Las etiquetas hreflang te permiten indicar a los motores de búsqueda que tienes versiones localizadas para los usuarios de estos mercados.
Además, no solo puedes elegir otro idioma, sino también una localidad en particular. Por ejemplo, aunque hay varios países de hispanohablantes en el mundo, a pesar del idioma común, se diferencian en el dialecto, la cultura y los gustos de los consumidores.
Utilizando los atributos hreflang, es posible crear páginas web dirigidas a cada mercado y marcarlas en consecuencia. De esa manera, puedes localízalos para la audiencia a la que están destinados utilizando al mismo tiempo el mismo idioma.
Etiquetas canónicas en pocas palabras
Las etiquetas canonical cumplen una función similar a 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. Así es como se ven:
<link rel="canonical" href="https://yoursite.com" />Sin embargo, en lugar de diferenciar entre variedades lingüísticas, las etiquetas canónicas muestran que una página web debe considerarse la versión oficial o copia principal entre páginas con contenido igual o muy similar.
¿Por qué tendrías el mismo contenido en varias páginas web? Hay diferentes razones:
- Una página tiene http:// frente a él, el otro https://
- Estás republicando un artículo que ya existe en otro sitio web (con permiso, por supuesto). O publicas el mismo contenido en otra plataforma como Medium para tener más alcance.
- Parámetros en la URL que indican pequeños cambios en una página web, como filtros en sitios web de comercio electrónico (por ejemplo,. 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.
Beneficios SEO de las etiquetas hreflang y canónicas
¿Por qué debería tomarse la molestia de añadir estas etiquetas a su sitio web? Porque ofrecen numerosos beneficios para el SEO:
- Evitar problemas de contenido duplicado — Marcar tu contenido explícitamente evita que los motores de búsqueda consideren que tus páginas son duplicadas. De este modo, es menos probable que muestren la URL incorrecta a los usuarios o que te penalicen por contenido de baja calidad.
- Señales de transferencia de clasificación — La autoridad de los enlaces entrantes y otras señales de posicionamiento se transfiere a la página canónica y es compartida por todas las versiones de idiomas.
- Mayor compromiso del usuario Enviar a los visitantes a la versión correcta de sus páginas, por ejemplo, el idioma que prefieren, es bueno para las conversiones, el tiempo de permanencia, la interacción del usuario, etc. Todo esto son cosas que se teoriza que tienen un impacto positivo en las clasificaciones de búsqueda.
- Evitar desperdiciar tiempo de rastreo — Con las etiquetas canónicas, puedes evitar que los motores de búsqueda indexen ciertas páginas. Eso significa que no gastan el presupuesto de rastreo en contenido sin importancia en lugar de en lo que 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 usarlas correctamente.
Colócalos en los lugares correctos
Su primera pregunta probablemente sea dónde deben aparecer estos enlaces. Las etiquetas hreflang y canónicas se incluyen comúnmente en la <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.
Formatea correctamente tus 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 un código de idioma como de país. Solo el idioma es suficiente. Esto te 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 permite crear páginas con una orientación muy específica. Ya hemos hablado de eso en el contexto del español más arriba. Importante: si utilizas un código regional, asegúrate de que aparezca en segundo lugar, y no en primero, en la etiqueta hreflang. Comprueba también que sea correcto 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 estás utilizando direcciones web separadas para tus diferentes versiones de idioma, aún puedes usar hreflang para aclarar que pertenecen juntas.
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 URL absolutas, dejas completamente claro a qué páginas te refieres y evitas ambigüedades y errores. Si tienes problemas para crear tus etiquetas, también puedes utilizar una generador de etiquetas hreflang o generador de etiquetas canónicas.
Hazlos bidireccionales y autorreferenciales
El siguiente punto importante es en qué páginas colocar las etiquetas. Comencemos con las etiquetas hreflang.
Una parte importante aquí es que, Todas las versiones de idiomas deben tener referencias hreflang a todas las alternativas disponibles. Dicho de otro modo, todas tus páginas tienen que apuntar entre sí. Si no lo hacen y una etiqueta hreflang va en una sola 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 le permite a Google saber que son varias versiones del mismo contenido en diferentes idiomas y para diferentes 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.
Tener una etiqueta canónica en una página web que apunta a sí misma es una señal de que esta es 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 un duplicado, ambas tendrían la misma etiqueta canónica a continuación.
<link rel="canonical" href="https://yoursite.com/page-a" />Evite declaraciones contradictorias
Es muy importante elegir las URL adecuadas tanto para las etiquetas hreflang como para las canónigas, especialmente si se utilizan juntas. Esto se debe a que, aunque son similares en su función, 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: “indexame" y la otra página pero para diferentes regiones”, mientras que el segundo dice, “no me indexes a mí, indexa la otra página”.
Por lo tanto, si tienes una página con etiquetas hreflang que también tiene una etiqueta canónica que apunta a cualquier otro lugar que no sea ella misma, daría dos afirmaciones muy confusas. Básicamente dice: “indexa esta y esta otra página y también no me indexas, indexa la otra página en su lugar”.
En ese caso, los motores de búsqueda podrían tomar sus propias decisiones, lo cual podría no estar acorde con sus deseos. Así que tenga mucho cuidado con esto. Aparte de eso, el orden de las etiquetas reales no importa, siempre y cuando estén presentes y sean correctas.
Usando hreflang=”x-default”
Una última cosa que mencionar aquí es la etiqueta x-default. Esto es algo que puedes usar para establecer una página predeterminada entre diferentes versiones de idiomas. Cuando lo haces, los motores de búsqueda recurren a ella si no hay una versión más específica para el idioma y/o la región de un 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 regiones (por ejemplo, inglés de EE. UU. y del Reino Unido). Hacerlo ayuda cuando alguien busca en ese idioma pero no es de ninguna de las dos regiones.
Así es como se ve la etiqueta x-default:
<link rel="alternate" href="https://yoursite.com" hreflang="x-default" />Tenga en cuenta que no tiene ninguna información de idioma o configuración regional. Además, usar la etiqueta x-default no es obligatorio pero es una buena práctica.
Cómo configurar manualmente etiquetas hreflang y canónicas
Si has seguido el proceso hasta ahora, teóricamente deberías estar listo para implementar etiquetas hreflang y canónicas en tu propio sitio web.
La única pregunta que queda es, ¿cómo se hace eso?
Vamos a repasar eso ahora, empezando por cómo hacerlo manualmente. Aquí, básicamente tienes dos opciones para colocarlos:
- El mencionado HTML
<head>sección - El mapa del sitio XML de su sitio web
(Otras opciones son las cabeceras HTTP, pero esas solo son importantes para contenido como documentos PDF.)
Uso de la sección
Esta opción es más viable para sitios pequeños con pocas páginas y en su mayoría estáticas, donde editas los archivos HTML directamente. No es muy práctica para sitios web más grandes que se crean dinámicamente (como en WordPress).
Una vez que hayas creado tus etiquetas usando los consejos y/o generadores anteriores, abre tus archivos HTML con un editor de código y cópialas y pégalas entre las <head> y </head> etiquetas, preferiblemente hacia la parte superior.
Guarda y habrás terminado. Si tienes dudas o parece no funcionar, pasa tus páginas por un Validador de HTML.
Este método es relativamente fácil; sin embargo, también puede ser molesto si alguna vez realizas cambios en la estructura de tu sitio o en las URL. En ese caso, tendrías que volver a editar cada página individualmente.
Incluir etiquetas hreflang en el sitemap
Si vas a implementar tus etiquetas de forma manual, el mapa del sitio (sitemap) podría ser en realidad la mejor opción. Te permite hacer cambios en un solo lugar, lo cual es más fácil de gestionar en caso de que haya algún cambio de URL o simplemente nuevas versiones de idiomas para añadir. El formato se ve así:
https://yoursite.comCada página con versiones en diferentes idiomas debe estar envuelta en <url> corchetes. El <loc> el elemento en la parte superior define la URL original, mientras que el <xhtml: link> elemento define cada alternativa de idioma. Básicamente utiliza el mismo formato que la versión HTML.
Aquí también puedes utilizar las herramientas generadoras mencionadas anteriormente para crear las etiquetas hreflang. Como se explicó antes, las etiquetas canónicas deben ir en el <head> sección, no puedes definirlas en el mapa del sitio. Finalmente, si para empezar no sabes cómo crear un mapa del sitio XML para tu sitio web, Google tiene una explicación.
Implementación de etiquetas mediante plugins de WordPress
Probablemente estemos de acuerdo en que los métodos anteriores parecen un poco lentos. Por lo tanto, si tienes un sitio web basado en WordPress, una forma más sencilla de implementar etiquetas hreflang y canónicas es utilizando plugins.
Para las etiquetas canónicas, puedes usar una plugin de SEO. Prácticamente todos ellos vienen con opciones para definir URLs canónicas y también generar etiquetas canónicas automáticamente.
Por ejemplo, Yoast SEO añade una etiqueta canónica autorreferencial a todas tus páginas por defecto.
Por otro lado, una gran opción para implementar etiquetas hreflang es TranslatePress.
¿Por qué es eso?
Porque el plugin literalmente lo hace por ti. Todo lo que tienes que hacer es configurar qué idiomas quieres añadir a tu sitio en Configuración → TranslatePress.
Una vez que hayas hecho esto y hayas guardado tus opciones, TranslatePress se encarga del resto. Añade las etiquetas hreflang pertinentes al código HTML de todas las versiones lingüísticas de tus páginas web, así como a tu mapa del sitio XML.
Además, TranslatePress es capaz de distinguir entre las distintas variantes regionales de los idiomas, como el portugués brasileño, el español mexicano o el francés suizo. Al seleccionar las opciones correspondientes en la configuración, configura tus etiquetas hreflang para que reflejen tanto el idioma como la configuración regional.
Otras ventajas de TranslatePress
Si te gusta lo anterior, quizá te interese saber qué más ofrece TranslatePress. No solo es ideal para las etiquetas hreflang, sino que también cuenta con muchas otras funciones que lo convierten en la solución perfecta para crear sitios web internacionales y multilingües.
En primer lugar, está la interfaz de traducción súper sencilla.
Utiliza la vista previa de la derecha para navegar por tu sitio web y elegir texto para traducir directamente desde la pantalla o la lista en la esquina superior izquierda.
Luego, agregue la traducción en el campo correspondiente y guarde.
Después de eso, el contenido traducido aparece automáticamente en su sitio web, donde los visitantes pueden usar el integrado selector de idioma para elegir su idioma preferido.
Eso es todo. También puedes usar el mismo método para mostrar imágenes específicas del idioma y, para hacer las cosas más rápido, usa automático traducción automática vía Google Translate.
Todo esto forma parte del complemento gratuito, que te permite añadir un idioma adicional a tu sitio web. Si quieres más que eso, hay TranslatePress Pro, que también incluye estas características adicionales:
- Traducción automática con DeepL — En lugar de Google Translate, utiliza el DeepL más preciso programa de traducción.
- Paquete SEO multilingüe Traduce otros marcadores SEO importantes, como slugs de URL, títulos SEO, meta descripciones, etiquetas ALT y más.
- Navegación específica para el idioma del usuario – Muestra diferentes menús según el idioma de tus visitantes.
- Detección automática del idioma del usuario – Redirigir automáticamente a los visitantes a su versión de idioma preferida (a través de la configuración del navegador o la ubicación).
- Cuentas de traductor — Hacer que trabajar con agencias de traducción y autónomos más fácil dándoles acceso directo a tu sitio.
- Navegar como rol de usuario – Mira tu sitio como un rol de usuario específico en el editor de traducción.
El TranslatePress Pro incluye tres diferentes planes de precios para que puedas elegir una que se adapte a tus necesidades.
¿Listo para dominar las etiquetas hreflang y canónicas?
Las dos etiquetas de las que hablamos en esta publicación son señales útiles para los motores de búsqueda sobre cómo deben indexar y posicionar tus páginas web. Las etiquetas hreflang te permiten definir versiones de página para idiomas y países particulares. Las etiquetas canónicas, por otro lado, denotan la versión oficial entre piezas de contenido similares.
Aquí están los puntos más importantes para recordar:
- Las etiquetas hreflang son inclusivas, mientras que las etiquetas canónicas son exclusivas
- Incluya enlaces hreflang a todas las versiones de idiomas en cada página localizada, así como enlaces a la propia página.
- No intentes combinar ambas etiquetas en una sola declaración
- Cualquier página web con una etiqueta hreflang no puede tener una etiqueta canonical que apunte a otro lugar que no sea a sí misma
- Utiliza declaraciones x-default para definir versiones de idioma predeterminadas y alternativas
Cuando aprendes por primera vez sobre estas etiquetas, puede parecer un poco intimidante y técnico. Sin embargo, como espero que hayas visto, no son tan difíciles de implementar, especialmente si tienes una herramienta que pueda hacerlo automáticamente como TranslatePress. No solo te ayuda a traducir tu sitio web de WordPress, sino que también configura las etiquetas hreflang sin que tengas que mover un dedo. ¡Pruébalo ahora!
TranslatePress Multilingüe
¿Tienes alguna pregunta sobre el uso de hreflang y etiquetas canónicas? ¡Por favor, déjala en los comentarios a continuación!
