Rich Snippets en Prestashop Breadcrumb

Hoy voy a explicar cómo mejorar el SEO On Page de nuestra tienda, y nos vamos a poner manos a la obra con la implementación manual de los Rich Snippets en nuestro Prestashop.
Existen módulos que por una pasta te implementan algunas cosas, pero personalmente lo que he visto no me ha terminado de convencer, así que me he decidido a realizar una guía completa siguiendo las directrices de Google y con la ayuda del Asistente de marcado de datos estructurados, para tener una Rich Snippets perfectas con los comentarios incluidos.
No te llevará más de 30 minutos en integrarlo todo y tendrás tu tienda con los Rich Snippets en Full Equip. A que mola he!! ;)



Los Rich Snippets es una forma de etiquetar y resumir la información más relevante de una página, para que los motores de busqueda puedan catalogar y presentar mejor los resultados. Para más información puedes echarle un ojo a la documentación de Google sobre Rich Snippets.
Si te has leído la documentación verás que Google recomienda los microdatos, de entre los otros dos posibles, Esto es porque los microdatos son el estándar para HTML 5, un punto importante a tener en cuenta a la hora de programar nuestra tienda ya que es el futuro.
El contenido más importante para etiquetar un Ecomerce son los productos, y por la arquitectura de prestashop vamos a implementar los Rich Snippets en 2 fases, El Breadcrumb y la página de producto.
NOTA: Como siempre toda la programación se hace en local, y si funciona correctamente lo subimos a la web de producción.

El Breadcrumb

El Breadcrumb (o migas de pan) es la ruta de navegación que se muestra en cada página y nos indica en que categoría estamos respecto a la home.

Para implementar los Rich Snippets del Breadcrumb, tendremos que modificar una clase de prestashop. Todas las modificaciones de Core se han de realizar siempre a través de un Override. Aún no he explicado nada de los Overrides, pero seguir estos pasos a pies juntillas y todo irá perfecto.

Lo primero es ir a la carpeta "mitienda.com/classes" y abrimos con el Notepad++ el archivo Tools.php

Ahora pulsamos "Ctr+F" para abrir el buscador, le damos la siguiente línea de código "public static function getPath" y pulsamos en Buscar siguiente.

Bien ya hemos localizado la función que genera el Breadcrumb. Como ya hemos explicado no vamos a modificar el código que vemos aquí, lo que tenemos que hacer es copiar la función en otro archivo, pero antes de copiar tenemos que preparlo.

Dentro de Notepad++ pulsaremos "Archivo > Nuevo" y aparecerá una nueva pestaña y escribiremos lo siguiente.

-------------------------------------------
<?php

class Tools extends ToolsCore
{

}
------------------------------------------



Nos quedará algo así.
Bien ahora sí que podemos copiar toda la función y pegarla dentro de  los corchetes de nuestro nuevo documento.



Aconsejo copiar también los comentarios de la función ya que suele tener información útil, y aprovechamos para añadir en la cabecera de los comentarios lo siguiente:

* WWW.MITIENDA.COM
* INSERCIÓN DE RICH SNIPPETS EN LOS BREADCRUMB
* FECHA

Esto no sirve para mejorar la organización y tener una marca para conocer todos los archivos que hemos modificado y que es lo que se ha hecho, esencial para futuras actualizaciones o migraciones de versión.

Los cambios.

Sobre la Línea 59-60

Paso 1
Ahora buscaremos el siguiente código

<a href="'.Tools::safeOutput

y lo cambiaremos por el siguiente

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="'.Tools::safeOutput

Paso 2
Al final de esta línea nos encontraremos el siguiente código

'UTF-8').'">' : '').

y lo sustituiremos por

'UTF-8').'"><span itemprop="title">' : '').

Paso 3
Dos líneas más abajo encontraremos el siguiente código:

(($n < $n_categories || $link_on_the_item) ? '</a>' : '').

y lo sustituiremos por

(($n < $n_categories || $link_on_the_item) ? '</span></a></span>' : '').

Ahora tenemos los Rich Snippets en el apartado de las categorías, ya solo nos falta en el apartado de los CMS.

Repetiremos el Paso 1 dos veces más, donde encontraremos el código sobre las líneas 76 y 79.
En la primera cambiaremos el siguiente final de línea.

'UTF-8').'</a><span class="navigation-pipe">'.$pipe.'</span>'.$path;

por

'UTF-8').'</span></a></span><span class="navigation-pipe">'.$pipe.'</span>'.$path;

Y en la última encontraremos este final de línea

'UTF-8').($link_on_the_item ? '</a>' : '');

y lo cambiaremos por.

'UTF-8').($link_on_the_item ? '</span></a></span>' : '');

Bien, ya tenemos el código bien implementado, ahora solo queda hacer un Guardar Como en la carpeta mitienda.com/override/classes/Tools.php (Respetar la mayúsculas de Tools)



Listos!! ya tenemos unos flamantes Breadcrumbs con Rich Snippets. Ahora solo falta entrar en una ficha de producto, y ver que se genera el código.



NOTA: Si no funciona acordaros de borrar el archivo class_index.php, está ubicado en la carpeta "mitienda.com/cache/" y que yo sepa este archivo está a partir de la versión 1.5.X de prestashop.
Una vez visto que funciona todo correctamente lo podemos subir a nuestra web.
Podéis comprobar con la Herramienta de pruebas de datos estructurados de Google que está todo correcto.

En el siguiente Post explicaremos como colocar los Rich Snippets en la ficha de producto.