Rich Snippets en Prestashop - Producto

Finalmente he podido reescribir este post corrigiendo algunos fallos y optimizando el código de etiquetado.

Hoy toca terminar la integración de los Rich Snippets en prestashop, como decíamos en el primer post para etiquetar el breadcrumb, la única página que necesitamos integrar los Rich Snippets es la ficha de producto.

¿Qué datos son los que tenemos que etiquetar?

Si buscas por internet que etiquetar te encontrarás muchos ejemplos y de Google puedes encontrar el Asistente de marcado de datos estructurados que te ayudará y te aconsejará que etiquetar dependiendo del tipo de página que quieras, un artículo, un producto, un restaurante, etc.. Parece muy guay pero aconsejo por ahora no hacerle ni caso porque este asistente está en continuo cambio y no contempla los mismos datos que recomienda la Ayuda para webmasters, (el manual de instrucciones para hacer que Google valore tu web y la muestre en las primeras posiciones). Así que después de pelearme con el etiquetado bastantes veces he encontrado una fórmula bien sencilla que evitará errores en el etiquetado y nos dará mejores resultados.

Del producto etiquetaremos lo siguientes valores: El código EAN, el nombre, la imagen de producto, la descripción, la marca, el logo de marca, el precio de venta y la moneda.

De las opiniones etiquetaremos: La valoración media, la cantidad de valoraciones, el valor más alto y el valor más bajo de una opinión, esto lo hablaremos en otro post.

Archivos a tratar.

Para integrar las etiquetas vamos a necesitar únicamente el archivo product.tpl

NOTA: Como referencia tomamos el product.tpl de la plantilla por defecto de Prestashop

Modificaciones de product.tpl

Empezamos con las modificaciones que serán bien sencillas.

En la línea 160 encontraremos el siguiente código <div id="primary_block" class="clearfix" >

Y lo modificaremos dejándolo de la siguiente forma

<div id="primary_block" class="clearfix" itemtype="http://schema.org/Product" itemscope="">

El itemtype de producto sirve para indicar que todo el contenido de ese “div” forma parte de un producto, así que todo lo que marquemos fuera de este div no estará vinculado al producto.

El primer elemento a etiquetar que nos encontramos es la imagen (Linea 186 y 191), aquí hay un condicional que controla si hay una imagen subida del producto o por el contrario ese producto no tiene imagen propia y cargará la típica imagen con el interrogante.

Modificaremos las dos líneas <img… Etiquetaremos las dos de la siguiente forma.

<img itemprop="image" src="{$link->getImageLink($product->lin…

El siguiente elemento que aparece es el nombre, lo contraremos en la línea 234 con un <h1> 

Modificaremos la línea de la siguiente forma <h1 itemprop="name">

Aprovecharemos la línea vacía de abajo para marcar el código EAN añadiendo este código <meta itemprop="gtin13" content="{$product->ean13}" />

La etiqueta <meta> es código invisible que leerá google y no se mostrará en la ficha.

Ahora le toca el turno a la descripción del producto que encontraremos unas pocas líneas más abajo en la 239.

Localizamos el código <div id="short_description_content"… y le añadimos el marcado de la siguiente forma <div itemprop="description" id="short_description_content"…

Ahora nos toca etiquetar los precios y para ello buscaremos la línea 381 donde encontraremos el siguiente código <div class="content_prices clearfix">

Añadiremos a la línea el marcado de precios creando de esta forma un subgrupo dentro del producto. El código se verá así <div class="content_prices clearfix" itemtype="http://schema.org/Offer" itemscope="" itemprop="offers">

Añadiremos en la línea 388 el siguiente código para etiquetar el tipo de moneda <meta itemprop="priceCurrency" content="{$currency->iso_code}" />

Ahora tocará etiquetar el precio de venta en cuestión y lo encontraremos en la línea 392 <span id="our_price_display">{convertPrice price=$productPrice}</span>

Editamos y lo dejamos de la siguiente forma <span itemprop="price" id="our_price_display">{convertPrice price=$productPrice}</span>

Saliendo fuera del contenedor de “offers” nos quedaría crear el marcado de la marca, teniendo en cuenta que en el product.tpl original no aparece nada lo ideal sería crear un código que mostrara este contenido, Google acepta algunos contenido ocultos, como moneda, EAN y otros que no son relevantes a un usuario, pero creo que la marca si es interesante de ser mostrada al menos en alguna de las dos formas posibles, texto o imagen y el otro valor lo etiquetamos con <meta …/>

Donde creamos conveniente dentro del contenedor de producto, añadiríamos estas líneas.

En este caso creamos un contenedor que será otro subgrupo de producto y mostrará la imagen del logo quedando algo más visual y el nombre de la marca lo generamos con una meta.

<div  itemprop="brand" itemscope="" itemtype="http://schema.org/Organization" id="css-marca">
<img itemprop="image" alt="{$product_manufacturer->name}" src="{$img_manu_dir}{$product_manufacturer->id_manufacturer}-manufacturer_default.jpg" />
<meta itemprop="name" content="{$product_manufacturer->name}" />
</div>

Ya hemos terminado con el archivo products.tpl y podéis descargarlo aquí.

Realizaré otro post para el correcto etiquetado de las opiniones.