Fragmento de Reseña Destacado de Producto en Blogger
Alguna vez has consultado en el buscador de Google sobre algún producto de tu interés y seguramente has visto que en ciertos resultados encuentras una línea que muestra la calificación, el precio con el valor de la divisa y si esta disponible el articulo.
Esto hace parte de un Fragmento de reseña de producto que puedes agregar
para que aparezca en los resultados. Normalmente, se usa cuando se hace una
reseña de producto para ofrecerle un mejor valor en los resultados de
búsqueda.
Las reseñas de producto lo puedes ver más seguido en sitios creados en
Wordpress, son más fáciles de integrar instalando un plugin. De igual forma
en sitios de ventas de productos como: Amazon, Ecommerces o Página de
reseñas. Pero si, quieres agregarlo en tu proyecto como HTML o incluso en
Blogger, es posible con los fragmentos adecuados.
Te voy a desvelar cómo agregar un fragmento de producto en los resultados de
Google para Blogger y HTML para darle ese toque destacado a tu reseña. Vamos
a necesitar el código CSS y el DIV para darle buena forma y llamar la
función de nuestro artículo.
Código para la función de fragmento destacado
En esta sección vamos a pegar el siguiente código css en la plantilla HTML
de Blogger para ofrecerle una forma de caja y que tenga buen diseño.
Dirígete a Temas -> Editar HTML -> Copia y pega el siguiente
código antes de ]]></b:skin>
CSS
Copia y pega en la plantilla de tu blogger, en la sección CSS:
.snippet-title {
display:block;
position:relative;
font-family:inherit;
font-size:14px;
font-weight:bold;
background:#E4E4E4;
border-bottom:1px solid #ACACAC;
clear:both;padding:0.5em 1em;
width:100%;
}
.snippet-image {
min-height:190px;
width:200px;
display:inline-block;
vertical-align:top;}
.snippet-image img {margin:3px auto;display:block;}
.aio-info {
width:calc(100% - 200px);
display:inline-block;
vertical-align:top;}
.snippet-label-img {
width:40%;
display:inline-block;
text-align:right;font-size:13px;
font-weight:bold;margin:0;padding:0.3em 0.5em;
vertical-align:top;}
.snippet-data-img {
width:58%;
display:inline-block;
padding:0.3em 0.5em;
vertical-align:top;}
.snippet-type-2
.aio-info {width:100%;}
.snippet-type-2 .snippet-label-img {width:33%;}
.snippet-type-2 .snippet-data-img {width:65%;}
.snippet-clear { clear:both;}
.snippet-markup {width:100%;display:block;}
.snippet-label {
width:33%;
display:inline-block;
text-align:right;
font-size:13px;
font-weight:bold;margin:0;padding:0.3em 0.5em;}
.snippet-data {width:65%;display:inline-block;padding:0.3em 0.5em;}
.ratings {position:absolute;right:1em;top:50%;transform:translateY(-50%);}
.star-blocks {background:transparent;}
.star-rating-control {margin-top:0;}
.star-img img {
box-shadow:none;
margin:-2px 2px;
border:none !important;
padding:0 !important;
display:inline-block;}
.rating-count {font-weight:bold;}
.rating-value {display:none;}
#snippet-box iframe {width:90%;margin:0 auto;display:block;}
@media (max-width:768px) {
.snippet-title {padding:0.5em 0 0.5em 4%;}
.snippet-image {margin:0 0 15px 0;width:100%;}
.aio-info {
width:calc(100% - 200px);
display:inline-block;
vertical-align:top;}
.snippet-label-img {width:40%;
display:inline-block;
text-align:right;
font-size:13px;
font-weight:bold;
margin:0;padding:0.3em 0.5em;
vertical-align:top;}
.snippet-data-img {
width:58%;
display:inline-block;
padding:0.3em 0.5em;
vertical-align:top;}
.snippet-type-2 .aio-info {width:100%;}
.snippet-type-2 .snippet-label-img {width:33%;}
.snippet-type-2 .snippet-data-img {width:65%;}
.snippet-clear { clear:both;}
.snippet-markup {width:100%;display:block;}
.snippet-label {width:33%;
display:inline-block;
text-align:right;
font-size:13px;
font-weight:bold;
margin:0;
padding:0.3em 0.5em;}
.snippet-data {width:65%;display:inline-block;padding:0.3em 0.5em;}
.ratings {position:absolute;right:1em;top:50%;transform:translateY(-50%);}
.star-blocks {background:transparent;}.star-rating-control {margin-top:0;}
.star-img img {
box-shadow:none;
margin:-2px 2px;border:none !important;
padding:0 !important;
display:inline-block;}
.rating-count {font-weight:bold;}
.rating-value {display:none;}
#snippet-box iframe {width:90%;margin:0 auto;display:block;}
@media (max-width:768px) {
.snippet-title {padding:0.5em 0 0.5em 4%;}
.snippet-image {margin:0 0 15px 0;width:100%;}
.aio-info {width:100%;clear:both;}}
#snippet-box {
background:#F5F5F5;
border:1px solid #ACACAC;
font-family:inherit;
font-size:13px;
padding:0;
margin:0 0 15px 0;
width:100%;
max-width:600px;
display:block;}
DIV
Copia el código Div en la entrada de tu blog cuando vas redactar en la parte
de Vista en HTML:
-------------------------------------------
<div class="snippet-type-6" id="snippet-box" style="background: rgb(245,
245, 245); border: 2px solid rgb(172, 172, 172); color: #333333;">
<div class="snippet-title" style="background: rgb(228, 228, 228);
border-bottom: 1px solid rgb(172, 172, 172); color: #333333;">Summary
</div>
<div itemscope="" itemtype="https://schema.org/Product">
<div class="snippet-image">
<img alt="product image" itemprop="image"
src="https://m.media-amazon.com/images/I/71gd3cf6xgL._AC_SL1500_.jpg"
width="180" />
</div>
<div class="aio-info">
<div class="snippet-label-img">Author
Rating</div>
<div class="snippet-data-img">
<span class="fa fa-star
checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span
class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<div class="aggregate_sec"
itemprop="aggregateRating" itemscope=""
itemtype="https://schema.org/AggregateRating">
<div class="snippet-label-img">Aggregate
Rating</div>
<div class="snippet-data-img">
<span
itemprop="ratingValue">3</span> based on
<span class="rating-count"
itemprop="reviewCount">1044</span> votes
</div>
</div>
<div class="snippet-clear"></div>
<div class="snippet-label-img">Brand
Name</div>
<div class="snippet-data-img"><span
itemprop="brand">Tepro</span></div>
<div class="snippet-clear"></div>
<div class="snippet-label-img">Product
Name</div>
<div class="snippet-data-img">
<span itemprop="name">Tepro
Toronto</span>
</div>
<div class="snippet-clear"></div>
<div class="offer_sec" itemprop="offers"
itemscope="" itemtype="https://schema.org/Offer">
<div
class="snippet-label-img">Price</div>
<div class="snippet-data-img">
<span
itemprop="priceCurrency">EUR</span><span itemprop="price">
119</span>
</div>
<div class="snippet-label-img">Product
Availability</div>
<div class="snippet-data-img">
<span content="InStock"
itemprop="availability">Available in Stock</span></div>
<div class="snippet-clear"></div>
</div>
<div class="snippet-clear"></div>
</div>
</div>
</div>
-----------------------------------------------------
Características del Fragmento de Reseña de Producto
Hemos colocado la reseña de un producto como ejemplo: Barbacoa Tepro, puedes
modificar según las especificaciones del producto:
- Imagen del producto, puedes agregar la dirección URL de la imagen a mostrar. <div class="snippet-image">
- Calificación, modifica el valor de la calificación y la cantidad de opiniones recibidas. <div class="aggregate_sec"
- Divisa, coloca la divisa correspondiente del valor del producto y su precio real. <span itemprop="priceCurrency">
- Disponibilidad del producto, debes insertar si el articulo se encuentra disponible o esta agotado. <span content="InStock"
Esta información fue pensada para los editores que les gusta crear
reseñas de productos en blogger, porque no crear una entrada y dejarla con
un Snippet destacado en los resultados para brindar información de
antemano al usuario y se decida en entrar.
Esta información fue sacada de
Fragmentos Estructurados de Google de Producto
Etiqueta
guía de blogger