Indicar a Facebook que imagen mostrar cuando se comparte la url de nuestra web

enero 31, 2013

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.

Tags ; , , , , , , , , , , , , ,

14 comentarios

    Hector Oct 10, 2013

    Muchas gracias por compartir esta data! Abrazo!

    Responder
    Juani Ene 14, 2014

    Muchas Gracias, me ha servido 😉
    Todo está muy clarito.
    Saludos.

    Responder
    Jacinto Ene 30, 2014

    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

    Responder
    Yotas Abr 24, 2016

    Si. Pero y como la cambio o como le digo cual debe tomar

    Responder
    Emilio Jul 31, 2016

    buenisimo gracias!!!!!!

    Responder
    Guinked Vzla Jul 31, 2016

    Hola, donde debo colocar el metatag? mi pregunta es porque quisiera que cada pagina tuviera su propia imagen cuando se compartan.

    Responder
    Darlin Sep 26, 2016

    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

    Responder
    Gerardo Chavez Mar 19, 2017

    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??

    Responder
    Pablo Jul 13, 2017

    Se puede incluir mas de una imagen para que aparezca en la publicación?

    Responder
    Rubén Jun 01, 2018

    Genial! Gracias

    Responder

Responde a Gerardo Chavez Cancelar la respuesta

Los comentarios son moderados y se utiliza rel="nofollow" para los enlaces.