Panorama de l’optimisation des Open Graph sur Facebook

Lorsque vous partagez du contenu sur Facebook et autres réseaux sociaux, le but est bien d’attirer le clic des internautes, comme c’est le cas dans les pages de résultats de recherche (SERP). En plus du title (titre) et de la description, d’autres éléments, tels que les images de prévisualisation, peuvent être définis au sein des réseaux sociaux. Un aperçu optimisé de l’article partagé, adapté au groupe cible, conduit à des améliorations significatives du CTR.

Découvrez dans cet article conseils et astuces sur l’optimisation des Open Graph. L’objectif : tirer le maximum de ses partages sur les réseaux sociaux !

Intégration

og:title

L’élément og:title est l’élément le plus visible à côté de l’image sur une publication Facebook.

Illustration 1 : Exemple d’un og:title sur une publication Facebook

Ici, il s’agit vraiment de s’adresser à son groupe cible ou audience de la manière la plus appropriée possible. Seulement cela vous permettra d’augmenter le CTR de vos posts. S’il n’y a pas de règle officielle sur la longueur maximale de votre title, nous vous conseillons de vous limiter à 50-65 caractères, afin qu’aucun saut de ligne ne se produise dans l’affichage. Inutile de rajouter qu’un titre court et précis attirera bien plus l’attention qu’un titre peu évocateur.

Insérez une ligne dans la section de votre code :

<meta property=”og:title” content=”Comment replacer la qualité au coeur des textes SEO” />

og:description

Semblable à la meta description html, la og:description peut être utilisé pour fournir une description séparée pour les réseaux sociaux.

Illustration 2 : Exemple d’une og:description sur une publication Facebook du Digital Marketer

Mot-clé primaire ou mot-clé secondaire sont ici hors de propos car aucun mot-clé n’est mis en valeur. La description devrait donc encourager les utilisateurs à cliquer et leur donner une impression de ce à quoi s’attendre. La longueur maximale officieuse évoque 297 caractères pour Facebook, mais ici encore nous vous recommandons de vous limiter à une ou deux phrases courtes pour capturer au mieux l’attention des internautes.

Toujours la section de votre code, insérez la ligne suivante :

<meta property=”og:description” content=”Description” />

og:image

Assez de texte, passons au visuel. L’élément og:image est particulièrement important, car il s’agit de pouvoir contrôler au mieux l’apparence de la publication dans le fil d’actualité du groupe cible. Notre recommandation est de créer une image spécialement à cette fin, en particulier quand il s’agit de contenus qui ont un haut potentiel sur les réseaux sociaux. Si aucune og:image n’est intégrée, le distributeur choisira une image au hasard, comme des bannières, icônes ou autres éléments du site qui ne sont pas censé apparaître.

Il existe de nombreuses manières d’attirer le clic sur une publication au moyen des images. Elles peuvent être conçues de sorte à attirer le regard sans pour autant livrer une information textuelle sur la publication.

Illustration 3 : Colorée et de saison, cette image ne transmet pas énormément d’informations sur le contenu qui se trouve dans la publication, mais incite pourtant au clic.

Illustration 4 : Une affirmation bien visible et plutôt surprenante sur l’image : Topito sait attirer le clic sur les réseaux sociaux.

Si les deux exemples sont relativement différents, ça vaut le coup d’essayer ce qui fonctionne le mieux pour votre site Web. Avec un système de tracking bien construit, vous pouvez tirer des conclusions rapidement pour trouver la constellation qui marche le mieux pour votre entreprise. Un petit conseil général cependant : idéalement, l’image og fournit déjà quelques bribes d’informations sur le contenu de l’article, le titre et la description sont la pour convaincre au clic.

Si aucune og:image n’est utilisée, certaines plateformes comme Xing ne cherchent même pas à trouver une image sur le site Web. Vérifiez donc votre contenu deux fois avant de publier, car il se peut bien que l’élément og:image soit nécessaire.

Intégrez l’image sous forme d’URL dans votre code :

<proprieté meta=”og:image” content=”http://www.exemple.com/nom-du-fichier.jpg”/>

og:url

Certains considèrent que la mention de la balise og:url est redondante à l’usage de la balise canonique. Cependant, étant donné que plusieurs URL sont parfois utilisées (notamment dans le cadre du tracking d’une campagnes sur les réseaux sociaux), il est important de spécifier cet élément pour le protocole Open Graph Protocol, afin de donner renvoyer les meilleurs signaux pour le Edge Rank de Facebook. Puisque les réseaux sociaux fonctionnent aussi avec des indices alternatifs (comme l’URL canonique), il est recommandé de lister l’élément og:url dans le code source avant la balise canonique. Il est cependant à noter que les grandes plateformes comme Facebook sont aujourd’hui en capacité de gérer un ordre différent.

Dans votre section head, spécifiez l’URL au moyen de cette ligne :

<meta property=“og:url“ content=“https://fr.exemple.com/magazine/?p=7112&preview=true“/>

og:type

Dans la plupart des cas, on utilise pour l’élément og:type “website”, “blog” ou “article”. Cependant, si vous travaillez avec d’autres médias tels que la musique, les vidéos, les livres ou autres, ça vaut la peine de regarder de plus près les fonctions og:type. La ligne de code est la suivante :

<meta property=”og:type” content=”article” />

Quel format pour les images (og:image) ?

Afin d’implémenter l’élément og:image de la manière la plus optimale possible, les formats et tailles utilisés doivent être pris en compte. Si Facebook utilise actuellement un format 1,91:1 pour les images dans le fil d’actualité, il y a d’autres aspects à considérer lorsqu’il s’agit de la taille des images :

• Optimal : au moins 1200 x 630 pixels avec un format 1,91:1 : l’image est affichée en grand dans le fil d’actualité. Même sur les appareils à haute résolution, l’affichage est très bon.

• Correct : 600 x 315 pixels – l’image est affichée en grand dans le fil d’actualités, mais l’affichage sur des appareils à haute résolution n’est pas parfait. C’est suffisant si l’image n’est pas disponible en haute résolution
• À améliorer : 200 x 200 pixels – l’image est affichée sous la forme d’un petit carré, c’est déconseillé.

Illustration 5 : Taille et format des images sur Facebook

Si vous travaillez avec de petites images et qu’elles se composent en plus de quelques éléments textuels, elles doivent être positionnées le plus centralement possible afin d’être affichées (et non pas coupées) dans le feed Facebook.

Open Graph Debugger

Le débogueur d’objets Facebook est un outil utile pour optimiser les éléments Open Graph. Il vous montre quelles informations Facebook a stockées à propos d’une URL ou comment l’URL sera affichée dans le fil d’actualités. Par exemple, une requête sur la page d’accueil de heftig.co a fourni le résultat suivant :

Illustration 6 : Affichage du post de heftig.co : il faut optimiser !

Aucune og:image n’est transmise ici, c’est pourquoi Facebook la choisit lui-même. Comme ces images ne sont pas disponibles dans la bonne taille ou dans le format recommandé, elles sont affichées dans un petit format et découpées de façon illisible.

La fonction la plus importante de l’Open Graph Debugger est de re-collecter les informations. Cette fonction est utile lorsque vous avez effectué beaucoup de tests et d’optimisation sur la publication. Elle permet de vider le cache dans le protocole Open Graph, car Facebook stocke les informations dès le premier essai. Ainsi, si og:title, og:image ou d’autres éléments sont modifiés, cela peut prendre un certain temps pour que Facebook les affiche correctement. En cliquant sur le bouton « re-collecter », les informations mises en cache sont effacées et rechargées.

Dernière astuce : si vous travaillez quotidiennement sur des publications Facebook, vous pouvez créer ce favori dans votre navigateur que vous pourrez utiliser pour tous vos articles. Créez un signet et ajoutez le code JavaScript dans la ligne d’adresse :

javascript:(function(){%20window.open(‚https://developers.facebook.com/tools/debug/og/object?q=’+encodeURIComponent(location.href))})();

C’est maintenant possible d’utiliser ce signet sur n’importe quelle URL.

Le rapport de Ryte sur les réseaux sociaux

Le tool Website Success met à votre disposition un rapport sur les réseaux sociaux (1) qui vous permet de voir directement sur la plateforme Ryte l’apparence de vos URL sur Facebook et Twitter.

Le tool identifie si des éléments title, image ou description manquent à vos URL et l’affiche graphiquement dans la partie supérieure (2). Chaque graphique est cliquable et ouvre une liste des URL concernées.

Chaque URL est listée dans la partie inférieure du rapport, présentant sur la droite un aperçu sur Facebook (3). Pour plus d’informations sur une URL particulière, l’Inspecteur de Ryte est disponible (4) : en cliquant sur la loupe, vous obtiendrez toutes les informations sur cette URL, des liens entrants au statut d’indexabilité en passant par le Page Speed, le robots.txt et le contenu. Cet article revient en détail sur cette fonction 100 % Ryte.

Illustration 7 : Rapport sur les réseaux sociaux dans Website Success

Les réseaux sociaux, et notamment Facebook, sont des canaux de distribution majeurs dans le marketing digital d’aujourd’hui. Même si Facebook travaille chaque jour à son algorithme et qu’il n’y a pas de règles officielles ou connues quant aux types de posts qui fonctionnent le mieux, les possibilités offertes par l’Open Graph permettent de travailler en profondeur sur l’apparence des publications. En soignant vos publications au moyen des éléments og, vous vous placez sur la bonne voie pour augmenter les valeurs de votre CTR sur les réseaux sociaux.