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:

Fragmentos de opinión

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:

Source code

<div id="content" class="col-lg-12" itemtype="https://schema.org/Product">
    ...
</div>

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:

Source code

<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:

Source code

<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.

Herramienta de prueba

Ver ejemplo de un producto

Ver ejemplo de una organización

Descargar