Los fragmentos enriquecidos son aquellos que ofrecen más datos de interés cuando se encuentra alguna información en los resultados de búsqueda. Al final de esta publicación vamos a ver como agregar correctamente fragmentos enriquecidos en WordPress.
Pero primero es importante entender que son y como funcionan. Estos fragmentos enriquecidos se muestran en los resultados de búsqueda gracias a los microdatos, mismos que veremos a continuación.
Por ejemplo:
En la imagen anterior vemos un resultado de búsqueda que tiene un fragmento enriquecido, esta información adicional que corresponde a la calificación de los usuarios es justamente de lo que vamos a hablar en esta publicación.
La información adicional de la que estamos hablando muestra el producto o servicio de forma más completa, de esta manera los usuarios pueden ver las valoraciones de las reseñas, quien dejo la reseña, la fecha en la que se realizó la valoración, el puntaje de estrellas y otros datos directamente en los resultados de búsqueda.
Generalidades de fragmentos enriquecidos para utilizarlos correctamente.
Este tipo de información adicional se suele agregar a través de microdatos dentro del HTML, estos microdatos actúan como interpretes para que los motores de búsqueda y otras aplicaciones entiendan mejor el contenido que se está mostrando. Esto sucede porque los motores de búsqueda tienen una compresión limitada del contenido mostrado en la página. Los microdatos son un conjunto de etiquetas HTML 5 que permite hacer eso.
Ahora que tenemos una idea de lo que es un fragmento enriquecido, vamos a construir un bloque de código que nos permitirá agregar información adicional al resultado de búsqueda de un producto, de esta forma entender mejor de que se trata todo esto. Agregar fragmentos enriquecidos a través de microdatos es igual para cualquier sitio web.
Requisitos o recomendaciones antes de empezar con esta guía:
- Conocimiento básico de HTML 5.
- Algo de PHP.
- Core de WordPress y funciones.
- Uso de herramienta de prueba para resultados enriquecidos de Google.
- No está de más echarle un ojo a la página oficial de schema.org.
Dicho esto vamos a analizar el siguiente código HTML mismo que va a tomar como ejemplo datos estructurados para mostrar las reseñas de un producto que en este caso es un producto genérico, por lo cual no cuenta con un título, descripción, precio, etc. Solo vamos a tomar la parte de la reseña.
La reseña va a incluir el autor, la valoración, la fecha, y el cuerpo, es decir, el texto de la reseña.
<div itemtype="https://schema.org/Product" itemscope>
<meta itemprop="name" content="Nombre del producto o servicio" />
<meta itemprop="description" content="La descripcion del producto o servicio que se esta dejando la valoración." />
<div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
<meta itemprop="ratingValue" content="4.4" />
</div>
<div itemprop="review" itemtype="https://schema.org/Review" itemscope>
<div itemprop="author" itemtype="https://schema.org/Person" itemscope>
<meta itemprop="name" content="Pablo Fernandez" />
</div>
<div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
<span itemprop="ratingValue">4</span>
</div>
<meta itemprop="datePublished" content="2021-07-06"/>
<span class="review-date">Julio 06, 2021</span>
<span class="review-text description" itemprop="reviewBody">
Excelente producto, la calidad es muy buena teniendo en cuenta el precio que estamos pagando, sin duda volveré a comprar.
</span>
</div>
</div>Vamos a desglosar el código línea por línea
Podemos ver que el atributo itemtype de la primera etiqueta div encierra todo el resto de etiquetas, lo particular de esta etiqueta es que contiene el tipo de schema que es “Product”.
<div itemtype="https://schema.org/Product" itemscope>Las dos etiquetas siguientes son el nombre y la descripción, estas son obligatorias, y este caso tenemos que colocar el nombre del producto y su descripción. En este caso estamos utilizando meta tags, pero también podríamos usar etiquetas span.
<meta itemprop="name" content="Product Name" />
<meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />Continuamos con una etiqueta div con el atributo itemprop y el valor agreggateRating que es fundamental para agregar la reseña, y dentro de esta misma etiqueta agregamos el atributo itemtype con el valor de agreggateRating
Dentro de esta etiqueta div agregamos la etiqueta meta con el atributo itemprop y el valor de ratingValue
<div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
<meta itemprop="ratingValue" content="4.4" />
</div>Es muy importante mantener la estructura
Vimos que hasta ahora hemos ido colocando los div manteniendo una estructura, está por demás decir que cuando armamos un archivo o bloque de código HTML tenemos que mantener una estructura, pero en este caso que estamos trabajando con microdatos debemos tener en cuenta los atributos que corresponden a cada etiqueta siguiendo la jerarquía que marca schema.org.
Vamos con el bloque que corresponde a las reseñas, este bloque se compone de una etiqueta div con los atributos itemprop= ‘review’ itemtype= ‘https://schema.org/Review’ mantener esta estructura es fundamental de lo contrario no va a funcionar.
Seguido en la etiqueta div colocamos otro div utilizando el atributo autor que es opcional.
Dentro de este div podemos colocar una etiqueta span si queremos mostrar el contenido en el HTML o una etiqueta meta con el atributo name de esta forma: itemprop= ‘name’ content=’Fred Benson’.
El bloque completo para la reseña quedaría de esta forma.
<div itemprop="review" itemtype="https://schema.org/Review" itemscope>
<div itemprop="author" itemtype="https://schema.org/Person" itemscope>
<meta itemprop="name" content="Fred Benson" />
</div>Valoración con estrellas o números
El siguiente bloque es muy útil en el caso de que estemos mostrando la valoración de un producto, bien sea con una cantidad de estrellas o números. Para esto construimos el siguiente div dentro de div review de la siguiente manera.
Construimos una etiqueta div con los siguientes atributos y valores itemprop=’reviewRating’ itemtype=’https://schema.org/Rating’ y dentro dependiendo si queremos mostrar o no la valoración en el HTML colocamos una etiqueta span o una etiqueta meta, quedando de la siguiente manera el bloque div.
<div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
<span itemprop="ratingValue">4</span>
</div>Colocando la fecha de la reseña y el texto
Finalmente, antes de cerrar el div de review colocamos directamente unas etiquetas span o meta, también podríamos crear un nuevo div para esto, pero en este caso vamos a hacerlo de esta manera.
Para la fecha tenemos que usar el valor dataPublished y el atributo content con el valor de la fecha, este valor fácilmente lo podemos obtener utilizando JavaScript o PHP.
En el caso de la etiqueta para el texto utilizamos el itemprop con el valor de reviewBody
<meta itemprop="datePublished" content="2021-07-06"/>
<span>July 06, 2021</span>
<span itemprop="reviewBody">
Excelente producto, la calidad es muy buena teniendo en cuenta el precio que estamos pagando, sin duda volveré a comprar.
</span>Ahora que tenemos una idea clara de la estructura para construir un fragmento enriquecido para reseñas, vamos a utilizar algunas funciones del núcleo de WordPress que nos ayudara a obtener estos datos de manera dinámica.
<div class="review_container">
<div itemtype="https://schema.org/Product" itemscope>
<meta itemprop="name" content="Soluciones en Tecnología Web" />
<meta itemprop="description" content="Soluciones reales utilizando tecnología web para que tú solo te ocupes de tu negocio. Páginas, aplicaciones y software a la medida." />
<div itemprop="review" itemtype="https://schema.org/Review" itemscope>
<div class="review-author" itemprop="author" itemtype="https://schema.org/Person" itemscope>
<span itemprop="name"><?php echo $comment->comment_author; ?></span>
</div>
<div class="star-rating-container" itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
<div class="star-rating" title="<?php echo esc_attr( get_comment_meta( $comment->comment_ID, 'rating', true ) ); ?>">
<span style="width:<?php echo get_comment_meta( $comment->comment_ID, 'rating', true )*20; ?>%"><span itemprop="ratingValue"><?php echo get_comment_meta( $comment->comment_ID, 'rating', true ); ?></span> <?php _e('out of 5', 'woocommerce'); ?></span>
</div>
</div>
<?php
$timestamp = strtotime( $comment->comment_date ); //Changing comment time to timestamp
$date = date('F d, Y', $timestamp);
?>
<meta itemprop="datePublished" content="<?php echo $comment->comment_date; ?>"/>
<span class="review-date"><?php echo $date; ?></span>
<div class="clear"></div>
<span class="review-text description" itemprop="reviewBody">
<?php echo $comment->comment_content; ?>
</span>
</div>
</div>
<div class="clear"></div>
</div>Soluciones prácticas utilizando fragmentos enriquecidos:
- Valoraciones para productos.
- Comentarios para valorar servicios.
- Valoracion de la atencion.
- Comentarios generales para un servicio.
- Comentar y valorar documentos.
- Valorar guias.
- Obtener valoración para calificar la experiencia en la página.
Conclusión
En esta pequeña publicación pudimos entender un poco más el uso de fragmentos enriquecidos, si lo que estamos buscando es destacar en los resultados de búsqueda.
Este tipo de soluciones son muy útiles, ya que favorecen el posicionamiento y damos a los motores de búsqueda como Google, Bing o Yahoo, datos que les sirve para interpretar mejor lo que nosotros como humanos interpretamos en un texto.
Querido lector, si crees que hay más formas de poder aprovechar este tipo de herramientas, usos prácticos, y las he pasado por alto, por favor déjame un comentario y veo si la agrego o pueda crear una nueva publicación con este tema. De antemano Gracias.