Cuando intentaba compartir un enlace a este blog en mi cuenta personal de Facebook me di cuenta de un detalle bastante molesto. Cada que intentaba compartir la URL principal del blog (www.israelcapetillo.com), Facebook elegía una imagen al azar, tomada de cualquiera de los posts, como imagen del enlace a compartir en la red social. Y no sólo eso, sino que también el título y la descripción parecían tomados al azar. Algo asi:
 |
| Clic para agrandar |
Como ven, al momento de intentar compartir el enlace en Facebook, se elige una imagen al azar (en este caso, de un post algo antiguo) y la descripción que se encuentra en el área de suscripción del blog. Eso me molestaba bastante y yo, perfeccionista y obsesivo como soy, me dispuse a buscarle alguna solución. Esta es la manera de personalizar la apariencia de un enlace compartido en Facebook:
1) Revisar el modo en que Facebook "ve" el HTML de nuestro sitio. Esto es importante porque de ahi es de donde Facebook toma la información que se presentará en la publicación al momento de compartir un enlace. Eso podemos revisarlo en la herramienta
"Object Debugger" de Facebook. En ella, sólo basta con introducir la URL del sitio que queremos compartir para que podamos ver la información que Facebook obtiene al analizar el HTML de la misma. En el caso de mi blog, se veía algo asi:
 |
| Clic para agrandar |
Como pueden ver, hay algunas propiedades (todas las que inician con "og") que no estaban bien definidas, por lo que Facebook infiere la información óptima para compartir. Si observan con cuidado, verán que en el caso de la imagen elige una entre muchas disponibles, pero ninguna que me convenciera. Igualmente en la descripción: Facebook trajo el texto que le parecó más adecuado.
Pero eso se puede corregir si modificamos un poco el HTML de nuestro sitio. Lo cual nos lleva al siguiente paso.
2) Incluir etiquetas en la cabecera (<head></head>) de nuestro HTML que incluyan la información personalizada que deseamos mostrar cuando se comparta nuestro enlace. Estas etiquetas son:
<meta property="og:url" content="tu_URL_personalizada" />
<meta property="og:title" content="tu_titulo_personalizado" />
<meta property="og:description" content="tu_descripcion" />
<meta property="og:image" content="tu_imagen" />
La primera le dirá a Facebook la URL del sitio que estamos compartiendo, la segunda el título del enlace que debe compartir; la tercera le indica nuestra descripción personalizada y la cuarta le especifica la imagen que debe usar en el enlace compartido. En mi caso, decidí incluir esta información:
<meta content='http://www.israelcapetillo.com' property='og:url'/>
<meta content='IsraelCapetillo.com' property='og:title'/>
<meta content='Mi blog personal donde comparto temas relacionados con mi pasión: el desarrollo de software. Además ¡cursos gratis!' property='og:description'/>
<meta content='http://www.estudioiq.com/images/Big_greenSticker.png' property='og:image'/>
Una vez que incluí estas etiquetas en mi código, volví a ejecutar el Object Debugger de Facebook y esta es la información que la herramienta pudo detectar sobre mi sitio:
 |
| Clic para agrandar |
Ahora si, ya puedo ver la URL, título, imagen y descripción que yo decido que se muestre. Ahora, si quiero compartir mi blog en Facebook, esto es lo que veo:
 |
| Clic para agrandar |
¡Qué cambio! Asi que ya lo saben, la próxima vez que deseen compartir un enlace más personalizado en Facebook, lograrlo es bastante sencillo y no les lleva más que un par de minutos hacerlo.
