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.
