Trabajar el SEO Internacional de un proyecto web cuando aterriza en nuestra agencia pasa siempre, aunque no únicamente, por trabajar de forma correcta las etiquetas Hreflang, que nos ayudan a indicarle a Google el idioma y región de destino de cada uno de nuestros contenidos.
Aquí tienes un vídeo prático dónde Javier te cuenta paso a paso cómo funcionan los Hreflang 👇
¿Qué son las etiquetas Hreflang?
Hreflang es un atributo de enlace que se utiliza para indicar a los motores de búsqueda que versión de un sitio web es más relevante para un usuario en particular en función de su idioma y ubicación geográfica. Esto es especialmente útil para sitios web que tienen versiones en diferentes idiomas o que están dirigidos a audiencias en diferentes países.
Por ejemplo, si tienes un sitio web con versiones en inglés y español y quieres que los usuarios de habla española vean la versión en español del sitio cuando realicen una búsqueda, puedes utilizar el atributo hreflang para indicar a Google (u otros buscadores) que la versión en español del sitio es la más relevante para los usuarios de habla española.
El atributo hreflang es especialmente útil para evitar la confusión de los motores de búsqueda y para asegurar que los usuarios vean la versión más relevante del sitio en función de su idioma y ubicación geográfica. Si tienes un sitio con versiones en diferentes idiomas o que está dirigido a audiencias en diferentes países, es importante considerar utilizar hreflang para mejorar el rendimiento del sitio en los resultados de búsqueda.
Código etiqueta Hreflang
Las etiquetas HREFLANG son unas etiquetas HTML que nos ayudan a identificar el idioma y región de destino de nuestro contenido, para que los buscadores dirijan a los usuarios a su URL correcta, como hemos visto más arriba, pero ahora vamos a ver qué elementos componen una etiqueta hreflang.
<link rel="alternate" href="url" hreflang="lang_code" />
link rel="alternate" -> Indicamos que existe una versión alternativa de esta página
href="url" -> URL de destino de la página alternativa
hreflang="lang_code" -> El IDIOMA de la URL alternativa
Existen tres métodos principales para implementar las etiquetas hreflang en un sitio web, cada uno adecuado para diferentes tipos de contenido y necesidades.
En el código HTML
La manera más básica y común de añadir etiquetas hreflang es insertándolas directamente en la sección <head> del código HTML de cada página.
Esta técnica implica añadir un elemento <link rel="alternate" href="url_de_la_página" hreflang="código_del_idioma" /> para cada versión lingüística del contenido, incluyendo una referencia a sí misma. Aunque este método puede ser laborioso, especialmente cuando se añaden nuevas traducciones, es eficaz para gestionar diferentes versiones de una página web.
En las cabeceras HTTP
Este método es ideal para contenidos que no son HTML, como los archivos PDF. Las cabeceras HTTP permiten transferir datos entre el servidor y el cliente, incluyendo la información de hreflang. La sintaxis utilizada es Link: <url>; rel="alternate"; hreflang="código_del_idioma", y se debe especificar para cada versión del documento. Aunque también se puede aplicar a contenidos HTML, puede aumentar la carga del servidor debido a las múltiples solicitudes.
En los sitemaps XML
Implementar etiquetas hreflang en un sitemap XML es particularmente útil para sitios web con muchas páginas y versiones lingüísticas.
Un sitemap XML informa a los motores de búsqueda sobre las variantes de idioma y región de cada URL, permitiendo gestionar las etiquetas hreflang en un único archivo.
Este método es eficiente, ya que simplifica la actualización de las etiquetas cuando se agregan nuevas traducciones, evitando la necesidad de modificar múltiples archivos HTML o cabeceras HTTP.
❎ Evita errores básicos a la hora de implementar etiquetas HREFLANG
- Incluye versiones de todas las demás páginas en cada versión de idioma
- Usa URLs completas (no relativas)
- Establece una URL genérica para usuarios de idiomas no especificados, con la opción x-default
- Asegúrate de que las páginas se apunten entre sí con enlaces recíprocos
- Revisa que las URLs de destino proporcionen un código 200
- NO puedes usar únicamente país, has de usar siempre idioma o idioma-país.
Ejemplos
¿Cómo implementar etiquetas Hreflang?
Ya sabemos que estas etiquetas HTML nos ayudan a indicar a los buscadores la versión específica para cada usuario por su idioma / país, ahora vamos a ver cómo podemos aplicarla a nuestros proyectos.
Existen tres métodos principales para implementar las etiquetas hreflang en un sitio web, cada uno adecuado para diferentes tipos de contenido y necesidades:
Hreflang en Shopify
Por suerte Shopify cada día nos lo pone más fácil a los SEOs, y en este caso, implementar etiquetas Hreflang no es nada complicado, podemos hacerlo con dos de las opciones que vimos anteriormente, directamente en el código HTML (editando el código liquid) o a través de Sitemaps, vamos a ver cómo hacerlo en HTML.
1.- Ve al panel de administración de Shopify
2.- Ahora pincha donde pone tiendas online > Temas > Acciones (tres puntitos) > Editar código
3.- Abre el archivo theme.liquid, generalmente ubicado en la carpeta layout
Dentro del archivo theme.liquid, busca el lugar donde se incluye el código <head>. Inserta las etiquetas hreflang justo después de la apertura de la etiqueta <head>.
Ejemplo:<link rel="alternate" href="https://example.com" hreflang="en-us" /><link rel="alternate" href="https://example.fr" hreflang="fr-fr" /><link rel="alternate" href="https://example.es" hreflang="es-es" />
Ahora bien, si deseas que las etiquetas hreflang se generen automáticamente para productos y colecciones, puedes usar una lógica en liquid.
Ejemplo:{% if product.metafields.global.excludefr != 1 %} <link rel="alternate" href="https://example.fr/products/{{ product.handle }}" hreflang="fr" /> {% endif %}
Utilidades
Herramienta de hreflang generator de VisibilidadOn, podrás generar etiquetas Hreflang para tu sitio web de forma rápida.
Hreflang checker, herramienta de Technical Seo que nos permite revisar la correcta implementación de las etiquetas Hreflang en nuestro sitio.
Referencias
- Documentación oficial de Google sobre etiquetas Hreflang
- Implementar etiquetas Hreflang en Shopify
- Códigos ISO de idiomas para utilizar en las etiquetas
- 🎙️Un podcast muy útil que escuché hace mucho tiempo de Juan González y Alex Serrano sobre SEO Internacional
