Générateur Open Graph
Renseignez le titre, la description, l’adresse et l’image, voyez à quoi ressemblera la carte du lien dans les principales applications, puis copiez les balises Open Graph pour le head de votre page.
- Aperçu de la carte
- 7 types de contenu
- Contrôle de l’image
- Dans votre navigateur
Page
Utilisez « Site web » pour les pages d’accueil et tout ce qui ne correspond à aucun autre type.
L’adresse canonique de la page. Les mentions J’aime et les partages sont comptés pour cette adresse.
Image
Adresse complète de l’image. Recommandé : 1200 × 630 px (1,91:1), JPG ou PNG, moins de 5 Mo.
L’aperçu d’un site ne peut pas charger d’images provenant d’autres sites : choisissez donc le fichier sur votre appareil. Il est seulement affiché ici et mesuré – il ne quitte jamais votre appareil.
Une phrase qui dit ce que montre l’image, pour les personnes qui ne peuvent pas la voir.
Autres images
Une seule image suffit pour la plupart des pages. Ajoutez-en d’autres pour laisser le choix lors d’un partage sur Facebook.
Article
Un lien vers la page de l’auteur. Facebook accepte aussi l’adresse d’un profil.
Séparés par des virgules. Chacun devient une balise distincte.
Produit
Code à trois lettres tel que USD, EUR ou GBP.
Profil
Livre
Un lien vers la page de l’auteur. Facebook accepte aussi l’adresse d’un profil.
Vidéo
Ajoutez l’adresse du fichier vidéo dans « Vidéo et audio » ci-dessous.
Chanson
Vidéo et audio
Application Facebook, carte X et balises de base
Nécessaire uniquement pour les statistiques Facebook Insights de votre domaine.
Aperçu
Ces aperçus reprennent la mise en page et les limites de texte de chaque application ; la carte réelle peut différer légèrement et évolue de temps à autre. Après la publication, chaque réseau conserve l’ancien aperçu jusqu’à l’actualisation de son cache.
Liste de contrôle
Code HTML
Importer depuis un code HTML existant
Le code collé est uniquement lu comme du texte dans votre navigateur. Les scripts qu’il contient ne s’exécutent jamais, rien n’est chargé à partir de ce code et rien n’est envoyé où que ce soit. L’import remplace le contenu actuel du formulaire.
Comment créer des balises Open Graph
Le code et les aperçus se mettent à jour pendant la saisie.
- 1
Choisissez le type de contenu
Sélectionnez website, article, product, profile, book, video ou song, puis saisissez le titre, la description, l’URL de la page et le nom du site.
- 2
Ajoutez l’image
Indiquez l’adresse de l’image de partage. Pour la prévisualiser et la mesurer, choisissez le même fichier sur votre appareil – il n’est lu que par votre navigateur.
- 3
Vérifiez et copiez
Regardez les aperçus, parcourez la liste de contrôle et collez le code dans le <code><head></code> de votre page.
Tout ce qu’il faut pour un aperçu de lien
Des balises écrites selon le protocole Open Graph.
Aperçus dans quatre mises en page
Facebook, LinkedIn, WhatsApp / iMessage et Slack / Discord, chacun avec ses propres limites de texte. Les cartes réelles peuvent différer légèrement et évoluent avec le temps.
Contrôle de l’image
Choisissez l’image sur votre appareil pour voir ses dimensions en pixels, ses proportions, son format et son poids, avec un avertissement si elle est trop petite, trop lourde ou si elle sera rognée.
Détails propres à chaque type
Date de publication, auteur, rubrique et mots-clés pour les articles ; prix, devise, disponibilité et marque pour les produits ; et des champs pour les profils, livres, vidéos et morceaux.
Plusieurs images, vidéo et audio
Ajoutez d’autres images avec largeur, hauteur et texte alternatif, ainsi que og:video ou og:audio avec leur type MIME.
Carte X et balises de base
Ajoute en option le type de carte X et votre compte, un identifiant d’application Facebook, ainsi que la balise title et la meta description avec les mêmes textes.
Import d’un HTML existant
Collez le code source d’une page pour charger ses balises Open Graph actuelles dans le formulaire et les corriger. Les scripts du code collé ne s’exécutent pas.
Confidentiel par conception
Tout fonctionne dans votre navigateur. Ce que vous saisissez, collez ou ouvrez n’est pas envoyé à un serveur.
Gratuit, sans inscription
Pas de compte, pas de limite, pas de filigrane – sur téléphone, tablette ou ordinateur.
Les balises Open Graph et l’usage qu’en font les applications
Quand quelqu’un publie un lien, l’application récupère la page et cherche les balises Open Graph dans son head pour composer la carte d’aperçu : un titre, un court texte, une image et le nom du site. Le protocole, lancé par Facebook en 2010, est aujourd’hui lu par LinkedIn, WhatsApp, Slack, Discord, iMessage, X et bien d’autres. Sans ces balises, l’application devine : elle peut prendre la mauvaise image, un bandeau de cookies en guise de description, ou n’afficher que l’adresse brute.
Le protocole exige quatre propriétés : og:title, og:type, og:image et og:url. En pratique, on ajoute aussi og:description et og:site_name. Les balises Open Graph utilisent l’attribut property, et non name. L’image est ce que l’on remarque en premier : 1200 × 630 pixels, soit un rapport de 1,91:1, convient à toutes les grandes cartes. Indiquer og:image:width et og:image:height permet à l’application de mettre la carte en page avant d’avoir chargé l’image.
Erreurs typiques : une adresse d’image relative ou en http, que de nombreuses applications refusent de charger ; un og:url différent de l’URL canonique, si bien que les partages sont comptés pour deux adresses ; une image trop petite, ou si lourde que l’application l’ignore ; et une seule image et une seule description génériques pour toutes les pages d’un site. N’oubliez pas que les applications mettent les aperçus en cache. Après une modification des balises, l’ancienne carte peut rester visible jusqu’à l’actualisation du cache de l’application concernée.
Les propriétés Open Graph essentielles
| Propriété | Son contenu | Conseil |
|---|---|---|
| <code>og:title</code> | Titre de la carte | Sans le nom du site ; environ 60 à 90 caractères |
| <code>og:description</code> | Une ou deux lignes sous le titre | Environ 55 à 200 caractères ; certaines applications ne l’affichent pas |
| <code>og:image</code> | Image de la carte | 1200 × 630 px, JPG ou PNG, adresse https:// complète |
| <code>og:url</code> | Adresse canonique de la page | La même adresse que dans la balise canonical |
| <code>og:type</code> | Nature du contenu | <code>website</code>, sauf si un autre type convient clairement |
| <code>og:site_name</code> | Nom du site web | Affiché au-dessus du titre dans plusieurs messageries |
Conseils
- Pas encore d’image de partage ? Créez-en une aux bonnes dimensions avec le Générateur d’image OG.
- Recadrez une image existante en 1200 × 630 px avec l’outil Redimensionner pour les réseaux sociaux et allégez le fichier avec le Compresseur d’images.
- Pour les cartes player et app sur X, utilisez le Générateur de Twitter Cards ; pour canonical, robots et hreflang, le Générateur de balises meta.
- Après la publication, partagez le lien dans une conversation privée ou un brouillon pour vérifier la vraie carte, et actualisez le cache d’aperçu du réseau s’il affiche encore l’ancienne version.
Questions fréquentes
Vous ne trouvez pas votre réponse ? Contactez-nous — nous répondons rapidement.
Quelle taille pour une image Open Graph ?
1200 × 630 pixels, soit un rapport de 1,91:1 : c’est le choix sûr pour les grandes cartes. Utilisez JPG ou PNG et gardez un fichier léger : cet outil avertit au-delà de 300 Ko, car WhatsApp n’affiche souvent aucune image pour les fichiers plus lourds, puis au-delà des limites de 5 Mo et 8 Mo de LinkedIn et Facebook.
Quelles balises Open Graph sont obligatoires ?
Le protocole exige og:title, og:type, og:image et og:url. Ajoutez aussi og:description et og:site_name : la plupart des applications les affichent.
Pourquoi l’aperçu de mon lien ne se met-il pas à jour ?
Les applications enregistrent l’aperçu au premier partage d’un lien. Après une modification des balises, l’ancienne carte reste jusqu’à l’expiration ou l’actualisation de ce cache. Facebook et LinkedIn proposent chacun un outil pour développeurs qui récupère à nouveau la page.
Les balises Open Graph aident-elles le SEO ?
Ce n’est pas un facteur de classement pour les moteurs de recherche. Elles déterminent l’apparence d’un lien partagé, et une carte claire avec une belle image obtient plus de clics qu’une adresse brute.
Quelle différence entre balises Open Graph et balises meta ?
La balise title et la meta description sont écrites pour les moteurs de recherche. Les balises Open Graph sont écrites pour les applications qui affichent des aperçus de liens. Elles peuvent porter les mêmes textes, mais une page a besoin des deux jeux.
Mes données sont-elles envoyées à un serveur ?
Non. L’outil fonctionne entièrement dans votre navigateur. Votre saisie n’est ni envoyée, ni journalisée, ni stockée sur nos serveurs.
Plus d’outils SEO et web gratuits
Générez balises et fichiers, vérifiez codes de statut, redirections, DNS et certificats – gratuitement et sans compte.