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.
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='"post body-" + data:post.id' itemprop='articleBody'>
<h3 class='post title entry title' itemprop='name'>
<div class='post body entry content' expr:id='"post body-" + 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='"post-body-" + 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'>
<h3 class='post-title entry-title' itemprop='name'>
<div class='post-body entry-content' expr:id='"post-body-" + 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 y Google Webmasters Tools.
¿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...
Interesante Post Oloman te agradesco mucho
ResponderEliminarOhhhh :(
ResponderEliminarMe has quitado el siguiente post xD.
Pues nada, tendré que enseñar a marcar los comentarios ;)
PD: Esos items no funcionarán si no están dentro de "itemtype='http://schema.org/Blog'", porque son exclusivos de ese esquema. Por lo tanto, yo agregaría a la línea <div class='blog-posts hfeed'> el atributo itemscope y el itemtype anterior
EliminarNo sé a qué items te refieres de todos los publicados, pero tal como los puse es cómo Blogger los coloca en las plantillas y en la que probé salen los datos sin problemas. Cierto es que no lo vi en una versión móvil y puede que sea esa la que dices.
EliminarYo llevo usando esto hace tiempo pero con el schema "Blog". En el enlace del principio, lo que se explica es tal y como yo lo puse. Sin embargo estos de Google lo hcen con BlogPosting y no me parece mal, porque es una categoría que también cuadra.
Sobre tu post, publícalo. Siempre viene bien tener varias versiones y seguro que lo comentas de una manera distinta. Además, también es muy posible que digas algo que yo me comí o que aclares algo que dije de más ;)
Nada, una ida de olla mía. Pensé que habías puesto en 'post hentry' itemprop='blogposting', y eso da error si no está dentro de un itemtype='http://schema.org/Blog'.
EliminarPero como no lo has puesto, no pasa nada. Podrías usar cualquiera de los 2, aunque 'blogPosting' es más exacto que 'blog'.
Lo publicaré, aunque lo alargaré un poco ;).
Hola Oloman, me gustaría pedir tu sugerencia o consejo, como no vi tu enlace de email te lo pongo como comentario, espero no te moleste.
ResponderEliminarMira, llevo 3 años con mi blog, y le he agregado yo diría que bastantes cambios en su diseño HTML gracias a tus tutoriales y consejos, entonces he decidido que pues es hora de un cambio de diseño, no encuentro una plantilla que me agrade tanto como la que tengo ahorita, entonces lo que quería decirte es como puedo editar el diseño de mi plantilla, mira mi blog es este http://winboox.blogspot.com/ si puedes revisarlo y decirme, para que las ediciones HTML no se pierdan del todo, además tengo esta misma guardada en mi ordenador, puedo intentar editarla desde el bloc de notas y probar con un blog de prueba. Que dices tu? Que me aconsejas?
Saludos.
Atte: Mike
Eso último que dijiste. Pero mejor que tenerlo en un bloc de notas, haz una copia de seguridad de la plantilla (fichero .xml) y luego en el blog de pruebas, instálala. Ahí ya podrás hacer todos los cambios que quieras y cuando esté todo a tu gusto, pues haces el trasvase al contario. Esto es, haces una copia de seguridad de la de pruebas y el fichero .xml lo subes a tu blog "real".
Eliminarosea si agrego eso pa que sirve o que?
ResponderEliminaramigo no tengo ninguna liena para ponerlo'post-hentry' itemscope
ResponderEliminarpost title entry title
post body entry content que ago no tengo niguna de las lineas para poner los metadatos
Esos datos sirven para los buscadores y con "plantillas de artilugios expandidas" deberías ver todas esas líneas. Si no es así entonces es que tienes una plantilla que no ha cuidado esos detalles, lo cual no quiere decir que la tengas que cambiar. En el fondo, esto de los metadatos es una pequeña ayudita, pero nada definitivo.
Eliminaroloman... tengo una duda si mi blog se trata de softwares osea de programas yo no puedo utilizar BlogPosting si no q deberia utilizar SoftwareApplication o para blogger se necesita el primero olbigatoriamente... ademas e intentando con el segungo y uff me a presentado algunos errores lo muestra pero en la herramienta para webmaster me presenta algunos detalles...
ResponderEliminarSi lo que tienes es un blog deberías utilizar BlogPosting. Cada apartado tiene unas etiquetas específicas en función del tipo de web, no del tipo de su contenido.
Eliminarok.. muchas gracias.. x tu respuesta..
ResponderEliminarGran post. Los microdatos HTML5 son, sin duda, el futuro. Actualmente Google parece hacer caso a pocos de los múltiples esquemas que encontramos en schema.org, pero sin duda, empecerá a darle más importancia todavía en el futuro.
ResponderEliminarDesde que escribí este post las plantillas Blogger han incrementado bastante el número de marcas que incluyen, así que es posible que ya le estén dando una mayor relevancia.
Eliminares muy bueno tus pots, sin embargo no entendí como debo hacer para modificar dichos fragmentos?
ResponderEliminarPues sólo has de seguir las instrucciones a partir de "Voy a reproducir..." para encontrar ciertas líneas e incluir lo que está en negrita si no lo tienes.
EliminarHola Oloman, La plantilla de mi blog Agua y Sig contiene un microformatos, en lo que vi en los apartes que señalaste un poco diferente pero al probar el estado con la herramienta que colocaste, me da error, estoy algo perdido, me das una luz?
ResponderEliminarGracias
Hola. Pasé tu página principal y la dirección de un post al azar por la herramienta y sale bien. Lo único son un par de datos (updated y hcard author), pero eso no tiene importancia. Hasta el marcado de autor que explique hace muy pocos días te sale bien.
EliminarPor cierto, bonita plantilla ;)
Buenas tardes,
ResponderEliminarperdonar la duda, que quizás es muy básica, pero donde tengo que insertar el codigo que me ha generado Google una vez etiquetados los datos de la home de mi web? Tengo una tienda virtual en prestashop y no se si tengo que crear algun archivo o insertar el codigo en alguno ya existente.
Muchas gracias,
Xavier, no sé a qué código te refieres ¿uno que te ha generado Google? Ni logro adivinar de qué me hablas... Dame más pistas
EliminarHola Oloman, he metido el código que pones arriba y, en principio, me va bien. El tema está en que como ya tenía microformats metidos, aparentemente los resultados son iguales. Tengo un blog de blogger de recetas cocina y la idea, lo diferenciador, seria incluir la foto de cada uno de los post. Sabes como lo tendría que poner en la plantilla? habría que meterlo en cada post? Qué código sería? Muchas gracias
ResponderEliminarPrueba con esta META después de la apertura del HEAD:
Eliminar<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
Que va, no hay manera... Es que yo creo que he hecho tantos cambios en la maqueta... que ya ando con la cabeza turuleta... Tu podrías guiarme para que me saliera con la foto? Podrías echarle un ojo a ver qué me falta? Gracias por anticipado...
EliminarSeguramente es eso que dices y otras marcas se superponen sobre la meta que te indiqué, pero no puedo entrar en tanto detalle de revisión o explicación con cada uno de vosotros. Lo siento.
EliminarHola Oloman, tengo un lio con esto de los metadatos que no veas, tengo los siguiente fallos:
ResponderEliminar- datePublished:
falta y es necesaria
- image:
falta y es necesaria
¿como podria solucionarlo?
te paso la direccion del blog
http://locomosxca-world.blogspot.com.es/
Hola Xisco. Tiempo ha... ;)
EliminarEn el segundo trozo de código tienes al final dónde añadir la fecha de publicación y con respecto a la imagen, lo mejor es que te des una vuelta por este otro post.
Muchas gracias, en cuanto tenga un momento me pongo a ello y te digo cosas.
EliminarSaludos ;)
Ya esta solucionado, añadi lo de la fecha y modifique todos los metadatos, ahora no me da ningun error, muchisimas gracias ;)
EliminarSaludos y exelente Blog en mi caso, esta es la parte que me da error y por mas q modifico y la quito y mil cosas mas nada que me resuelve el error de datePublished ->>>> div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting Agradecería enormemente en su ayuda
ResponderEliminarHola. Tienes que fijarte en el segundo trozo de código que publiqué. Esa es la estructura del marcado que debería llevar la fecha de publicación del post (datePublished). Sólo tienes que replicar ese ITEMPROP allí dónde esté la fecha (data:post.dateHeader)
EliminarHola, aparentemente todo hice bien, pero solo me muestra la imagen de la entrada mas reciente, pero no me muestra el texto resumen de la entrada. Que hago? ayudame por favor.
ResponderEliminarHola. Ese texto-resumen lo has de grabar tú para cada entrada. Eso se hace desde el editor de entradas, en el menú de la derecha, bajo el nombre "Descripción de búsqueda". Primero tienes que habilitar esa opción desde el Escritorio
Eliminar