Mise en place meta OG facebook dans une page HTML -

Les meta OG (Open Graph) vont permettre à facebook d'ajouter des informations dans votre post lorsque que vous y ajoutez un lien. Ce dernier va enrichir le post avec les meta-données présentent dans la page du site. Cela va nous permettre de choisir un titre, une description et une image qui s'afficheront automatiquement dans facebook dès que le lien sera collé.

Ajoutez dans la balises <head>, les lignes suivantes :


<meta property="og:title" content="titre"/>
<meta property="og:type" content="website"/>

(ou "article" si'l s'agit d'une page du site)

 

<meta property="og:url" content="http://www.domain.tld"/>
<meta property="og:image" content="http://www.domain.tld/image.jpg"/>

(250px < taille > 1500px) 


<meta property="og:description" content="description"/>
 <meta property="og:site_name" content="nom du site"/> 
<meta property="fb:admins" content="facebook_user_id"/>

S'il s'agit d'une application ajouter cette ligne :


<meta property="fb:app_id" content="facebook_app_id"/>

Pour cleaner le cache de l'image dans facebook, faites des essais en changeant le nom du fichier à chaque essai et en mettant le nom définitif lorsque le choix est validé.

N'hésitez pas à tester vos metas avec le debuger fb :

developers.facebook.com/tools/debug/

Si vous rencontrez un problème avec la meta og:url, insérez la balise en question avec javascript et ça corrigera le problème (un peu "sale", donc à surveiller).


<script type="text/javascript">
    // <![CDATA[
    var meta = document.createElement('meta');
    meta.setAttribute("property", "og:url");
    meta.setAttribute("content", location.href);
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(meta);
    // ]]>
</script>

Sources :