Todo sobre Rich Cards, Structured Data Markup, Microdata, Schema.org, JSON-LD y SEO

En esta sección vamos a hablar de varios factores y elementos que nos va a ayudar mucho en el incremento de la visibilidad de nuestra marca, y por qué no también, el SEO de nuestra web. Como podéis haber visto en el título de esta sección hay muchos términos y os los vamos a intentar explicar.  El lenguaje de marcado (Structured Data Markup) surge promovido por diferentes buscadores como Google, Bing, Yandex o Yahoo con el fin de añadir metadata a la estructura HTML que permita entender mucho mejor el contenido de una página HTML.

Antes de proseguir, comentar que este es un factor que no penaliza en el ranking, pero su implementación si ayudará a que nuestra web tenga más visibilidad. Es decir, en nuestro análisis SEO debemos definir una estrategia de implementación de lenguaje de marcado en nuestra web.

Hasta que surgió esta iniciativa, los buscadores podían leer las páginas HTML y podían reconocer los tags HTML, los cuales, sólo aportan información sobre la estructura y orden de un contenido. A los principales buscadores les faltaba el poder reconocer qué tipo de información se estaba presentando a los usuarios, si es una persona, una película, un libro, etc. Esta información no la proporciona HTML y por eso se creó la posibilidad de añadir un meta lenguaje al HTML que si especifique este tipo de contenido.

Índice de Contenidos

¿Qué es Structured Data Markup y cuál es su objetivo?

Hace un tiempo, los principales buscadores definieron un lenguaje de marcado estructurado (Structured Data Markup) con el fin de aportar información al contenido HTML que ayude a los buscadores a entender mejor este y por lo tanto utilizarlo de manera más eficiente para entender y mostrar el contenido de las webs.

Es decir, con este lenguaje estructurado podremos indicar a los buscadores que en nuestra web hay determinados objetos (empresas, hoteles, recetas, libros, etc) y relacionarlos entre ellos. Digamos que es como construir una base de datos relacional pero en documentos de texto y HTML.

Por si todo esto te parece complejo y no lo entiendes bien, qué mejor que mostrarte un ejemplo de una estructura HTML que ha sido enriquecida con este metalenguaje.

<div itemscope>
 Juan was born on <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.
</div>

En este ejemplo vemos como le indicamos al buscador que estamos mostrando una fecha de nacimiento. Así, gracias a esto, si alguien busca en Google fecha de nacimiento de Juan, Google estará más seguro de acertar si muestra la página con este contenido que otra que no tenga esta indicación.

Es importante saber que cuando utilizamos este tipo de lenguaje de marcado, aspiramos a aparecer en dos secciones de Google como son:

Rich Cards de Google

Estos son aquellos resultados que añaden contenido e imágenes en los buscadores y que hace mucho más llamativo su contenido.

rich cards seo

Podéis ver más información aquí.

Knowledge Graph cards

Esta es la sección que utiliza Google para devolver resultados sobre cierto contenido que está relacionado. Por ejemplo, si buscáis en Google “Que ver en Tailandia” podréis ver como aparece una lista de tarjetas con todas las cosas que se pueden ver en Tailandia. Pues bien, utilizando este lenguaje de marcado tendremos opciones de salir en esta sección también.

knowledge graph cards seo

Google ofrece este tipo de tarjetas para más información como eventos, organizaciones, películas, música, y muchos más tipos.

Más información aquí.

Rich Snippets

Son el origen de las Rich Cards, si muestran un resultado en la búsqueda mucho más rico que el resultado sencillo, pero no tienen la forma de tarjeta. En esta sección cuando hablemos de Rich Cards nos estaremos refiriendo a ambos tipos de resultados.

rich snippets seo

Diferencia entre datos estructurados, microdata, schema.org y JSON-LD

Antes de proseguir, haremos una parada para explicar brevemente la relación entre estos 3 conceptos. Los datos estructurados son el medio con el que un desarrollador puede asociar contenido de una página HTML a una representación física o entendible como es un artículo, una empresa, una persona, etc. Microdata es el sistema que se elige para soportar el lenguaje de marcado en HTML5. Schema.org y JSON-LD son un proyecto que ofrece una implementación para permitir introducir lenguaje de marcado en las páginas HTML.

¿Afecta el lenguaje de marcado al SEO?

Es el propio Google el que dice que si utilizas lenguaje de marcado como schema.org le facilitas el trabajo, le ayudas a entender mejor tu contenido y a ofrecer una experiencia mejor a sus usuarios que buscan en Google dándoles información adicional. Dicho esto, ¿Por qué no va a beneficiar Google a aquellas webs que implementan lenguaje de marcado como schema.org o JSON-LD?

Si debemos decir que Google nunca ha mencionado que utilizar schema.org o cualquier otro lenguaje de marcado válido sea un factor SEO a tener en cuenta. A pesar de esto, como comentábamos al principio, el orecer contenido rico y que nuestra entrada en Google aparezca más bonita, nos hará aumentar nuestro CTR, por lo que nos dará más visibilidad. También, el ocupar el pool de noticias o las Rich Cards que ofrece Google nos hará tener muchas más posibilidades de atraer a visitantes.

Es importante mencionar que AMP está muy relacionado con el lenguaje de marcado, pues al implementar AMP podremos aparecer en Rich Cards de Google destinadas para este formato en dispositivos móviles.

En definitiva, es importante que utilices un lenguaje de marcado, siendo el más recomendable JSON-LD y después schema.org.

¿Cómo utilizar Structured Data Markup?

Probablemente a estas alturas hayas visto la importancia de utilizar este lenguaje en las páginas HTML, ¿no? Está claro que aparecer en Google con una apariencia tan buena y en esas secciones nos va a dar mucha más visibilidad.

En el caso de Google y los principales buscadores puedes utilizar 3 formatos diferentes para implementar el Structured Data Markup o lenguaje de marcado:

  • JSON-LD: estructura JSON que añade el contenido rico al HTML. (Sistema más recomendado por Google).
  • Microdata: Microdata es una especificación estándar de HTML que permite atribuir propiedades al código HTML a través de atributos añadidos en los elementos HTML. Destcamos schema.org.
  • RDFs: Otro sistema de tags que indica el contenido rico de una página HTML.

En esta sección hablaremos de los formato Schema.org y JSON-LD.

Principales estructuras de datos a utilizar con Schema.org o JSON-LD

Tanto Schema.org como JSON-LD poseen una sintaxis que debemos conocer para implementarla y así crear contenido rico y estructurado en nuestra web. La especificación de schema.org la podéis encontrar aquí y la de JSON-LD aquí. Es en estas páginas podréis ver los diferentes tipos de contenido que podemos identificar. Si bien es cierto que utilizando la web de schema.org nos será suficiente pues en ella se muestran los formatos en código JSON-LD y en código schema.org.

Los tipos de datos más populares son: Eventos, Empresas u organizaciones, medicina, personas, lugares, restaurantes, productos, ofertas, revisiones u opiniones, audios, imágenes, libros y películas. Es decir, si en tu página HTML hablas de alguno de estos tipos de objetos, te recomendamos que utilices schema.org o JSON-LD para hacérselo saber a los buscadores.

A continuación, te enumeramos los principales elementos que debes tener en cuenta junto a un ejemplo de cómo se muestra en Google la Rich Card y un enlace para que veas un ejemplo de sintaxis en schema.org y en JSON-LD.

Es importante antes de comenzar saber que si usas un CMS medianamente potente, muchas de estas implementaciones ya deberían venir de serie.

Recetas

Si buscamos en Google “pollo asado” nos aparecerá los siguientes resultados.

rich snippets seo

Para introducir el lenguaje de marcado podremos ver la sintaxis en esta página http://0.3-2e.schemaorgae.appspot.com/Recipe

Personas

Otro objeto muy importante para nuestra estrategia SEO. Es vital que en nuestra web marquemos mediante schema.org aquellos elementos de nuestra web en los que se haga referencia a personas. Información sobre el objeto persona la puedes encontrar aquí.

Eventos

Al buscar en Google “Marketing events San Francisco 2017” nos aparece el siguiente resultado:

rich snippets seo events

Para ver como crear contenido de marcado para eventos acceder aquí.

Servicios profesionales

Por ejemplo, buscando por minifiv en Google podemos ver el siguiente resultado:

rich snippets seo servicios profesionales

La información sobre el lenguaje de marcado la puedes encontrar aquí.

Artículos

Este es otro de los objetos más importantes de schema.org y es el que te permitirá salir en muchos resultados como artículo destacado. Por ejemplo, si en Google buscas “Operación triunfo” te aparecerá el siguiente resultado:

rich cards seo articulos

Salir en esta sección te dará mucha visibilidad, y para ello, uno de los requisitos es implementar el código de lenguaje de marcado que le indique a Google que esto es un artículo. Dentro del tipo artículo busca cual es el que más se puede asociar con tu contenido, pues hay subtipos como noticias, informe, articulo de colegio, artículo técnico, y otros más.

Toda la información sobre este objeto la puedes encontrar aquí.

Opiniones

Este es uno de los que más nos gustan y que creemos puede darnos un pico extra de visitas. Aquí podremos mostrar el valor de las opiniones de un producto, servicio, empresa o cualquier tipo de objeto.

Si buscamos el resort Raja Ampat Biodiversity veremos como Trip Advisor incorpora el sistema de opiniones y a simple vista en el buscador podremos ver la valoración del mismo.

rich snippets seo opiniones

Información sobre las opiniones y como implementarlas la podéis encontrar aquí.

Organización o Empresa

También es importante comunicarle a Google cuales son nuestros principales datos como empresa u organización. Es importante destacar que para que estos datos tengan efecto debemos haber dado de alta nuestra empresa en Google My business.

Algunos de los datos más importantes a introducir son:

Logo, areaServed, Brand, contactPoint, email, numberofEmployees, description, url.

Si buscamos Facebook en Google nos aparece lo siguiente:

rich cards seo empresa

Más información la podéis encontrar aquí.

Implementación de schema.org y JSON-LD

Una vez hemos visto los principales tipos de objetos que podemos definir con schema.org, el siguiente paso es que navegues por la web de schema.org y conozcas los diferentes tipos de objetos que puedes utilizar y se adaptan a tu negocio.

Una vez hecho este ejercicio, crea el código y valídalo con la herramienta de test que provee Google para comprobar que la sintaxis es correcta. Si utilizas un CMS como WordPress, Drupal, Joomla o similar, busca los mejores plugins que ofrezca la plataforma para crear contenido basado en schema.org.

Una vez tu página haya sido leída por Google, deberás comprobar que aparece la tarjeta gráfica en el buscador y se muestran los datos que has introducido.

También es importante comentar que, si utilizas AMP, debes implementar este lenguaje de marcado en las páginas AMP para que se propague también a los dispositivos móviles.

Si necesitas ayuda con la creación del código, te recomiendo utilices la herramienta de creación de código de lenguaje de marcado de Google. De una forma sencilla podrás crear el código fuente a insertar en tu web.

analisis lenguaje marcado

En esta herramienta deberás introducir la url de la página en la que quieres añadir el lenguaje de marcado, seleccionar cuáles son los datos que quieres enriquezcan tu página y pulsar el botón de crear HTML. Entonces se te generará el código necesario, el cual podrá ser del tipo microdata o del tipo JSON-LD.

validacion lenguaje de marcado

Para el caso en el que la implementación te sea costosa y quieras simplemente decirle a Google cuales son algunos de tus principales objetos, podrás utilizar la herramienta que ofrece Google Search Console para esto. Si accedes a Apariencia en el buscador / Marcador de Datos, de una forma manual le podrás indicar a Google cual es tu contenido rico. Esta forma de trabajar podrá salvarte de un apuro, pero si de verdad quieres sacar el máximo al potencial de schema.org o JSON-LD, te recomiendo lo implementes en tu plataforma, a la larga, te será menos costoso que el modo manual.

lenguaje de marcado marcacion datos

Si queréis validar que el código de tus páginas es correcto podrás utilizar la herramienta de validación que ofrece Google. En esta herramienta podrás introducir un código y comprobar que es correcto. Para el caso de JSON-LD podrás utilizar también esta herramienta.

Finalmente, es importante que utilices Google Search Console para monitorizar el estado de tus objetos y si aparecen en las Rich Cards. Para ello puedes ir a la sección de Apariencia en el Buscador / Datos estructurados y verás todos los objetos que Google ha identificado y sus posibles errores.

google search console marcado de datos

Para el comprobar el estado de las Rich Cards deberás acceder a la sección de Apariencia en el buscador / Tarjetas Enriquecidas.

Como podéis ver, el lenguaje de marcado o el Structured Data Markup es muy importante en nuestra implementación web, y por esta razón os recomendamos que la implementéis y empecéis a medir el impacto de esta implementación en las visitas a vuestra web, os va a sorprender. Si por el contrario no os podéis permitir la implementación de la misma, no os preocupéis, no es algo que os penalizará.

2 comentarios en «Todo sobre Rich Cards, Structured Data Markup, Microdata, Schema.org, JSON-LD y SEO»

  1. Hola Javier, buenisima tu web, he leido todos los articulos porque me apasiona el SEO y en su mayoría se han explicado muy bien, pero este ultimo es el más complejo y menos tenido en cuenta de mi parte, aunque a mis artículos le he incorporado las estrellitas de los rankings y eso vale mucho, pero no es lo mejor. Voy a tener en cuenta este post y a repasarlo varias veces e implementarlo, ya que en la ultima imagen de los datos estructurados que mencionas, tengo 141 elementos con errores Hentry, pero hasta el momento, ni idea y ya veré si puedo hacer algo con esto más adelante.

    Un saludo!

    Responder
    • Muchas gracias por tus comentarios Rodolfo, me alegra saber que te es de utilidad todo este trabajo y esfuerzo! Ayuda a seguir trabajando ;) Muchas gracias por todo
      Javier

      Responder

Deja un comentario

Recibe en tu correo de forma gratuita mi plantilla de análisis SEO y únete a Fullanchor
De acuerdo
Recibe en tu correo de forma gratuita mi plantilla con la checklist de redacción SEO
De acuerdo
¿No tienes tiempo para escribir artículos SEO?

Compra textos seo para impulsar tu web en Serptext 

Ver Serptext

Descubre como posiciona tu web y como lo hacen tus competidores

Introduce tu dominio y pruéba gratis SE Ranking
Recibe comunicaciones sobre Fullanchor
Me apunto
Suscripción a Fullanchor
close-image

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más Información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar