What the hell is Schema.org Markup?

Hoy en día la batalla para lograr que una página web este dentro del top-k en los buscadores se volvió una tarea difícil y no solo existe una forma para lograrlo, en su lugar hay varios consejos, herramientas y buenas prácticas que se deben seguir para ir sumando puntos para alcanzar el resultado óptimo.

Es conocido que el algoritmo de Google (uno de los más buscado) es un gran misterio y que implementa decenas de variables para rankear los sitios web pero si asumimos que algunas de estas variables pueden ser:

Cantidad de visitas
Links entrantes y salientes
Riqueza en el contenido
Metas e información otorgada a los bots
Tiempos de carga, compatibilidad con diferentes dispositivos

Existen muchos otros puntos a tener en cuenta pero en esta ocasión nos ocuparemos de solo uno que es mejorar la información sobre el contenido de nuestro sitio. Es sabido que Google (como tantos otros) benefician a los que cumplen sus recomendaciones y hacen que su trabajo de indexación sea más sencillo. Una gran herramienta para mejorar nuestro SEO de las páginas es el uso de herramientas de etiquetas como el caso de Schema.org Markup. Primero que nada definiremos a Schema.org como:

Schema.org (a menudo llamado schema) es el resultado de la colaboración entre Google, Bing, Yandex y Yahoo donde se logró un vocabulario semántico de etiquetas (o microdatos) que puede agregar a su HTML para mejorar la forma en que los motores de búsqueda pueden leer y representan su página en los Search Engine Results Pages (SERPs).

Para dar una introducción a estas etiquetas presentaré un ejemplo simple donde se puede ver un código el cual genera un resultado más enriquecido (en la imagen se ve el antes y el después al usar schema).

<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> <span itemprop="ratingValue">[Aggregate rating given]</span> stars – <span itemprop="reviewCount">[Number of reviews]</span> reviews </div>

Como podemos ver con unos simples cambios se puede generar un mejor resultado pero para expandir el ejemplo pondré el proceso realizado en esta misma página y así conocer el paso a paso.

Cabe destacar que no solamente se puede aplicar schema con el uso de etiquetas sino que existen alternativas como RDFa y JSON-LD pero queda para el lector ahondar en estas alternativas.

APLICANDO SCHEMA.ORG

Schema.org presenta cientos de etiquetas para describir el contenido de sitios como películas, recetas, libros, productos y como es en nuestro caso un articulo (existe también la clasificación BlogPosting). Todos los tipos de entidades se pueden encontrar en su sitio https://schema.org/docs/full.html y como se puede observar existe una jerarquía que parte de la entidad Thing y por ende comparte por herencia sus propiedades. Antes de comenzar definiremos tres tipos de etiquetas usadas generalmente.

itemscope: Al aplicar esta etiqueta por ejemplo a un <div> se especifica que el contenido dentro de este último es una entidad. Es importante que esta etiqueta no tenga contenido.
itemtype: En la misma etiqueta donde se agrego itemscope es necesario especificar de que tipo de entidad se trata el contenido y para eso se utiliza itemtype el cual debe contener un formato como https://schema.org/Article.
itemprop: Como ya deben suponer esta etiqueta es para hablar sobre una propiedad del ítem. Tiene la particular que puede ser combinada con las anteriores dos propiedades como en el ejemplo

<div itemprop="director" itemscope itemtype="http://schema.org/Person">

Ahora que conocemos todas las partes solo queda aplicar a nuestro HTML y como podrán ver existen varias propiedades habilitadas para la descripción de articulo pero no es necesario el uso de todas. El siguiente fragmento de código demuestra la implementación que al día de la fecha se implementó.

<div class="row justify-content-center" itemscope itemtype="http://schema.org/Article"> <div class="col-md-8"> <h1 class="mb-3" itemprop="headline">{{title}}</h1> <div class="row"> <div class="col" style="max-width: 90px;"> <div class="avatar mini" style="margin-top: 0px;"></div> </div> <div class="col" style="padding-left: 0px;"> <h5 itemprop="publisher" style="margin: 0px;margin-top: 12px;" itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Fabian Zamudio</span> <img src="{{logo_url}}" class="d-none" itemprop="logo"> </h5> <p itemprop="datePublished">Jul 2, 2019 · 0 <i class="icon-heart"></i></p> </div> </div> <img itemprop="image" class="mb-5 mt-2 post-image" src="{{img}}" alt=""> <div id="post-content" class="post-full-description" itemprop="articleBody"> {{contenido}} </div> <ul class="tags" itemprop="keywords"> <li>SEO</li> <li>schema.org</li> </ul> </div> <div class="col-md-8 my-3 author"> <div class="row"> <div class="col-md-2"> <div class="avatar" style="margin-top: 0px;"></div> </div> <div class="col-md-8"> <h6>WRITTEN BY</h6> <h4 itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Fabian Zamudio</span> </h4> </div> </div> </div> </div>

Google al rescate

Ahora que entendimos el background de los schema voy a dejar para su uso dos herramientas usadas para agilizar este proceso. La primera es un asistente para la generación de etiquetas para un sitio ya publicado (https://www.google.com/webmasters/markup-helper/u/0/) que como podemos ver en la imagen es muy sencillo su uso, con tan solo seleccionar con el mouse y seleccionar la opción correcta genera el HTML con los schema usados.

La segunda herramientas es una de las más importante en mi opinión (https://search.google.com/structured-data/testing-tool/u/0/) ya que es para verificar si fue corracta el etiquetado y evitar recibir penalizaciones para una mala implementación. La cual tiene la opción de buscar en una URL o en una porción de código sin la necesidad de tenerlo disponible online.

Como conclusión final quiero aclarar que la administración de SEO es un trabajo arduo y no es inmediato por lo que se debe llevar a cabo día a día, manteniendo un buen contenido acompañado con buenas prácticas.