Datos estructurados. Incluir 'datePublished', 'image' y 'headline' en Blogger

Se ve que no hace mucho ha habido algún cambio en el marcado Schema, porque cosas que antes no daban error al pasar por la herramienta de comprobación de datos estructurados, ahora sí que saltan como tales. Bueno realmente es seguro porque en esta entrada de su blog algo dicen al respecto :D

No sé cuáles son las modificaciones exactas sobre la versión anterior, porque si bien lo del titular (headline) con certeza que es nuevo, por ejemplo lo de la fecha de publicación (datePublished) ya viene de atrás.


El marcado que usa Blogger responde al protocolo Blog y/o al de BlogPosting y en los enlaces anteriores podéis comprobar la gran cantidad de etiquetas que se pueden llegar a utilizar. Sin embargo con que se solucionen las que den error es más que suficiente. De hecho no es algo obligado ni imprescindible, pero sí recomendable y por eso, si no cuesta mucho, mejor arreglarlo.

Qué es el marcado de datos

Antes de entrar en materia concreta, para que se entienda todo bien y que podáis salvar en el futuro cualquier otro error que os pudiera surgir y no sólo los del título de esta entrada, lo que vamos a hacer es ver un ejemplo de marcado y explicar con él algunos conceptos.

<div itemscope="itemscope" itemtype="http://schema.org/NewsArticle">
  <h2 itemprop="headline">Cómo marcar con Schema (Título)</h2>
  <h3 itemprop="alternativeHeadline">Una manera fácil de aplicar datos estructurados (Subtítulo)</h3>
  <span itemprop="description">En esta entrada aprenderás a usar etiquetas para marcas los principales deatos de tus entradas (Descripción)</span>
  <span itemprop="articleBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla urna arcu, ultrices vitae nisi vel, sagittis eleifend ante... bla, bla, bla... (Contenido del artículo)</span>
  <img itemprop="image" src="thumbnail1.jpg" alt="thumbnail 1 summary"/>
  <img itemprop="image" src="thumbnail2.jpg" alt="thumbnail 2 summary"/>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
</div>

Este anterior bien podría ser el HTML de un post completo con todas sus marcas. En él he usado el protocolo NewsArticle que es un pelín distinto al que usamos en Blogger pero que nos sirve igualmente para la explicación. Todos son muy similares e iguales en cuanto a su aplicación y sólo hay que respetar la nomenclatura propia de cada protocolo para que todo vaya bien.

Con ese marcado de antes lo que veremos los humanos en pantalla será simplemente esto, lo que se interpreta por HTML:

...además de dos imágenes al final, la que lleva la la dirección thumbnail1.jpg y la que lleva la de tumbnail2.jpg, que me he ahorrado reproducir en la anterior captura. La fecha, que está marcado en la última línea, no será visible porque forma parte de una etiqueta meta y como tal, su contenido no se muestra en pantalla.

Sin embargo, lo que "verán" los buscadores será esto otro:

Eso anterior es precisamente el objeto de este tipo de marcado: facilitar la extracción de datos básicos de una página para que los robots puedan identificar y clasificar adecuadamente su contenido... e indexarlo correctamente, claro.

Se trata por tanto de añadir a cada dato importante una marca normalizada que otros sistemas (como buscadores) serán capaces de leer.

Hay varios protocolos, pero el que usa Blogger principalmente es el de schema.org que es sobre el que estamos hablando desde el principio en esta entrada.

Cómo aplicar Schema

Como habéis visto se trata primero de marcar en la caja que va a contener los metadatos, el alcance con itemscope y el protocolo o temática que se va a seguir (en el ejemplo NewsArticle) con itemtype.

<div itemscope="itemscope" itemtype="http://schema.org/NewsArticle">

Todas las propiedades referentes a ese alcance concreto tendrán que quedar anidadas dentro de la caja dónde se define el mismo. Para eso en el interior utilizaremos los elementos habituales (texto, imágenes, etc.) pero marcándolos aprovechando las etiquetas HTML que pueden determinar cajas, como div, span o p.

Dentro de esas etiquetas y a modo de atributo irían las distintas propiedades itemprop que queremos señalar, usando la propia nomenclatura de cada alcance (nótese lo coloreado en verde en el próximo ejemplo de código).

Marcar un alcance y dentro usar las propiedades de otro, generalmente no producirá el efecto deseado mas que por pura casualidad.

<div itemscope="itemscope" itemtype="http://schema.org/NewsArticle">
  <h2 itemprop="headline">Cómo marcar con Schema (Título)</h2>
  <h3 itemprop="alternativeHeadline">Una manera fácil de aplicar datos estructurados (Subtítulo)</h3>

Cuando no haya contenidos visibles sobre los datos que queremos marcar, lo conveniente es añadir las propiedades dentro de etiquetas meta. En el ejemplo este sería el caso de la fecha, que no queremos que lo vea el usuario pero sí queremos que lo lean los robots.

<meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>

Dentro de un alcance puede existir otro anidado sin problemas siempre que este último se ajuste a su propia nomenclatura. De hecho algunos protocolos como el de reseñas o revisiones (review) requieren de un anidado forzoso para ciertos datos (rating o AggregateRating).

Metadatos en Blogger

Meter todas estas marcas manualmente en todos los artículos de nuestro blog sería una tarea ingrata que además nos quitaría tiempo para lo principal, escribir en él, pero las plantillas de Blogger estándar ya incluyen los más necesarios y nos libran de esa faena.

Esto es posible gracias a las variables data que van obteniendo de la base de datos de la plataforma aquel necesario para cada apartado (título, contenido, fecha, descripción, etc.), automatizando la faena de ir "pintando" el contenido de cada página.

De esta manera con marcar adecuadamente la variable correspondiente, TODAS las páginas (y entradas) llevarán sus microdatos incorporados ¿Os suena por ejemplo haber visto alguna vez en vuestra plantilla esto?

<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
  <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'< 
    <span itemprop='name'>
      <data:post.author/>
    </span>
  </a>
</span>

Pues ese es el marcado que viene de serie para los datos del autor de cada entrada según el alcance Person (Persona).

Como veis no hay datos de nadie en particular, pero con data:post.authorProfileUrl se inserta automáticamente la URL del perfil del autor y con data:post.author el nombre del mismo. Podéis comprobar como las etiquetas que forman las cajas contenedoras de cada uno de esos datos llevan un itemprop con el nombre del dato, url y name respectivamente.

En este caso Blogger ha añadido una etiqueta meta para marcar la propiedad itemprop='url' por la sencilla razón de que ese dato no tiene una caja contenedora dónde hacerlo. Bueno sí, la que tiene la clase fn, pero como esta ya tiene el alcance, no se pueden poner ahí además propiedades.

Como método alternativo también hubiera servido añadir un span vacío como caja contenedora de lo preexistente y en él añadir la propiedad.

Marcar image, headline y datePublished

...y cualquier otro dato que queráis si se ha entendido todo lo anterior.

Para los dos primeros, la cosa sería por aquí, dentro de la caja dónde se define el alcance (itemtype='http://schema.org/BlogPosting') y cerca de otras dos marcas que inserta Blogger pero que realmente no están en el protocolo y que por tanto son ignoradas por este (blogId y postId). Las podéis encontrar a continuación resaltadas en verde.

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <b:if cond='data:post.firstImageUrl'>
    <meta expr:content='data:post.firstImageUrl' itemprop='image'/>
  </b:if>
  <meta expr:content='data:blog.blogId' itemprop='blogId'/>
  <meta expr:content='data:post.id' itemprop='postId'/>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title'>
    <h3 class='post-title entry-title' itemprop='headline'>
      <data:post.title/>

Si tenéis modificada esa parte y no os aparece igual tendréis que improvisar un poco, pero siempre siguiendo la misma estructura. Lo primero es que las propiedades queden dentro de la caja en que se marca el alcance BlogPosting (si no existe lo creáis) y lo segundo es que se añadan las propiedades dentro de ella.

El itemprop='headline' irá siempre en la caja contenedora del data:post.title que es la variable que representa el título de la entrada. En cuanto a la imagen, como no es algo que figure diferenciado del resto del contenido de la entrada (va todo junto en data:post.body), habrá que marcarla como visteis, con una meta y con la variable data:post.firstImageUrl que sí que contiene la dirección de la primera imagen que aparece en un post.


Para la fecha lo que nos interesa es encontrar la variable data:post.timestampISO8601, que precisamente nos da el día y hora en el formato que requiere Schema (ISO8601). Solemos encontrarla en la plantilla de esta manera y lo que hay que añadir lo he coloreado de nuevo:

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
  <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
    <data:post.timestamp/>
  </abbr>
</a>

Si tenéis problemas en encontrar los trozos de código indicados o dificultades a la hora de añadir los datos estructurados, siempre podréis añadirlos justo detrás de la declaración del alcance (itemscope) en forma de etiqueta meta:

<meta expr:content='data:post.title' itemprop='headline'/>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>

Más información, aunque quizás un poco burda por la distancia temporal, en Metadatos con schema.org para el botón +1 y en Microdatos Schema en plantillas Blogger.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter