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>' : '').
-------------------------------------------
<?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.
el caso es que he seguido paso a paso y no me funciona.
ResponderEliminarmiro de revisar los pasos, esta comprobado imagino?
Hola Toni, si has realizado los pasos correctamente y no te funciona, puede ser tema de la cache, o del class_index.php. Cuentame si te funciona, y si no dame más detalles para poderte ayudar.
EliminarLos archivos de ejempo los puedes encontrar en http://www.prestashop.com/forums/topic/275929-aporte-rich-snippets-para-prestashop-14x-y-15x/
Hola buenas Javi he estado intentando localizar el arhivo Tools.php pero debe ser que en alguna actualización de prestashop ha desaparecido ese directorio..Ahora dentro de classes hay muchas carpetas que cada una contiene un index.php...Como podría hacerlo?
ResponderEliminarUn saludo.
Hola Dani.
EliminarEl archivo Tools.php original lo encontrarás en la carpeta mitienda.com/classes/
En la carpeta mitienda.com/override/classes/ tienes que crear un archivo con ese nombre y seguir las instrucciones del tutorial.
En el comentario de más arriba indico un tema abierto en el foro de prestashop donde adjunto todos los archivos creados y modificados.
Échale un ojo y me dices que tal te ha ido
Perfecto! no se que me paso el otro día que me hice la picha un lio...jajajaj
EliminarA salido perfecto, todo tal y como indicas que tiene que salir!
Muchas gracias por este tuto tan bueno y tan bien detallado! ;)