Badge Webflow Award Winner 2023

Pourquoi ajouter un open graph sur site web ?

Publié le 
3/3/2022
Modifié le 
24/3/2023
Temps de lecture : 5 min
C'est quoi un open graph ? Avec preview dans Webflow
Écrit par
Florian Bodelot avec un T-shirt Digidop

Florian Bodelot

Co-fondateur

Les balises open graph (titre, meta description et image) ont un impact sur le traffic et le SEO de votre site ! Dans cet article on vous explique pourquoi les ajouter !

Points clés à retenir

Connues aussi sous le nom de "twitter card" ou "Open Graph (Facebook)"  les balises open graph sont les informations qui apparaissent lorsque vous partagez un lien de votre site sur Linkedin, Twitter, Facebook (Meta), Messenger, bref sur les réseaux sociaux  ! Il est essentiel de les ajouter pour deux raisons :

  • Améliorer votre engagement (taux de clic)
  • Améliorer votre SEO (Google aime les og, meta & images)

C'est quoi un open graph ?

Un open graph est un ensemble de 3 balises : Titre, Description et Image. Ces 3 éléments sont modifiables sur chacune des pages d'un site web et sont visibles lorsque vous partagez un lien url de cette page.

Exemple sur cette image d'un lien avec balise open graph vs lien sans configuration open graph.

Lien avec open graph vs lien sans open graph

L'impact de l'open graph sur mon site (seo)

La balise  og ajoute une description personnalisée à votre page. Cette description vous permet de créer plus d'engagement lorsque les gens partagent votre url et vous permet à votre contenu d'avoir une meilleure chance d'être cliqué !

C'est aussi une bonne pratique à appliquer pour optimiser le référencement seo de votre site.

Comment intégrer une balise open graph à mon site

Si vous utilisez un CMS, l'intégration de balise open graph se fait depuis l'interface de votre CMS.

Si vous utilisez comme CMS Webflow, c'est un protocole très compliqué. Il vous faudra savoir coder, ajouter des plugins et un tas d'HTML. Ou pas, welcome to no code world ☀️

Voici comment intégrer facilement une title tag, meta description et image open graph à vos pages sur Webflow :

  1. Ouvrez "Edit page settings"
  2. Ajoutez une - Title tag- et - Meta description - à vos SEO settings
  3. Descendez aux "Open Graph settings"
  4. Cochez la case "Same as SEO settings"
  5. Ajouter une image URL dans le champ "Open Graph Image URL"
  6. Sauvegardez, et publiez !

⚠️ La taille optimale pour une image Open Graph est de 1200 x 630 pixels. Cette dimension permettra à l'image de rester responsive lors du partage sur les différentes plateformes (social media).

Vous préférez les vidéos ? Voici un tutoriel sur l'intégration des open graph sur Webflow en français.  

Conclusion sur l'open graph

L'ajout d'un open graph à vos pages améliorera son aperçu lorsque vos liens seront partagés sur les réseaux. Cet aperçu vous permet d'augmenter le trafic sur votre site, ce qui, à termes, vous aidera à obtenir un meilleur classement dans les moteurs de recherche. Oui, car plus il y a d'utilisateur sur votre site... plus Google se dira que vous avez des choses intéressantes à partager !

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop