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.
- Définition Open Graph pour Facebook
- Où mettre les balises OG ?
- Différentes balises
- Métadonnées facultatives
- Exemple de OG
- 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> :
[pastacode lang=”markup” manual=”%3Chtml%20xmlns%3Aog%3D%22http%3A%2F%2Fogp.me%2Fns%23%22%3E” message=”Préfixe des balises Open Graph” highlight=”” provider=”manual”/]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 :
[pastacode lang=”markup” manual=”%3Cmeta%20property%3D%22og%3Alocale%22%20content%3D%22fr_FR%22%20%2F%3E%0A%3Cmeta%20property%3D%22og%3Atype%22%20content%3D%22article%22%20%2F%3E%0A%3Cmeta%20property%3D%22og%3Atitle%22%20content%3D%22Comment%20utiliser%20le%20plugin%20Child%20Themes%20Configurator%20pour%20WordPress%20%3F%22%20%2F%3E%0A%3Cmeta%20property%3D%22og%3Adescription%22%20content%3D%22Cr%C3%A9er%20un%20th%C3%A8me%20enfant%20n%26%23039%3Ba%20jamais%20%C3%A9t%C3%A9%20aussi%20simple%20!%22%20%2F%3E%0A%3Cmeta%20property%3D%22og%3Aurl%22%20content%3D%22https%3A%2F%2Fwordpress.facemweb.com%2Fchild-theme-configurator%2F%22%20%2F%3E%0A%3Cmeta%20property%3D%22og%3Asite_name%22%20content%3D%22Facem%20Web%22%20%2F%3E%0A%3Cmeta%20property%3D%22og%3Aimage%22%20content%3D%22http%3A%2F%2Fwww.wordpress.facemweb.com%2F%23le%20lien%20de%20l’image%20en%201200×630%20px%22%20%2F%3E” message=”Les metas og permettant cet affichage” highlight=”” provider=”manual”/]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
