Muchos Bloggers realizan cambios por error en sus plantillas que desconfiguran el modo en que se montan los fragmentos para compartir en las redes sociales, esta guía intenta dar una solución a todos esos problemas.
¿Qué son los Fragmentos?
Simplificando técnicamente, se trata del conjunto de imagen y texto que las personas podrán ver cuando se comparta alguna entrada en tu Blog.
A la izquierda podemos ver la imagen de ejemplo que Google+ muestra en los perfiles de sus páginas para explicar el concepto de Fragmento.
¿Son personalizables?
Los fragmentos son personalizables pero siempre dentro de los parámetros que ofrecen las redes sociales para poderlos entender. Es decir, no se podrá construir un fragmento para compartir una determinada entrada si en la plantilla del Blog no se disponen de los "datos" necesarios para que pueda formarse.
¿Qué utilidades se les suele dar?
Tienen diversas utilidades. No sólo se manejan para montar fragmentos en redes sociales, también pueden servir a los robots rastreadores de los buscadores para conformar los datos estructurados de un sitio de manera que pueda tomar datos acerca de quién es el propietario del sitio o utilizar algunos de esos datos para presentar los resultados de búsqueda de una manera determinada.
¿Cómo se forma un fragmento?
Tal como se explica en la página Developers de Google+, en el código fuente de tu plantilla o del HTML de una página web de cualquier sitio, deben existir un conjunto de "datos" de los cuales extraer la información para componer el fragmento.
En la página para desarrolladores de Google+ nos explican las formas en que en las redes sociales obtienen la información para montar el fragmento, trato de resumirlo pormenorizándolo técnicamente para que se comprenda lo mejor posible:
I - Formación de fragmentos a partir de microdatos schema.org:
Se pueden componer fragmentos para compartir en redes sociales a partir de microdatos schema.org: este es el modo recomendado por Google. Simplificando técnicamente, consiste en utilizar unas etiquetas identificativas que aluden a un concepto que puede extraerse del código para componer un fragmento. Estas etiquetas identificativas en el código son:
Título, Imagen y descripción
- <body itemscope itemtype="http://schema.org/Product"> es el punto donde indicas a la red social cómo vas a compartir el código. El método http://schema.org/Product indica que vas a utilizar los siguiente micro-datos para compartir en las redes sociales:
- <h1 itemprop="name">Título</h1> Un TÍTULO
- <img itemprop="image" src="Imagen" /> Una IMAGEN
- <p itemprop="description">Texto descriptivo</p> Una DESCRIPCIÓN
Justo lo que compartimos en Google+ o Facebook o Pinterest... cuando se construye el fragmento en nuestro Blog.
Un problema frecuente con microdatos schema.org
En Blogger estos datos se encuentran en la propia plantilla. Si por alguna razón hemos cometido un error y los hemos borrado o cambiado, al compartir en las redes sociales observaremos que los datos que acompañan a la publicación que hacemos no se extraen correctamente.
Soluciones para los microdatos schema.org
Si no puedes recuperar tu plantilla original, puedes intentar construir estos microdatos en tu propia plantilla. Cuando hablamos de las herramientas para datos estructurados de Google montamos aquel conjunto de datos que permitía indentificarnos como autor de un contenido en Google.
Esa misma información es la que debes aplicar a tu código. Debes tener en cuenta que cada plantilla es distinta y que en este caso, se trata de que recuperes y presentes los datos que necesitas para que se componga el fragmento.
II - Formación de fragmentos a partir del protocolo OpenGraph.
Se pueden componer fragmentos con el protocolo OpenGraph. Se suele utilizar bastante con Facebook y Twitter, en Blogger hay que manejarlo "con cuidado" como veremos en la solución de problemas.
Al igual que la utilización de micro datos, el fragmento se compondrá utilizando las etiquetas og:nombre_elemento.
- <meta property="og:title" content="..." /> De aquí se extraerá el título.
- <meta property="og:image" content="..." /> De aquí se extraerá la imagen.
- <meta property="og:description" content="..." /> De aquí se extraerá la descripción o entradilla.
Un problema frecuente con OpenGraph
Muchos Bloggers tienden a utilizar el formato OpenGraph en la zona <HEAD> de su plantilla. En esa zona se declara normalmente casi todo lo que vas a utilizar en el resto de la página. Si por ejemplo pones ya fijo en el head un og:title con un título prefijado o un og_description con una descripción ya prefijada, observarás que no te compone correctamente el fragmento porque siempre pone el mismo título o descripción a todo.
Soluciones para OpenGraph
Si utilizas OpenGraph en Blogger, hazlo para marcar el autor. El resto de campos deja que se resuelvan por micro datos para evitar problemas. Es decir, preferiblemente deja la plantilla tal cual la tienes.
III - Formación de fragmentos a partir del meta etiquetas.
Se pueden componer fragmentos por medio de las meta etiquetas. En este caso suele utilizarse la meta etiqueta "description" o "title" que se encuentran en el <HEAD>. Es más recomendable utilizar siempre micro datos (Blogger lo hace por defecto) o protocolo Open Graph antes que la meta etiquetas. Ten en cuenta que se suelen utilizar más de cara a los rastreadores que de cara a los fragmentos.
IV - Formación de fragmentos por deducción.
Por último, si no hay ninguna clase de marcado (ni micro datos ni Opengraph ni meta datos) entonces se hace por "deducción". Este punto es el menos recomendable, afortunadamente en Blogger el código ya está montado automáticamente para utilizar micro datos.
¿Qué hago si no aparece la imagen que deseo en Google+ al compartir?
Si en Google+ o incluso en cualquier red social (Fabook, Pinterest) no aparece la imagen que deseas como portada de tu entrada al compartir, pon en la sección <HEAD> de tu plantilla la siguiente meta-etiqueta:
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
Esto colocará la primera imagen que tu entrada contenga y que tenga un tamaño superior a 250x250, además en Google+ podrás elegir cualquier otra imagen que pertenezca a la entrada, de esta manera publicarás lo que compartas con la imagen que deseas como portada para la entradilla.
Como seria una mneta para la descripcion ya que esa que dices ya no sirve, actualmente uso la de imagepostURL para sacr la imagen, pero la de la descripcion ya no esta funcionando
ResponderEliminarPara las descripciones del Blog haz esta guía: http://www.diariosdelanube.com/2014/03/como-presentar-la-descripcion-de-tu-web.html y para la descripción a nivel de entrada usa esta guía: http://www.diariosdelanube.com/2013/06/aprende-escribir-la-descripcion-de-tus.html
EliminarCualquier duda por aquí estoy.
Hola, en blogger cuando se publica la entrada en facebook coge el texto del primer comentario para componer el fragmento. Si en la entrada no hay comentarios no pone ningún texto. ¿Cómo se hace para que no coja el texto del primer comentario?.
ResponderEliminarNo me refiero a introducir yo una descripción. Sólo quiero que no coja el texto del primer comentario.
EliminarHe quitado todas las p que van entre <> (lo pongo así porque si no la caja de comentarios no me deja) de todos los elementos data:blogCommentMessage de la plantilla, y con mucho cuidado de no eliminar una /p que cerrara un <p class= pero sigue saliendo el primer comentario como fragmento.
EliminarHola mi consejo es que pongas la descripción de la entrada. Si no la rellenas, la lógica del algoritmo que se utiliza para publicar el fragmento, busca el texto que "a su entender encaja".
EliminarLo mejor para extraer la descripción correcta es ponerle descripción a la entrada: haz los pasos de esta guía y lo tienes: http://www.diariosdelanube.com/2013/06/aprende-escribir-la-descripcion-de-tus.html
Ojo, tarda un tiempo, no es instantáneo que en Google se empiece a presentar ese fragmento, pero si es posible que cuando compartas en las redes sociales empiece a salir bien.
Si por cualquier razón a pesar de todo eso (que además es conveniente que lo tengas hecho), no te funcionara, entonces es un tema de estructura del Blog. Puede que estés "machacando" la descripción del Blog o que éste no tenga tampoco descripción (suele sacarse siempre la descricpión del blog, si no la hay la descripción de la entrada y si no la hay... lo que sea). Esto lo puedes ver en esta entrada: http://www.diariosdelanube.com/2014/05/como-debe-ser-la-estructura-de-un-blog.html
Cualquier cosa aquí estoy.
Un saludo!
El motivo por el que no pongo descripción es porque entonces además de sacarla en facebook la pondrá también en los resultados de búsqueda en google, y ahí prefiero que el texto que aparezca sea según las palabras que haya introducido la persona en el buscador.
EliminarSi pudiera hacer que la descripción sólo apareciera en facebook pero permitiera a los resultados de google seguir cambiando según las palabras introducidas en el buscador entonces sí la implementaría.
Puedes probar utilizando el protocolo og (opengraph). Si pones lo que explico en el punto "II - Formación de fragmentos a partir del protocolo OpenGraph." puede que consigas lo que buscas.
EliminarYo aún así, te recomiendo que utilices description y og:description, siempre es mejor darle la información necesaria al buscador.
Haz pruebas con og, es posible que sea lo que estás buscando.
Un saludo!
La descripción que pusiera con og saldría en todas las entradas, voy a tener que recurrir a una solución parcial con og para evitar esta repetición: poner la meta de la descripción de una entrada en la plantilla, pasarla por el depurador de facebook, luego borrarla de la plantilla, poner la descripción de la siguiente entrada, y así con todas. Es importante borrarla de la plantilla porque si se deja al cabo de unos días facebook registra la que hayamos dejado (la última) y la pone en todas las entradas.
EliminarÉsta es la misma solución que se me ocurrió para poner una imagen diferente en cada artículo, no quería poner la primera imagen por defecto todos. De momento me está funcionando, llevo muchos días y parece que al haber borrado la meta de la plantilla facebook no ve nada nuevo que registrar y no hace cambios. Aunque de vez en cuando hago la prueba para asegurarme.
Hola,
Eliminarsi usas Blogger, puedes tirar de condicionales para meter og en las entradas y description en la portada del Blog. O hacerlo como quieras. Yo uso condicionales para poner la descripción general del blog desde la página principal y sólo la descricpción de las entradas en las entradas (si no se machacan unas a otras).
Los "if cond" explico como usarlos aquí: http://www.diariosdelanube.com/2014/09/como-utilizar-condiciones-en-blogger.html
El cómo pongo la descripción y metaetiquetas de la página principal diferentes de las utilizadas para las entradas lo explico aquí: http://www.diariosdelanube.com/2014/05/como-debe-ser-la-estructura-de-un-blog.html
Un saludo!,
Hola Miguel ¿cómo estás? aun no me queda muy claro. Ocurre que al publicar en facebook, no aparece descripción en las entradas, solo aparece nombre de mi blog, seguido del titulo de la entrada y debajo de ella la dirección. Pero no aparece la breve descripción. ¿Qué códigos debo componer o arreglar?
ResponderEliminarQuedo en tu respuesta.
Hola Ana, si es Blogger, es posible que tengas las descripciones no del todo correctas. Haz la prueba de meter descripción en la entrada (a la derecha del editor de entradas tienes un campo para poner descripción de la entrada: http://www.diariosdelanube.com/2013/06/aprende-escribir-la-descripcion-de-tus.html y comprueba que no tienes escrito "a fuego" una meta-etiqueta "description" para todo el blog porque esa machacaría a la otra.
ResponderEliminarUn saludo!
Hola Miguel, gracias por la respuesta. Veras que he leído la entrada que comentas, y para entender un poco de lo que comentas, ¿hace falta primero que coloque la descripción de mi blog? lo que pasa que esa opción "descripción de búsqueda" no la tiene. Vienen las demás, pero esa no viene.
EliminarPara activar la descripción dentro de las entradas debes seguir la guía que te pasé al principio (si no, no aparecerá la posibilidad de que añadas la descripción a nivel de entrada). Tendrás que activar la descripción a nivel de Blog y observar que no tengas ninguna metaetiqueta description que machaque a las demás.
EliminarUn saludo!
Aun no me queda muy claro Miguel. He colocado incluso la descripción: configuración > básico > descripción. Pero [creyendo que a eso te referías] intento publicar la entrada, resulta que se pone esa descripción y no un breve resumen del post.
EliminarYa entendí mejor el paso del link que me mandaste. ya active la "descripción de búsqueda". La cosa es que coloca la descripción del blog, no la de la entrada :s
EliminarHola, me alegro que te funcionara. La descripción de búsqueda de la entrada sale si no es "machacada" por la descripción del Blog. Asegúrate que una no esté machacando a la otra. De todas maneras el que salga la descripción del Blog ya me parece bastante correcto y suficiente.
EliminarUn saludo!
Si, ya se pudo activar, pero como te comento, a la hora de publicar sale la descripción del blog, no de la entrada. En todo caso ¿cómo me doy cuenta que código le hace sombra? [ queda machacada].
EliminarSaludos y disculpa la molestia.
¿Mando mi plantilla a tu e-mail?
EliminarHola Ana,
Eliminarcomprueba que no tengas una meta etiqueta description a nivel general (de las que se ponen el head) que pueda machacar la descripción de búsqueda.
Un saludo!
No me queda claro todavía, lo dejaré por la paz. Agradezco tu tiempo Miguel, saludos!
EliminarGracias a sus preguntas y respuestas pude solucionar mi problema. A mi me ocurría que al compartir en facebook mi entrada, salia el titulo y descripción del blog y antes no ocurría eso (incluso la descripción de búsqueda de la entrada la había modificado). Hasta que entendí lo de "machacada" jajaj
EliminarTenia en mi plantilla las Meta Tags "Title" y "Description", las elimine y listo :D
Gracias :)
Jajaja, me alegro que lo descubrieras... Jajaja es que no sé cómo expresarlo de una manera que se entendiera más fácil...
EliminarMuchas gracias por participar.
Un saludo!