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>
<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.
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 == "item"'>
<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>
<b:if cond='data:blog.pageType == "item"'>
<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.
Y muchos más artículos interesantes si nos sigues en...
Hola, al ir a aplicarlo a mi blog www.bkoolers.com me encuentro que tengo 5 veces la línea
ResponderEliminar¿Es indiferente debajo de cual lo ponga?
Gracias
Saludos
Isidro Merchán
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
ResponderEliminardata: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
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'>
ResponderEliminarGracias Roudy, se cruzaron mi comentario y el tuyo. Esa que dices es otra referencia válida cercana.
ResponderEliminarY tienes mi permiso genérico perpetuo para que comentes lo que gustes :)
Gracias a ambos, ya lo apliqué.
ResponderEliminarY al menos se sigue viendo la web :)
Saludos
:D No podía ser de otra manera Isidro
ResponderEliminarSaludos Oloman...
ResponderEliminarMe 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ó.
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.
ResponderEliminarLa 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
Que buen truco
ResponderEliminarfor get we are profile in search result, just add link in home page!
ResponderEliminarlike it
GOOGLE +
This result
Result view
cheers ;)
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?
ResponderEliminarMuchas gracias y un saludo.
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.
ResponderEliminarSrDiario 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
Hola!!
ResponderEliminarLlevo 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
Funciona perfecto Paco Amebanodo. Aquí tienes la prueba. El problema seguramente es que para tí esta opción de compartir no está disponible.
ResponderEliminarEn la entrada intenté explicar que de momento, el sistema está en pruebas y hay que estar dado de alta como probador para visualizarlo así.
Este botón Google+ me tiene frita...:(
ResponderEliminarTe 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.
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:
ResponderEliminar<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.
Oloman:
ResponderEliminarTrato 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. :)
Ok Marcos Gratis.
ResponderEliminarAhora funciona es lo que buscaba, gracias.
ResponderEliminar;)
ResponderEliminarMuchas gracias Oloman !!!, me funciono muy bien, !!!
ResponderEliminarHOLA 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
ResponderEliminarME PODRIAS DECIR QUE ES LO QUE ESTE PASANDO
GRACIAS
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).
EliminarBuenas 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/
ResponderEliminar¿me puedes ayudar?
Gracias de antemano!
Prueba con esto Anicha.
EliminarHace 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.
ResponderEliminarYo 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