msgbartop
Desarrollador Web, Android y iOS
msgbarbottom

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.

Etiquetas: , , , , , , , , , , , , ,

¡Hola, mundo!… y hasta luego

Ya que solo se me ocurre a mí empezar un blog personal en mitad de las fiestas de mi pueblo y a 4 días de irme de vacaciones 2 semanas. Bueno, supongo que el caso es empezar, a ver si soy capaz de mantenerlo ya que soy un poco vaguete para escribir.

Aquí hablaré basicamente de lo que me gusta, como puede ser internet, programación, temas que me parezcan interesantes para que los pueda tener a mano y quizás a alguien más le pueda interesar. También de cosas que simplemente me llamen la atención o tenga ganas de decir, que para algo es un blog personal ;)

El diseño no me convence demasiado pero ya tendré tiempo de buscar alguno que me guste más.

Gracias a todo aquel que lo quiera leer y espero mantenerlo actualizado.