Bienvenido a este post donde te voy a explicar el funcionamiento y particularidades de la etiqueta hreflang, la cual debe ser utilizada en nuestros proyectos donde tengamos webs que queramos posicionar en múltiples países y/o múltiples idiomas.
Si estás en un proyecto de internacionalización o de multi idioma, entonces te recomiendo leas mi artículo sobre posicionamiento SEO internacional, donde te cuento todo lo que necesitas saber para posicionar internacionalmente.
Si quieres comprobar si tus etiquetas hreflang están bien configuradas, utiliza la herramienta de internacionalización que he creado para comprobar el SEO internacional y multi idioma de una página.
Si quieres profundizar en el tema de las etiquetas hreflang o tienes dudas sobre ciertas particularidades, entonces sigue leyendo.
¿Por qué son tan importantes las etiquetas hreflang?
Contenido del artículo
Muy sencillo, si no utilizas estas etiquetas no podrás decirle a Google qué páginas tiene que posicionar para usuarios que están en ciertos países y/o hablan ciertos idiomas, y lo que es aún peor, Google estará hecho un lío con tu sitio web y penalizará su posicionamiento en los resultados.
¿Cuándo debo utilizar las etiquetas hreflang?
Siempre que estés trabajando en un proyecto que tenga audiencias en diferentes países y/o idiomas y quieras presentar contenido diferente para cada uno (textos, precios, …).
¿Cómo configurar la etiqueta hreflang?
El código que debes utilizar es bastante sencillo aunque es muy fácil cometer errores. Por eso te animo a que utilices mi herramienta de comprobación de etiquetas hreflang para confirmar que todo está bien.
En cada una de nuestras páginas web deberás añadir en la sección HEADER de tu HTML una etiqueta hreflang por cada alternativa que haya a esa misma página. Además, deberás añadir la etiqueta hreflang que confirme la localización de la propia página y el valor por defecto para el caso en el que Google no encuentre la página correcta para el usuario que está haciendo la búsqueda.
La etiqueta hreflang está formada por un único valor o dos valores. En el caso de que haya un único valor, lo que se indica es el idioma (idioma). Si además del idioma queremos especificar el país, entonces utilizaremos dos valores separados por un guión (idioma-país). Digamos que tenemos una página web que queremos posicionar en varios países y en diferentes idiomas dentro de cada país. P. ej. la página /ejemplo queremos que posicione en Argentina, USA, España y España en catalán. Pues bien, para ello, deberemos en la página /ejemplo poner el siguiente código HTML en el header.<header>
...
<link rel=”alternate” hreflang=”es-ES” href=”http://www.ejemplo.com/ejemplo”/>
<link rel=”alternate” hreflang=”ca-ES” href=”http://www.ejemplo.com/ca-es/exemple”/>
<link rel=”alternate” hreflang=”en-US” href=”http://www.ejemplo.com/us/example”/>
<link rel=”alternate” hreflang=”es-AR” href=”http://www.ejemplo.com/ar/ejemplo”/>
<link rel=”alternate” hreflang="x-default" href=”http://www.ejemplo.com/ejemplo”/>
…
</header>
Como podéis ver, hemos referenciado a nuestra propia página (/ejemplo), a todas sus alternativas y la página que debe mostrar Google en el caso que el usuario no cumpla con ninguna de las opciones anteriores (el x-default).
La complejidad de la implementación de las etiquetas hreflang no está en la creación de este código, sino en la creación y alineamiento de este código en todas las páginas de nuestra web.
Toda página web debe tener las etiquetas hreflang cumpliendo la reglas comentadas anteriormente:
- Referenciar a la propia página
- Enumerar las páginas alternativas
- Identificar la página por defecto
Hreflang vía sitemap
Otra opción para implementar las etiquetas hreflang igual de válida que mediante código HTML es vía sitemap.xml.Para el ejemplo utilizado en el caso del header tendríamos que añadir en el sitemap.xml el siguiente código XML.
<url>
<loc>http://www.ejemplo.com/ejemplo</loc>
<xhtml:link
rel="alternate"
hreflang="es-ES"
href="http://www.ejemplo.com/ejemplo"/>
<xhtml:link
rel="alternate"
hreflang="ca-ES"
href="http://www.ejemplo.com/ca-es/exemple"/>
<xhtml:link
rel="alternate"
hreflang="en-US"
href="http://www.ejemplo.com/us/example"/>
<xhtml:link
rel="alternate"
hreflang="es-AR"
href="http://www.ejemplo.com/ar/ejemplo"/>
<xhtml:link
rel="alternate"
hreflang="x-default"
href="http://www.ejemplo.com/ejemplo"/>
</url>
El atributo lang en la etiqueta HTML
Si estás pensando que con utilizar el atributo lang en la etiqueta HTML es suficiente para posicionar por múltiples idiomas y en múltiples países, lamento decirte que estás equivocado.
Esta etiqueta es opcional y Google no la utiliza para el posicionamiento como puedes leer aquí.
Si que es cierto que te recomiendo que la utilices, pues hay muchos robots y aplicaciones que si utilizan este atributo en el tag HTML.
Errores frecuentes
Aunque la implementación y reglas a seguir son muy sencillas, si que es cierto que al tener que implementar la lógica en múltiples páginas puede que se generen errores. A continuación te comento los errores más frecuentes que se pueden cometer:
- Poner primero el código de país y luego el idioma.
- Usar urls relativas en lugar de poner la url completa.
- No referenciar el idioma y/o país de la propia página.
- Indicar el país únicamente, cuando el idioma es el valor obligatorio.
Etiqueta hreflang WordPress, plugins
Si tu web es un WordPress estás de suerte pues hay muchos plugins que te pueden ayudar a configurar las etiquetas hreflang de una forma rápida y sencilla.
Yo te recomiendo sobre cualquier otro plugin que utilices Yoast. Yoast no sólo te ayudará en tu configuración multi idioma, sino que además te ofrece una muy interesante suite de productos para facilitar tus trabajos SEO.
Junto a Yoast, para implementar toda la parte de multi idioma y multi país te recomiendo utilices el plugin WPML. Para mi es el mejor plugin para crear sitios multi idioma.
Etiquetas hreflang Magento, plugins
Si estás en el mundo de Magento, a la hora de encontrar plugins está un poco más complicado, pero te recomiendo eches un vistazo a estos dos:
https://www.magmodules.eu/alternate-hreflang.html
https://www.mageplaza.com/magento-2-seo-extension/
Etiquetas hreflang en Joomla, Plugins
En Joomla, la configuración de estas etiquetas viene en el plugin del sistema Language Filter. Simplemente tendrás que activar la configuración “Añadir Meta Etiquetas Alternativas”.
Si quieres ampliar y dar más soporte a tu internacionalización, puedes echar un vistazo a estos dos plugins:
https://extensions.joomla.org/extension/falang/
https://extensions.joomla.org/extension/languages/multi-lingual-content/db8-hreflang/
Hreflang idiomas y/o países particulares
Hreflang zh-hant, zh-yue, zh-Hano (China)
Si quieres posicionar en China, es importante que sepas que hay tres tipos de idiomas o al menos 3 posibles opciones a la hora de configurar tus etiquetas hreflang. Aquí tienes los códigos que debes utilizar:
- zh-hant: Chino simplificado, por ejemplo zh-hant-CN
- zh-yue: Chino tradicional, por ejemplo zh-yue-TW
- zn-Hano: Cantones, por ejemplo, zn-Hano-CN
Hreflang catalán
Para posicionar una página en catalán, tal y como comentaba al principio de este artículo, se debe especificar el país España y el idioma Catalán. Por ejemplo, el hreflang sería como el código de acontinuación.
<link rel=”alternate” hreflang=”ca-ES” href=”http://www.ejemplo.com/ca-es/exemple”/>Hreflang para UK
Son muchas las personas que cometen el fallo de utilizar UK para posicionar en el Reino Unido. El país de Reino Unido es GB para la etiqueta hreflang.
<link rel=”alternate” hreflang=”en-GB” href=”http://www.ejemplo.com/example/”/>Nota: No os olvidéis que en el Reino Unido hay varios idiomas también.
Hreflang para Brasil
Para Brasil, el hrelflang que debes utilizar es muy sencillo. Si quieres posicionar para el idioma, debes poner Portugues (pt), pero si quieres sólo posicionar en Brasil y no en Portugal y otros paaises que utilizan el portugues, entonces tienes que especificar el país BR.
<link rel=”alternate” hreflang=”pt-BR” href=”http://www.ejemplo.com/ejemplo/”/>Espero te haya parecido interesante y útil este artículo. Si tienes alguna duda o caso para el que necesites ayuda, no dudes en comentar y te daré respuesta.
