X

Qué es y cómo usar hreflang en tus páginas web

La etiqueta hreflang sirve normalmente para indicar a Google y resto de buscadores el idioma específico en el que está una página web en concreto. Los motores de búsqueda utilizan estas etiquetas hreflang para en cierto modo redireccionar a los usuarios a la página con el idioma correcto dependiendo de su ubicación, configuración o navegador, pero ¿Qué es hreflang y cómo debemos utilizarlo?

Posiblemente si tienes una web pequeña no sea muy relevante, pero si tienes un sitio en varios idiomas (o en uno solo) y empieza a tener un tamaño considerable, posiblemente te interese tener en cuenta las etiquetas hreflang para indicar el idioma de cada una de tus páginas, así como las traducciones en otros idiomas en caso de que existan.

¿Qué es multilenguaje?

Cuando hablamos de páginas web nos estamos refiriendo principalmente al hecho de que una misma página esté disponible en varios idiomas diferentes. Para tener un ejemplo más claro podríamos utilizar cualquier artículo de la Wikipedia, en el que podremos encontrar una lista con los idiomas en los que está disponible el mismo artículo.

Deberías utilizar hreflang si…

Tu página web está disponible en varios idiomas, o tu sitio está disponible en más de un idioma, entonces deberías tener muy en cuenta el uso de la etiqueta hreflang. Desde luego hay varias formas en las que esta etiqueta puede ayudar a Google a entender el contenido de nuestra página, así como de sus variaciones.

Si buscamos en las recomendaciones del buscador, podremos encontrar que se menciona el uso de rel=»alternate» hreflang=»xx» como mínimo en estos casos:

  • Traducir únicamente partes del diseño o template de la página, como la navegación, cabecero y pie de la página, mientras utilizamos otro idioma para el contenido. Un buen ejemplo de una página de este tipo sería un foro, donde los usuarios publican contenido en su idioma.
  • En los casos en los que hay diferencias geográficas con dialectos diferentes de un idioma parecido, por ejemplo entre catalán y valenciano, inglés americano e inglés de reino unido, etc.
  • Las páginas del sitio están completamente traducidas, como en wikipedia.

Ubicaciones del tag hreflang

Hay un poco de controversia acerca de donde colocar las etiquetas de idioma en las páginas, pero según recomendaciones de Google y experiencias propias sobre el funcionamiento la ubicación del código debe ser dentro del <head> de nuestra página, preferiblemente al principio, antes del resto de etiquetas link.

El ejemplo de código a poner en nuestro sitio sería el siguiente, teniendo en cuenta que nuestra página está en español y queremos enlazar la página en inglés:

<link rel="alternate" hreflang="en" href="http://en.vichaunter.org/" />

Por otro lado, si queremos hacer lo mismo para archivos que no son páginas, como por ejemplo imágenes o pdfs, podemos incluir un código como este en nuestro .htaccess:

Link: <http://en.vichaunter.org/>; rel="alternate"; hreflang="en"

También se pueden añadir a los sitemaps en xml, pero su inclusión es algo diferente y no la veremos en este artículo.

Ejemplos de uso de la etiqueta hreflang

Hay varias formas de utilizar este tag, por lo que vamos a revisar un poco cuales son las que más nos van a interesar, y cómo podemos combinarlas. La página predeterminada, es decir, el idioma principal que nosotros usemos como orígen para todos los demás idiomas podremos indicarlo con x-default de la siguiente manera:

<link rel="alternate" href="//www.vichaunter.org/" hreflang="x-default" />

Después de esto, cada uno de los idiomas en los que tengamos nuestra página podremos indicarlos colocando las etiquetas necesarias en la misma sección que la anterior, por ejemplo supongamos que la misma página estaría en inglés americano, inglés de reino unido y francés, nos quedaría de la siguiente forma:

<link rel="alternate" href="http://en.vichaunter.org/" hreflang="en-us" />
<link rel="alternate" href="http://gb.vichaunter.org/" hreflang="en-gb" />
<link rel="alternate" href="http://fr.vichaunter.org/" hreflang="fr" />

Así estaríamos indicando a los motores de búsqueda que tenemos varios idiomas, e incluso que algunos de ellos son de un tipo de idioma algo más concreto que lo que podría ser por ejemplo indicar simplemente inglés.

Como nota adicional me gustaría remarcar que nos podría resultar interesante indicar las páginas alternativas vía opengraph, lo cual sería un código como el siguiente:

<meta >
La primera línea estaría indicando el idioma predeterminado de nuestra página, y las otras que añadamos indicarían los otros idiomas en los que estaría disponible la misma página.

¿Tiene efecto hreflang en nuestro SEO?

Esta es la pregunta por excelencia cuando hablamos de esta etiqueta en concreto, y a pesar de que parece depender de unas cuantas variables que no siempre se tienen en cuenta de la misma forma, la respuesta parece bastante simple.

Sí que tiene impacto en nuestro posicionamiento el uso de este tipo de etiquetas, que según los buscadores deberían utilizarse. Sabiendo esto y si realizamos una pequeña investigación al respecto seremos conscientes de que tiene ciertos efectos, que no siempre son significativos, pero que nos puede ayudar a conseguir un público más acorde con nuestro sitio web.

¿Utilizas hreflang en tu página? ¿Cuántos idiomas tienes?

VicHaunter:
    Categorías: Ayuda

Ver comentarios (23)

  • En cualquier caso, y al ser todo Español o derivados (que son bastante similares), lo mejor sería definir una como la principal, pero como puede que en tu caso no sea posible lo mejor es utilizar rel="canonical" para indicar desde todas cual es la original. Esto es precisamente por que todas son español o algún derivado que puede no cambiar mucho.

    Debes decidir para cada página concreta (artículo o producto), cual será el de referencia, y poner en todas las páginas menos en el de referencia la etiqueta:
    link rel="canonical" href="https://mitienda-shop.com/miproducto"
    teniendo en cuenta que este enlace esté en https:/ /*.mitienda-shop .com/*miproducto*

  • Hola Vichaunter, me gusto mucho tu artículo, en mi caso, tengo un par de tiendas hechas con el CMS OpenCart , version 1.5.6 y la verdad no encuentro en que archivo exactamente incluir el hrflang, podrias echarme un cable ? Tengo registradas en Google mas de 400 paginas internas del dominio principal y ha descendido un poco el posicionamiento, buscando las razonez me tope con tu pagina... espero puedas ayudarme.. Gracias!

  • Hola, felicidades por el artículo.
    Tengo algunas secciones de mi web en inglés y he de poner el hreflang, y mi pregunta de principiante es: esto se hace creando un subdominio de mi dominio .com y colocar allí la página en inglés? Gracias por tu respuesta.

    • Puedes hacerlo o bien con un subdominio eng.midominio.com o bien como subcarpeta midominio.com/eng. En cualquiera de los dos casos se indexará correctamente. Los buscadores no le dan demasiada importancia a esto.

      Si quieres mantener las dos secciones algo más separadas usa subdominios, y si quieres que tengan mayor integración entonces usa subcarpetas.

      • Muchas gracias VicHaunter! Creo una carpeta "eng" en la raíz pero luego no se lo que debo guadar dentro de ella para que el documento 'exista'. La web está hecha en Prestashop, y los documentos que me interesa traducir son cms que he creado. Perdona mi ignorancia.

        • Si es con prestashop no tienes que crear ninguna carpeta. Si no me equivoco en la parte de los idiomas puedes seleccionar como se visualiza. He montado alguna tienda y los idiomas siempre suelen salir en subcarpetas pero ahora mismo no recuerdo la configuración exacta. Para que funcione con subcarpetas tienes que tener habilitados los url rewrites (que también son buenos para el SEO.

  • Hola. Una pregunta: ya sé que recomiendas incluir hreflang aunque la página sólo esté en un idioma pero, ¿no sería suficiente para la geolocalización por parte de Google la indicación de idioma de la cabecera?. En mi caso: ya está indicando un idioma y una localización ¿para qué usar además hreflang?
    Gracias de antemano por tu respuesta

  • todos los blogs teneis lo mismo os copiáis unos a los otros llevo buscando por toda la web algo tan simple como saber si es necesario poner una etiqueta hreflang en una web que esta solo en español y ningún blog pone nada al respecto todos poneis lo mismo creo que si goole castigara el plagio creo que ninguno de vosotros saldría en los resultado de búsqueda.

    • Lo primero comentarte que Google castiga el plagio, que mis artículos no son copias a pesar de que otros sé con seguridad que me copian y que te puedo responder a lo que me preguntas.

      Si tienes una web en un solo idioma podrías pensar que no es necesario colocar el hreflang, pero google lo recomienda para poder segmentar mejor tu contenido hacia la zona que le especifiques. Es decir, puedes tener una web en español, pero ser para argentina, eso google si no le metes el hreflank es-ar no tiene ni idea de si es es-es, es-ar o es-mx, y si tienes una tienda en uno de los países puede ser un problema. Si tu web es a nivel mundial puedes no ponerlo y no se seccionará tanto tu público.

      Además si lees el artículo al final indico claramente que tiene efecto en el SEO...

  • Lo que has puesto ahí es un subdominio, si fuese en subdirectorios tendrías que apuntar al subdirectorio pero en base sería correcto sin esas dobles comillas dentro de cada valor.

  • y si tengo mi web http://saludteka. com en español únicamente pero orientada a Estados Unidos es posible utilizar esta etiqueta? tiene algo que ver con comprar otro dominio adicional ?

    • Esta etiqueta sirve para indicar el dominio de tu página en otro idioma, por si tienes un sitio multilenguaje (ya bien sea con carpetas, dominios o subdominios), para indicar la zona en la que quieres que se muestre tu web debes revisar el tag language o lang

      • Si la web está en un único idioma (castellano), no hace falta incluir hreflang, ni el x-default, ¿no?

        • En un principio no es necesario, pero como google lo recomienda para ofrecer mejores resultados por geolocalización (es-ES, es-AR, etc), lo mejor es ponerlo.

Artículo relacionado
Los comentarios de Disqus están cargando....

Como todos, usamos cookies.