viernes, 23 de septiembre de 2011

Oloblogger

Oloblogger


Metadatos con schema.org para el botón +1

Posted: 22 Sep 2011 02:47 PM PDT

Tras ver el otro día que el botón +1 próximamente servirá para compartir el contenido de una página, quizás sea el momento de ver cuáles son los datos que este enviará, porque según las plataformas, el botón tomará bien el título de la entrada o no y lo mismo con el resto de datos que se supone que envía automáticamente.

Para homogeneizar esto, no hace mucho, Google, Bing y Yahoo se pusieron de acuerdo para crear un estándar estructurado, con un vocabulario común para marcar datos en páginas web. Este invento se llama schema.org.

Ver la parte de la documentación quizás asusta un poco a los que no entendemos mucho de esto, pero en el fondo, no son mas que etiquetas que se pueden aplicar al contenido de nuestras páginas y que los buscadores interpretaran de una manera determinada.

Estas marcas se pueden programar mediante META o directamente sobre el contenido. Este sería un ejemplo de una sencilla página con tres datos, mediante la segunda opción:

<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="image-url"></img>
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>

Primero indicamos con itemscope que lo que se encuentra dentro de ese bloque se debe interpretar con el estándar SCHEMA y dentro de este, con itemtype, que se van a usar las keywords de productos (Product). Luego, el título se marca con itemprop="name" (propiedad del objeto=nombre/titulo), la imagen con itemprop="image" y el sumario con itemprop="description".

De esta manera, cuando un robot de algún buscador quiera extractar esta información, sólo tendrá que localizar las correspondientes etiquetas itemprop y enseguida obtendrá los datos que necesita. Lo importante de esto es que esos datos no serán los que él quiera o los que escoja de manera azarosa, sino precisamente los que nosotros hemos querido.

¿Y cómo aplicar esto a Blogger? Pues con dificultad, como siempre, porque aunque se trata de un estándar compartido por Google, lo cierto es que las limitaciones estrictas que nos impone Blogger en cuanto a insertar código en la plantilla, provoca que no se puedan usar de manera óptima etiquetas META para este fin y que la otra opción (etiquetando con itemprop) tampoco funcione 100% bien.

De todas formas algo podemos hacer y aunque de momento no lo podáis ver (ya dije que hay que estar inscrito en el grupo de pruebas y que sólo esos pueden compartir contenido actualmente), creo que no está de más preparar la cosa para cuando todo el mundo tenga acceso.

Este sistema nos sirve igualmente para otros fines y las etiquetas se pueden poner directamente en el contenido de las entradas, pero como más adelante puede que mejore o incluso se automatice el sistema para Blogger, nosotros lo vamos a poner todo en la plantilla para poderlo quitar fácilmente si fuera necesario. Para ello vamos a usar las etiquetas DATA que contienen los datos que a estos fines nos resultan de interés.

Así que buscamos (con Expandir plantillas de artilugios seleccionado) la línea <b:loop values='data:posts' var='post'> y a continuación insertamos todo esto:

Actualización: Hay varios loops idénticos en la plantilla y aunque en realidad sirven todos ellos excepto los que están generados para la versión móvil, a continuación ofrecemos (a petición popular) unas cuantas referencias más, para encontrar el loop más correcto. Es el que está más próximo a alguna o todas estas líneas.
  • <b:includable id='main' var='top'>
  • <!-- posts -->
  • <div class='blog-posts hfeed'>
  • <data:adStart/>


<!-- METADATOS SCHEMA -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemscope='' itemtype='http://schema.org/Blog' style='display:none;visibility:hidden;'>
<span itemprop='name'><data:post.title/></span>
<span><img expr:src='data:post.thumbnailUrl' itemprop='image'/></span>
<span itemprop='description'><data:post.snippet/></span>
</div>
</b:if>

A lo antes explicado sobre el uso de Schema, sólo hemos incorporado un condicional para que los datos los marque sólo cuando estamos en posts individuales y una pequeña trampilla para que Blogger trague con el tag itemscope, que ha consistido en hacerla igual a un contenido nulo.

También hemos escogido el apartado de SCHEMA correspondiente a blogs (http://schema.org/Blog) y en cuanto a las DATA, hemos utilizado las que guardan el título del post (data:post.title), una miniatura cuando hay imagen (data:post.thumbnailUrl) y un pequeño sumario (data:post.snippet). Para que en lugar de sólo el título del post, salga este y también el nombre del blog, podéis usar <data:post.title/> | <data:blog.title/>.

Una vez hecho esto, en este enlace de Webmasters Tools podéis comprobar los datos que los buscadores capturarán para cualquiera de vuestras páginas. Podéis probar con la página inicio y con un post cualquiera, así como ver cómo salen estos metadatos sin y con este código.

Si tenéis otro estándar etiquetando vuestro contenido como por ejemplo Open Graph (usado por ejemplo por Facebook), puede ser innecesario instalar este otro, aunque ambos son compatibles. El botón +1 le da prioridad a los datos de Schema.


No hay comentarios:

Publicar un comentario

Correo Vaishnava