Open Graph
Définition
Balises meta qui définissent comment une page apparaît quand elle est partagée sur les réseaux sociaux (titre, description, image). Indispensable pour les partages soignés.
Ce qu'est Open Graph
Open Graph est un protocole créé par Facebook en 2010 et adopté depuis par toutes les grandes plateformes sociales et messageries (LinkedIn, Twitter/X, Slack, WhatsApp, iMessage, Discord). Il consiste à ajouter des balises meta spécifiques dans le head de chaque page web pour contrôler exactement comment cette page apparaît quand un utilisateur la partage : titre affiché, description, image de couverture, type de contenu, URL canonique. Sans Open Graph, chaque plateforme devine, mal et différemment. Avec, on uniformise l'aperçu et on le rend désirable.
Les balises essentielles
Cinq balises minimales : og:title (le titre affiché dans la carte de partage), og:description (le résumé court), og:image (l'image de couverture, idéalement 1200x630 px), og:url (l'URL canonique du contenu), og:type (article, website, product, video.movie, etc.). Pour Twitter/X, on ajoute twitter:card avec la valeur summary_large_image qui force le format avec grande image. Les autres plateformes lisent les balises og: et ajoutent parfois leurs propres extensions. On garde les balises courtes mais expressives : 60 caractères pour le titre, 150 pour la description.
L'image de partage
L'image Open Graph est l'élément le plus impactant sur le taux de clic. Format recommandé : 1200x630 px en JPG ou PNG, sous 1 Mo. Au format 1.91:1 qui passe bien sur toutes les plateformes. On évite les images génériques de stock : une image conçue pour le partage, avec titre lisible, palette cohérente avec la marque, et un visuel distinctif. Les sites e-commerce affichent l'image du produit. Les blogs affichent une image éditoriale liée à l'article. Les SaaS affichent souvent un visuel custom avec le titre intégré dans le design. Investir 10 minutes par page sur cette image rapporte beaucoup en visibilité sociale.
Sans Open Graph
Sans Open Graph, une plateforme sociale doit deviner ce qu'elle affiche. Elle prend la première image trouvée dans la page (souvent un logo ou un placeholder), un titre extrait du h1 ou du title HTML, et une description tronquée du début du contenu. Le résultat est souvent moche, parfois aberrant : un favicon en 16x16 étiré en image de partage, une description coupée au milieu d'une phrase. Le taux de clic chute drastiquement comparé à un partage soigné. Sur LinkedIn ou Twitter, un partage mal présenté ne sera pas relayé, alors qu'un partage propre peut générer des dizaines d'interactions.
Intégration dans Next.js
Next.js gère Open Graph nativement via la metadata API. Dans le composant de page, on exporte un objet metadata avec une propriété openGraph qui contient title, description, images (tableau d'objets avec url, width, height, alt), url, locale, type. Le framework injecte automatiquement les balises HTML correspondantes au build. Pour générer des images Open Graph dynamiques par page (avec le titre de l'article incrusté, par exemple), on utilise next/og : une fonction qui génère une image PNG à partir de JSX, déployable sur l'edge runtime. C'est rapide, propre, et ça évite de créer manuellement chaque image.
Tester l'aperçu
Avant publication, on teste l'aperçu sur chaque plateforme cible. Facebook fournit le Sharing Debugger qui rafraîchit le cache et montre exactement ce qui s'affichera. LinkedIn a le Post Inspector. Twitter/X dispose du Card Validator. opengraph.xyz et metatags.io permettent de prévisualiser plusieurs plateformes d'un coup. Tester est important parce que chaque plateforme cache les balises pendant des jours à des semaines : un partage rapide après une modification peut afficher l'ancien aperçu. Les outils de debugger forcent le rafraîchissement et évitent cette confusion.
Les pièges classiques
Premier piège : une image qui dépasse 5 Mo ou qui n'est pas accessible (404, 403 d'un CDN mal configuré, redirection en chaîne). Les plateformes abandonnent et n'affichent rien. Deuxième piège : un og:title trop long qui est tronqué, ou différent du title HTML, ce qui crée une dissonance. Troisième piège : oublier og:url, qui peut provoquer la duplication d'aperçu sur des URL paramétrées. Quatrième piège : un cache trop agressif côté plateforme qui retient un ancien aperçu : on force le rafraîchissement via les debuggers officiels après chaque modification importante. Cinquième piège : ne pas tester sur mobile, où l'aperçu peut différer du desktop.