Balise Open Graph : Définition, visibilité Facebook, fonctionnement

Open Graph : optimiser le contenu sur Facebook avec les balises OG

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.

  1. Définition Open Graph pour Facebook
  2. Où mettre les balises OG ?
  3. Différentes balises
  4. Métadonnées facultatives
  5. Exemple de OG
  6. Pour WordPress

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 prévues pour Facebook, Open Graph est devenu aujourd’hui une sorte de convention du Web, bien que son fonctionnement ne suffise pas à tout préciser pour Google  qui va l’exploiter pour son propre réseau social Google+, l’usage d’autres données structurées et de balises Titres entre autres étant largement nécessaires pour les principaux moteurs de recherche. A l’aide de la balise <meta>, on va pouvoir utiliser un tas d’og parmi lesquelles :

og:title permet de faire apparaître le titre sur les publications dans les réseaux sociaux, c’est un élément clé car il est le plus visible. Notez que si vous ne placez aucune balise OG, Facebook va se charger d’utiliser la balise Title existante pour donner un nom au lien que vous partagez.

og:type va permettre de définir le type d’objet et il est possible également de préciser ses propriétés.

Pour préciser ce protocole, il vous faut ajouter le préfixe suivant avant <head> :

Préfixe des balises Open Graph
<html xmlns:og="http://ogp.me/ns#">

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:urlL’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 :

Les metas og permettant cet affichage
<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="http://www.wordpress.facemweb.com/#le lien de l'image en 1200x630 px" />

Ici le titre est un peu trop long, il est mangé lorsqu’il est intégré au présent site (épinglé via un <i frame>). L’affichage sur la page officielle permet toutefois une lecture complète. Toutefois son affichage permet de comprendre de quoi il est question, notamment pour la communauté des utilisateurs de WordPress puisque le titre évoque une question sur un plugin, la description sert en quelque sorte de teaser et le nom du site reprend le terme de WordPress.

User de longueur plus importantes n’est pas en soi dramatique au même titre que la longueur de vos balises titles sur Google : l’essentiel est de faire passer le message. Des recommandations vous sont proposées par Facebook. Agrémentez également vos posts d’une introduction comme dans le cas présent.

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 !

Sources et liens utiles  :

http://ogp.me/

https://developers.facebook.com/docs/opengraph/using-objects

https://dev.twitter.com/cards/getting-started

https://developers.google.com/+/web/snippet/?hl=fr

[Total : 5    Moyenne : 5/5]

A propos de l'auteur(e)

Centre de préférences de confidentialité

Google Analytics

Google Analytics est un outil Google d'analyse d'audience Internet permettant aux propriétaires de sites Web et d'applications de mieux comprendre le comportement de leurs utilisateurs. Cet outil peut utiliser des cookies pour collecter des informations et générer des rapports sur les statistiques d'utilisation d'un site Web sans que les utilisateurs individuels soient identifiés personnellement par Google. Le cookie "__ga" est celui qui est le plus utilisé par Google Analytics.
En plus d’établir des rapports statistiques d’utilisation des sites web, Google Analytics peut également être utilisé, conjointement avec certains des cookies publicitaires décrits précédemment, pour proposer des publicités plus pertinentes sur les services Google (comme Google Search), sur l’ensemble d’Internet et pour mesurer votre interaction avec les publicités que nous affichons.

Google Analytics
_ga, _gid, _gat

Publicité Google

Google AdSense est un programme de monétisation proposé par Google aux éditeurs de sites web pour générer des revenus publicitaires à la performance. Un éditeur de site web peut adhérer gratuitement au programme et bénéficier d’affichages publicitaires sur son site en y plaçant des tags publicitaires correspondant aux formats de son choix par simple copier / coller d’un code fourni par le programme.
Google utilise des cookies pour rendre la publicité plus attractive pour les utilisateurs et plus rentable pour les éditeurs et les annonceurs. Les cookies servent ainsi également à sélectionner les publicités en fonction de leur pertinence pour l'utilisateur, à améliorer les rapports sur les performances des campagnes et à éviter la diffusion d'annonces que l'utilisateur a déjà vues.

Google AdSense
NID,SID,DSID, FLC, AID, TAID