Metadatos con schema.org para el botón +1 | Oloblogger Tras ver el otro día que el botón +1 próximamente servirá para compartir el contenido de una página...

22 de septiembre de 2011

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

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.

¿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

27 comentarios :

  1. Hola, al ir a aplicarlo a mi blog www.bkoolers.com me encuentro que tengo 5 veces la línea

    ¿Es indiferente debajo de cual lo ponga?

    Gracias
    Saludos
    Isidro Merchán

    ResponderEliminar
  2. Isidro, con el permiso de Oloman, te comento que en las pruebas que hice en mi plantilla si tiene que ver. Busca en la plantilla
    data:defaultAdStart
    abajo se encuentra el loop values
    Si no aparece el código que te indique busca el tercer b:loop values='data:posts' var='post' de arriba hacia abajo

    ResponderEliminar
  3. Pienso que puede valer cualquiera que no esté dentro del código para móviles (MOBILE), Isidro, pero quizás mejor el que está dentro de este INCLUDE: <b:includable id='main' var='top'>

    ResponderEliminar
  4. Gracias Roudy, se cruzaron mi comentario y el tuyo. Esa que dices es otra referencia válida cercana.

    Y tienes mi permiso genérico perpetuo para que comentes lo que gustes :)

    ResponderEliminar
  5. Gracias a ambos, ya lo apliqué.
    Y al menos se sigue viendo la web :)

    Saludos

    ResponderEliminar
  6. :D No podía ser de otra manera Isidro

    ResponderEliminar
  7. Saludos Oloman...
    Me gustaría hacerte una consulta:
    Tengo una prueba tipo test en formato swf la he guardado en tres hosting distintos (Dropbox, Google Sites y Fileden), pruebo los enlaces en los distintos navegadores (Mozilla Firefox, Internet Explorer, Opera y Safari) todo anda muy bien. El test se carga completamente. Entonces es hora de colocar dicho test en una entrada de mi blog, es allí donde esta el problema, si coloco el test en una entrada dentro de las etiquetas [iframe][/iframe] el archivo swf se carga perfectamente. Pero no quiero usar eso, quiero colocar un enlace a través de cual cuando el usuario haga clic sobre él se abra una ventana modal en la cual se cargue el archivo swf, para ello buscando y buscando llego a Vagabundia, allí encuentro las ventanas modales creadas usando Floatbox, aplico eso en mi blog y todo anda de maravilla las ventanas modales se ven perfectamente, JMiur explica como abrir el archivo swf en una ventana modal usando Floatbox haga lo que el dice la ventana modal abre y comienza a cargarse el archivo swf pero cuando llega a 8% se detiene la carga del archivo, he buscado y buscado información al respecto pero no consigo nada. Por cierto me descargué la última versión de Adobe Flash Player pero de nada sirvió.

    ResponderEliminar
  8. Hola Oloman! xD aqui añadiendo un comentario mas y una pregunta a tu lista jeje, Este asunto de los +1 al momento no le he movido nada.
    La pregunta: ¿sabes si hay manera de hacer que este artilugio: http://www.techcular.com/top-authors-widget-for-blogger-blogspot/ de los Autores mas destacados pueda funcionar en alguno de mis blogs? ya que lo uso y solo veo los enlaces al que provee el Artilugio, será que los pipes de yahoo ya no funcionan o que me falta? saludos!

    P.D. Eres el amigo en Google + a vencer en Angry Birds xD

    ResponderEliminar
  9. for get we are profile in search result, just add link in home page!
    like it
    GOOGLE +
    This result
    Result view

    cheers ;)

    ResponderEliminar
  10. Como puedo reducir el largo de una entrada, me refiero al espacio en blanco que sobra en una entrada y reducir el espacio entre entradas?
    Muchas gracias y un saludo.

    ResponderEliminar
  11. wii4everybody, creo que esto ya lo hablamos por Twitter. Efectivamente, la pipe que controla ese artilugio está mal y ya no funciona. No conozco ahora mismo otra similar que esté en otra web, así que tendrás que buscar.

    SrDiario puede resultar prácticos según qué casos... como todo ;)

    Beben Koben comenta que para que nuestros perfiles de Google+ salgan en los resultados de búsqueda, sólo tienes que añadir un enlace al mismo en la página Inicio de tu blog. Si alguien lo comprueba que lo comente.

    JTobaruela en la parte CSS que formatea las entradas, debes tener algún MARGIN que hace que la parte de abajo tenga ese espacio. Para cambiarlo tendrás que localizar que clase es la que controla esa parte. Yo te lo diría, pero con el botón derecho deshabilitado me cuesta más encontrarlo y voy con prisa (no es imposible). Y para juntar más los posts, lo mismo pero aquí si que casi seguro que la clase es .date-outer

    ResponderEliminar
  12. Hola!!
    Llevo dando vueltas con esto del scheme varios días y no soy capaz de que funcione en google+, pero en facebook funciona bien.
    El blog es amebanodo.blogspot.com por si queréis echar un vistazo. Me tiene desesperao, he probado ya cien formas distintas, y en Webmaster Tools veo cláramente cómo recoge un thumbnail.
    Loco no lo siguiente.
    :D

    ResponderEliminar
  13. Funciona perfecto Paco Amebanodo. Aquí tienes la prueba. El problema seguramente es que para tí esta opción de compartir no está disponible.

    En la entrada intenté explicar que de momento, el sistema está en pruebas y hay que estar dado de alta como probador para visualizarlo así.

    ResponderEliminar
  14. Este botón Google+ me tiene frita...:(
    Te comento que cambié de plantilla, y cada vez que le doy al botoncito en un post individual y quiero compartirlo me sale el titulo del post pero una imagen y descripción distintas, de hecho la descripción toma los datos de la pagina como contacto, menu, etc. Como puedo arreglarlo???ayudame por fis. Gracias.

    ResponderEliminar
  15. Marcos Gratis prueba a editar un post y a incluir dentro del código de la imagen más representativa de ese post, la siguiente etiqueta en negrita:

    <img itemprop="image" src="http://picasaweb/0kdjikdj....

    Creo que es la única manera de controlar con exactitud la imagen que quieres que se vea, marcándolo individualmente en cada post.

    Si no te funciona, compruébalo también en el enlace de Webmaster Tools que facilito. Si ahí sale la imagen marcada es que el truco funciona y falla otra cosa que no sabría decirte qué es.

    Si no te importa, me comentas el resultado. Gracias.

    ResponderEliminar
  16. Oloman:
    Trato de poner el código como lo pones ahí y no hay caso al actualizar el post se borra y queda como una imagen normal, lo raro es que no es solo la imagen sino la descripción del post no pone nada del contenido. Verifique en el otro enlace de webmasters tools y me dice Se extrajeron los datos fragmento rico de la página: Toma como referencia las direcciones de las etiquetas y el titulo y nada más.
    En fin, no te molestes, lo dejo así.
    Gracias de todas maneras. :)

    ResponderEliminar
  17. Ahora funciona es lo que buscaba, gracias.

    ResponderEliminar
  18. Muchas gracias Oloman !!!, me funciono muy bien, !!!

    ResponderEliminar
  19. HOLA TENGO UNA DUDA YA INTEGRE LOS METADATOS CON SCHEMA.ORG PARA MEJORAR MI SITIO Y RESULTA QUE AL HACER LAS CONSULTAS EN GOOGLE NO FUNCIONA Y NO ME MUESTRA NADA, Y ESO QUE LO PROBE EN EL ENLACE DE WEBMASTER TOOLS



    ME PODRIAS DECIR QUE ES LO QUE ESTE PASANDO

    GRACIAS

    ResponderEliminar
    Respuestas
    1. No sé si te refieres a qué cuando salen los resultados de tu blog no se ven los datos o que directamente no salen resultados. Entiendo que si te sale bien en Herramientas para Webmasters, lo que ocurre es lo segundo y contra eso sólo se puede aplicar... paciencia. Bueno y también enviar un Sitemap para agilizar (enlace).

      Eliminar
  20. Buenas tardes, ¿se podría hacer lo mismo con el botón de facebook? No sé por qué cuando comparto a facebook me sale siempre la misma descripción, la de mi perfil, y no al de la entrada en concreto. Este es el blog: http://palabrasdesatadas.blogspot.com.es/
    ¿me puedes ayudar?
    Gracias de antemano!

    ResponderEliminar
  21. Hace pocos días, el boton +1 mostraba la imagen del post al compartir en mi blog y de pronto dejó de mostrarlas. Lo solucioné añadiendo el código de este post (Gracias). He visto comentarios en otros blogs donde informan que el boton +1 dejó de mostrar las imágenes en miniatura al compartir, A veces ni el resumen muestra. Parece que solo pasa en las plantillas modificadas.

    ResponderEliminar
    Respuestas
    1. Yo creo que fue casualidad porque incluso los enlaces directamente pegados en G+ no mostraban la miniatura y el resumen. Fallaba intermitentemente pero hoy ya me ha funcionado bien todo, los botones +1 y el enlace manual.

      Eliminar