Ejemplos de recetas de Rich Snippets

Mejore sus resultados de búsqueda con Rich Snippets y vocabulario de Schema.org

Los datos estructurados permiten presentar los resultados de su búsqueda de una manera más atractiva e informativa visualmente. Según un estudio de Searchmetrics , la adición de marcado de datos estructurados a un sitio web genera un aumento del 36% en los resultados de búsqueda de Google.

El marcado de datos estructurados se representa en Google, Bing y otros motores de búsqueda como fragmentos enriquecidos . Los fragmentos enriquecidos son resultados de búsqueda mejorados que agregan información adicional , como una foto, el precio, las calificaciones de los usuarios y otras características, a los fragmentos de los motores de búsqueda.

Ejemplos de recetas de Rich Snippets

Los datos estructurados conducen a mejores resultados de búsqueda por dos razones principales:

  1. Extiende la semántica HTML al hacer que el contenido sea más comprensible para los motores de búsqueda .
  2. Los fragmentos enriquecidos, la presentación de datos estructurados en el motor de búsqueda, tienen una mejor tasa de clics que los resultados de búsqueda normales y menos informativos.

Vocabulario de Schema.org

Si desea tener fragmentos enriquecidos para su propio sitio, debe agregar datos estructurados a su marcado HTML . Los datos estructurados utilizan el vocabulario de schema.org que le permite informar a los motores de búsqueda sobre la naturaleza de su contenido.

Schema.org es la iniciativa de Google, Bing y Yahoo que tiene como objetivo proporcionar un conjunto de esquemas para describir diferentes tipos de contenido web para que los motores de búsqueda puedan comprenderlo mejor.

Página de inicio de Schema.org

El vocabulario de Schema.org está organizado en una jerarquía de dos niveles :

  1. Tipos: diferentes tipos de contenido web, están organizados en su propia jerarquía.
  2. Propiedades: cada tipo tiene un cierto número de propiedades
Primer nivel de tipos

Thing es el elemento más genérico del vocabulario de schema.org, es el antepasado de todos los demás tipos.

Segundo nivel de tipos

El segundo nivel de tipos es un poco más específico y contiene el evento , la acción , lo intangible , el trabajo creativo , el lugar , la organización , el producto y los tipos de personas . También hay una cosa de segundo nivel separada que está disponible como una extensión de schema.org ; es el tipo de entidad médica .

Tercer nivel de tipos

Cada tipo de segundo nivel contiene algunos o muchos tipos de tercer nivel , por ejemplo, uno de los subtipos de CreativeWork es el tipo de revisión . Tenga en cuenta que los tipos más específicos (segundo y tercer nivel) heredan las propiedades de sus padres (y abuelos en el caso del tercer nivel).

La siguiente imagen se publicó en el blog oficial de esquemas y muestra la jerarquía del vocabulario de schema.org.

Jerarquía de Schema.org
IMAGEN: schema.org
Encuentre el esquema que necesita

Explore el vocabulario para encontrar el esquema que necesita. Por ejemplo, para los fragmentos enriquecidos de recetas, debe utilizar el Tipo de receta, que es el hijo de CreativeWork. Tiene muchas propiedades, como cookTime, cookingMethod, recipeIngredient, y otros, además de que también hereda las propiedades de su padre (CreativeWork), y los abuelos (Cosa).

Schema.org es un proyecto comunitario , se amplía con frecuencia y periódicamente se lanzan nuevas versiones. Si no puede encontrar el esquema que necesita, puede proponerlo a la comunidad de Schema.org y también puede contribuir a su proyecto Github .

Agregue datos estructurados a su marcado

Entonces, ¿cómo agrega sus esquemas al código front-end? Schema.org puede utilizar tres formatos diferentes . Debe elegir uno para agregar marcado de datos estructurados a su sitio. Aunque, en teoría, puede utilizar más de un formato en el mismo sitio, perjudica la legibilidad y el mantenimiento del código, por lo que no es una buena práctica.

Los tres formatos principales de marcado de datos estructurados son los siguientes:

  1. Microdatos: es un estándar web que amplía HTML al introducir nuevos atributos como itemprop. El sitio web oficial de schema.org tiene un excelente tutorial sobre cómo usar microdatos, por lo que si ya está familiarizado con HTML, este formato puede ser una buena opción.
  2. RDFa: la forma larga de RDFa es el marco de descripción de recursos en atributos , y es una recomendación del W3C que amplía los documentos HTML, XML y SVG con la ayuda de un conjunto de atributos específicos. El protocolo Open Graph de Facebook también se basa en RDFa, por lo que probablemente ya lo hayas encontrado. Hay una versión RDFa Lite para principiantes y también una versión completa que brinda muchas opciones para trabajar con datos estructurados de manera elaborada.
  3. JSON-LD: mientras que las otras dos opciones amplían el marcado HTML, JSON-LD usa la sintaxis JSON . JSON-LD son las siglas de JavaScript Object Notation for Linked Data , y este es el formato que recomiendan los desarrolladores de Google , ya que, según su opinión, “el marcado de datos estructurados se representa más fácilmente en formato JSON-LD”. No necesita ser un experto en JavaScript para usar JSON, ya que es un sistema de notación simple que usa pares de nombre y valor .

Puede comparar fácilmente los tres formatos con la ayuda de una práctica pestaña en la parte inferior de cada página de tipo de schema.org .

Formatos de esquema
Ejemplos de los tres formatos de schema.org para el tipo de receta .

Al examinar los ejemplos, puede comprender fácilmente cómo funciona cada formato y utilizar uno de ellos en su propio sitio.

El marcado de datos estructurados que necesita agregar a su código se basa en el vocabulario de schema.org . Si elige microdatos o RDFa, debe agregar los atributos adicionales a las etiquetas HTML normales.

Por ejemplo, con los microdatos , agrega el nombre del tipo al contenedor usando el itemscope itemtype=""atributo y cada propiedad con el itempropatributo. Aquí tienes un ejemplo muy simple:

1
2
3
4
5
<div itemscope itemtype="http://schema.org/Recipe">
  <h2 itemprop="name">My Recipe</h2>
  <img itemprop="image" src="image.jpg" alt="Recipe Image">
  <p itemprop="description">Description of Recipe</p>
</div>

Y el mismo ejemplo usando RDFa , vale la pena prestar atención a los diferentes atributos que necesita usar aquí:

1
2
3
4
5
<div vocab="http://schema.org/" typeof="Recipe">
  <h2 property="name">My Recipe</h2>
  <img property="image" src="image.jpg" alt="Recipe Image">
  <p property="description">Description of Recipe</p>
</div>

Si elige el formato JSON-LD , debe colocar su código dentro de la <script type="application/ld+json"></script>etiqueta en el encabezado de su página HTML. El ejemplo anterior se verá así:

1
2
3
4
5
6
7
8
9
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Recipe",
  "name": "My Recipe",
  "image": "image.jpg",
  "description": "Description of Recipe"
}
</script>

Consejos para utilizar datos estructurados

Pruebe su marcado de datos estructurados

Antes de agregar el marcado de datos estructurados a su sitio, puede probarlo rápidamente utilizando la Herramienta de prueba de datos estructurados de Google . De esta manera, puede encontrar rápidamente los problemas si los tiene.

Aproveche las tarjetas de gráficos de conocimiento de Google

Google no solo usa datos estructurados para fragmentos enriquecidos, sino que si eres una autoridad para un determinado tipo de contenido, tu contenido también puede aparecer en una de las tarjetas de gráficos de conocimiento que se muestran en el lado derecho de algunas páginas de resultados de motores de búsqueda. .

Tenga en cuenta que no puede hacer que Google muestre una tarjeta de gráfico de conocimiento para su contenido, pero si su marcado de datos estructurados está configurado correctamente, tiene la posibilidad.

Tarjeta de gráfico de conocimiento de Facebook
Google utiliza el marcado de datos estructurados de Facebook para mostrar información adicional en el Gráfico de conocimiento.
Utilice las tarjetas enriquecidas de Google

En mayo de 2016, Google presentó Rich Cards que son “la actualización del formato Rich Snippets actual” y proporcionan atractivos resultados de búsqueda móvil presentados en carruseles que se pueden navegar desplazándose hacia la izquierda y hacia la derecha. Google Rich Cards también usa marcado de datos estructurados y el vocabulario de schema.org.

Agregue datos estructurados a sus correos electrónicos

Puede utilizar el marcado de datos estructurados en sus correos electrónicos para activar Google Now Cards para el destinatario, Google Developers tiene un excelente tutorial sobre cómo hacerlo.

Genere datos estructurados de forma dinámica

Es posible usar Google Tag Manager para generar dinámicamente datos estructurados en formato JSON-LD, Moz.com le enseña cómo hacerlo .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *