Générateur de balises Open Graph en ligne

Générez des balises meta Open Graph avec une carte d'aperçu de lien en direct.

À propos de cet outil

Les balises Open Graph forment un petit bloc de balises `` supplémentaires dans le `` d'une page, qui indiquent à Facebook, LinkedIn, Discord, Slack et à la plupart des autres plateformes comment afficher l'aperçu du lien lorsque quelqu'un partage l'URL — quel titre, description et image montrer à la place d'un simple lien. Sans elles, la plupart des plateformes finissent par deviner à partir du `` propre de la page et de sa première image, ce qui rend souvent un résultat incorrect ou incomplet.</p><p data-astro-cid-zpu62n3h>Ce générateur construit pour vous les balises `og:title`, `og:description`, `og:url`, `og:image`, `og:type` et, en option, `og:site_name`, avec un aperçu en direct qui approxime le rendu habituel de la carte. Comme les détails de rendu (recadrage de l'image, limites de caractères, comportement du cache) varient légèrement d'une plateforme à l'autre, il reste utile de tester le résultat final avec le débogueur ou l'outil d'aperçu propre à la plateforme cible avant une publication à grande échelle — tout ici s'exécute localement dans votre navigateur, rien n'est envoyé.</p> <h2>Questions fréquentes</h2> <div class="faq-item"> <h3>Quelle taille d'image dois-je utiliser pour og:image ?</h3> <p>1200×630px est la taille largement recommandée — elle s'affiche bien comme une grande carte sur Facebook, LinkedIn et la plupart des aperçus de liens sans recadrage disgracieux.</p> </div><div class="faq-item"> <h3>Pourquoi mon titre/ma description affiche-t-il un avertissement ?</h3> <p>L'outil signale les titres de plus de 60 caractères ou les descriptions de plus de 200 caractères, car la plupart des plateformes tronquent le texte plus long dans la carte d'aperçu. C'est une suggestion non bloquante, pas une erreur.</p> </div> </article> <nav class="related" aria-label="Outils similaires"> <h2>Outils similaires</h2> <div class="tool-grid"> <a class="tool-card" href="/fr/css-gradient-generator/"> <span class="icon">▧</span> <h3>Générateur de dégradé CSS</h3> <p>Composez des dégradés linéaires, radiaux et coniques et copiez le CSS.</p> </a><a class="tool-card" href="/fr/box-shadow-generator/"> <span class="icon">❏</span> <h3>Générateur box-shadow</h3> <p>Créez des box-shadows CSS en couches avec aperçu en direct.</p> </a><a class="tool-card" href="/fr/border-radius-generator/"> <span class="icon">⌒</span> <h3>Générateur border-radius</h3> <p>Créez des coins arrondis et des formes organiques, puis copiez le CSS.</p> </a><a class="tool-card" href="/fr/flexbox-generator/"> <span class="icon">⧉</span> <h3>Générateur Flexbox</h3> <p>Jouez avec les propriétés flex et copiez le CSS de mise en page.</p> </a><a class="tool-card" href="/fr/css-variables-generator/"> <span class="icon">🎨</span> <h3>Générateur de variables CSS</h3> <p>Créez un bloc de propriétés personnalisées :root à partir de paires nom/valeur.</p> </a><a class="tool-card" href="/fr/svg-blob-generator/"> <span class="icon">🫧</span> <h3>Générateur de blob SVG</h3> <p>Générez des formes de blob organiques et aléatoires en tant que tracés SVG réutilisables.</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Quelle taille d'image dois-je utiliser pour og:image ?","acceptedAnswer":{"@type":"Answer","text":"1200×630px est la taille largement recommandée — elle s'affiche bien comme une grande carte sur Facebook, LinkedIn et la plupart des aperçus de liens sans recadrage disgracieux."}},{"@type":"Question","name":"Pourquoi mon titre/ma description affiche-t-il un avertissement ?","acceptedAnswer":{"@type":"Answer","text":"L'outil signale les titres de plus de 60 caractères ou les descriptions de plus de 200 caractères, car la plupart des plateformes tronquent le texte plus long dans la carte d'aperçu. C'est une suggestion non bloquante, pas une erreur."}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — Tout fonctionne côté client. Vos données ne sont jamais envoyées.</span> <span><a href="https://dec0de.dev" rel="noopener">dec0de.dev — 18 formatters & encoders</a></span> </div> </footer> <script type="module">const a=document.getElementById("lang-select");a?.addEventListener("change",()=>{const e=a.value,t=a.dataset.path??"";window.location.href=e==="en"?`/${t}`:`/${e}/${t}`});document.getElementById("theme-toggle")?.addEventListener("click",()=>{const e=document.documentElement,t=e.dataset.theme==="dark"?"light":"dark";e.dataset.theme=t,localStorage.setItem("theme",t)});document.addEventListener("click",async e=>{const t=e.target.closest("[data-copy]");if(!t)return;const n=document.getElementById(t.dataset.copy);if(!n)return;const o="value"in n?n.value:n.textContent??"";try{await navigator.clipboard.writeText(o);const c=t.textContent;t.textContent=t.dataset.copiedLabel||"✓",t.classList.add("copied"),setTimeout(()=>{t.textContent=c,t.classList.remove("copied")},1200)}catch{}});</script> </body> </html> <script type="module" src="/_astro/open-graph-generator.astro_astro_type_script_index_0_lang.Aj92YbMh.js"></script>

Générateur de balises Open Graph 🔒 Fonctionne localement dans votre navigateur — rien n’est envoyé.

Aperçu du lien

Balises meta générées

À propos de cet outil