Générateur de balises meta Open Graph

Créez des balises meta Open Graph pour les aperçus de liens Facebook, LinkedIn, WhatsApp, Slack et Discord : titre, description, image avec taille et alt, type, URL, langue.

URL absolue ; 1200×630 px convient à la plupart des réseaux.

en_US, vi_VN, fr_FR…

HTML pour la section <head>
<meta property="og:type" content="article">
<meta property="og:title" content="My Awesome Article">
<meta property="og:description" content="A short summary shown when the link is shared.">
<meta property="og:url" content="https://example.com/article">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:secure_url" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Article cover">
Facebook, LinkedIn, WhatsApp, Slack, Discord et bien d’autres lisent les balises Open Graph. Après modification, les réseaux peuvent afficher un aperçu en cache jusqu’à ce qu’ils réexplorent la page.

Qu'est-ce que Générateur Open Graph ?

Cet outil génère les balises <meta property="og:…"> Open Graph qui contrôlent l'apparence d'un lien partagé sur Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram et de nombreuses autres applications. Il couvre og:type, titre, description, URL, nom du site, langue et image avec URL sécurisée, largeur, hauteur et texte alt, et avertit lorsque des propriétés requises manquent.

Comment utiliser Générateur Open Graph

  1. Renseignez og:title, og:type, og:url et og:image (les quatre propriétés requises).
  2. Ajoutez la description, le nom du site, la langue ainsi que la taille et le texte alt de l'image.
  3. Corrigez tout avertissement de propriété manquante.
  4. Copiez les balises dans le <head> de la page.

Quand utiliser Générateur Open Graph

Utilisez-le chaque fois qu'une page sera partagée et que vous voulez maîtriser l'aperçu plutôt que de laisser chaque application deviner. Les réseaux mettent les aperçus en cache ; après avoir modifié les balises, utilisez le débogueur de la plateforme (par ex. Facebook Sharing Debugger) pour actualiser. Pour X (Twitter), voyez aussi le générateur Twitter Card.

Comment fonctionne Générateur Open Graph

Chaque champ non vide devient une balise <meta property="og:…" content="…"> au contenu échappé en HTML, dans l'ordre recommandé par le protocole Open Graph. Lorsque l'URL de l'image est en https, une balise og:image:secure_url avec la même URL est ajoutée ; la largeur, la hauteur et l'alt de l'image ne sont écrits que si une image est définie.

Cas d'utilisation courants

  • Donner aux articles de blog un grand aperçu d'image sur LinkedIn et Facebook.
  • Définir og:locale pour une page localisée.
  • Ajouter og:image:alt pour l'accessibilité.
  • Faire afficher aux pages produit le nom et la photo du produit dans WhatsApp.

Questions Fréquentes

Quelle taille d'image fonctionne le mieux ?

1200×630 px (1,91:1) s'affiche bien sur la plupart des plateformes. Gardez le contenu important au centre, car certaines applications recadrent en carré.

Quelles balises og sont obligatoires ?

Le protocole exige og:title, og:type, og:image et og:url. La description et le nom du site sont facultatifs mais recommandés.

Pourquoi Facebook affiche-t-il encore mon ancienne image ?

Les aperçus sont mis en cache. Relancez l'exploration de l'URL dans le Sharing Debugger, ou changez l'URL de l'image.

Explorer d'autres catégories