Indicar a Facebook que imagen mostrar cuando se comparte la url de nuestra web
Seguro que en más de una ocasión has ido a compartir una página web en Facebook y elige una imagen al azar como miniatura que, casi siempre, nada tiene que ver con lo que estás compartiendo. Puede seleccionar como thumbnail el logotipo, una imagen de fondo de la web o incluso el avatar de algún usuario que haya dejado un comentario.
Si pegas el enlace directamente en Facebook, al menos podrás elegir una de las imágenes que ha encontrado seleccionándola de la galería de miniaturas. Si utilizas algún servicio (addThis, etc.) para compartir el enlace directamente, no podrás elegir el thumbnail y casi seguro que no elige la imagen correcta.
Como programadores, hay unos metatags que podemos utilizar para indicarle a Facebook cual es la imagen en miniatura que queremos utilizar cuando alguien comparta nuestra web.
Estos son los metatags que Facebook pone a nuestra disposición:
1 2 3 4 5 6 7 | <head>
...
<meta property="og:title" content="Título de la página" />
<meta property="og:description" content="Descripción de la página" />
<meta property="og:image" content="http://miweb.dominio/imagen_para_facebook.jpg" />
<meta property="og:url" content="http://miweb.dominio" />
</head> |
En nuestro caso la metatag que nos interesa es la tercera, og:image, donde indicaremos la imagen que queremos que utilice Facebook como miniatura cuando alguien comparta nuestra página.
Estas etiquetas meta, lo que hacen, es decirle a Facebook que ignore todo lo demás que encuentre en la página y utilice lo que hemos indicado nosotros en estas etiquetas.
Facebook pone a nuestra disposición un analizador que nos puede ayudar para encontrar errores en nuestra web y nos indica que valores utilizará a la hora de compartir la página en Facebook.
La url del analizador es el siguiente (¡gracias @vdesigner_es por el enlace!):
http://developers.facebook.com/tools/debug
Donde solo debemos escribir la url de nuestra web y esperar el feedback que nos devuelve.
Muchas gracias por compartir esta data! Abrazo!
Muchas Gracias, me ha servido 😉
Todo está muy clarito.
Saludos.
Muy buenas.
La verdad que me parecio muy interesante, pero a sucedido una cosa.
Uso los botones de compartir de facebook y como suele pasar y bien comentas elije cualquier imagen.
Pues bien puse como indicas tú:
pero sigue cojiendo la imagen que le cuadra! que puede pasar?
Muchas gracias
Si. Pero y como la cambio o como le digo cual debe tomar
buenisimo gracias!!!!!!
Hola, donde debo colocar el metatag? mi pregunta es porque quisiera que cada pagina tuviera su propia imagen cuando se compartan.
Mi problema es que cuando yo publico un link en mi pagina de Facebook me salen 2 imagenes. Y solo quisiera que me salga una solo imagenen.
Como puedo resolverlo
me funciono muchas gracias
Hola muchas gracias por tu aportación funciona muy bien, solo una observación, nofunciona en las paginas estaticas, sigue apareciendo el de la portada o bien la imagen por default de la pagina estatica antes de depurar. Ya intente pegar el codigo varias por cada pagina estatica cambiando los valores pero no me permite depurarlo facebook, Alguna sugerencia??
Se puede incluir mas de una imagen para que aparezca en la publicación?
Exelente. Muchas gracias
Genial! Gracias
Muchas gracias !! excelente, muy util
Me ha servido de ayuda, era justo lo que buscaba.