Le protocole Open graph est devenu un incontournable pour bien gérer votre contenu sur les réseaux sociaux et plateformes sociales comme Facebook ou Linkedin. Il ne s’agit pas à proprement parler d’optimiser le référencement naturel de votre site Internet dans son contenu mais de rendre celui-ci plus agréable pour les utilisateurs nombreux des plateformes sociales.
Petite définition du protocole Open graph pour Facebook
Concrètement, le protocole open graph est une solution pour optimiser le contenu social de l’ensemble des pages web de votre site. On conçoit tout de suite son usage dans le cas des sites de ventes en ligne et e-boutiques mais également et pour les articles de blog où son usage s’est largement popularisé grâce aux CMS comme WordPress. Le protocole Open Graph et ses balises permettent un enrichissement des pages Web et une optimisation pour le social media.
Open Graph : des balises à insérer dans le <head> de votre page
Initialement développées par Facebook, les balises Open Graph sont devenues une convention largement adoptée pour enrichir l’affichage des liens partagés sur les réseaux sociaux. Bien que Google n’en dépende pas exclusivement (préférant les données structurées de type Schema.org), le protocole OG reste essentiel pour garantir une bonne lisibilité de vos contenus sur Facebook, LinkedIn, Pinterest ou encore X (anciennement Twitter).
Ces balises s’intègrent dans l’en-tête HTML de vos pages via la balise <meta>. Voici les plus courantes :
- og:title : Titre affiché dans l’aperçu du lien. Si aucune balise n’est fournie, Facebook reprend la balise
<title>de la page. - og:description : Résumé ou accroche visible dans l’extrait partagé.
- og:image : URL de l’image mise en avant (JPEG ou PNG de préférence, 1200 x 630 px recommandé).
- og:url : URL canonique du contenu, utile en cas de duplication d’adresses ou de paramètres UTM.
- og:type : Nature du contenu (ex :
article,website,video.movie, etc.).
Préfixe à insérer dans la balise <html>
Pour activer correctement le protocole OG, pensez à ajouter le préfixe suivant dans la balise <html> :
<html xmlns:og="http://ogp.me/ns#">Exemple complet de balises Open Graph dans le <head>
<head>
<meta property="og:title" content="Titre de la page à partager" />
<meta property="og:description" content="Voici un aperçu optimisé pour les réseaux sociaux" />
<meta property="og:image" content="https://www.votresite.com/images/og-image.jpg" />
<meta property="og:url" content="https://www.votresite.com/page-exemple" />
<meta property="og:type" content="article" />
</head>Bonnes pratiques
- Utilisez une seule image par page pour
og:image. - Évitez les titres trop longs : 60 caractères maximum pour une lisibilité optimale.
- Utilisez un plugin comme Yoast SEO ou Rank Math pour insérer automatiquement ces balises sans coder à la main.
Les balises Open Graph contribuent à renforcer la visibilité de vos contenus lors des partages sociaux. Si elles ne jouent pas un rôle direct dans le positionnement SEO, elles améliorent clairement le taux de clic (CTR) et la perception de votre site sur les plateformes sociales.
Différentes balises Open graph
og:image – Comme son nom l’indique, l’image que vous souhaitez fixer dans les posts sur les réseaux sociaux. Vous aurez besoin d’une image de 1200px par 630px pour une résolution optimale sur FB (préférez les images en .jpg).
Il est également possible d’avoir des propriétés structurées pour ces images :og:type:imageog:image:widthog:image:height
Plus de données Open Graph visibles, c’est un message plus clair pour les utilisateurs de réseaux sociaux
og:url– L’url canonique de l’objet qui est utilisé comme identifiant permanent dans le graphique. og:image:secure_url – sera nécessaire comme protocole si votre page utilise le https.
Les métadonnées facultatives Open Graph
Voilà donc ce qui constitue la bases des métadonnées mais d’autres options existent, facultatives :
og:description – Si vous souhaitez un peu plus qu’un extrait d’article, vous pouvez définir les phrases de description de votre objet, de manière à créer par exemple un slogan, ou une description plus attractive. Sans usage de l’OG description, une plateforme comme Facebook reprendra simplement les premières lignes du document Web.
og:video – Quoi de plus dommage que de ne pas utiliser la vidéo via le protocole Open graph. On y place alors l’URL de la vidéo.
og:locale – Voici le moyen de spécifier la langue de votre page, un élément intéressant qui peut être complémentaire à d’autres outils pour votre site Web.
og:site_name – Pour identifier le nom de votre site Internet. Ici vous pouvez profiter d’une expérience un peu nouvelle si vous le souhaitez car sans cet élément, la plateforme sociale Facebook reprend simplement le nom de domaine de votre site Web.
og:image– Pour afficher une image idéalement d’une dimension de 1200 par 630 pixels.
Exemple de post reprenant les données Open Graph complètes
Ce post est probablement un peu froid mais il s’agit d’un tutoriel complet intégrant toutes les balises Open Graph essentielles :
<meta property="og:locale" content="fr_FR" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Comment utiliser le plugin Child Themes Configurator pour WordPress ?" />
<meta property="og:description" content="Créer un thème enfant n'a jamais été aussi simple !" />
<meta property="og:url" content="https://wordpress.facemweb.com/child-theme-configurator/" />
<meta property="og:site_name" content="Facem Web" />
<meta property="og:image" content="https://www.wordpress.facemweb.com/images/og-image-1200x630.jpg" />
Voici un aperçu de la publication Facebook intégrée avec l’URL du post (notez la redirection qui empêche l’affichage de l’image) :
Ici, le titre est un peu trop long, ce qui entraîne un affichage tronqué dans certaines intégrations (notamment via l’élément <iframe>). Cela dit, sur la page officielle Facebook, la lecture est complète et le message reste intelligible.
Notez que :
- Le titre reprend la requête utilisateur avec un angle « question ».
- La description sert de teaser ou d’appel à clic.
- Le nom du site joue un rôle d’identification pour la marque ou l’éditeur.
Des titres plus longs ne sont pas un problème en soi, tout comme pour la balise <title> sur Google. L’essentiel est que l’information essentielle soit lisible dès les premiers mots. Pour plus de recommandations officielles, vous pouvez consulter les bonnes pratiques Facebook.
Ajoutez également une introduction à vos posts partagés, comme dans l’exemple ci-dessus : cela améliore le contexte, engage davantage les lecteurs et renforce la portée organique sur les réseaux.
Pensez enfin à éviter d’utiliser dans ce fameux titre une marque, c’est peu engageant pour l’utilisateur.
Open Graph et WordPress, une jonction possible avec Yoast SEO WordPress
Rendez-vous à l’onglet SEO -> Réseaux sociaux et complétez dès lors Facebook, Twitter et Google +. Notez que les options proposées par Yoast dans sa version gratuite restent assez réduites, mais c’est un bon début.
Si vous voulez aller plus loin, visitez également Twitter, Facebook et Google pour développeurs concernant les solutions et préconisations. Depuis 2015, Facebook propose également d’améliorer l’expérience au même titre que Google AMP avec l’affichage plus rapide de Instant Article. Utilisez ainsi les balises OG en complément de la vitesse d’affichage sur mobile !
0 commentaires