Estrellas de calificación media de tu página Web en Google
En este artículo vas a aprender a utilizar los fragmentos de datos estructurados para marcar el contenido de las calificaciones y comentarios que dejan los clientes en una página Web con Google Rich Snippets. Las estrellas de calificación visibles en Google.
El objetivo principal de este tutorial es que consigas preparar tu sitio Web para que Google entienda que deseas agregar las estrellas de calificación media en los resultados de búsqueda orgánica y así conseguir llamar más la atención del usuario que busca y conseguir más clics.
De esta forma, consigues aumenta tu CTR con los fragmentos enriquecidos.
Puede ser una página de un producto, una entrada de un blog, una página de una organización o lo que se te ocurra. En cualquier página que presente opiniones de clientes se puede agregar los fragmentos enriquecidos para mostrar las estrellas de calificación media.
¿Cómo marcar los elementos de tu contenido?
En el siguiente enlace tienes una guía extensa con todas las posibilidades y ejemplos. Ver guía.
En el momento que ya tienes marcado los elementos de tu contenido, entra en juego la posibilidad de agregar los fragmentos de opinión.
Si tu tienda brinda opiniones de clientes o críticos, es ideal agregar los fragmentos de opinión para mejorar la presencia en los resultados de búsqueda.
Un fragmento de opinión es un extracto breve de una opinión o una calificación de un sitio Web de opiniones.
Generalmente, es un promedio de las puntuaciones de muchos usuarios que dejan opiniones de un producto, servicio o página Web.
Si Google encuentra lenguaje de marcado válido de opiniones o calificaciones, es posible que se muestre un fragmento enriquecido que incluya estrellas y otra información resumida de opiniones o calificaciones.
Una calificación, además de contener el texto de la opinión, es una evaluación que se describe en una escala numérica (por ejemplo del 1 al 5).
En el siguiente enlace puedes ver más detalles:
Si deseas ir al grano, a continuación puedes observar el código que se necesita para conseguir mostrar las estrellas de calificación media como fragmentos enriquecidos para tu sitio Web.
Te hemos preparado 2 ejemplos. En uno puedes observar un producto y en otro una organización.
A continuación, detallaré el código del ejemplo del producto ya que el código para una organización es muy similar.
En el contenedor principal de la página debes indicar que se trata de un producto. Lo puedes hacer fácilmente agregando itemtype=»https://schema.org/Product» como atributo del contenedor quedando así, por ejemplo:
Dentro del contenedor principal, en el lugar deseado de la página que contiene comentarios en tu sitio Web, debes agregar el siguiente código que contiene la calificación media basada en múltiples calificaciones o comentarios:
<div class="col-lg-12" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="itemReviewed" content="Hummingbird printed t-shirt" />
<meta itemprop="worstRating" content="1" />
<meta itemprop="bestRating" content="5" />
<h3>3 comentarios sobre "Hummingbird printed t-shirt"</h3>
<p>Calificación media: <span itemprop="ratingValue">4</span>/5 basado en <span itemprop="ratingCount">3</span> comentarios de clientes.</p>
</div>Schema.org es una actividad comunitaria de colaboración fundada por Google y otros con la misión de crear, mantener y promover esquemas para datos estructurados en Internet, en páginas web, en mensajes de correo electrónico y más.
El atributo itemprop=»aggregateRating» que estamos agregando al contenedor indica precisamente eso, que el contenido que viene a continuación contiene la calificación media de la página basada en múltiples calificaciones o comentarios.
También debes considerar las siguientes los siguientes atributos para los datos estructurados:
- itemprop=»itemReviewed» indica el elemento que se está calificando.
- itemprop=»worstRating» indica el valor más bajo permitido en este sistema de calificación.
- itemprop=»bestRating» indica el valor más alto permitido en este sistema de calificación.
- itemprop=»ratingValue» indica la calificación de calidad numérica para el elemento.
- itemprop=»ratingCount» especifica la cantidad de personas que proporcionaron una opinión con o sin calificación.
La definición completa de AggregateRating la puedes ver en schema.org/AggregateRating.
Para mostrar la lista de opiniones en la página haremos un listado que puede ser como el siguiente:
<ul class="product_comments row">
<li class="col-lg-12" itemprop="review" itemscope itemtype="https://schema.org/Review">
<meta itemprop="itemReviewed" content="Hummingbird printed t-shirt" />
<div class="row comment">
<div class="comment_header col-md-12">
<div class="star_content clearfix" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<meta itemprop="worstRating" content="1" />
<meta itemprop="ratingValue" content="5" />
<meta itemprop="bestRating" content="5" />
</div>
<div itemprop="name" class="title_block">Lorem ipsum</div>
</div>
<div class="comment_author_infos col-md-12">
<span>Por</span>
<span itemprop="author" class="author">John Doe</span>
<span>el</span>
<meta itemprop="datePublished" content="2019-04-26" />
<span>26/04/2019</span>
</div>
<div class="comment_details col-md-12">
<p itemprop="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</li>
<li class="col-lg-12" itemprop="review" itemscope itemtype="https://schema.org/Review">
<meta itemprop="itemReviewed" content="Hummingbird printed t-shirt" />
<div class="row comment">
<div class="comment_header col-md-12">
<div class="star_content clearfix" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<div class="star"></div>
<meta itemprop="worstRating" content="1" />
<meta itemprop="ratingValue" content="3" />
<meta itemprop="bestRating" content="5" />
</div>
<div itemprop="name" class="title_block">Lorem ipsum</div>
</div>
<div class="comment_author_infos col-md-12">
<span>Por</span>
<span itemprop="author" class="author">Benny Hill</span>
<span>el</span>
<meta itemprop="datePublished" content="2019-03-15" />
<span>15/03/2019</span>
</div>
<div class="comment_details col-md-12">
<p itemprop="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</li>
<li class="col-lg-12" itemprop="review" itemscope itemtype="https://schema.org/Review">
<meta itemprop="itemReviewed" content="Hummingbird printed t-shirt" />
<div class="row comment">
<div class="comment_header col-md-12">
<div class="star_content clearfix" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star star_on"></div>
<div class="star"></div>
<meta itemprop="worstRating" content="1" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
</div>
<div itemprop="name" class="title_block">Lorem ipsum</div>
</div>
<div class="comment_author_infos col-md-12">
<span>Por</span>
<span itemprop="author" class="author">Brenda Bullock</span>
<span>el</span>
<meta itemprop="datePublished" content="2019-02-10" />
<span>10/02/2019</span>
</div>
<div class="comment_details col-md-12">
<p itemprop="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</li>
</ul>El ejemplo en funcionamiento tan solo contiene una lista estática con 3 opiniones.
Con PHP se podrían mostrar las opiniones de forma dinámica. Recogerlas de una base de datos para iterarlas con un foreach o algo similar con el fin de mostrar los contenidos dinámicamente.
Si te fijas en el código del ejemplo, cada opinión es un elemento <li> que contienen los atributos itemprop=»review» itemscope itemtype=»https://schema.org/Review» para especificar que se trata de una opinión para el elemento descrito en la página.
Dentro de la opinión tenemos el elemento que contiene los atributos itemprop=»reviewRating» itemscope itemtype=»https://schema.org/Rating», para indicar que se trata de una calificación de calidad numérica para el elemento descrito en la página.
Además, podemos indicar el título del comentario con el atributo itemprop=»name».
El autor del comentario o crítica con itemprop=»author».
Y la fecha del comentario con itemprop=»datePublished».
En principio, con esto ya es suficiente para superar la prueba de datos estructurados.
Con este código, tu página Web ya estará preparada para visualizar fragmentos enriquecidos en los resultados de búsqueda.
Agregando estos fragmentos de datos estructurados estás informando a Google que deseas agregar las estrellas de calificación media en los resultados de búsqueda orgánica para destacar tu contenido de la competencia.
Es importante saber que aún agregando los fragmentos enriquecidos en tu sitio Web de forma correcta, debes saber que Google se reserva el derecho de mostrar las estrellas o no en los resultados de búsqueda.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Si o si hay que tener una pagina de productos para aparecer con estrellas en los resultados?
En el ejemplo estoy haciendo referencia a una página de producto ya que es lo típico. El atributo AggregateRating puede funcionar para algunos tipos que puedes descubrir en https://schema.org/docs/schemas.html
Hola, me puedes apoyar para empresa como queda el codigo al final? y que debo hacer con los archivos descargados… muchas gracias
Hola,
Para ver el código final puedes descargar el ejemplo completo. En la parte inferior del tutorial tienes un enlace para descargar.
Saludos
Bien.
Gracias Jose, he buscado esto muchisimo y la mayoria lo explica para wordpress… Si google lo indexa luego aparecerían las estrellitas amarillas en la búsqueda? y hay alguna manera de ocultarlo en la web? y que solo aparezca en los resultados de google? esta es la página de producto que hice
https://www.pilses.com/grabadora-laser-30w-arien-machine.php. Otra pregunta, se le puede agregar datos estructurados unicamente a imagenes?
Hola,
Intentaré darte una respuesta a todas tus dudas a continuación:
En esta entrada te doy las claves para etiquetar tu código de tal forma que Google lo indexe para mostrar las estrellas de valoración en los resultados pero, Google se guarda el derecho de mostrarlo o no.
No recomiendo ocultarlo. Es ideal para los clientes también.
Si, a imágenes también le puedes agregar los datos estructurados.
Saludos
Donde puedo obtener el código HTML para insertar las estrellas o las calificaciones de google en página web
Hola,
Está explicado en el contenido de esta entrada. Además, al final de la entrada tienes un enlace para descargar.
Saludos
Hola, te quisiera preguntar sobre como hacer que salga la posibilidad de votar (elegir numero de estrellas) en codigo PHP, sin plugins wordpress, lo que tu tienes «Valora esta entrada». La idea seria un script que guarde en base de datos las votaciones y las recupere, pero claro, eso es tan facilmente manipulable que me surge la duda de si google admite esas valoraciones sin ningun tipo de comprobacion. No se si me he explicado bien….
Gracias y un saludo
Hola,
Si. Es posible realizar un sistema de calificación con PHP.
Si no quieres complicarte mucho, en WordPress hay un plugin que estoy utilizando en este blog que funciona muy bien. Se llama «WP-PostRatings». Funciona mediante la técnica Ajax para guardar el voto en la base de datos. Se controla mediante IP.
A pesar de agregar un sistema de calificaciones adecuado, Google se reserva el derecho de mostrar las estrellas de calificación de un sitio. Supongo que deben ser valoraciones válidas y creo que tendrá gran importancia el status del dominio entre otros detalles.
Saludos