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)