Cómo Colocar Fragmento Destacado de Producto en BLOGGER

Fragmento de Reseña Destacado de Producto en Blogger

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"
snippet de reseña de producto

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

Déjame un mensaje.

Publicar un comentario (0)
Artículo Anterior Artículo Siguiente