¿Qué es el atributo Hreflang?
Hreflang es un atributo HTML que comunica el idioma y la región objetivo de una página internet. Permite que los motores de búsqueda ofrezcan la versión más adecuada de esa página según las preferencias de país e idioma del buscador.
Hreflang es un importante concepto internacional de search engine optimisation. Ayuda a garantizar que la audiencia correcta vea la página internet correcta.
Por ejemplo, en lugar de tener la misma página compitiendo por usuarios en España y México, puede tener páginas alternativas optimizadas para el idioma, moneda y más de ese país.
Esto es lo que parece en la práctica.
Digamos que Google “weblog de semrush” en los EE. UU. Este es el primer resultado:
Mientras que si estás en España, esto es lo que verás:
¿Qué aspecto tiene una etiqueta Hreflang?
Hreflang sigue una estructura consistente y directa. Por lo normal, se ve así:
<hyperlink rel="alternate" href="url_of_page" hreflang="lang_code" />
Y esto es lo que significa la sintaxis (lenguaje informático):
- enlace rel=“alternativo” significa que el enlace en esta etiqueta es una versión alternativa de esta página
- href=“url_de_la_página” es donde puedes encontrar la página alternativa
- hreflang=“código_lang” es lo que es el idioma alternativo
Nota: La etiqueta hreflang es una señal, no una directiva.Google y Yandex usar atributos hreflang. Baidu y Bing no. Se basan en el atributo HTML del idioma del contenido.
Cómo construir una etiqueta Hreflang
Para crear una etiqueta hreflang, primero debe encontrar el idioma y los códigos de país que necesita. Y luego full los espacios en blanco.
Hreflang admite dos letras ISO 639-1 códigos de idioma y ISO 3166-1 alfa-2 códigos de país y región.
(No siempre necesitará el código de país o región, pero puede ser útil).
Digamos que tu weblog en inglés ha sido traducido al español y al portugués. El atributo hreflang para un artículo debería verse así:
<hyperlink rel="alternate" href="https://instance.com" hreflang="en" />
<hyperlink rel="alternate" href="https://instance.com/es/" hreflang="es" />
<hyperlink rel="alternate" href="https://instance.com/pt/" hreflang="pt" />
El atributo hreflang en cada pagina internet debe incluir un referencia a todas las paginas que sirven como suplentes.
Incluyendo una referencia a sí mismo. Google recomienda hreflang autorreferenciado en su pautas.
Si sus atributos hreflang no hacen referencia a todas las páginas alternativas relevantes, los motores de búsqueda pueden ignorar o malinterpretar sus etiquetas hreflang.
Lo que significa:
Los enlaces de referencia en el fragmento de código del artículo en inglés anterior deberían aparecer en sus páginas en español y portugués.
Pero, ¿qué sucede si apunta a un país adicional que también habla portugués? Como Brasil.
(Es posible que desee hacer eso si está vendiendo un producto en diferentes monedas, por ejemplo).
En ese caso, también deberá agregar el código de país.
Entonces, se vería así, siendo “pt” el código de país de dos letras para Portugal y “br” para Brasil:
portugués en portugal:
<hyperlink rel="alternate" href="https://instance.com/pt/" hreflang="pt-pt" />
portugués en brasil:
<hyperlink rel="alternate" href="https://instance.com/br/" hreflang="pt-br" />
La sintaxis aquí es un poco diferente. Es hreflang=“idioma-país” en lugar de solo hreflang=“idioma”.
Y eso es todo lo que necesitas hacer.
Consejo profesional: También es importante establecer las etiquetas predeterminadas. Indican la página alternativa para los usuarios cuando ninguna otra versión localizada es adecuada.
Las etiquetas X-default no son obligatorias, pero se recomiendan.
Para implementar una etiqueta x-default, agregue una anotación y establezca el atributo “href” en la URL a la que desea que lleguen los usuarios si su sitio no es suitable con su idioma.
Me gusta esto (mostrado al last):
<hyperlink rel="alternate" href="https://instance.com" hreflang="en-us" />
<hyperlink rel="alternate" href="https://instance.com/es/" hreflang="es-es" />
<hyperlink rel="alternate" href="https://instance.com/pt/" hreflang="pt-pt" />
<hyperlink rel="alternate" href="https://instance.com/pt/" hreflang="pt-br" />
<hyperlink rel="alternate" href="https://instance.com" hreflang="x-default" />
¿Adónde va una etiqueta Hreflang?
Hay tres formas de implementar atributos hreflang:
- En el encabezado HTML de la página
- En el encabezado HTTP (para archivos que no son HTML como PDF)
- En el mapa del sitio XML
1. En el HTML
La forma más básica de indicar sus páginas alternativas es en el código HTML de la página.
Simplemente agregue todos los atributos hreflang relevantes en la parte
de la página.Recuerde: cada versión de idioma de un artículo debe hacer referencia a sí misma. Así como todas las demás versiones de idiomas.
Así es como se ve la sintaxis de nuevo para cada elemento:
<hyperlink rel="alternate" href="url_of_page" hreflang="lang_code" />
El único problema actual con este método es que puede ser complicado y llevar mucho tiempo.
Por ejemplo, cada vez que traduce un artículo a otro idioma, debe regresar y agregar otra etiqueta hreflang a todas las versiones del mismo.
Nota: Para una gran cantidad de entradas de hreflang, probablemente desee indicar sus páginas alternativas a través de su mapa del sitio. Veremos cómo puedes hacer eso en un momento.
Para crear o modificar etiquetas hreflang en HTML, intente usar una herramienta hreflang.
Para este ejemplo, usaremos el de Aleyda Solis. herramienta generadora de hreflang.
Simplemente ingrese la URL, el idioma y el país para cada versión del artículo en el que está trabajando.
Seleccione “Etiquetas a incluir en el head space de las páginas HTML” y haga clic en “GENERAR LAS ETIQUETAS HREFLANG PARA ESTAS URL.”
Luego, copie el código y péguelo en la etiqueta
de cada página.
Los encabezados HTTP son excelentes para implementar atributos hreflang para contenido que no es HTML en su sitio internet.
Como los PDF, por ejemplo.
Los códigos de encabezado HTTP transfieren datos entre un servidor y un cliente. Este código contiene información sobre la fecha de la solicitud, el remitente, el idioma preferido, and many others.
Nota: también puede usar este método para contenido HTML. Pero puede agregar mucha carga en términos de solicitudes del servidor. Por lo tanto, es mejor que lo use solo cuando sea estrictamente necesario.
El formato del encabezado en HTTP se ve así:
Hyperlink: <url 1>; rel="alternate"; hreflang="language code 1",
<url 2>; rel="alternate"; hreflang="language code 2", …
Esto es lo que significa la sintaxis:
- Código de idioma x es el código de idioma (o región) objetivo de esta página
Debe indicar un conjunto de valores
Supongamos que crea un documento PDF en tres versiones: una en inglés, una en español y otra en portugués.
Su encabezado HTTP debería verse así (para cada archivo):
Hyperlink: <https://instance.com/doc.pdf>; rel="alternate"; hreflang="en",
<https://instance.com/es/doc.pdf>; rel="alternate"; hreflang="es",
<https://instance.com/pt/doc.pdf>; rel="alternate"; hreflang="pt"
3. En el mapa del sitio XML
El tercer método de implementación de hreflang es a través de su XML mapa del sitio.
Un mapa del sitio XML es un archivo que proporciona a los motores de búsqueda información sobre las páginas de su sitio.
Por lo tanto, es una excelente manera de informar a Google sobre todas las variantes de idioma y región de cada URL.
También tiene un gran beneficio:
El mapa del sitio XML le permite realizar cualquier cambio en sus atributos hreflang, todo en un solo lugar.
Con los métodos hreflang de encabezado HTML y HTTP, debe ingresar y actualizar varios archivos cada vez que obtiene un weblog o documento traducido a otro idioma. Se vuelve desordenado.
Para comenzar, debe agregar un elemento
Incluido a sí mismo.
Lo que significa:
Si tiene tres versiones de una página, su mapa del sitio tendrá tres entradas. Uno para cada URL. Y cada una de esas entradas tendrá tres listados idénticos.
Si utilizamos nuestro ejemplo unique del weblog en inglés, español y portugués, así es como se verá la parte del mapa del sitio para esta publicación de weblog:
<url>
<loc>https://https://instance.com</loc>
<xhtml:hyperlink rel="alternate" hreflang="en-us"
href="https://https://instance.com" />
<xhtml:hyperlink rel="alternate" hreflang="es-es"
href="https://instance.com/es/" />
<xhtml:hyperlink rel="alternate" hreflang="pt-br"
href="https://instance.com/pt/" />
</url>
<url>
<loc>https://instance.com/es/</loc>
<xhtml:hyperlink rel="alternate" hreflang="en-us"
href="https://https://instance.com" />
<xhtml:hyperlink rel="alternate" hreflang="es-es"
href="https://instance.com/es/" />
<xhtml:hyperlink rel="alternate" hreflang="pt-br"
href="https://instance.com/pt/" />
</url>
<url>
<loc>https://instance.com/pt/</loc>
<xhtml:hyperlink rel="alternate" hreflang="en-us"
href="https://https://instance.com" />
<xhtml:hyperlink rel="alternate" hreflang="es-es"
href="https://instance.com/es/" />
<xhtml:hyperlink rel="alternate" hreflang="pt-br"
href="https://instance.com/pt/" />
</url>
</urlset>
Puedes usar el mismo herramienta generadora de hreflang para crear o modificar etiquetas hreflang en un mapa del sitio XML.
Comience ingresando la URL, el idioma y el país para cada versión.
Luego seleccione “Atributos en un Sitemap XML” y haga clic en “GENERAR LAS ETIQUETAS HREFLANG PARA ESTAS URL.”
Luego, copie el código y agréguelo al mapa del sitio XML de su sitio.
Cómo encontrar y solucionar problemas de Hreflang
Puede encontrar y solucionar problemas de hreflang auditando regularmente su sitio internet.
Y usando Semrush’s Auditoría del sitio herramienta como un verificador de hreflang.
Comience ingresando su dominio y creando un proyecto.
Después de que la herramienta rastree su sitio, diríjase a “Asuntos” pestaña. Luego, busque “hreflang” en la barra de búsqueda.
Me gusta esto:
Verá una lista de todos sus conflictos de hreflang. Incluyendo el tipo de problema y cómo solucionarlo.
Como referencia, estos son los problemas de hreflang más comunes y cómo solucionarlos:
Problemas con los valores de Hreflang
Este tipo de advertencia se activa cuando los códigos de país o idioma no están en el formato correcto.
Es importante solucionar este problema porque los motores de búsqueda pueden ignorar las etiquetas hreflang con códigos incorrectos.
Y si ignoran la etiqueta, pueden mostrar a los usuarios la versión incorrecta de su página. Eso no es bueno para tu search engine optimisation.
Solucione este problema revisando las etiquetas hreflang en cada URL afectada.
Asegúrese de que la sintaxis de cada atributo siga los códigos correctos. ISO 639-1 de dos letras para idiomas e ISO 3166-1 alfa-2 para países y regiones.
Siempre puede usar una herramienta generadora de hreflang para verificar o crear sus etiquetas.
Sin Hreflang autorreferenciado
El atributo hreflang en cada página debe incluir una referencia a todas las páginas que sirven como alternativas. Incluyendo una referencia a sí mismo.
Si los atributos hreflang no se autorreferencian, los motores de búsqueda pueden ignorarlos o malinterpretarlos.
Solucione este problema revisando cada URL afectada y agregando una etiqueta hreflang autorreferenciada al conjunto de atributos hreflang.
Problemas con enlaces Hreflang incorrectos
Este tipo de advertencia se activa cuando hay un problema con el enlace en el atributo hreflang.
Por ejemplo, el enlace puede apuntar a una página que está rota o ha sido redirigida.
Si esto sucede, los motores de búsqueda pueden ignorar sus atributos hreflang.
Solucione este problema revisando cada URL afectada y cambiando la anotación para asegurarse de que apunte a una página de trabajo.
Conflicto de Hreflang y Rel=URL canónicas
Este tipo de advertencia ocurre cuando una etiqueta hreflang hace referencia a una URL no canónica.
Una etiqueta canónica es un atributo HTML que indica la versión principal de una página cuando tiene páginas duplicadas (o casi duplicadas). Le cube a los motores de búsqueda qué versión de una página tiene más autoridad y debería aparecer en los resultados de búsqueda.
Entonces, ¿qué sucede si sus atributos hreflang hacen referencia a una versión no canónica de una página en explicit?
Las dos etiquetas se contradicen entre sí:
- El atributo hreflang cube que la página no canónica debería aparecer en los resultados de búsqueda para los usuarios que hablan idiomas particulares.
- La etiqueta canónica cube que debería aparecer una versión diferente de esa página en los resultados de búsqueda.
En pocas palabras: va a confundir a los motores de búsqueda. Y probablemente ignorarán hreflang, canonical o ambos.
Solucione este problema yendo a cada URL afectada y cambiando las anotaciones hreflang para que apunten a las URL canónicas.
Automatice sus auditorías de etiquetas Hreflang
Después de aprender a implementar etiquetas hreflang y solucionar problemas relacionados, vaya un paso más allá al automatizar sus auditorías hreflang.
De esa manera, se le notificará cualquier problema antes de que se convierta en un problema mayor.
Para automatizar sus auditorías hreflang, configure un informe recurrente en Auditoría del sitio.
En la esquina superior derecha de su tablero, haga clic en el símbolo de “configuración” del engranaje.
Luego, desplácese hacia abajo y busque “Horario”.
Luego verá una ventana emergente donde puede elegir la frecuencia con la que desea ejecutar su auditoría.
Ajústelo a su día preferido. Luego, marque la casilla “Enviar un correo electrónico” opción.
Y haga clic en “Salvar.”
Los nuevos problemas se mostrarán en el panel “Internacional search engine optimisation” cuadro después de cada rastreo. Por lo tanto, asegúrese de revisarlo regularmente.
Ahora está listo para solucionar cualquier problema de implementación de hreflang que surja y mantener sus esfuerzos de search engine optimisation funcionando sin problemas.
