Maîtriser l’aperçu social : Open Graph & Twitter Cards sur Blogger

Quand on partage un article sur les réseaux sociaux, on s’attend à ce qu’il s’affiche joliment : une image bien cadrée, un titre accrocheur, une description claire… Mais sans balises spécifiques, l’aperçu généré est souvent décevant, voire complètement à côté de la plaque.

C’est là qu’interviennent les balises Open Graph et Twitter Cards. En les ajoutant à votre thème Blogger, vous reprenez le contrôle sur l’apparence de vos liens partagés : ce que les gens voient, c’est ce que vous avez choisi de montrer.

Pourquoi maîtriser l’aperçu social ?

Lorsqu’un article est partagé sur un réseau social, la plateforme essaie automatiquement de générer un aperçu à partir de son contenu. Mais sans indication précise, le résultat est souvent approximatif : une image mal choisie, un titre tronqué, une description inexistante ou prise au hasard dans un bloc de texte sans intérêt.

Ces imprécisions, en apparence anodines, peuvent avoir un impact direct sur le nombre de clics. Sur des plateformes où tout se joue en une fraction de seconde, un lien peu engageant passe simplement… inaperçu.

C’est exactement ce que permettent d’éviter les balises Open Graph (utilisées par Facebook, LinkedIn, WhatsApp, etc.) et Twitter Cards (pour X, ex-Twitter). Grâce à elles, on peut définir avec précision :

Le titre qui apparaîtra sous la vignette,
La description qui donne envie de cliquer,
Et surtout l’image de couverture, bien cadrée et bien choisie.

Résultat ? Un aperçu professionnel, homogène, engageant – que ce soit pour vos lecteurs réguliers ou de nouveaux visiteurs qui découvrent votre contenu via le bouche-à-oreille numérique.

Les balises à connaître

Deux normes permettent de structurer l’aperçu d’un lien sur les réseaux sociaux : Open Graph, utilisée par Facebook et de nombreuses autres plateformes, et les Twitter Cards, spécifiques à X (anciennement Twitter).

Chacune repose sur un ensemble de balises <meta> insérées dans le <head> du thème. Ces balises définissent le titre, la description, l’image de couverture, ou encore l’URL canonique à afficher lors du partage.

Éléments contrôlés par les balises sociales

Les principales informations transmises aux plateformes via OG et Twitter Cards sont les suivantes :

Le titre de la page ou de l’article
La description du contenu
L’image mise en avant (visuel de couverture)
Le type de contenu (article, site web, etc.)
L’URL canonique, pour éviter les doublons ou erreurs d’interprétation

Correspondances entre balises OG et Twitter

La table suivante présente les équivalences entre les principales balises Open Graph et Twitter Cards :

Élément	Open Graph	Twitter Cards	Recommandation
Titre	`og:title`	`twitter:title`	Obligatoire
Description	`og:description`	`twitter:description`	Fortement recommandé
Image	`og:image`	`twitter:image`	Recommandée
Type de contenu	`og:type` (ex. `article`)	`twitter:card` (ex. `summary_large_image`)	Obligatoire sur X
URL canonique	`og:url`	(repris depuis OG)	Recommandée
Nom du site / compte	`og:site_name`	`twitter:site` (`@compteX`)	Facultatif

Comportement des plateformes sociales

Chaque plateforme sociale interprète les balises de manière légèrement différente :

Facebook

Se base exclusivement sur Open Graph.
LinkedIn

Ne lit pas les balises Twitter Cards, mais suit scrupuleusement les OG.
X (Twitter)

Donne la priorité à ses propres balises, mais peut lire OG si nécessaire.
WhatsApp, Discord, Pinterest

Utilisent principalement les balises OG, avec parfois des contraintes spécifiques sur la taille de l’image.

Exemples de balises types

Balises Open Graph (extrait simplifié)

<meta property="og:type" content="article"/>
<meta property="og:title" content="Titre de l’article"/>
<meta property="og:description" content="Résumé engageant de l’article"/>
<meta property="og:image" content="https://exemple.com/image.jpg"/>
<meta property="og:url" content="https://exemple.com/article.html"/>
<meta property="og:site_name" content="Nom du site"/>

Balises Twitter Cards (extrait simplifié)

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Titre de l’article"/>
<meta name="twitter:description" content="Résumé engageant de l’article"/>
<meta name="twitter:image" content="https://exemple.com/image.jpg"/>
<meta name="twitter:site" content="@NomDuCompte"/>

Ce que Blogger fait automatiquement

Les thèmes Blogger officiels intègrent nativement des balises sociales prêtes à l’emploi, sans nécessiter d’intervention manuelle. Ces balises sont générées automatiquement par une inclusion système dédiée, à condition qu’un appel spécifique soit présent dans le <head> du thème.

Une inclusion native invisible… mais bien active

Le cœur de ce dispositif repose sur une inclusion nommée openGraphMetaData :

<b:includable id='openGraphMetaData'>/b:includable>

Cette inclusion n’apparaît donc pas dans le code XML du thème, mais est automatiquement interprétée si le thème contient l’appel de all-head-content :

<b:include data='blog' name='all-head-content'/>

Cet appel est présent par défaut dans tous les thèmes officiels. Il permet de regrouper dans l’en-tête plusieurs éléments importants : favicon, données méta classiques… et la section Open Graph.

Ce que Blogger génère en sortie

La structure de l’inclusion openGraphMetaData est standardisée. Elle repose sur trois données principales : le titre, la description, et une image optimisée pour le partage.

Blogger utilise les variables suivantes, avec une logique conditionnelle :

og:url → data:blog.url
og:title → data:view.title
og:description → data:view.description
og:image → généré uniquement si une image est disponible :
1. data:view.featuredImage (image vedette)
2. Si absente, tentative via data:widgets[i].posts[i].featuredImage pour extraire une image d’un article
3. Enfin, recours éventuel à data:blog.postImageUrl
L’image est redimensionnée automatiquement avec un ratio 1200:630.

Comment vérifier la présence de cette inclusion

Pour savoir si le thème utilise ce système automatique :

Modifier le code HTML du thème

→ Rechercher all-head-content
Consulter le code source d’une page en ligne

→ Inspecter les balises <meta property="og:*">
Comparer les rendus sur différentes pages

→ Vérifier si les valeurs changent entre la page d’accueil, un article, une page statique, ou une page 404

Faut-il surcharger ou conserver l’inclusion par défaut ?

À conserver si le rendu est satisfaisant et aucune personnalisation n’est requise.
À surcharger dans les cas suivants :
- Besoin de personnaliser l’image sociale par défaut
- Nécessité de différencier le balisage selon les pages
- Ajout des Twitter Cards
- Volonté d'optimiser le contrôle des balises

Personnaliser les balises OG & Twitter Cards sur Blogger

Les balises Open Graph injectées automatiquement par Blogger peuvent suffire pour un aperçu basique. Mais pour aller plus loin — ajouter les balises Twitter Cards, différencier les types de pages, ou mieux contrôler les images — il est possible de surcharger proprement le bloc par défaut.

Surcharger une inclusion "Common"

L’inclusion openGraphMetaData utilisée par Blogger est de type Common. Elle n’est pas visible dans le code du thème, mais elle peut être remplacée grâce à un bloc <b:defaultmarkups>.

Il suffit de déclarer une version personnalisée de cette inclusion à l’intérieur d’un bloc <b:defaultmarkup type='Common'>. Blogger utilisera votre version surchargée à la place de celle par défaut.

Créer un balisage personnalisé

La surcharge consiste à redéfinir le bloc openGraphMetaData pour y intégrer :

Les balises Open Graph (og:title, og:description, og:image…)
Les balises Twitter Cards (twitter:title, twitter:description, twitter:image…)

Le contenu peut être également adapté selon le type de page affichée, en s’appuyant sur des conditions data:view.

Structure d’exemple (squelette)

Le code ci-dessous montre une structure complète de surcharge, avec gestion des cas courants, balises OG + Twitter, et fallback d’image.

Le contenu est simplifié pour l’exemple, mais suit les bonnes pratiques (URLs absolues, images redimensionnées, variables échappées).

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='openGraphMetaData'>
      <b:with value='data:view.title.canonical' var='title'>
      <b:with value='data:blog.url.canonical' var='url'>
      <b:with value='data:view.description.escaped ?: (data:blog.metaDescription ?: data:blog.title.escaped)' var='desc'>
      <b:with value='"ADD DEFAULT IMAGE URL HERE"' var='defaultImage'>

        <!-- Open Graph -->
        <meta expr:content='data:url' property='og:url'/>
        <meta expr:content='data:title' property='og:title'/>
        <meta expr:content='data:desc' property='og:description'/>
        <meta expr:content='data:view.isSingleItem ? "article" : "website"' property='og:type'/>

        <b:if cond='data:view.isSingleItem'>
          <meta expr:content='data:view.featuredImage ? resizeImage(data:view.featuredImage, 1200, "1200:630") : data:defaultImage' property='og:image'/>
        <b:elseif cond='data:widgets'/>
          <b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
            <meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/>
          </b:loop>
        <b:elseif cond='data:blog.postImageUrl'/>
          <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
        <b:else/>
          <meta expr:content='data:defaultImage' property='og:image'/>
        </b:if>

        <!-- Twitter Cards -->
        <meta content='summary_large_image' name='twitter:card'/>
        <meta expr:content='data:title' name='twitter:title'/>
        <meta expr:content='data:desc' name='twitter:description'/>
        <b:if cond='data:view.isSingleItem'>
          <meta expr:content='data:view.featuredImage ? resizeImage(data:view.featuredImage, 1200, "1200:630") : data:defaultImage' name='twitter:image'/>
        <b:elseif cond='data:widgets'/>
          <b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
            <meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' name='twitter:image'/>
          </b:loop>
        <b:elseif cond='data:blog.postImageUrl'/>
          <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' name='twitter:image'/>
        <b:else/>
          <meta expr:content='data:defaultImage' name='twitter:image'/>
        </b:if>

      </b:with>
      </b:with>
      </b:with>
      </b:with>
    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

Tester et corriger l’aperçu social

Une fois les balises Open Graph et Twitter Cards en place, il est essentiel de vérifier leur bon fonctionnement. Les plateformes sociales ne réagissent pas toujours immédiatement aux changements, et certains éléments peuvent ne pas s’afficher comme prévu.

Heureusement, plusieurs outils permettent de prévisualiser le rendu et d’identifier d’éventuelles erreurs.

Plateforme	Outil officiel	Documentation officielle
Facebook	Sharing Debugger	Meta for Developers – Sharing
X (Twitter)	Card Validator	Twitter Developer Docs – Cards
LinkedIn	Post Inspector	N/A
Pinterest	N/A	Pinterest Developer Guide

Conclusion

Maîtriser les balises Open Graph et Twitter Cards permet de transformer un simple lien en aperçu professionnel et engageant, parfaitement adapté aux partages sur les réseaux sociaux.

Sur Blogger, l’intégration native peut suffire dans certains cas, mais reste limitée dès qu’un besoin de personnalisation se présente. En surchargeant proprement l’inclusion openGraphMetaData, il devient possible de reprendre le contrôle sur l’image, le titre et la description affichés, tout en ajoutant les balises spécifiques à X.

L’aperçu social est souvent la première impression laissée à un lecteur. Autant s’assurer qu’elle soit la bonne.