Comme vous le savez, la plupart des sites internet utilisent les réseaux sociaux pour promouvoir leur contenu web.
L’image, le titre, l’auteur, la description… sont des éléments qui caractérisent chaque lien partagé sur l’un de ces réseaux sociaux (facebook, twitter, instagram, …).
Cependant… le partage sur le réseau social numéro #1 pour la plupart des sites WordPress n’est pas optimisé !
Dans ce tutoriel vous allez découvrir comment utiliser le protocole Open Graph (OG) qui va vous permettre d’ajouter une image et des informations sur vos liens d’articles partagés via Facebook.
Nous allons utiliser pour cela une fonction wordpress que vous allez ajouter à votre thème WordPress, facile à faire
Allons-y !
Open Graph ou comment « socialiser » ses liens.
Comment marche le Open Graph ?
C’est simple !
En ajoutant des balises meta dans la partie <head>
d’une page web, vous donnez aux réseaux sociaux des informations personnalisés.
Comme ça quand un utilisateur colle le lien de votre article par exemple, au lieu de laisser le réseau social (facebook) choisir une image et un texte au hasard, l’Open Graph va utiliser l’image que vous – créateur – avez choisit
Voici un exemple des balises Open Graph de cette page : easytutoriel.com/migrer-windows-manuellement
<meta property="og:title" content="Comment migrer vers Windows 10 manuellement !" /> <meta property="og:description" content="Bonjour, Avez-vous de la difficulté avec Windows Update lors de la migration vers Windows 10 ? Voulez-vous télécharger et installer Windows 10 manuellement et rapidement ? Comme vous le savez,…" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://www.easytutoriel.com/migrer-windows-manuellement" /> <meta property="og:site_name" content="Easytutoriel.com" /> <meta property="og:image" content="http://www.easytutoriel.com/wp-content/uploads/2016/01/migrere-windows-10-manuellement.jpg" /> <meta property="article:publisher" content="http://facebook.com/easytutoriel.officiel" /> <meta property="article:author" content="http://facebook.com/Easytutoriel.officiel" />
Voici un exemple plus clair :

Comment ajouter les metadata de OG sur WP.
Premièrement cherchez le fichier functions.php
sur votre thème WordPress se trouvant dans ce chemin :
/wp-content/themes/VOTRE-THEME
Ici j’utilise le client FTP FileZilla, pour modifier ce fichier php
il suffit de faire clic droit puis « Afficher / Editer »

Ensuite ajoutez dans un endroit libre ces deux fonctions doctype_opengraph($output)
et fb_opengraph()
.
/* START facebook meta data */ function doctype_opengraph($output) { return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'doctype_opengraph'); function fb_opengraph() { global $post; if(is_single()) { if(has_post_thumbnail($post->ID)) { $imageinfo = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'large'); $img_src = $imageinfo[0]; } else { $img_src = get_stylesheet_directory_uri() . '/images/opengraph_image.jpg'; } $excerpt = wp_trim_words( $post->post_content , 30 ); $author_id = $post->post_author; $profile_url = get_userdata( $author_id )->facebook; ?> <meta property="og:title" content="<?php echo the_title(); ?>" /> <meta property="og:description" content="<?php echo $excerpt; ?>" /> <meta property="og:type" content="article" /> <meta property="og:url" content="<?php echo the_permalink(); ?>" /> <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>" /> <meta property="og:image" content="<?php echo $img_src; ?>" /> <meta property="article:publisher" content="http://facebook.com/easytutoriel.officiel" /> <meta property="article:author" content="<?php echo $profile_url; ?>" /> <?php } else { return; } } add_action('wp_head', 'fb_opengraph', 5); /* END facebook meta data */
La première fonction va permettre d’ajouter les attributs nécessaire pour que Open Graph marche, sans ces attributs xmlns
rien ne va marcher !

Une fois cela est fait, affichez le code source de l’une des pages de votre site, vérifiez que les balises <meta>
sont bien remplis.

Si vous avez déjà partagé un lien sur Facebook, et que vous voulez vider le cache pour le RE-partager avec les nouveaux metas, ouvrez ce lien : https://developers.facebook.com/tools/debug/og/object/
Mettez le lien de votre article, puis cliquez sur le bouton « Fetch new scrape information« .

Et voilà !
Si vous avez des questions sur l’Open Graph n’hésitez pas à publier des commentaires
Au prochain tutoriel, merci de votre lecture
Soufiane – Easytutoriel.com
Si vous avez eu de la difficulté à ajouter le code, répondez à ce commentaire
Un truc que j’aime beaucoup, c’est mettre une image dédiée spécialement aux réseaux sociaux (og:image, donc différente de celle qui est sur le site) avec un gros texte sur l’image ou un gros call to action. Comme ça, c’est beaucoup plus visible et ça incite beaucoup plus au clic
Bonjour Jeremy,
Je suis tout-à-fait d’accord avec toi, c’est la même idée que les « thumbnails » de Youtube, il faut attirer l’attention des internautes pour avoir le maximum de visites
Merci de votre commentaire et soyez le bienvenue sur Easytutoriel.com !
Bien amicalement,
Soufiane
Bonjour,
Pourrais-tu m’éclairer sur un affichage et lecture directe d’une vidéo de mon site sur une page FB, ça fait 3 jour que j’essaye, et il n’existe aucun tutoriel précis. Je suis sur WordPress également ?
Cordialement,