12 jun. 2016

Cómo utilizar las Rich Cards con JSON-LD en tu web paso a paso.

La utilización de datos estructurados en una web, permite a los buscadores de Internet como Google, conocer mejor el contenido de un sitio y presentarlo en los resultados de una manera mucho más comprensible para sus usuarios.

Estos datos estructurados le permiten al buscador formatear los resultados de las búsquedas de sus usuarios, de tal manera que al mostrarlos, se identifique perfectamente y de un sólo vistazo, cada apartado esencial del contenido de la página web que mejor se ajusta a la búsqueda realizada por los mismos (presentando un "Rich snippet" o un "Rich Card" con la información de su web).

Hoy vamos a centrarnos en emplear los datos estructurados en una web para que pueda optar a mostrar la información de una receta por medio de una "Rich Card". Este formato es una novedad que ha incorporado Google basándose en el éxito de los "Rich Snippets" (Fragmentos enriquecidos).

El nuevo formato de presentación de resultados de Google conocido como Rich Cards, muestra la información de los resultados de una búsqueda, de una manera diferenciadora y adaptada a las necesidades del usuario.

Por ejemplo, si un usuario de Google buscara un vídeo o una receta determinada, en función de los algoritmos de Google, se le puede presentar no sólo el típico enlace a su sitio web para el vídeo o la receta, sino con una imagen completa del vídeo o la receta, con los detalles fundamentales de cada propuesta. Y como mínimo, en caso de que por las peculiaridades del algoritmo de Google y el tipo de búsqueda del usuario, no se presentara en forma de Rich Cards, si mostrará correctamente la información de sus datos estructurados: el autor, la descripción, etc...

Rich Card, Rich Snippets y el uso de Datos Estructurados en Google

Rich Cards, Rich Snippets, Structured DataPara entender mejor todos los conceptos, te recomiendo acceder a la guía: Qué son y cómo se utilizan los Rich Snippets, Rich Cards y los Datos en una web.

A modo de resumen, te voy a mostrar las diferentes variantes que ofrece Google para presentar la información de una web en los resultados de las búsquedas de los usuarios de una manera especial y adaptada, no sólo a su búsqueda sino también al dispositivo desde donde la está realizando:

Los Datos Estructurados:

La utilización de datos estructurados permite a los buscadores como Google obtener datos de una web que obedece a estructuras de información prefijadas dentro de la misma, para luego mostrarlos en los resultados de las búsquedas. 
Presentar el nombre tu web claramente, su descripción, el autor, la fecha de actualización o eventos que organices en la misma, es parte de lo que lo por medio de los datos estructurados puedes presentar en los resultados de búsqueda de una manera especial.
Por ejemplo, el título y la descripción de un sitio web presentada en los resultados de Google utilizando datos estructurados:

Rich Cards (Tarjetas Enriquecidas)

Las tarjetas enriquecidas no sólo muestran la información con la potencia de los anteriormente explicados fragmentos enriquecidos, sino que además la adapta mejor al dispositivo que el usuario está utilizando para realizar dicha búsqueda.

El mejor ejemplo de cómo ha evolucionado la presentación de resultados por medio de datos estructurados, fragmentos enriquecidos y tarjetas enriquecidas lo proporciona Google en su Blog oficial para webmasters:

 

Los Rich Snippets (Fragmentos Enriquecidos): 

Imagina que deseas mostrar en los resultados de búsqueda de Google una "información extra" que acompañe al enlace del resultado que va a tu web.  
Por ejemplo, veamos qué pasaría al mostrar los resultados de tu negocio en Google, de una tienda online, una receta, o un restaurante: 
  • Cuando Google presente los resultados del hotel, podría mostrar su localización, la calificación que otros usuarios han realizado de su servicio, etc...
Para ver ejemplos de Rich Snippets y cómo se utilizan, ejecuta la guía: Cómo utilizar los Rich Snippet con microdatos en tu web paso a paso.

¿Siempre se van a mostrar en Google mis fragmentos enriquecidos y mis tarjetas enriquecidas?

IMPORTANTE: Aunque se aplique el marcaje de etiquetas en una web de fragmentos enriquecidos, Google se reserva la posibilidad de que éstos se muestren o no en los resultados de búsqueda, en función de las decisiones de su propio algoritmo y el cumplimiento de las reglas de calidad de contenidos explicados en Introduction to structured data:
Fragmento original de Introduction to Structured Data de Google explicando sus guías de calidad

¿Qué tipos de Rich Cards Existen?

Dependiendo de lo que deseas exponer en los resultados de la búsqueda, cuando en ella salga tu web, se pueden presentar distintos tipos de Rich Cards en función del objeto a presentar:

Los tipos de Rich Cards vienen perfectamente explicado en la página de Google Developers a modo de Galería:

Rich Cards para Recetas:

Una elegante manera de presentar la receta con una imagen del vídeo para la realización y la información básica más importante: el autor, la calificación en estrellas de la receta por parte de los visitantes, la cantidad de visualizaciones, el tiempo de elaboración y las calorías.


Rich Cards para Eventos:

Si necesitas organizar eventos en tu web, publicar fiestas, conciertos, reuniones, etc... las tarjetas enriquecidas para eventos muestran la presentación que necesitas.

Una descripción básica del conjunto de eventos y a continuación la lista con la fecha, la hora y otra breve micro descripción sobre cada celebración.



Rich Cards para productos:


Para presentar productos que hayas realizado, es interesante que aparezca la clasificación vía rating por parte de los usuarios. El número de veces que ha sido votado, el precio y si se encuentra o no en Stock. Finalmente una descripción explicativa del producto que acompañe a toda la tarjeta enriquecida.

Rich Cards para Reviews:


 Si vas a realizar el análisis de un libro, la review de un teléfono móvil, un ordenador, el análisis de cualquier producto, entonces te interesan las tarjetas enriquecidas para review.

Presentan la puntuación de la review como rating, los votos que se le han dado y la descripción completa del producto analizado.


Qué son los Microdatos para los Datos Estructurados y JSON-LD:

A la hora de utilizar datos estructurados en una web, el marcado de los mismos se puede realizar de dos formas:

Con Microdatos:

Son unas propiedades o parámetros que se añaden en las etiquetas HTML, que los buscadores como Google o navegadores de internet como Chrome, Explorer, Edge, FireFox... pueden interpretar de una manera determinada, para darles formato o asignarle una conceptualización determinada a la etiqueta HTML donde se han insertado.
Son "metadatos", es decir, una clase de dato que es capaz de almacenar en su interior cualquier clase de información (de ahí viene "meta").
Los Microdatos son ideales para formar Rich Snippet. Además los microdatos son muy fáciles de manejar con HTML e intercalar entre el código que utiliza Blogger, WordPress, Joomla o cualquier editor de contenidos web.

Con JSON-LD:

Google es muy claro en su Blog oficial para webmasters cuando se refiere al uso de Rich Cards:
Recomiendan encarecidamente el uso de marcado JSON-LD para obtener los mejores resultados.
Tal como aclara Google: 
JSON-LD, o JavaScript Object Notation for Linked Data, es un método de codificación de datos enlazados usando JSON.
JSON-LD - Wikipedia, la enciclopedia libre
https://es.wikipedia.org/wiki/JSON-LD

Cómo implementar una Rich Card en mi web con JSON-LD:

Si quieres presentarlos en tu web, es sencillo, dirígete a la galería de Rich Cards de Google y sigue los pasos que te explico en la imagen a continuación:



  • Selecciona el tipo de Rich Card que quieres implementar y después pulsas en "SEE MARKUP" para llevarte el ejemplode cómo debes implementarla en tu web.

Un ejemplo de implementación:

En Blogger o WordPress, al igual que en cualquier sistema de publicación web, tendrás que meterte en el HTML de la entrada para poder escribir esta parte del código en tu receta tal cual te he explicado aquí. Si dejas que automáticamente te genere el código la propia herramienta, no tendrás el formato adecuado en alguno de los campos y no funcionará como deseas.

En este caso he seleccionado "SEE MARKUP" de cómo se implementa el código para presentar una review:


Simplemente tienes que copiarte y pegarte en tu EDITOR HTML el código y cambiar los campos de ejemplo por los que correspondan a tu review (lo mismo sucede con las recetas, los eventos o los productos, se hacen exactamente igual: see markup y después en tu editor html hacer los cambios que necesites):

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Thing",
    "name": "Super Book"
  },
  "author": {
    "@type": "Person",
    "name": "Joe"
  },

  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "7",
    "bestRating": "10"
  },

  "publisher": {
    "@type": "Organization",
    "name": "Washington Times"
  }

}
</script> 
Se puede hacer una pequeña ficha al principio o al final del artículo sobre la receta con el código que a continuación explico y tal y como lo presenté arriba:
  • <script type="application/ld+json">
    { </script>  Indica la estructura del JSON-LD que le advierte a Google de que se va a intentar expresar la existencia de una Rich Card hecha con JSON-LD.
  •   "@context": "http://schema.org/",
      "@type": "Review",
      "itemReviewed": {
        "@type": "Thing",
        "name": "Super Book"
      }, Expresa que es una review, de una cosa y que es un libro.
  •   "author": {
        "@type": "Person",
        "name": "Joe"
      },
    Indica el author de la review. 
  •   "reviewRating": {
        "@type": "Rating",
        "ratingValue": "7",
        "bestRating": "10"
      }, Indica la puntuación de la review.
  •   "publisher": {
        "@type": "Organization",
        "name": "Washington Times"
      }
    Indica la web donde se publicará la review.  


¿Cómo compruebo si tengo bien los datos estructurados?, ¿Cómo compruebo que he hecho correctamente el JSON-LD para optar a que se presente una Rich Card?

Hasta hace poco, los datos estructurados eran en ocasiones difíciles de arreglar, hoy día con la nueva herramienta de Google Developers para la prueba de datos estructurados la tarea se ha simplificado enormemente.

Te muestro a continuación cómo utilizar esta magnífica aplicación que te ayudará a tener perfectamente al día los datos estructurados de tu web.

  • Localiza en el código de tu web o Blog dónde escribes "cosas" a las que luego se les asigna un formato especial en los resultados de las búsquedas: nombre de autor, fecha de actualización, título... En una tienda online podrían ser importes, valoraciones de product, etc...
1) Para acceder a la herramienta de prueba de datos estructurados haz "clik" aquí




  • En la pantalla que aparece introduce la dirección de la página donde hayas introducido los datos estructurados. 
  • A la derecha te saldrá la comprobación de si hay errores o tienes cosas que cambiar con los datos estructurados que hayas utilizado.
2) En la zona de la izquierda Haz clik en la parte superior izquierda "Obtener la URL" para escribir la dirección de tu web:


  • Ten en cuenta que la URL (dirección web) que introduzcas sera la que sea revisada para datos estructurados. Si pones la URL de tu web, analizarás la página principal. Si pones la URL de una página en concreto de tu web, analizarás esa página en concreto.
  • En los Blogs, donde la mayor parte del código está en la página principal, conviene que pruebes siempre una vez con tu dirección principal (tu nombre_de_blog.com o nombre_de_blog.BlogSpot.com o wp...) y después siempre repitas la prueba con una de las direcciones del detalle de una de tus entradas. Muchas veces puedes tener bien los datos estructurados a nivel de página principal pero los puedes estar utilizando mal a nivel de entrada.
3) En la zona de la derecha, saldrán los resultados de la revision de datos estructurados en tu web, donde se te indicarán aquellos datos que han sido localizados y si tienen "error", si son un "aviso" o están correctos.

En general, la mayor parte de errores que puedan salirte es porque tengas campos mal colocados o algún campo con dato incorrecto o sin rellenar. Cualquier duda que tengas pregunta en los comentarios.

¿Qué consigo al utilizar datos estructurados?

Al utilizar Datos estructurados (en este caso, con microdatos), conseguiremos dos características fundamentales para el SEO (posicionamiento en buscadores):
  • Indexar mejor toda nuestra información en el buscador (Google)
  • Optar a presentar una Rich Card (Tarjeta enriquecida) en los resultados del buscador.ç
  • Si no sale la Rich Card, al menos la información del enlace donde aparezca la web en Google, mostrará los campos básicos perfectamente informados (autor, descripción, etc...).

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

12comentarios:

  1. quiero entender que cada Richd car, por ejemplo, es en la publicación que quieras que aparezca, no en todas no?

    ResponderEliminar
  2. quiero entender que cada Richd car, por ejemplo, es en la publicación que quieras que aparezca, no en todas no?

    ResponderEliminar
    Respuestas
    1. Hola,
      hazlo en una primero y experimenta. Se puede dejar puesto para toda la plantilla pero por probar en uno, no hay problema. Recuerda que Google decide el estilo qué va a presentar y cómo, no es sinónimo de que presente en ese formato que lo prepares para que así sea.

      Un saludo!

      Eliminar
  3. Muy buen tutorial. ¿Existe algún plugin para WordPress o PrestaShop que haga esto automáticamente?

    ResponderEliminar
    Respuestas
    1. Pues no te sé decir con precisión. Prueba a buscar en Google por Wordpress Prestashop Rich Card Json-LD... Quizás como es algo que lleva poco tiempo no lo tengan aún. Un saludo!

      Eliminar
  4. Buenas, enhorabuena por el POST, muy completo, pero hay algo que creo que queda en el aire: en el apartado "Cómo compruebo que he hecho correctamente el JSON-LD para optar a que se presente una Rich Card", no se explica bien cuando sabemos que Google toma esos datos estructurados como válidos para Rich Card o no.

    Por ejemplo, alguna de las webs que yo poseo de productos tienen implementado tal cual dicha estructura en JSON+LD para Rich Card, pero al hacer la prueba en la Herramienta de Prueba de Datos Estructurados no da errores pero tampoco me dice si opta o no a ser Rich Card.

    ¿Cuando sabemos si dichos datos lo cumplen?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Gonzalo,
      me encantaría saberlo a mí también... creo que tiene relación con la cantidad de visitas del sitio y su popularidad. Yo sólo veo que sale con grandes marcas y lo veo muy centrado para empresas. Es posible que una página en Google+ de tipo empresa y utilizar Google places si son negocios pueda ayudar... pero vamos, no tengo la clave (ni nadie... todos tendrían uno si lo supieran ;)

      Un saludo y muchas gracias por participar.

      Eliminar
  5. Hola Miguel, me encanta como está el theme de este blog. He estado buscando un email de contacto pero no lo he encontrado ¿Podrías decirme que theme usas?

    ResponderEliminar
    Respuestas
    1. Es la "Momento Template" de Templateism pero retocada por mí para que se adaptara a mis necesidades.

      Un saludo. Cualquier cosa aquí estoy.

      Eliminar
  6. Hola Miguel, me podrias indicar que trozo de codigo se tiene que pegar directamente en la plantilla blogger, para que muestre los datos review. El script en que parte de la plantilla lo tengo que poner. Se ve tan facil pero imposible saber donde lo pego.

    ResponderEliminar
    Respuestas
    1. Puedes copiarlo y pegarlo directamente en el HTML de la entrada donde tengas la receta. La expones con normalidad y luego añades esta parte de código especial para que aparezca "bonita" en caso de que los algoritmos de Google decidan hacerlo con tu web. También, integrado en el propio código HTML, se pueden añadir estas partes de código como propiedades del HTML pero lo veo más complicado. Haz la receta, o la review y crea una pequeña parte de código en la entrada para que presente la información como quieres.

      Un saludo!

      Eliminar
  7. hola espero me ayudes, segui tus pasos de como enviar entradas atumaticamente de bloger a twitter, y funciono perfectamente, pero luego de crear mi feedburner mis entradas tardan como dos ahoras para llegar a twitter, dime que tengo que hacer para que lleguen igual que antes, rapido. este es mi blog, http://leonasdelanueva.blogspot.com/... y este es mi nuevo fedburner, ya conecte de nuevo mi blog y mi y nada no llegan dime que pasa. http://feeds.feedburner.com/RevistasParaAdultos

    ResponderEliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.