Los pins enriquecidos son una característica de la red social visual Pinterest que nos permiten incluir, de manera automática, información adicional relevante en nuestros pins, tal como precios de producto, críticas de películas o ingredientes de recetas, entre otros.
Actualmente, existen cuatro tipos de pins enriquecidos:
- Pins de producto: pueden contener información en tiempo real sobre el precio, disponibilidad y lugar de compra.
- Pins de películas: pueden contener su ficha técnica y críticas del fime.
- Pins de recetas: pueden contener información sobre ingredientes y tiempo de preparación.
- Pins de artículos: contienen información adicional como el titular, descripción y autor, así como un enlace de vuelta a la fuente original.
Para crear pins enriquecidos como los mencionados debemos dirigirnos a la dirección http://developers.pinterest.com/rich_pins y seleccionar el tipo de pin que desamos crear.
A continuación debemos preparar nuestro sitio web con las meta etiquetas apropiadas. Podemos hacer esto mediante el marcado semántico de los estándares Open Graph de Facebook o Schema.org, siendo más recomendable el segundo al ser el soportado por Google y otros motores de búsqueda.
Para marcar una página de producto de nuestro sitio web con el estándar Schema, tendremos que introducir en el cuerpo HTML de la misma un fragmento de código como el siguiente:
<meta property=»og:site_name» content=»Nombre de la tienda» /> <div itemscope itemtype=»http://schema.org/Product»> <meta itemprop=»name» content=»Nombre del producto» /> <meta itemprop=»url» content=»http://www.direcciónurldelapáginadeproducto» /> <span itemprop=»description»>Descripción detallada del producto</span> <div itemprop=»offers» itemscope itemtype=»http://schema.org/Offer»> <span itemprop=»price»>Precio del producto</span> <meta itemprop=»priceCurrency» content=»EUR» /> <meta itemprop=»availability» itemtype=»http://schema.org/ItemAvailability» content=»http://schema.org/InStock» /> </div>De este modo, los productos de nuestra tienda enviados a Pinterest aparecerán con toda la información introducida.
Para introducir la información de una receta, el código quedaría como sigue:
<meta property=»og:site_name» content=»NombreDelSitioWeb» /> <div itemscope itemtype=»http://schema.org/Recipe»> <span itemprop=»name»>Nombre de la receta</span> <span itemprop=»description»>Descripción de la receta</span> <meta itemprop=»url» content=»http://www.direccióndelapáginadelareceta.html» /> Preparation Time: <meta itemprop=»prepTime» content=»PT10M»>Tiempo de preparación Ingredients: <span itemprop=»ingredients»Ingrediente 1</span>, <span itemprop=»ingredients»>Ingrediente 2</span>, <span itemprop=»ingredients»>Ingrediente 3</span>, <span itemprop=»ingredients»>Ingrediente 4</span>. Instructions: <span itemprop=»recipeInstructions»> Instrucciones de preparación. </span> </div>Para introducir información sobre una película, introduciríamos los siguientes datos soportados por Schema:
<meta property=»og:site_name» content=»NuestroSitioWeb.com» /> <div itemscope itemtype=»http://schema.org/Movie»> <meta itemprop=»url» content=»http://www.páginadelapelícula.html» /> <h1 itemprop=»name»>Título de la película</h1> <span itemprop=»description»>Descripción o sinopsis</span> Director: <div itemprop=»director» itemscope itemtype=»http://schema.org/Person»> <span itemprop=»name»>Nombre del director/span> </div> Stars: <div itemprop=»actor» itemscope itemtype=»http://schema.org/Person»> <span itemprop=»name»>Nombre del actor protagonista</span>, </div> <div itemprop=»actor» itemscope itemtype=»http://schema.org/Person»> <span itemprop=»name»>Nombre de la actriz protagonista</span>, </div>Para marcar un contenido como pin de artículo, el código quedaría como sigue:
<meta property=»og:site_name» content=»Nombre del sitio web» /><div itemscope itemtype=»http://schema.org/Article»>
<meta itemprop=»url» content=»http://www.nombredelsitioweb.com/2013/10/articulo.html» />
<span itemprop=»name» content=»Título del artículo» />
by <span itemprop=»author» content=»Nombre del autor» />
<span itemprop=»description»>Descripción o sumario del artículo.</span>
</div>
Tras introducir el código en nuestras páginas, debemos validarlas en dirección http://developers.pinterest.com/rich_pins/validator .