Balises Open Graph
Technique et infrastructureDes balises meta qui contrôlent l'apparence du contenu lorsqu'il est partagé sur des réseaux sociaux comme Facebook.
Définition
Les balises Open Graph (OG) sont des balises meta HTML placées dans la section `<head>` d'une page web qui contrôlent l'apparence de cette page lorsque son URL est partagée sur les réseaux sociaux, les applications de messagerie et d'autres services qui génèrent des aperçus de liens. Le protocole a été créé à l'origine par Facebook en 2010 et est depuis devenu le standard universel des aperçus de liens sur le web. Les balises OG définissent quatre propriétés principales : `og:title` (le titre affiché dans l'aperçu), `og:description` (le texte de résumé), `og:image` (la vignette d'aperçu) et `og:url` (le lien canonique). Des propriétés supplémentaires comme `og:type`, `og:site_name` et `og:locale` apportent davantage de contexte. Sans balises OG, les plateformes tentent de deviner quoi afficher en analysant la page, ce qui produit souvent des images cassées, du texte tronqué ou un contenu non pertinent.
Pourquoi c'est important
Chaque lien partagé sur les réseaux sociaux génère une carte d'aperçu. Cette carte est la première et souvent la seule chose que les gens voient avant de décider de cliquer ou non. Une image OG bien configurée, un titre clair et une description percutante peuvent multiplier les taux de clics par rapport à un aperçu générique ou absent. Pour les éditeurs qui diffusent des [flipbooks](/glossary/flipbook) via les canaux sociaux, la carte d'aperçu agit comme une publicité miniature pour le contenu. Un aperçu cassé ou fade gâche la visibilité offerte par le partage. Les balises OG affectent aussi l'apparence des liens dans les applications de messagerie comme WhatsApp, Slack et iMessage, ce qui signifie qu'elles influencent le comportement de clic bien au-delà des fils d'actualité des réseaux sociaux.
Comment ça fonctionne dans FlipLink
La fonctionnalité [« SEO et aperçus sociaux »](/features/seo-and-social-previews) de FlipLink te permet de configurer les balises OG pour chaque publication. Tu définis un titre, une description et une image d'aperçu personnalisés via les paramètres de la publication, et FlipLink génère automatiquement les balises meta `og:title`, `og:description`, `og:image`, `og:url` et `og:type` correctes. Cela signifie que chaque lien de flipbook partagé affiche une carte d'aperçu soignée et à ton image, sans aucune modification HTML. L'image OG peut être la page de couverture de ton flipbook ou un visuel personnalisé conçu pour le partage social.
Liste de contrôle de configuration
Suis ces étapes pour configurer correctement les balises OG et maximiser l'impact du partage social :
1. **Définis og:title** - Garde-le sous 60 caractères. Utilise un titre descriptif qui inclut le sujet du contenu, pas seulement le nom de ta marque. Exemple : « Catalogue collection printemps | TaMarque » plutôt que simplement « TaMarque ».
2. **Rédige og:description** - Vise 120 à 155 caractères. Inclus une proposition de valeur ou un appel à l'action. Décris ce que le lecteur trouvera dans le flipbook.
3. **Choisis og:image** - Utilise une image d'au moins 1200x630 pixels. La page de couverture de ton flipbook convient bien, mais un visuel social personnalisé avec une surimpression de texte peut être plus performant. Évite les images comportant trop de petit texte, car elles s'affichent en vignettes.
4. **Vérifie og:url** - Ce doit être l'[URL canonique](/glossary/canonical-url) de la publication. Si ton flipbook est accessible via plusieurs URL, og:url doit pointer vers la principale.
5. **Définis og:type** - Utilise « website » pour les pages d'atterrissage et « article » pour les publications individuelles ou les articles de blog.
6. **Teste avant de partager** - Utilise le Sharing Debugger de Facebook, le Card Validator de Twitter ou le Post Inspector de LinkedIn pour prévisualiser l'apparence de ton lien avant de le partager publiquement.
Questions fréquentes
**Que se passe-t-il si je ne définis pas de balises OG ?**
La plateforme sociale tentera d'analyser ta page et de deviner le titre, la description et l'image. Les résultats sont imprévisibles : tu peux obtenir une image aléatoire de la page, un titre HTML tronqué ou aucun aperçu du tout. Définir explicitement les balises OG supprime entièrement ces incertitudes.
**Les balises OG influencent-elles le classement SEO ?**
Les balises OG n'influencent pas directement le classement dans les moteurs de recherche. Cependant, elles affectent considérablement les taux de clics sur les liens partagés, ce qui génère du trafic. Plus de trafic et d'engagement peut indirectement améliorer ta visibilité de recherche au fil du temps.
**Les balises OG sont-elles identiques aux Twitter Cards ?**
Twitter a ses propres balises meta (`twitter:card`, `twitter:title`, `twitter:image`), mais il se rabat sur les balises OG lorsque les balises spécifiques à Twitter sont absentes. La plupart des plateformes, dont LinkedIn, WhatsApp, Slack et iMessage, utilisent les balises OG comme source principale pour les aperçus de liens.
Détails techniques
Les balises OG suivent une structure HTML simple placée dans l'élément `<head>` :
- `og:title` - Le titre affiché dans l'aperçu. Il doit différer de la balise `<title>` de la page si le titre de la page inclut des fils d'Ariane de navigation ou des suffixes à l'échelle du site qui n'ont pas de sens dans un contexte social.
- `og:description` - Un résumé concis. Contrairement à la meta description utilisée pour les moteurs de recherche, la description OG doit être optimisée pour le contexte social : plus courte, plus directe et orientée vers l'action.
- `og:image` - Une URL absolue vers le fichier image. Facebook recommande 1200x630 pixels. Les images plus petites que 200x200 pixels peuvent ne pas s'afficher sur certaines plateformes.
- `og:type` - Catégorise le contenu. Les valeurs courantes sont « website », « article », « product » et « video.other ».
- `og:url` - L'URL canonique. Elle évite les cartes d'aperçu en double lorsque le même contenu est accessible depuis plusieurs URL.
- `og:locale` - Spécifie la langue du contenu (par exemple « en_US », « de_DE »). Utile pour les publications multilingues.
Lorsqu'une URL est partagée, le robot de la plateforme récupère la page, lit les balises OG du HTML et met le résultat en cache. C'est pourquoi les modifications des balises OG ne prennent pas effet immédiatement sur les plateformes qui ont déjà mis en cache l'ancien aperçu. Utilise l'outil de débogage de chaque plateforme pour forcer une nouvelle analyse après la mise à jour des balises.
Termes associés
Passerelle de paiement
Un service qui traite les paiements en ligne, comme Stripe, permettant la vente de documents via FlipLink.
PDF.js
La bibliothèque JavaScript open source de Mozilla qui affiche les fichiers PDF directement dans les navigateurs web.
Progressive Web App (PWA)
Une application web qui fonctionne hors ligne et peut être installée sur les appareils comme une application native.
Design responsive
Adapter automatiquement la mise en page et le contenu pour qu'ils s'affichent bien sur les écrans de toutes tailles et tous appareils.
Intégration responsive
Un code d'intégration qui ajuste automatiquement la taille du flipbook à n'importe quel conteneur ou largeur d'écran.
Fonctionnalités associées
Disponible dans d'autres langues
Prêt à transformer
tes PDF ?
Rejoins des milliers d'entreprises qui utilisent FlipLink pour créer du contenu interactif et engageant à partir de leurs PDF. Commence gratuitement — aucune carte bancaire requise.