Immagine di anteprima dei link su Facebook e Open Graph

Vi è sicuramente capitato di condividere un link su facebook, avendo la possibilità di scegliere tra alcune immagini di anteprima. Quando si inserisce un link in un commento invece Facebook non dà più questa scelta all’utente, ma ci pensa lui. Ma come ci pensa? Facebook come Google si va a leggere i “meta tags” della pagina linkata, se non li trova, inserisce la prima immagine che gli capita.

Se non vogliamo lasciare la scelta a Facebook o all’utente di decidere l’immagine di anteprima (thumbnail image), per motivi di riconoscibilità è possibile inserire il classico meta tag link rel. C’è anche un metodo, piuttosto nuovo che consiste in tag chiamati “Open Graph”. Open Graph non sono soltanto dei tags ma si  parte da questi per integrare i contenuti in un grafo, ovvero in una rete logica, con lo scopo di creare delle connessioni e dei raggruppamenti tra i contenuti. Per la teoria rimando a http://ogp.me/. Ora vediamo brevemente come impostare con il metodo classico e con i tag Open Graph l’immagine predefinita di anteprima.

Con i tag classici basta inserire nella propria pagina web
[crayon lang=”html”][/crayon]

Con i tag Open Graph bisogna inserire nell’header della propria pagina:
[crayon lang=”html”][/crayon]

Ci sono a disposizione anche dei plugin per wordpress e dei componenti per Joomla che fanno questo! Io ho appena installato su WordPress il Plugin “Wonderm00n’s Simple Facebook Open Graph Meta Tags” che pare faccia degnamente il suo lavoro.
Ovviamente esistono meta tags e open graph tags che specificano le altre meta informazioni.
Per verificare cosa e come facebook legge queste informazioni si può inserire l’url della propria pagina su https://developers.facebook.com/tools/debug.