kittokit
FR
` dans le titre ou la description sont échappées par backslash, pour que le bloc script inline ne se termine pas prématurément."}},{"@type":"Question","name":"Comment fonctionne le générateur d'image OG de l'outil ?","acceptedAnswer":{"@type":"Answer","text":"100 % côté client. Vous choisissez une des cinq couleurs de marque préréglées (Graphite, Porcelaine, Coucher de soleil, Forêt, Minuit) ou saisissez vos propres valeurs, tapez le titre de l'image et un sous-titre optionnel, cliquez sur « Générer l'image ». Le navigateur rend le PNG 1200×630 via l'API Canvas2D en mémoire et le propose au téléchargement. Aucun appel serveur, aucun paywall, aucun compte — contrairement à robolly ou previewlinks. Hébergez ensuite le résultat sur votre CDN et référencez l'URL dans `og:image`."}},{"@type":"Question","name":"Pourquoi pas de débogueur de fetch d'URL en direct dans l'outil ?","acceptedAnswer":{"@type":"Answer","text":"Un débogueur en direct devrait récupérer l'URL côté serveur parce que CORS empêche un script client de lire des domaines arbitraires. Fetch serveur signifie code serveur, donc logs serveur et tracking potentiel. Cela viole la position privacy-first de la page. Pour un débogueur en direct, utilisez après déploiement les outils officiels : Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector. Le générateur couvre la rédaction, les validateurs couvrent la lecture — les deux se complètent."}}]},{"@type":"HowTo","name":"Générateur OpenGraph — 6 plateformes, JSON-LD Article","step":[{"@type":"HowToStep","position":1,"name":"Text oder Code einfügen","text":"Füge deinen Inhalt in das Eingabefeld ein oder tippe direkt."},{"@type":"HowToStep","position":2,"name":"Automatische Verarbeitung","text":"Das Tool verarbeitet den Inhalt sofort und zeigt das Ergebnis."},{"@type":"HowToStep","position":3,"name":"Ergebnis kopieren","text":"Kopiere das Ergebnis mit einem Klick in die Zwischenablage."}]}]}
DEV-TOOL

Générateur OpenGraph — 6 plateformes, JSON-LD Article

Composez vos balises, vérifiez les limites par plateforme en direct, rendez l'image OG dans le navigateur et générez le JSON-LD Article Schema.org dans le même onglet — tout dans la page, sans.

Runs locally in the browser — snippets are emitted in memory, nothing is uploaded.

Mode

Core tags

og:type

X (Twitter Card)

twitter:card

Article-specific

Load image preview

File stays local — loaded only as preview in the browser, no upload.

Platform preview

Six platforms, each with its own layout and limit characteristics.

News-feed unfurl with image-on-top layout. Title cuts around 60 chars.

Example Magazine

Brand Story — New episode every Thursday

A weekly series on the build, crisis and turning-point moments of real companies.

Within limits · Facebook truncates title around 60 characters in the news-feed unfurl. Recommended image 1200×630, minimum 600×315.

HTML snippet

Paste into the `<head>` of your page.

<!-- OpenGraph -->
<meta property="og:title" content="Brand Story — New episode every Thursday">
<meta property="og:description" content="A weekly series on the build, crisis and turning-point moments of real companies.">
<meta property="og:url" content="https://example.com/articles/episode-12">
<meta property="og:image" content="https://example.com/og/episode-12.png">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Magazine">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Lena Albrecht">
<meta property="article:section" content="Magazine">
<meta property="article:published_time" content="2026-05-17">

<!-- Twitter Card / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Brand Story — New episode every Thursday">
<meta name="twitter:description" content="A weekly series on the build, crisis and turning-point moments of real companies.">
<meta name="twitter:image" content="https://example.com/og/episode-12.png">
<meta name="twitter:site" content="@example">

<!-- Theme color -->
<meta name="theme-color" content="#1A1A1A">

<!-- Canonical -->
<link rel="canonical" href="https://example.com/articles/episode-12">

Comment ça marche
  1. 01

    Text oder Code einfügen

    Füge deinen Inhalt in das Eingabefeld ein oder tippe direkt.

  2. 02

    Automatische Verarbeitung

    Das Tool verarbeitet den Inhalt sofort und zeigt das Ergebnis.

  3. 03

    Ergebnis kopieren

    Kopiere das Ergebnis mit einem Klick in die Zwischenablage.

Confidentialité

Alle Berechnungen laufen direkt in deinem Browser. Keine Daten werden auf Server übertragen.

Un éditeur pour les balises `<meta property="og:*">` avec six aperçus plateforme côte à côte. Vous saisissez titre, description, URL et image_; le générateur montre simultanément comment Facebook, X (Twitter Card), LinkedIn, Slack, Discord et iMessage déploieront le lien — avec les bons plafonds de caractères par plateforme.

01 — Mode d’emploi

Comment utiliser cet outil ?

  1. Dans l'onglet Éditeur, saisissez titre, description, URL, URL d'image et nom de site. Le compteur de caractères affiche les limites par plateforme.
  2. Choisissez og:type (website / article / product). En `article`, des champs auteur, rubrique et date apparaissent.
  3. Choisissez le mode Twitter Card (`summary` ou `summary_large_image`) et, optionnellement, le handle Twitter.
  4. Parcourez la bande d'aperçus — chaque plateforme affiche son layout et son statut de validation.
  5. Copiez le snippet HTML ou téléchargez-le en `.html`. Dans l'onglet Image OG, choisissez une couleur de marque et rendez le PNG 1200×630. Dans l'onglet JSON-LD, reprenez le markup Schema.org `Article` correspondant.

Que fait le générateur OpenGraph ?

Le générateur est un éditeur pour les balises meta que les plateformes sociales lisent quand un lien est partagé. Vous tapez titre, description, URL et image — le générateur émet les balises <meta property="og:*"> et <meta name="twitter:*"> prêtes à coller dans le <head>. Six aperçus plateforme (Facebook, X, LinkedIn, Slack, Discord, iMessage) montrent en parallèle l’allure de la carte sur chaque canal, avec avertissements de plafond de caractères par plateforme.

Trois onglets couvrent l’ensemble du workflow :

  • Éditeur + Aperçu — saisir les champs, voir les six cartes plateforme s’actualiser, copier le snippet.
  • Générer l’image OG — rendre un PNG 1200×630 à partir d’une couleur de marque et d’un titre dans le navigateur, télécharger.
  • JSON-LD Article — markup Schema.org Article pour booster les citations IA, avec sortie inline-script protégée contre XSS.

Tout dans le navigateur. Pas de téléversement, pas de compte, pas de bannière de cookies.

Quels aperçus plateforme sont intégrés ?

Six destinations, chacune avec sa charte de layout et sa configuration de limites :

  • Facebook — dépliage en feed avec image en haut. Titre tronqué à 60 caractères.
  • X (Twitter Card) — summary_large_image avec pastille de domaine en bas. Titre plafonné à 70, description à 200.
  • LinkedIn — layout business avec cache agressif. Après déploiement, déclencher manuellement le LinkedIn Post Inspector, sinon LinkedIn affiche les anciens caches.
  • Slack — dépliage du bot avec petit thumb à gauche et eyebrow du nom du site.
  • Discord — embed avec barre latérale gauche colorée qui suit la valeur theme-color.
  • iMessage — bulle Rich Link. iMessage exige HTTPS et un <head> rendu côté serveur — les balises OG injectées côté client sont ignorées. Le générateur le signale dans le bandeau de validation.

metatags.io couvre six plateformes mais sans Discord ni iMessage. opengraph.xyz et share-preview sont des débogueurs, pas des générateurs. robolly plafonne à Facebook + X. Nous combinons les six plateformes dans un seul éditeur — la plus-value directe face aux outils établis.

Comment fonctionne la validation par plateforme ?

Chaque plateforme a ses limites strictes pour titre et description — le générateur affiche un statut-point par plateforme :

PlateformeTitre maxDescription maxRatio image
Facebook601101,91:1
X (Twitter)702001,91:1 ou 1:1
LinkedIn1502001,91:1
Slack2003001,91:1
Discord25640961,91:1
iMessage1002001,91:1

En cas de dépassement, le point passe au rouge et l’aide donne le delta exact (« Title exceeds 70 chars (78) »). Pour iMessage, le générateur vérifie en plus que og:image et og:url commencent par https:// — Apple Messages ignore les liens HTTP au rendu Rich Link.

Comment fonctionne le générateur d’image OG ?

Le deuxième onglet rend un PNG 1200×630 directement dans le navigateur via l’API Canvas2D. Vous choisissez l’une des cinq couleurs de marque ou tapez vos valeurs hex ; le titre est automatiquement renvoyé à la ligne sur trois lignes au maximum ; un sous-titre optionnel complète le nom du site ou l’eyebrow. Le clic sur « Générer l’image » dessine sur un canvas hors écran et renvoie le résultat comme blob PNG téléchargeable.

100 % côté client signifie : pas de serveur, pas de paywall, pas de compte. robolly, previewlinks et Pixola font la même chose côté serveur — payant et avec télémétrie. Ici, c’est local, sans aller-retour externe. Hébergez ensuite le PNG sur votre CDN et référencez l’URL dans le champ og:image.

Que fait l’onglet JSON-LD Article ?

Le JSON-LD Schema.org Article complète OpenGraph : OG décrit l’apparence de l’aperçu, JSON-LD décrit le contenu de façon structurée (auteur, date, rubrique, éditeur). Moteurs de recherche et assistants IA préfèrent les pages qui fournissent les deux — l’étude Princeton GEO 2025 a documenté +40 % de citations supplémentaires en présence combinée OG+Article.

Le générateur émet le JSON-LD au format :

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Brand Story — Episode 12",
  "description": "A weekly series ...",
  "url": "https://example.com/articles/12",
  "image": "https://example.com/og/12.png",
  "mainEntityOfPage": "https://example.com/articles/12",
  "datePublished": "2026-05-17",
  "articleSection": "Magazine",
  "author": { "@type": "Person", "name": "Lena Albrecht" },
  "publisher": { "@type": "Organization", "name": "Example Magazine" }
}
</script>

Protection XSS du script inline

Le générateur applique un échappement backslash sur les séquences </script et </style dans les valeurs JSON. Sans cette protection, une entrée malveillante comme Test</script><script>alert(1)</script> fermerait prématurément le bloc inline et exécuterait du JavaScript arbitraire. Avec l’échappement, </script devient <\/script — toujours du JSON valide (un parseur JSON retourne la valeur originale), mais le parseur HTML ne voit plus de token littéral de fin de script.

Quelles lacunes sont volontaires ?

  • Pas de débogueur de fetch d’URL en direct — exigerait un proxy serveur pour CORS, ce qui violerait la position 100 % côté client. Après déploiement, passer par Facebook Sharing Debugger, X Card Validator ou LinkedIn Post Inspector.
  • Pas de générateur CSV en masse — workflow B2B hors du périmètre d’un outil seul.
  • Pas de marketplace de templates 100+ pour les images OG — YAGNI. Le générateur Canvas inline fournit ce qu’il faut pour rester cohérent à la marque.
  • Pas d’onglet Pinterest Rich Pin — faible intention de recherche FR/ES pour Rich Pins, et validateur Pinterest dédié nécessaire après déploiement.
  • Pas de mode App-Card / Player-Card pour Twitter — cas spéciaux (apps avec deep-link installable, vidéos inline) hors périmètre pour 95 % des utilisateurs.
  • Pas d’onglets WhatsApp/Telegram — les deux plateformes lisent l’OpenGraph standard sans particularités ; l’aperçu Facebook reflète fidèlement le rendu WhatsApp/Telegram.

Comment est gérée la confidentialité ?

100 % côté client. Le générateur tourne intégralement dans le navigateur. Aucun endpoint serveur, aucun appel de télémétrie, aucun cookie, aucun compte. Le fichier que vous chargez comme aperçu d’image reste local — le FileReader le rend comme data URL dans le DOM mais il ne quitte jamais l’onglet. À la fermeture de l’onglet, tous les réglages disparaissent. Pour conserver un historique, téléchargez le snippet HTML après chaque édition et versionnez-le dans votre dépôt.

Quels conseils de workflow valent le coup ?

Trois petites routines qui font la différence au quotidien :

  • Générateur d’abord, débogueur de partage ensuite. Rédigez titre et description dans l’onglet Éditeur, vérifiez que les six cartes plateforme sont vertes. Puis seulement déployez la page et passez l’URL au Facebook Sharing Debugger, X Card Validator et LinkedIn Post Inspector. Ces derniers vident le cache de leur plateforme — sans ce passage, les posts LinkedIn affichent souvent d’anciens OG pendant des jours.
  • og:image avec un cache-buster à chaque mise à jour. Si vous changez l’image OG, ajoutez un paramètre à l’URL (?v=2026-05-17). Sinon, Facebook et LinkedIn conservent l’ancienne pendant des mois. Le générateur ne persiste rien — vous gérez le cache-buster à la main ou via votre build.
  • Pour article, maintenez toujours la date. article:published_time et datePublished signalent aux IA l’actualité du contenu. Lors d’un rafraîchissement, posez aussi article:modified_time / dateModified pour que ChatGPT-Search ou Perplexity citent la page de préférence à l’ancienne version.

Quand OpenGraph seul ne suffit-il pas ?

Trois cas particuliers demandent plus que les balises OG :

  • L’aperçu Statut WhatsApp lit par défaut OpenGraph, mais peut basculer sur « Preview not available » quand l’image est très étroite (< 300 pixels de large). Solution : utiliser le PNG 1200×630 produit par le générateur de l’outil — WhatsApp le rend toujours.
  • La bulle Rich Link d’Apple Messages exige en plus que le <head> soit rendu côté serveur. Une SPA qui injecte les balises OG en JavaScript ne sera pas lue par le scraper iMessage. Astro 6 SSG (comme sur ce site) sert le <head> côté serveur par défaut.
  • L’embed Discord rend la valeur theme-color comme accent vertical gauche de la carte. Ne pas la fixer donne un gris neutre — fonctionnel mais sans identité de marque.

Où trouver plus de détails ?

Dernière mise à jour :

Vous pourriez aussi aimer