• Página principal
  • Artículos
  • General
  • ¿Cómo agregar fragmentos enriquecidos para reseñas y calificaciones sin ningún complemento? Marcado de microdatos de Schema.org estructurado de Google

¿Cómo agregar fragmentos enriquecidos para reseñas y calificaciones sin ningún complemento? Marcado de microdatos de Schema.org estructurado de Google

Publicado: 2020-04-21
¿Cómo agregar fragmentos enriquecidos para reseñas y calificaciones sin ningún complemento? Marcado de Schema.org estructurado de Google

¿Alguna vez se ha preguntado how and why Google muestra la calificación de algunas de las publicaciones de revisión especiales en la página de resultados de búsqueda de Google (SERP)?

En este tutorial, analizaremos cómo add rich snippet para revisión/calificación en forma de schema.org para que Google pueda comprender los detalles sobre su revisión y mostrarla en la página de búsqueda.

Crunchify - Temas de Génesis - La página de Google es elegible para obtener resultados enriquecidos

Consulta el resultado en vivo: https://crunchify.me/2VAUkTK. Enlace de fragmento enriquecido.

Antes de comenzar, comprendamos qué es schema.org.

El esquema es un tipo de microdata que facilita que los motores de búsqueda de Google o Bing analicen e interpreten la información en las páginas de su blog con mayor effectively . La idea es ayudar a los motores de búsqueda a comprender todos los datos en un structured format para que el motor de búsqueda también muestre esos datos de resultados relevantes a los usuarios finales en función de las consultas de búsqueda.

Empecemos:

Punto-1) ¿Cómo agregar datos estructurados a su blog en forma de schema.org?

En Crunchify estamos usando Genesis Framework y por defecto viene con todo el formato de schema.org microdata . Produce microdatos en el código de su sitio. No tengo que agregar nada y esa es la belleza de Genesis Framework, excepto la opción Review metadata que discuss below .

Punto-2) ¿Cómo verificar los datos estructurados de su sitio?

Google Search Console proporciona de forma predeterminada una opción para ver datos estructurados. Eche un vistazo a los diagramas a continuación.

Google Search Console - Informe de datos estructurados - Crunchify
Verifique todos los tipos de datos estructurados de Schema.org en Google Search Console

Para ver estos datos, debe agregar su sitio/blog a Search Console. Una vez que verifique la identidad de su sitio, es posible que pueda ver los datos de inmediato OR esperar una semana para que estos datos se generen automatically .

Punto-3 ¿Cómo verificar si sus datos estructurados son válidos o tienen algún problema?

  • En la última columna adicional del diagrama anterior Items with Errors , Google también proporciona una herramienta adicional llamada Herramienta de prueba de datos estructurados.
  • Simplemente vaya allí y haga clic en Fetch URL .
  • Proporcione la URL y haga clic en FETCH & VALIDATE .
  • En el lado derecho, debería ver el resultado de la validación de schema.org.
  • En caso de falla y schema.org incorrecto, debería ver un mensaje de color ROJO .
Consejos sobre la herramienta de prueba de datos estructurados de Google
Resultado de la prueba de datos estructurados para Crunchify Post

Expand above Review section y debería poder ver todos los microdatos detallados para su revisión. Podrías comprobarlo por ti mismo. Here is a URL.

Este tutorial funcionará si tiene alguna de las siguientes preguntas:

  • Habilitación de fragmentos enriquecidos para reseñas y calificaciones
  • Datos estructurados para revisión
  • Datos estructurados para calificación
  • Generador de esquemas de calificación agregados
  • Creador de esquemas para microdatos 'Review' schema.org
  • generador de reseñas de fragmentos enriquecidos
  • Fragmento enriquecido de Google para revisión
  • herramienta de vista previa de fragmentos enriquecidos
  • fragmento enriquecido para la publicación del blog de WordPress
  • receta para el sitio de fragmentos enriquecidos
Crunchify - genesis - Detalles del esquema de fragmentos de revisión

Paso 4 Agreguemos el fragmento Revisar Schema.org

Aquí hay un código HTML que debe colocar en su panel de edición de publicaciones en la TEXT section .

1
2
3
4
5
6
7
8
9
10
< div class = "crunchify-rating" itemscope itemtype = "http://schema.org/Review" >
     < span itemprop = "itemReviewed" itemscope itemtype = "http://schema.org/Thing" style = "font-size: 14px;" > < a itemprop = "url" href = "https://crunchify.me/genesis" target = "_blank" > < span itemprop = "name" > < strong > Genesis WordPress Theme Framework Review < / strong > < / span > < / a > < / span >
     < p > < / p >
     < strong > Description : < / strong > < span itemprop = "description" > One of the best WordPress Theme Framework which we use on Crunchify . com . Default comes with Google ' s rich schema . org snippet microdata . < / span >
     < span itemprop = "author" itemscope itemtype = "http://schema.org/Person" > < strong > Written by : < / strong > < span itemprop = "name" > App Shah < / span > < / span >
     < span itemprop = "reviewRating" itemscope itemtype = "http://schema.org/Rating" > < strong > Rating : < / strong > < span itemprop = "ratingValue" > 5 < / span > out of < span itemprop = "bestRating" > 5 < / span > < / span >
     < span itemprop = "publisher" itemscope itemtype = "http://schema.org/Organization" >
         < meta itemprop = "name" content = "Crunchify, LLC." / >
     < / span >
< / div >

Modifique los valores en consecuencia y el código anterior se convertirá en un buen widget con simples CSS tricks como lo ve en la imagen a continuación.

URL con ejemplo de revisión en vivo: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Revisión de Genesis Framework por Crunchify: el mejor tema para microdatos de schema.org

Y eso es. Una vez que agregue el código anterior a su publicación de blog, vuelva a Google Structured Data Validation tool nuevamente y verifique la URL de su publicación :). Puede tomar hasta una week actualizar su publicación en SERP según el algoritmo de rastreo.

¿Qué CSS estamos usando en Crunchify?

En Crunchify, estamos usando CSS a continuación. Simplemente agregue el código a continuación al archivo style.css de su tema, modifique la propiedad según sus necesidades y todo estará bien.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - rating {
overflow : hidden ;
margin - bottom : 35px ;
border - radius : 3px ;
box - shadow : 0 0 2px 0 rgba ( 0 , 0 , 0 , . 12 ) , 0 2px 2px 0 rgba ( 0 , 0 , 0 , . 24 ) ;
font - size : 16px ;
color : #333;
padding : 30px 60px 5px ;
background : #fff;
border - left : 2px solid #157BDA;
}
. crunchify - rating : before {
content : "Rating" ! important ;
font - size : 16px ;
text - transform : uppercase ;
color : #fff;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA;
padding : 0px 20px ;
border - radius : 30px ;
}

¿Cómo puedo agregar el archivo CSS anterior a la página habilitada para AMP?

Simplemente agregue el contenido CSS anterior debajo de <head> de su página bajo la etiqueta HTML <style amp-custom> .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   < head >
     . . .
     <style amp-custom>
      /* any custom styles go here. */
.crunchify-rating {
overflow : hidden ;
margin-bottom : 35px ;
border-radius : 3px ;
box-shadow : 0 0 2px 0 rgba ( 0,0,0,.12 ) , 0 2px 2px 0 rgba ( 0,0,0,.24 ) ;
font-size : 16px ;
color : #333 ;
padding : 30px 60px 5px ;
background : #fff ;
border-left : 2px solid #157BDA ;
}
.crunchify-rating:before {
content : "Rating" !important ;
font-size : 16px ;
text-transform : uppercase ;
color : #fff ;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA ;
padding : 0px 20px ;
border-radius : 30px ;
}
     </style>
     . . .
   < / head >

Avísame si tienes más preguntas.

No olvide obtener su copia de Genesis Framework.

Feliz blogueo.