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...
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
Para 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:
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.
- 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...
¿Siempre se van a mostrar en Google mis fragmentos enriquecidos y mis tarjetas enriquecidas?
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.
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.
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">
{ y </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...
- 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.
- 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.
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...).
quiero entender que cada Richd car, por ejemplo, es en la publicación que quieras que aparezca, no en todas no?
ResponderEliminarquiero entender que cada Richd car, por ejemplo, es en la publicación que quieras que aparezca, no en todas no?
ResponderEliminarHola,
Eliminarhazlo 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!
Muy buen tutorial. ¿Existe algún plugin para WordPress o PrestaShop que haga esto automáticamente?
ResponderEliminarPues 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!
EliminarBuenas, 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.
ResponderEliminarPor 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.
Hola Gonzalo,
Eliminarme 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.
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?
ResponderEliminarEs la "Momento Template" de Templateism pero retocada por mí para que se adaptara a mis necesidades.
EliminarUn saludo. Cualquier cosa aquí estoy.
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.
ResponderEliminarPuedes 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.
EliminarUn saludo!
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
ResponderEliminarSe puede poner como prefieras. Si miras el código fuente en mi web, yo añadí uno de los que no se ven en la plantilla.
ResponderEliminarDepende de lo quw necesites hacer, pero puedes ponerlo en cada entrada si te es menos complicado.
Un saludo!
Miguel muy buen post, he implementado las rich card en todos mis blogs, pruebo las url en la herramienta de pruebas de datos estructurados y todo sale perfecto. Sin embargo en la herramienta para webmasters de Google no me aparecen las Rich Card en el apartado de tarjetas enriquecidas y no me explico porque. Tengo mas de un mes usandolas en mis post y aunque salen perfectas en las pruebas que hago, la search console no me las ha detectado. Acaso sera porque mis blog son de blogger? Agradecería tu pronta respuesta amigo. Buenas noches
ResponderEliminarNo me preocuparía por eso, la indexación de este tipo de presentaciones aplican a webs con muchas visitas. Si has hecho el rastreo normal subiendo el sitemap y lanzando la prueba de Google bot, ahora sólo queda esperar.
EliminarTen paciencia, esta clase de presentación se aplica por el algoritmo de Google. Recuerda hacer la prueba con json y microdata.
Un saludo!!!
Muy pero que muy completo... Pedazo de tutorial! Me he quedado alucinado.
ResponderEliminarGracias por compartirlo con todos!
Muchas gracias!! Gran aporte sin duda, lo pondré en uso muy bien explicado, recomendable 100%
ResponderEliminarUnos pasos e información que me han servido en un momento muy crítico para mi, y no exagero, muchas gracias por la ayuda!
ResponderEliminarEsto nos va a venir de lujo para implementar los datos estructurados en nuestros eventos de música
ResponderEliminarHola, podrías hacer una entrada en la que pusieras el código que hay que poner en blogger para que te quede un aviso para la nueva ley de protección de datos que ha salido el 25 de Mayo en el que hasta que no se acepte se bloquee la página. He visto página que ponen el cartelito pero no bloquean la página, y parece que eso no sirve porque hasta que no se aceptan las políticas no se debería poder acceder. Me refiero a algo parecido a lo que tiene implementada esta página https://mejorconsalud.com/3-remedios-linaza-aliviar-estrenimiento/
ResponderEliminarSería de mucha ayuda para los que usamos blogger y no tenemos ni idea de programar y no sabemos cómo hacerlo.
Muchas gracias por tu blog y por la ayuda.
Excelente.
ResponderEliminarThe topic here i came across was really efficient to the topic which i was exploring for a fair time. Thanks
ResponderEliminarnice post....icloud sign up create new account with email
ResponderEliminarnice post....achieve3000 student login
ResponderEliminarGreat and Helpful article :) Thanks for sharing this! Well written and described!
ResponderEliminarThis blogpost was exactly what I needed to check out. You definitely have to continue and spread this sort of great posting for masters dissertation writing service
ResponderEliminarHey, i love this website and specially your articles.. Try to share some post and content in english too. Thankyou so much for sharing this.
ResponderEliminarWoah! That's awesome. He visto página que ponen el cartelito pero no bloquean la página, y parece que eso no sirve porque hasta que no se aceptan las políticas no se debería poder acceder.
ResponderEliminarMuchas gracias!! Really great. Thankyou so much for sharing this information.
ResponderEliminarEn la actualidad ha dado un cambio gigantesco el tema, nos adaptamos como las cucarachas.
ResponderEliminarIts amazing article for me. Its really helpful and useful rich cards. Your writing technique is impressive and knowledgeable to read. Thank you taking the time to share your thoughts with us. Now it's time to get Long distance taxi for more information.
ResponderEliminarYou have shared a very informative blog. I really appreciate your recipe. Thanks for sharing your short video with us. I encourage you to share more recipes with us. Now it's time to get Roofing Services in Paramus NJ for more information.
ResponderEliminar