JMiur [E]

Esta entrada no pretende dar una respuesta sino mostrar las consecuencias de las distintas alternativas y permitir que cada uno decida qué hacer ya que en la web se ven soluciones que en realidad no son soluciones y que si bien no provocan errores, sólo funcionarán dentro de determinados contextos lo que provoca que aparezcan comentarios de "no me funciona" sin que haya una explicación razonable.

El tema tiene muchas aristas pero, lo más obvio y la forma más sencilla de verlo es eso que se muestra cuando intentamos compartir un enlace de un blog en Facebook. Lo que normalmente veremos es que se detecta una o más imágenes, el título y dirección del enlace y un resumen de ese artículo. Esto es así en muchos casos pero, no siempre. Si el enlace es de un blog alojado en Blogger, lo que se ve es ... cualquier cosa.

No digo "cualquier cosa" en términos despectivos sino que lo que se verá depende de la forma en que se diseñó la plantilla, de la manera en que se escriben las entradas y del azar.

Hay dos formas básicas de enviar ese tipo de información: usando las etiquetas META description y/o META og:description; la primera, es una etiqueta básica de cualquier página web, se la considera tan importante que se dice que es "obligatoria"; las mismas Herramientas para Desarrolladores de Google abundan en información sobre eso. El problema surge cuando se trata de páginas dinámicas como un blog con decenas o cientos de entradas que, por lógica, deberían tener una etiqueta META description distinta para cada una de ellas.


En Blogger, hacer esto ES IMPOSIBLE porque el sistema no nos provee de un "resumen" de cada entrada. Entonces LA SACAMOS y ¿qué pasará?

Me voy a corregir; en realidad, Blogger si tiene dos datos con esa información pero, no nos sirven y ese es justamente uno de los errores que se ve en muchas publicaciones al respecto.

Blogger nos da dos datos que contienen la dirección URL de la imagen en miniatura extraída de cada entrada (si es que hay una) y un resumen de unos 100 caracteres con las primeras palabras de esa entrada; ambos datos sólo son accesibles dentro del widget Blog, es decir, en el body de nuestra página. Son fáciles de probar; las veremos si, inmediatamente luego de <b:includable id='post' var='post'> o en alguna otra parte de ese includable ponemos esto:
<img expr:src='data:post.thumbnailUrl'/>
<data:post.snippet/>
La existencia de esos datos, que pueden ser útiles para otras cosas, es la que induce al primer error, creer que podríamos usarlos dentro de una etiqueta META. Esto es un error porque si bien no habrá errores visibles si los usamos de este modo:
<b:includable id='post' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:post.snippet' name='description'/>
    <meta expr:content='data:post.snippet' property='og:description'/>
    <meta expr:content='data:post.thumbnailUrl' property='og:image'/>
  </b:if>
  .......
en realidad, todas estas etiquetas serán ignoradas y es fácil de probar, bastaría poner textos e imágenes de prueba para ver que nada cambiará ya que esas etiquetas, agregadas al body de la página, serán ignoradas:
<b:includable id='post' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='ESTA ES UNA PRUEBA DE RESUMEN' name='description'/>
    <meta expr:content='ESTA ES UNA PRUEBA DE RESUMEN' property='og:description'/>
    <meta expr:content='URL_alguna_imagen' property='og:image'/>
  </b:if>
  .......
Me olvido de las etiquetas META, no coloco ninguna y hago otra prueba ... el resultado será variable, dependerá de la entrada:


¿Qué es lo que busca Facebook para mostrar como resumen?


Si usamos la herramienta URL Linter, nos lo dice con claridad: toma como resumen el contenido de las etiquetas META colocadas en el head y, si no las encuentra, toma el contenido de la primera etiqueta P que encuentre siempre y cuando el texto sea lo suficientemente largo (unos 120 caracteres de longitud) así que, poner esto, tampoco funcionará:
<p><data:post.snippet/></p>
<p><data:post.body/></p>
y tampoco esto:
<p>
  <data:post.snippet/>
  <data:post.body/>
</p>
No es un problema de ubicación de códigos es que, simplemente, el dato que devuelve data:post.snippet es demasiado corto.

Bueno, dicen algunos, entonces, como en Blogger la etiqueta META description de las entradas es bastante inútil, no las usemos y listo.

A los efectos del resultado en los buscadores, desconozco si eso es razonable o no ya que para los buscadores no es mandatoria sino una sugerencia y lo que ellos interpretan de nuestros sitios es bastante misterioso y cambiante. Lo que sí es totalmente cierto es que si se la elimina para que de ese modo, al compartir un enlace en Facebook se vea un resumen de nuestra entrada, estaremos cometiendo un error porque no siempre será así.

La clave de todo es que lo que se toma para resumir algo es el contenido de la primera etiqueta P y eso, no siempre es parte de una entrada ya que el editor de Blogger escribe códigos distintos cuando formateamos algo, depende del navegador o del tipo de editor que utilizamos.

Ahhh dicen otros, por eso es que las plantillas colocan nuestra entrada en una etiqueta P:
<p><data:post.body/></p>
Tampoco es cierto ya que si dentro de una etiqueta P hay una etiqueta DIV, el resultado es nulo, el navegador no generará esto:
<p>
  <div> ....... </div>
</p>
sino esto:
<p></p>
<div> ....... </div>
<p></p>
También es fácil de probar; escribo:
<p style="background-color:red">
  <div> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</div>
</p>

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.


y no veré nada de color rojo.

Es por eso que el resultado es aleatorio; aparecerá "vaya uno a saber qué"; por lo general, algún comentario, el primero cuyo texto sea lo suficientemente largo; o bien algo de la sidebar o cualquier otra cosa salvo que en la entrada coloque una etiqueta P ya que SIEMPRE, será su contenido el que va a a ser resumido.


Como dije, todo esto puede ser probado utilizando la herramienta URL Linter, que es la que nos permite ver los datos reales que son leídos de cada URL ya que, si lo intentamos probar con los botones de compartir o directamente en Facebok, no veremos los cambios porque las direcciones URL son cacheadas y esa herramienta, no sólo nos informa sino que además borra la caché de Facebook.

Si no queremos usarla lo que hay que hacer es agregarle un parámetro a la URL:

http://miblog.blogspot.com/.../miejemplo.html?v=1

cambiando ese numerito por otro, cada vez que queremos ver el resultado de un cambio.

Moraleja: no existe una solución genérica para esto, dependerá del contexto de cada sitio y de cada entrada; mientras Blogger no nos de la posibilidad de conocer ese dato de manera global para que pueda ser utilizado en cualquier parte de la plantilla incluyendo el head, no hay mucho más que hacer salvo que a alguien se le ocurra algo que realmente funcione.

57 comentarios:

NMitra  

¡Bravo!

Responder
Campeon  

Hola, tienes mucha razon con esto.... no se porque al compartir un enlace en facebook o donde sea... solo en mi caso aparece la primera descripción que encuentra que en mi caso es la descripción de mi Blog y no aparece la descripción de la entrada como debería de ser, no se porque, pero siempre aparece la descripción de mi entrada y no he sabido como hacer para que aparezca la descripción de la entrada, esto es un lio jojojo.

Saludos...

Responder
Daniel Cana  

En mi caso solo aparece una descripción cuando existe un comentario...

Responder
Wíllo  

De acuerdo. Me cansé de modificar esas líneas. El resultado en los buscadores no ha sido mucho problema, recibo un buen número de visitas por google; mi dolor de cabeza ha sido la descripción (primeras palabras del post) en facebook.

He notado que el incipiente Google+ muestra sin mayores problemas el contenido de la entrada en la descripción.

Responder
Oloman  

Lo de las META condicionadas según el tipo de página, había pensado probarlas algún día, pero por lo que dices, no funciona. Gracias por hacérnoslo saber.

Responder
JMiur  

Campeon:
Tal como quiero explicar, no hay forma de que aparezca la descripción de la entrada a menos que se sacrifiquen ciertas cosas, que la plantilla tenga un diseño especial y que se escriban las entradas de cierta manera y con ciertas etiquetas.

Daniel Cana:
Es lo que muestra la entrada. Normalmente, si el sitio no posee una etiqueta META description, lo que se mostrará es el contenido de la primear etiqueta P que, suele ser un comentario o algo en la sidebar.

Wíllo:
No es un tema de Facebook. Es una incapacidad de Blogger. Tomo ese ejemplo porque es el más fácil de ver pero, esto también afecta a los resultados que se ven en los buscadores. Si en Google+ se muestra bien (cosa que desconozco) simplemente es porque Google es dueño de Blogger y quiere decir que a su red, envía el dato correcto pero, a los demás no, incluyéndonos a nosotros que somos los usuarios.
La etiqueta META description es una etiqueta fundamental.

Oloman:
Por lo menos yo, me cansé de probarlo sin ningún resultado. De toda maneras, tal vez haya algo que se me haya pasado por alto así que habría que seguir intentándolo.

Responder
LNR  

justo taba preguntandome como cambiar la descripcion de cada entrada con facebook
acabas de hacerme dar cuenta que blogger tiene mas limitaciones de las que creia :(

a esperar quedaremos para ver que surge en el futuro

Responder
k_nelita  

Yo no se si tengo las metas bien puestas o que, pero en Facebook todos los blogs que tengo vinculados se autopostean con la descripción correcta de cada entrada... Raro no? Digo raro que algo me salga bien jajja :D
Incluso un blog que no es de Blogger, tampoco de Wordpress, me refiero al de Miarroba, que es muy difícil de modificar la plantilla...
Todos se autopostean perfectos, me da miedo jajjaa

Responder
k_nelita  

A través de NetworkedBlogs los blogs se autopostean en mi perfil, un grupo y una página de Facebook y en todos salen bien los resumenes de los posts... Me estoy empezando a preocupar porque me sale bien? :o

Responder
JMiur  

No, no hay que procuparse. Aplicaciones como esa u otras, no leen los sitios sino que usan los feeds para enviar los datos así que el proceso es completamente distinto.

Responder
k_nelita  

Ahh bueno ya me parecía que no era que yo hubiera hecho algo bien jeje :)
Me preocupa jaja otra cosa, que le pasa al emoticón :o que no sale? El que mueve los ojitos? Lo cambiaste?

Responder
JMiur  

:-O Para ese emoticón hay que ponerla la narcita; sino se arma lío con los códigos que algunas personas escriben en los comentarios.
: - O

Responder
k_nelita  

Antes no lo tenías así :-o jjaa ahora es con naricita... y bueno la pondremos :D

Responder
Axel  

eso de la descripcion es facil lo que no puedo hacer es lo de la imagen alguien me puede ayudar con eso yo le ayudo con la descripcion

Responder
JMiur  

Tendrás que explicarte más porque no sé a qué te refieres.

Responder
Marchethink  

Buenos días JMiur, lo primero es que quiero que sepas que sigo tu blog desde hace semanas y me tiene muy acupado :)
Lo segundo es que quería comentarte que he cambiado mis blogs de blogger para que se muestren los títulos de los post como H1 y para que se muestre titulo del post/titulo del blog.
Hasta ahí todo como tu otros compaeros indicáis,m pues bién después he probado a poner la metadescription en y la meta-keywords en el post (por probar) ya que se supone que no los toma como snippets y como keywords (según he entendido), pero cual ha sido mi sorpresa que al comparar snippets de las SERP para post con y sín la descrption en el post, resulta que los que así la tienen lo toma como snippet.

Un saludo.

Joaquín.
¿Es esto correcto para el SEO?, ¿debería añadirlos a cada post?

Responder
JMiur  

En principio, las etiquetas META no son mandatorias sino sugerencias, los motores de búsqueda las leen y las usan sólo si ellos lo deciden. La META keywords, según informa el mismo Google, ya no es una etiqueta que tengan en cuenta y, los cambios recientes introducidos por el algoritmo Panda, hacen que sea casi imposible definir reglas genéricas.

En Blogger, usar METAs description para cada entrada es algo imposible si se quiere automatizar, deben ser condicionadas una por una indicando la URL pero, por lo dicho al inicio, nada garantiza el resultado que, en mi opinión, debe circunscribirse al viejo sistema de prueba y error.

Responder
k_nelita  

Hola JM estaba suscripta a este tema y justo veo que siguen hablando de lo mismo, y hoy me pasó algo que me quiero matar o matar al Panda y eso que amo a esos tiernos animalitos...
Resulta que hace un par de días cambié la plantilla a http://www.propon.com.ar que tenía un PR 2, y hoy entro y tengo la nada misma! Ni cero siquiera, que cosa no le gustó a Google de mi nueva plantilla?
Que a mi me parece mas liviana que la anterior...
Estoy furiosa :S :|

Responder
JMiur  

Difícilmente el tema sea la plantilla. Esos cambios de PR nada tienen que ver con el diseño. Los buscadores no leen estilos y el PR no cambia automáticamente cuando uno cambia detalles gráficos.

Si el PR es cero, es probable que el sitio haya sido penalizado por lo que consideran alguna violación a las politicas de Google referidas a enlaces dudosos. Revisa tus cuentas, Adsense, Google Analytics y Google Webmaster Tools porque de ser así, debe haber un aviso al respecto.

También puede ser que simplemente, estés mirando el PR en un sitio que no lo muestra correctamente. Si miras directamente los servidores de Google, sigue teniendo PR2. Este es el enlace a uno de ellos.

Dice: Rank_1:1:2
donde el 2 es el PR

Responder
k_nelita  

Mmm por un lado me quedo mas tranquila, pero donde veo el PR es en la barra de Google, en SEO Chrome y otro mas que tengo instalado en Chrome, y los demás sitios los veo bien, solo ese blog cambió y fue hoy, ayer estaba en 2... no entiendo... y ni siquiera dice 0 muestra un (?) que me está preguntando?
Voy a revisar Analytics y Webmaster Tools, Adsense no tengo en ese blog...

Responder
k_nelita  

No, ya descubrí que pasa, solo uno de mis sitios marca correctamente, ni siquiera el tuyo sale bien, solo el (?) en todos, parece que, o se estropeó esa herramienta o tengo que reiniciar todo el equipo...
Solo en el Bailando sale bien, ni siquiera Twitter sale el rank...
Gracias igual, me sacaste un peso de encima :D

Responder
JMiur  

Una cosa es que aprezca un ? y otra distinta que apaerezca un cero; obviamente, al herramienta que usas no funciona y eso es algo bastante común.

Responder
k_nelita  

En el tiempo que hace que escribí ese comentario hasta ahora, reinicié la pc e instalé 4 o 5 herramientas diferentes para Chrome y todas con el mismo resultado... :S
Solo una funciona pero solo en la página de Google o el correo de gmail...
Que es esto? Ya no se cual probar, nunca me pasó esto...
Alguna recomendación? Plis!!

Responder
JMiur  

¿Herramientas para hacer qué?

Responder
k_nelita  

Para medir el PR, pero no funciona ninguna ahora, ni en FireFox ni en Chrome, las que se instalan como aplicaciones en el navegador, solo miden en la página principal de Google o Gmail o Twitter, no miden el PR de ningún otro sitio, no solo mis blogs, desde ayer no muestran nada, dice Unknown...
Las de medir el Alexa si funciona pero el PR no :(
No se que pasará...

Responder
JMiur  

Herramientas para agregar al navegador y que hagan eso, no tengo idea. No les veo utilidad alguna.

Sitios para chequearlos hay muchos:

http://pagerank.app-o-trap.com/
http://google.dirson.com/lab/pagerank-calculator.php

Responder
k_nelita  

Ya me enteré que pasaba, parece que Google cambió la API y los plugins o complementos para los navegadores no funcionaban.
Ahora algunos desarrolladores de esas herramientas se están poniendo las pilas y van corrijiendo esas cositas.
Ya encontré alguno que funciona...
A mi me es útil saber el PR y Alexa de los sitios que visito y poder ver los míos por una cuestión comercial :)
Saludos :)

Responder
Martín Rocha  

Y seria efectivo JMiur agregar por cada entrada que hagamos este tipo de datos: Description, keywords, og:title?
Saludos JMiur =)

Responder
JMiur  

¿Y cómo harías tal cosa? Si un sitio tiene cientos de entradas, habría que poner un condicional para cada una de ellas. Sería una locura.

Responder
Martín Rocha  

Pero agregarlas dentro de cada entrada Jmiur? consultaba por el echo de que viendo el html de ese blog que te habia comentado en cada entrada se ve que agrega eso, de echo al twittear hace referencia al titulo meta en vez del que tiene el post mismo...crees que es por ello JMiur?
Por otro lado referido a los metas, aplique lo de la optimizacion de facebook pero por un lado no me aparece ni la descripcion de la entrada ni la miniatura, aca como se ve, tengo algo mal en el codigo o me falta algo JMiur?
Desde ya muchas gracias y disculpas las molestias.

Responder
JMiur  

No entiendo. Si miras el código fuente del blog al que haces referencia, verás que n oposee ninguna etiqueta META especial, Description es el títul odel post seguido del título del blog y og:title es el título.

Lo que indica esta entrada es esto: en Blogger, no hay forma de controlar cuál es la miniatura ni la descripción enviadas a Facebook.

Responder
Martín Rocha  

Jmiur entncs lo de las miniaturas se acomoda solo no?
Aca encuadre lo que te comentaba JMiur, o sea me refiero si es posible agregar datos an cada entrada que sean tomados por los botones sociales, por ejemplo alli tanto en FB como en Twitter toman otro titulo y descripcion diferentes al que tiene la entrada en si, e incluso se añadieron unas etiquetas.
Por eso mi duda de si es posible lograrlo JMiur.
Un saludo grande que andes bien.

Responder
JMiur  

La etiqueta META description es el título del post más un texto repetido usando lo que se describe en esta entrada.
La etiqueta META keywords es el título del post más una serie de palabras fijas
La etiqueta og:title es el título del post.

No tiene nada particular, Blogger no dispone de nada distinto.

Responder
Martín Rocha  

Pero es efectivo agregar a cada post esas 2 o tres propiedades para mejorar la busqueda en los buscadores?
Y por otro lado JMiur, de que manera puedo lograr que los botones sociales tomen como titulo otro que no sea el del post mismo como les ocurre a ellos?
Muchas gracias JMiur.

Responder
JMiur  

¿No se entiende que no hay forma de hacerlo? Sólo puedes usar algo como lo que te indiqué, modificar la etiqueta META description para que varie, incluyendo el título del post.
Lo mismo con el botón; no toman algo distinto que el título, sólo le agregan un texto fijo a cada título.

Responder
Martín Rocha  

Disculpa Jmiur por ser tan pesado, y si estaba viendo y tenes toda la razon es un texto fijo no me habia dado cuenta es siempre el mismo...mil gracias.
Estoy usando un script para mostar lso utlimos post que lo subi aqui y que esta aplicado en este blog.
Lo que queria preguntarte JMiur es como quitar o hacer que no se vea el contador de comentarios.
Saludos que tengas buenb día.

Responder
JMiur  

Tendrías que eliminar la variable cmtext pero, los detalles deberías consultarlos con quien hizo el script.

Responder
JMiur  

No veo que el código del IFRAME tenga errores así que nada puede responderte.

Responder
Martín Rocha  

Si es rarisimo JMiur ya optimize las metas y segun la pagina de chequeo dice que esta bien.. este facebook =S je.
Como podes ver en el blog hay entradas que aparecen todas con 21 (+o-) likes mientras que hay algunos pocos post si se ven con los likes correctos ¿? esta es una imagen de comparaciob.
Tiene que haber alguna diferencia entre esos post que hasga que suceda ese error pero no se que es JMiur.
Este es el codigo de esos de los botones pero como decis estaria bien.
Cual sera el error Jmiur? desde ya muchas gracias =).

Responder
JMiur  

No veo errores en ese código ¿Por que no usas los códigos de FB en lugar del iframe?

Responder
Martín Rocha  

Tenes razon puedo que con otra forma funcinen mejor y no jodan jeje..a cuales codigos te referis JMiur? los otros que vi son estos http://vagabundia.blogspot.com/2010/05/agregar-el-like-box-de-facebook-blogger.html pro para perfiles.
Saludos JMiur muchas gracias.

Responder
JMiur  

Me refiero al código tipo:
<fb:like-box ...
es el que se muestra en esa entrada pero debe copiarse el código actualizado desde la página de plugins de Facebook; de todos modos, no hay garantias de que eso resuelva el tema ya que no hay errores en el código actual.

Responder
Martín Rocha  

Una cosa JMiur, te piden poner la url del blog, en este caso que tiene que ser por pagina individual cual seria el "codigo url" ?
Y sobre lo que em comentavas del texto fijo pero invisible en los titulos, donde deveria de agregarse?
Que tengas buen dia JMiur.

Responder
JMiur  

Siempre del mismo modo:

<fb:like expr:src='data:post.url' .............

Responder
Martín Rocha  

Ok muchas gracias JMiur voy a probar con el famoso FB jeje.
Y sobre añadirle un texto fijo a los titulos pero invisible en la pagina como seria?
Un abrazo.

Responder
pyrat  

Me encanta tu blog y el contenido del mismo. Buen trabajo Jmiur, estudiaré lo que planteas en esta entrada :)

Responder
JMiur  

Gracias, pyrat :D

Responder
Andres Cuaran  

Pero yo estoy viendo tu blog, y al momento de compartir una entrada en particular , si te muestra el titulo, la imagen y la descripcion. Como lo haces?

Responder
Andres Cuaran  

Quiero que mis enlaces compartidos queden como los tuyos que puedo hacer? Mi blog es http://movingforwardcolombia.blogspot.com/ . Gracias !

JMiur  

Mira esta entrada

Responder
Renzo Limon  

Graxiaz me sirvio MUXO eres lo MAXIMO!!

Responder
ayreonauta  

Buenas, JMiur. Veo que ahora este post tiene en su sección head:

<meta content=' [...] /s72-c/metasface1.png' property='og:image'/>

¿Se puede saber qué método usaste? Gracias y saludos.

JMiur  

Siguendo la misma idea puedes poner algo así:

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='IMAGENxDEFEECTO' property='og:image'/>
</b:if>

data:blog.postImageThumbnailUrl es la imagen que extrae Blogger de la entrada, la primera que encuentra.

ayreonauta  

¡Gracias, JMiur! Había estado probando thumbnailUrl y no había caso; no sabía que existía postImageThumbnailUrl. Gracias de nuevo, me salvaste (de un callejón sin salida).

JMiur  

Yo tampoco. Recuerdo que alguien lo publicó en un comentario y lo probé pero ya me había olvidado. Hay que agradecerle a quien haya sido :D

Responder
Lic. Gabriela Balkey  

Yo lo que quisiera es que cada vez que comparto en face el link a mi blog, la imagen sea la misma. NO tengo problemas con el texto, es de cada entrada que c omparto, pero independientemente de la entrada. PUEDO HACER QUE LA IMAGEN SEA SIEMPRE LA MISMA O NO?

JMiur  

Usando al etiqueta META sin condicionarla:

<meta expr:content='URL_alguna_imagen' property='og:image'/>

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR