hreflang y canonical en prestashop - SeisDoble
17272
post-template-default,single,single-post,postid-17272,single-format-standard,ajax_fade,page_not_loaded,,side_area_uncovered_from_content,qode-child-theme-ver-1.0.0,qode-theme-ver-9.1.3,wpb-js-composer js-comp-ver-4.12.1,vc_responsive
 

hreflang y canonical en prestashop

25 Ago hreflang y canonical en prestashop

hreflang – ¿Para qué sirve?

Cuando se está gestionando un sitio que es multilenguaje es necesario informar a los buscadores de las versiones alternativas de cada página en otros idiomas. Este es el objetivo de la etiqueta hreflang y tiene el siguiente formato:

<link rel=”alternate” hreflang=”xx” href=”direccion alternativa”>

Donde xx es el código ISO del lenguaje alternativo. Así, por ejemplo, si tenemos una página en castellano midominio/es/vinos/tintos con una variante en ingles midominio/en/wines/red las etiquetas hreflang que deberían incluirse son:

<link rel=”alternate” hreflang=”en” href=”http://midominio/en/wines/red”>

<link rel=”alternate” hreflang=”es” href=”http://midominio/es/vinos/tintos”>

canonical – ¿Para qué sirve?

La etiqueta canonical se utiliza para indicar a los buscadores cual es la versión preferida de una página a la que se puede acceder mediante varias URLs. También en aquellos casos en los que la información se puede extender en varias páginas numeradas, como por ejemplo en listados de productos por categorías:

midominio/vinos/tintos

midominio/vinos/tintos?p=2

midominio/vinos/tintos?p=3

En este caso la etiqueta canonical identificaría la página midominio/vinos/tintos como versión preferida para los buscadores.

La etiqueta canonical se debe codificar como:

<link rel=”canonical” href=”http://midominio/vinos/tintos”>

Con esto se atienden las sugerencias de mejora que proporciona webmaster tools en cuanto a las etiquetas de títulos duplicados y metadescripciones duplicadas.

hreflang y canonical en prestashop

Prestashop no trae de serie el código necesario para incluir las etiquetas hreflang ni canonical. Existen varios plugins que pueden hacer eso, pero este es un código sencillo que incluye las etiquetas sin instalar nuevos plugins.

Código para implementar hreflang y canonical en prestashop

<!– canonical y hreflang –>
{if $page_name == ‘index’ or $page_name == ‘search’}
<link rel=”canonical” href=”{$base_dir}{$lang_iso}/” />
{foreach $languages as $lang}
<link rel=”alternate” hreflang=”{$lang.iso_code}” href=”{$base_dir}{$lang.iso_code}/” />
{/foreach}
{elseif $page_name == ‘best-sales’
or $page_name == ‘cart’
or $page_name == ‘discount’
or $page_name == ‘new-products’
or $page_name == ‘prices-drop’
or $page_name == ‘manufacturer’}
<link rel=”canonical” href=”{$base_dir}{$lang_iso}/{$request_uri|substr:4|regex_replace:’/\/(.*)/’:”|regex_replace:’/\?(.*)/’:”}” />
{foreach $languages as $lang}
<link rel=”alternate” hreflang=”{$lang.iso_code}” href=”{$base_dir}{$lang.iso_code}/{$request_uri|substr:4|regex_replace:’/\/(.*)/’:”|regex_replace:’/\?(.*)/’:”}” />
{/foreach}
{elseif $page_name == ‘product’}
<link rel=”canonical” href=”{$link->getProductLink($smarty.get.id_product, null, null, null, $id_lang, null, 0, false)}” />
{foreach $languages as $lang}
<link rel=”alternate” hreflang=”{$lang.iso_code}” href=”{$link->getProductLink($smarty.get.id_product, null, null, null, $lang.id_lang, null, 0, false)}” />
{/foreach}
{elseif $page_name == ‘category’}
<link rel=”canonical” href=”{$link->getCategoryLink($smarty.get.id_category, null, $id_lang,null,null )}” />
{foreach $languages as $lang}
<link rel=”alternate” hreflang=”{$lang.iso_code}” href=”{$link->getCategoryLink($smarty.get.id_category, null, $lang.id_lang,null,null )}” />
{/foreach}
{elseif $page_name == ‘cms’}
<link rel=”canonical” href=”{$link->getCMSLink($smarty.get.id_cms, null, false, $id_lang)}” />
{foreach $languages as $lang}
<link rel=”alternate” hreflang=”{$lang.iso_code}” href=”{$link->getCMSLink($smarty.get.id_cms, null, false, $lang.id_lang)}” />
{/foreach}
{else}
<link rel=”canonical” href=”{$base_dir}{$lang_iso}/{$request_uri|substr:4}” />
{foreach $languages as $lang}
<link rel=”alternate” hreflang=”{$base_dir}{$lang.iso_code}/{$request_uri|substr:4|regex_replace:’/\/(.*)/’:”|regex_replace:’/\?(.*)/’:”}” />
{/foreach}
{/if}
<!– /canonical y hreflang –>

¿Donde colocar el código?

Las etiquetas hreflang y canonical deben aparecer en la cabecera de todas las páginas del sitio entre <head> y </head>. Para conseguir esto se debe editar el fichero header.tpl que se encuentra en el directorio midominio/themes/xxxxx/, donde xxxx es el tema que se está utilizando. No está de más recordar que antes de realizar cualquier modificación en el fichero es necesario disponer de una copia de seguridad. Lo más fácil es insertar el código justo antes de la etiqueta de cierre de la sección </head>

Copia y pega el código anterior antes de la etiqueta </head> del fichero midominio/themes/xxxxx/header.tpl y comprueba que funciona.

Herramientas de prueba de hreflang

Una vez implementado el código lo mejor es comprobar que es correcto antes de ponerlo en producción. Existen varios sitios online que permiten hacer esta comprobación. Únicamente es necesario introducir las direcciones de las páginas a comprobar y mostrarán los resultados. Estos son algunos de ellos:

FLANGhttp://flang.dejanseo.com.au/
hreflang flang test

NINJA – http://hreflang.ninja/

hreflang Ninja test


 

Apreciamos cualquier comentario y sugerencias de mejora.

Tags:
,
7 Comentarios
  • Javier
    Publicado 09:26h, 20 noviembre

    Buenas , he implementado el código “tal cual” en el fichero header.tpl (de mi tema) entre y , pero da error…. No se carga la pagina…

    • Fernando
      Publicado 10:38h, 20 noviembre

      Hola Javier,
      he visto tu página y no es necesario implementar el hreflang dado que está únicamente en castellano. Las etiquetas ‘canonical’ si las puedes incluir. En cualquier caso debería funcionar.
      Pásame tu fichero header.tpl con el código que has incluido y trataré de ayudarte.
      Un saludo.

  • Pedro
    Publicado 20:02h, 16 diciembre

    Hola,
    Muy interesante el articulo.
    He intentando implementar el codigo en el header de mi theme, pero no hace nada, me puedes ayudar,
    Saludos

    Pedro

    • Fernando
      Publicado 21:23h, 16 diciembre

      Claro que te puedo ayudar. Si no hace nada es mejor que si falla. 🙂 Pásame el código y lo reviso y llámame si lo prefieres.
      Un saludo.
      Fernando.

  • Maria
    Publicado 13:28h, 17 diciembre

    Buenos días, me parece muy interesante y muy bien explicado! pero me surge una duda… a la hora de copiar el código enel head… yo tengo que sustituir algo en el código por el dominio de mi web, etc…? o lo copio y pego tal cual está?

    Saludos y gracias! 🙂

    • Fernando
      Publicado 16:17h, 17 diciembre

      En este código no es necesario sustituir nada. Copia y pega el código anterior antes de la etiqueta . Si tienes alguna duda puedes llamarme.
      Un saludo.

  • Daniel Garcia Sanchez
    Publicado 12:13h, 17 noviembre

    Tremendo aporte.
    Muchísimas gracias Fernando, funciona de maravilla; gracias a ti he ahorrado mucho tiempo con esta tarea.
    Saludos!!