OpenGraph : `og:title`, `og:description`, `og:image`
Contrôlez l’apparence de votre page lorsqu’elle est partagée sur les réseaux sociaux.
OpenGraph : `og:title`, `og:description`, `og:image` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce qu'OpenGraph ?
OpenGraph est un protocole de métadonnées introduit par Facebook afin que chaque page puisse décrire l'apparence qu'elle doit avoir lorsqu'elle est partagée sur une plateforme sociale. Les balises se trouvent dans le <head> sous forme de paires <meta property="og:..." content="..."> et sont analysées par tous les grands réseaux sociaux.
Balises essentielles
Les quatre balises indispensables en pratique sont og:title, og:description, og:image et og:url. L'absence de l'une d'elles produit une carte de partage peu attrayante ou, pire encore, une carte sans aucun aperçu que les utilisateurs ont tendance à ignorer.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
Le titre affiché sur la carte de partage. Limitez-le à environ 60 caractères afin qu'il tienne sur une ligne et ne soit pas tronqué par le réseau social. Faites-le correspondre à la balise <title> de la page, tout en l'optimisant si vous le souhaitez pour augmenter le taux de clics.
og:description
Résumé d'une ou deux phrases affiché sous le titre. Visez 120 à 160 caractères : suffisamment long pour donner envie, mais assez court pour s'afficher entièrement sur toutes les plateformes. Évitez les pièges à clics : les descriptions honnêtes suscitent davantage d'engagement à long terme.
og:image
L'image principale. Utilisez un JPG ou un PNG de 1200x630 pixels (moins d'environ 5 MB). Utilisez toujours une URL absolue : les URL relatives ne fonctionnent pas, car l'analyseur n'a aucune notion de « cette page ». Fournissez og:image:width et og:image:height pour éviter une requête supplémentaire lors de la génération de l'aperçu.
og:url
L'URL canonique de la page. Définissez-la même si la page possède déjà un <link rel="canonical"> : certains analyseurs privilégient la balise OG. Supprimez les paramètres de suivi afin que les URL partagées ne se multiplient pas en de nombreuses pages « différentes » dans la base de données de la plateforme sociale.
og:type
Indique à la plateforme de quel type de contenu il s'agit : "website", "article", "product", "video.movie", "book", etc. Article est le choix le plus courant pour les articles de blog et permet d'utiliser des balises supplémentaires comme article:published_time et article:author.
og:locale
Locale BCP-47 du contenu (par exemple, "en_US", "tr_TR"). Associée à og:locale:alternate, elle indique au réseau dans quelles autres langues la page est disponible, ce qui permet à Facebook de décider s'il doit traduire l'aperçu.
og:site_name
Nom affiché du site éditeur. Certains réseaux l'affichent comme sous-titre sur la carte. Gardez-le court et cohérent sur toutes les pages afin que la marque soit présentée de la même manière, quel que soit l'article partagé.
Tester les cartes
Utilisez le Sharing Debugger de Facebook et le Post Inspector de LinkedIn pour récupérer la page telle que l'analyseur la voit, afficher les balises interprétées et actualiser leur aperçu mis en cache. Après le déploiement d'une nouvelle og:image, une nouvelle analyse est nécessaire, sinon les utilisateurs verront l'ancienne image pendant plusieurs jours.
Pièges courants
Les balises rendues côté serveur sont obligatoires : la plupart des analyseurs n'exécutent pas JavaScript, les balises OG injectées par React côté client leur sont donc invisibles. Rendez-les dans le HTML initial, idéalement avec SSR ou SSG, sinon les cartes de partage resteront génériques indéfiniment.
Vérification des connaissances
Pourquoi og:image doit-il utiliser une URL absolue plutôt qu'un chemin relatif ?
Résumé
Les balises OpenGraph (og:title, og:description, og:image avec une URL absolue, og:url, og:type, og:locale, og:site_name) contrôlent l'apparence de chaque page lorsqu'elle est partagée. Rendez-les côté serveur, limitez les titres à 60 caractères et les descriptions à environ 150, utilisez des images de 1200x630 et testez le résultat avec le Sharing Debugger de Facebook avant le lancement.
Questions Fréquemment Posées
La leçon « OpenGraph : `og:title`, `og:description`, `og:image` » est-elle gratuite ?
Oui — le texte complet de « OpenGraph : `og:title`, `og:description`, `og:image` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « OpenGraph : `og:title`, `og:description`, `og:image` » ?
Contrôlez l’apparence de votre page lorsqu’elle est partagée sur les réseaux sociaux. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « OpenGraph : `og:title`, `og:description`, `og:image` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- OpenGraph : `og:title`, `og:description`, `og:image`
- Balises meta Twitter Card
- Notions fondamentales des données structurées JSON-LD
- Hreflang pour les pages internationales