Générateur de balises Open Graph
Renseignez le titre, la description, l'image et l'URL de votre page : les balises og:* et twitter:* sont générées en direct, avec un aperçu du rendu sur Facebook/LinkedIn et X.
<meta property="og:title" content="Titre de ma page">
<meta property="og:description" content="Une description claire et engageante de ce que la page propose, pour donner envie de cliquer.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://exemple.fr/ma-page">
<meta property="og:image" content="https://exemple.fr/images/og-cover.jpg">
<meta property="og:site_name" content="Exemple">
<meta property="og:locale" content="fr_FR">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Titre de ma page">
<meta name="twitter:description" content="Une description claire et engageante de ce que la page propose, pour donner envie de cliquer.">
<meta name="twitter:image" content="https://exemple.fr/images/og-cover.jpg">Comment une plateforme construit un aperçu de lien
Open Graph est un protocole de métadonnées qui décrit une page web sous forme d'objet partageable. Quand un lien est collé sur Facebook, LinkedIn, X, Discord ou WhatsApp, la plateforme télécharge le HTML de la page, lit les balises <meta property="og:..."> du <head>, et compose un aperçu : image, titre, description, nom de domaine.
Ce robot ne rend pas le JavaScript de la même manière qu'un navigateur : les balises doivent être présentes dans le HTML servi, pas ajoutées après coup côté client. Le résultat est ensuite mis en cache par la plateforme, parfois pour plusieurs jours — d'où l'intérêt de vérifier les balises avant le premier partage plutôt qu'après.
Propriétés utiles, et leur statut
| Balise | Statut | Rôle |
|---|---|---|
| og:title | Obligatoire | Titre affiché sur la carte. Peut différer du <title> SEO. |
| og:type | Obligatoire | Nature de l'objet. « website » pour une page courante, « article » pour un billet daté. |
| og:image | Obligatoire | URL absolue du visuel. Sans elle, la carte n'a pas d'image. |
| og:url | Obligatoire | URL canonique de la page, celle vers laquelle les partages doivent converger. |
| og:description | Recommandée | Texte sous le titre, tronqué différemment selon la plateforme. |
| og:site_name | Facultative | Nom du site, affiché par certaines plateformes à côté du domaine. |
| og:locale | Facultative | Langue du contenu, au format fr_FR. |
| twitter:card | Requise sur X | summary (vignette carrée) ou summary_large_image (bandeau). |
| twitter:site | Facultative | Compte X du site, au format @compte. |
Le générateur n'écrit que les balises renseignées, à deux exceptions près : og:type (valeur website) et twitter:card sont toujours émis. Les valeurs sont échappées pour le HTML, un guillemet double dans un titre ne casse donc pas l'attribut content.
Dimensions d'image recommandées par plateforme
| Format | Dimensions | Ratio |
|---|---|---|
| Open Graph / Facebook / LinkedIn | 1200 × 630 px | 1.91:1 |
| Twitter Card summary_large_image | 1200 × 630 px (min. 300 × 157 px) | 1.91:1 |
| Twitter Card summary | 144 × 144 px minimum | 1:1 |
Si vous renseignez les champs « largeur » et « hauteur » de l'image, l'outil compare le ratio obtenu au ratio attendu pour le type de carte choisi et signale un recadrage probable ; ces deux valeurs servent au contrôle et ne sont pas ajoutées aux balises générées. Évitez le texte en bord d'image : c'est la première chose que la plateforme rogne.
Le protocole Open Graph en définit quatre : og:title, og:type, og:image et og:url. En pratique, une plateforme construit déjà un aperçu correct avec og:title, og:description et og:image ; sans og:image, la plupart affichent une carte texte sans visuel, beaucoup moins cliquée. og:type prend la valeur website pour une page classique.
Oui. Les robots de partage ne résolvent pas toujours les chemins relatifs : og:image et og:url doivent contenir une URL complète, avec le protocole (https://exemple.fr/images/apercu.jpg). L'image doit aussi être accessible publiquement, sans authentification ni blocage par robots.txt, sinon la carte s'affichera sans visuel.
Open Graph (balises og:*) est un standard créé par Facebook, repris par la plupart des plateformes (LinkedIn, Discord, WhatsApp, Slack...) pour décrire l'aperçu d'une page partagée. Twitter Card (balises twitter:*) est le format propre à X : en l'absence de balises twitter:title, twitter:description ou twitter:image, il retombe sur les valeurs Open Graph correspondantes. Seul twitter:card, qui choisit entre vignette carrée et grande image, n'a pas d'équivalent Open Graph.
Chaque plateforme a son propre moteur de rendu, ses propres règles de troncature et met parfois en cache une ancienne version des balises. Cet aperçu est une approximation fidèle aux comportements observés, mais ne garantit pas un rendu identique au pixel près sur chaque plateforme.
Utilisez les outils officiels après publication de vos balises : le Facebook Sharing Debugger (developers.facebook.com/tools/debug) et le validateur de cartes de X permettent de forcer une nouvelle lecture de la page. LinkedIn dispose d'un Post Inspector équivalent. Sans cela, un aperçu erroné peut persister plusieurs jours.
Pas directement : ce ne sont pas des facteurs de classement pris en compte par les moteurs de recherche. En revanche, un aperçu de partage soigné améliore le taux de clic sur les réseaux sociaux et dans les messageries, ce qui peut indirectement générer du trafic et des liens vers votre page.