MICRODATOS SCHEMA EN PLANTILLAS BLOGGER


Hace un par de días estaba creando un blog para unas pruebas, cuando me percaté de que en la plantilla aparecían metadatos (Rich Snippets) de los que carecía mi modificada plantilla. Parece pues que las nuevas sí los llevan y son los de aquel estándar que vimos hace tiempo y que se llamaba Schema.

Estos microdatos (también microformatos) contienen información no visible pero de interés para los buscadores: el título de la entrada, la descripción o sumario, la miniatura de imagen que nos gustaría mostrar, etc. y son los que aparecen junto a cada resultado de búsqueda y que Google llama fragmentos enriquecidos. Su finalidad es mostrar a los usuarios por qué la página es relevante para su consulta.

En esta página de Herramientas para webmasters de Google amplían más la información sobre este concepto:

Si Google comprende el contenido de las páginas de tu sitio, podemos crear fragmentos enriquecidos con información detallada que sirva de ayuda para consultas específicas de los usuarios. Por ejemplo, el fragmento de la página de una receta podría mostrar el tiempo total de preparación, una foto y la valoración de la receta, el de un restaurante podría mostrar la valoración media y el intervalo de precios y el de un álbum musical podría incluir una lista de canciones con enlaces para reproducirlas. Estos fragmentos enriquecidos ayudan a los usuarios a saber si un sitio es relevante para su búsqueda y pueden aumentar el número de visitas que reciben las páginas de ese sitio.

Las marcas correspondientes vienen como atributos con nombres itemscope,itemtype e itemprop. Los dos primeros son los que indican que se van a utilizar estos microdatos y el tipo de web de la que se van a extraer.

En este caso el que se usa es el llamado BlogPosting y que tiene unas propiedades (itemprop) adaptadas a las características de este tipo de sitios. En el enlace podéis ver toda la nomenclatura utilizada y la descripción de cada tipo de elemento.


Pero lo que más nos interesa a nosotros una vez que sabemos para qué sirve, es saber dónde y cómo introduce Blogger esto, para nosotros hacer lo propio. Ellos son los ideólogos de esos fragmentos y al mismo tiempo los promotores de nuestra plataforma, así que supongo que algo sabrán sobre el tema y que convendrá hacerles caso.

Voy a reproducir las líneas enteras dónde encontré microdatos para tenerlas de guía y así saber dónde los tenemos que insertar. Las líneas no son consecutivas pero para que las encontréis más fácil, las he agrupado por cercanía entre ellas. 


En el includable id='post' var='post' aparecen las primeras, el que define el tipo de página (blog), el título de cada entrada como nombre del elemento y el contenido de la entrada como articleBody (cuerpo del artículo):

<div class='post-hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

<h3 class='post title entry title' itemprop='name'>

<div class='post body entry content' expr:id='&quot;post body-&quot; + data:post.id'itemprop='articleBody'>

En la parte de la plantilla destinada a móviles (id='mobile-post' var='post') aparecen casi de idéntica manera, aunque incluyen también una marca para el autor, otra para la url y otra para la fecha de publicación.

<div class='post hentry uncustomized-post-template'itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

<h3 class='post-title entry-title' itemprop='name'>

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'itemprop='articleBody'>

<a expr:href='data:post.authorProfileUrl'itemprop='author' rel='author' title='author profile'>

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

En la zona id='mobile-index-post' está la última:

<h3 class='mobile-index-title entry-title'itemprop='name'>

Una vez incluidos estos nuevos trozos en vuestra plantilla, podéis comprobar el resultado introduciendo la dirección de cualquier página en esta herramienta de Google Webmasters.

Las imágenes de esta entrada fueron obtenidas de Digital Organics yGoogle Webmasters Tools.



1 comentario:

  1. Hola amigo,

    muchas gracias por la guía. La he seguido al pie de la letra y he puesto todo tal cual lo has explicado pero hay un apartado que no he encontrado en mi código. Es este:

    authorProfileUrl' itemprop='author'

    Con lo cual no sé exactamente dónde colocar ese itemprop. Lo he dejado aquí (lo pongo así porque no me deja poner html en el comentario):

    span class post-author vcard
    if cond data top.showAuthor
    data top authorLabel/
    data post author itemprop author /

    Pero al usar la herramienta de google webmasters no me aparece la búsqueda como queremos con esto.

    La web es www.eligiendoseguro.com. Si puedes explicarme dónde debería colocarlo te lo agradecería mucho.

    Muchas gracias de antemano por tu ayuda. Un saludo! Nos leemos ;)

    ResponderEliminar

***GRACIAS***
* THANKS * DANK * شكرا * MERCI * ευχαριστίες *
* GRAZIE * OBRIGADO* Cпасибо
**SOMOS ÚNICOS POR QUE, LOS DEMÁS DICEN SER DIFERENTES**