Datos estructurados. Incluir 'datePublished', 'image' y 'headline' en Blogger | Oloblogger Se ve que no hace mucho ha habido algún cambio en el marcado Schema, porque cosas que antes no daban...

2 de septiembre de 2015

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:

Vista humano

...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:

Vista spiders

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
Copy URL

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

follow us in feedly

29 comentarios :

  1. Hola Oloman, me ayudo con este problema, gracias.

    ResponderEliminar
  2. Amigo Oloman, Buen artículo ¿Ves necesario meter estos meta data para una mejor indexación?

    ResponderEliminar
    Respuestas
    1. Lo dije en el propio artículo Félix: Necesario no; conveniente sí ;)

      Eliminar
  3. Hola Oloman, enhorabuena por tu artículo, imprescindible.

    Me surge una duda. En Blogger los títulos de los posts tienen asignada la etiqueta h3, lo cual relentiza el posicionamiento en búsquedas de los posts. En el caso que en un blog se haya cambiado la etiqueta del "post-title" por h2 o h1, ¿para actualizar al nuevo Schema, en tu ejemplo "Marcar image, headline y datePublished· habría que cambiar el h3 por h2 o h1?.

    Muchas gracias por tu atención.

    ResponderEliminar
    Respuestas
    1. Hola Javier. No, no hay que cambiar los encabezados. Se trata de poner el "headline" en la línea que sirve de apertura para la caja contenedora del dato (título). Es indiferente que en esa línea hayas usado h1, h2 o h3. La marca no va con la etiqueta HTML usada, sino con el dato que se quiere marcar. El título en tu pregunta.

      Eliminar
  4. Saludos Oloman.. Primero que todo Felicitarte como siempre por tus aportes muy limpios y entendibles...ya estoy aplicando ese concepto a mis post para mejorar posicionamiento..

    aparte me gustaría saber si me puedes echar una manito con lo siguiente:
    en mi blog , cada vez que hago un post las etiquetas, fecha, y autor quedan Encima del titulo del post ..
    Hay alguna forma o que tengo que hacer para cambiar de posición esta parte y ponerla debajo del titulo de los post?..
    te voy a dejar una captura por si depronto no me hice entender muy bien.....

    http://i.imgur.com/lQ7aRu5.png

    De Antemano Millon de Gracias.. siempre me han servido tus aportes asi como tus ayudas... DLB.. un Abrazo !!!!! :)

    ResponderEliminar
    Respuestas
    1. Claro que se puede cambiar de sitio eso, Joral Gom.

      La forma fácil sería desde Diseño, editando el bloque Entradas del Blog. Ahí verás las etiquetas y en principio podrías mover esa parte a cualquier zona. Lo que ocurre es que en plantillas muy modificadas ese sistema no funciona.
      En ese caso tendrás que buscar el gadget, que distinguirás por contener la variable data:label.name. Luego ya cortas todo el código que le correponde y lo pegas dónde quieras.

      Eliminar
  5. Hola Oloman, me podrias indicar en que parte de la plantilla se tendria que poner las meta. Esta parte "justo detrás de la declaración del alcance (itemscope)" no se donde la encuentro. O que linea de código es exactamente. Gracias por tu tiempo Oloman...

    ResponderEliminar
    Respuestas
    1. Detrás de esto Jhonny:
      <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

      Eliminar
  6. Gracias Oloman, me sirvio mucho, ya que no me mostraba la imagen cuando publicaba en facebook. Pero ahora aparte de arreglar el error en Structured Data Testing Tool, tambien todo esta bien cuando publico en facebook. Muchisimas gracias

    ResponderEliminar
  7. Muy buenos dias Olo.

    Antes de jugar con mi curiosidad y hacer un daño en mi blog jajaja, te cuento lo siguiente:

    1. Fui a la pagina de google (https://developers.google.com/structured-data/testing-tool/) le marque la url de mi blog y me salieron 5 errores.

    2. Todos los errores son de datepublished marcados en rojo al final del test, entre author, url, y name, el error decia que hacia falta datepublished.

    3. Luego de leerte y no entender por donde entrar a corregir estos errores(no es que no te expliques bien, es que yo no se nada de esto),

    4. Me fui por pura curiosidad a Diseño/Entradas del blog/Editar, allí me di cuenta que la casilla de la hora no estaba marcada, pues la marque, hice una oración e hice de nuevo la prueba en Estructured data testing.

    5. Resultado: Ya no me sale el mismo error al final, ahora me salen 5 errores marcados en rojo en la siguiente zona:

    BlogPosting 1
    name: ¿Como esta tu Economía? I
    headline: ¿Como esta tu Economía? I
    image: http://1.bp.blogspot.com/-R0ZA-klyMZ8/VknIaIF0eaI/AAAAAAAAB5E/auBYhUgExXw/s320/images%2B%252829%2529.jpg
    url: http://ganaconwally.blogspot.com/2015/11/como-esta-tu-economia-i.html
    datePublished: 7:19 a. m. (ESTO ES LO QUE SALE COMO ERROR MARCADO EN ROJO, EL DATEPUBLISHED)

    6. Como ves ahora no dice que hace falta el datepublished, sino, que marca como error el datepublished.

    Analizando me di cuenta tambien que solo marca como error, las entradas permitidas por mi(5) en la edición de las entradas. Y cada vez que escribo una nueva entrada esta quedara marcada con ese error. En otras palabras las entradas que tienen error son las que salen en la caja de entradas.

    Gracias como siempre Olo, como dijiste una vez (Sois muchos) pero se responderás apenas pueda, para ayudarnos como siempre.
    Bendiciones

    ResponderEliminar
    Respuestas
    1. Pues para que la cosa sea fácil y como en comentarios no puedo desarrollar una explicación genérica de manera más completa que como lo hice en la entrada, prueba a cambiar el formato de esa fecha de manera que no sólo se vea la hora. Prueba con alguna otra que lleve incorporado también la fecha del día.
      Haz el intento con diversos formatos comprobando luego en la herramienta de Google. Alguno de ellos creo que solucionará eso que buscas.

      Eliminar
    2. Cambie de formato de fecha, hice la prueba, y todo Ok.
      Un abrazo y bendiciones...sigue Avanzando, llegaras a tu meta.

      Eliminar
  8. Recuerda que no se nada de HTML, solo que he aprendido en tu blog, asi que tratame como tal en la respuesta. Gracias

    ResponderEliminar
  9. Hola Oloman, te quería comentar algo, arreglé toda estructura según este post y me quedo todo perfecto. Hasta ahi todo bien, PERO, el día de hoy se me ocurrío revisar y aparecen NUEVOS errores el revisar un post, te dejo una imagen: http://i.imgur.com/D2bENND.png ahí puedes ver de que se trata. Esto es totalmente nuevo ya que antes no aparecía. Ojalá nos puedas ayudar para ver que se puede hacer y dejar nuevamente al 100% los blogs.

    Un abrazo!

    Pd: Revisé la estructura de este mismo blog y también presenta esos 3 errores.

    ResponderEliminar
    Respuestas
    1. Es que a mí no me preocupa eso Ignacio :D

      Por lo que se ve siguen modificando schema y haciendo "obligatorias" nuevas marcas. Por eso la misma plantilla antes no te daba error y ahora sí. Intenté explicar en el post cómo funciona todo esto, más que un caso concreto, precisamente para que pudierais solucionar cualquier error de ese tipo por vuestra cuenta.

      Por favor revisa la entrada para que puedas ser autónomo en este asunto. Si lo haces verás que primero debes ir a https://schema.org/BlogPosting. Allí por ejemplo verás que es eso de "Publisher" y que no es otra cosa que el editor del post que será normalmente el autor. Debería estar dentro de "Person".

      En el apartado de este post titulado "Metadatos en Blogger" podrás ver cómo por esa parte de la plantilla están los datos del autor. Se trata por tanto de añadir dentro de <span itemprop='name'> la propiedad que falta (publisher), de manera que quedaría así:
      <span itemprop='name publisher'>
      Dentro de ese SPAN está data:post.author que es precisamente el dato que requiere el marcado y que ahora no existe.

      Si no funcionara, como también se explica en el post, entonces añade una META con el dato.

      Eliminar
    2. Y de similar manera puedes reparar el resto de errores.

      Eliminar
    3. Gracias por tu ayuda Oloman, felices fiestas :D

      Eliminar
  10. Hola, al leer el comentario numero 9 de Ignacio Garnica, revise nuevamente mi blog que ya estaba ok con tu ayuda (mi blog ganaconwally.com) con esta herramienta de google y me salieron 40 errores, y no tengo la menor idea de como solucionarlos.
    ¿esos errores en que afectan mi blog?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Pues en ese mismo hilo acabo de contestar a la pregunta ;)

      Eliminar
  11. Oloman, saludos

    Se que ya has respondido sobre lo mismo, pero una confirmación tuya me dejaria mas tranquilo.
    Revisando los datos estructurados de mi blog, encuentro que todas mis paginas tienen errores:

    1. image: https://4.bp.blogspot.com/-8uZAMkgwKt4/VyM9QkE9OWI/AAAAAAAAKhA/F169lA3xG2IgNMg3Vk_xVe1921J9I4e5gCLcB/s400/cueva5.jpg

    2.
    publisher falta y es necesaria
    dateModified falta y está recomendada
    mainEntityOfPage falta y está recomendada

    Todos mis post tienen estos errores que antes no tenian. ¿Algo de que preocuparme? ¿Como puedo solucionar esto? Aclaro que no tengo ni idea de estos temas, por eso pregunto al que sabe.

    Gracias hno y bendiciones.

    ResponderEliminar
    Respuestas
    1. No. Como dice ahí son recomendados, pero no obligatorios. Se conoce que han incorporado más items al protocolo, como cuando publiqué este post.

      Eliminar
    2. Pero hay un protocolo Publisher que dice que falta y es necesaria.

      Eliminar
    3. Es necesario para que el protocolo esté completo, pero dicho protocolo, a su vez, no es necesario usarlo. Ergo si no es necesario el protocolo, me da igual que esté incompleto.

      Eliminar
    4. Jajaja logica respuesta como siempre amigo.
      Muchas gracias y sigamos Avanzando...los protocolos que se vayan a la........jajaja
      Bendiciones

      Eliminar
  12. Hola hermano, en la erramienta de prueba de datos estructurados mi blog me produce un error en datePublished "16:43:00 (No se entiende el valor 16:43:00 como fecha/hora. Más información sobre los formatos de fecha y hora.)", he intentado corregirlo pero no he podido, me podrias orientar o dar algunas recomendaciones, http://hablemosdesig.blogspot.com. Saludos y gracias.

    ResponderEliminar
    Respuestas
    1. Hola Jorge ¿has visto si tienes data:post.timestampISO8601 en el lugar que indico en esta entrada? Si es que sí, entonces prueba a cambiar desde tu Escritorio Blogger el formato de fecha/hora.

      Eliminar