Générateur Open Graph

Générateur Open Graph qui crée les balises meta OG et Twitter Card avec un aperçu de carte sociale en direct.

Vos valeurs de champs sont transformées en balises meta localement dans votre navigateur, et rien de ce que vous saisissez n'est envoyé vers un serveur.

Conçu et maintenu par Udit Agarwal

Besoin d'inspecter les parties d'un lien ? Essayez l'analyseur d'URL.

À propos de Générateur Open Graph

Ce générateur open graph crée les balises meta Open Graph et Twitter Card dont vos pages ont besoin pour afficher de riches aperçus de liens sur les plateformes sociales. Renseignez le titre, la description, l'URL canonique, l'og:image, le type, le nom du site et le style de carte Twitter, puis regardez un aperçu de carte sociale en direct se mettre à jour au fur et à mesure que vous tapez avant de copier le HTML terminé. C'est pratique pour les développeurs, marketeurs et équipes de contenu qui veulent des balises meta sociales correctes sans écrire chaque propriété à la main. En tant que générateur de balises meta og et générateur de twitter card, il couvre les balises og:image courantes et les balises meta sociales pour que les liens partagés sur Facebook, LinkedIn, Slack et X soient soignés. Tout s'exécute localement dans votre navigateur, vos saisies sont donc traitées sur votre appareil et rien n'est envoyé vers un serveur.

Fonctionnalités

• Génère les balises Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name)
• Ajoute les balises Twitter Card correspondantes (twitter:card, title, description, image)
• Aperçu de carte sociale en direct qui se met à jour au fur et à mesure que vous tapez
• Produit un bloc meta HTML propre et prêt à copier
• Échappe correctement les caractères spéciaux dans les titres, descriptions et URL
• Vous laisse choisir l'og:type et le style de twitter:card (comme summary_large_image)
• Copiez dans le presse-papiers ou téléchargez les balises sous meta-tags.html
• Ignore les champs vides pour que le balisage généré reste net

Comment utiliser Générateur Open Graph

1. Saisissez le titre, la description, l'URL et l'URL de l'image de votre page dans les champs.
2. Définissez l'og:type et le style de carte Twitter, puis ajoutez le nom de votre site.
3. Vérifiez l'aperçu de carte sociale en direct pour confirmer l'apparence du lien.
4. Cliquez sur Copier pour récupérer le HTML ou utilisez Télécharger pour enregistrer meta-tags.html.
5. Collez les balises générées dans la section <head> de votre page.

Exemple

Entrée

title: Jour de lancement
url: https://acme.dev/launch
image: https://acme.dev/og.png

Sortie

<title>Jour de lancement</title>
<!-- Open Graph -->
<meta property="og:title" content="Jour de lancement" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.dev/launch" />
<meta property="og:image" content="https://acme.dev/og.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Jour de lancement" />
<meta name="twitter:image" content="https://acme.dev/og.png" />

Les champs vides sont omis, et og:type prend website par défaut.

Erreurs courantes et dépannage

• L'og:image n'apparaît pas dans les aperçus sur Facebook ou LinkedIn. — Utilisez une URL absolue complète (https://...) pour l'image, pas un chemin relatif, et assurez-vous que l'image est accessible publiquement.
• Twitter affiche une petite image au lieu d'une grande carte. — Définissez la valeur twitter:card sur summary_large_image pour que les plateformes affichent la mise en page d'image pleine largeur.
• Le titre ou la description semble coupé dans l'aperçu. — Gardez les titres autour de 60 caractères et les descriptions autour de 110-160 caractères pour que les plateformes ne les tronquent pas.
• Les caractères spéciaux comme & ou < cassent le balisage. — Tapez les caractères bruts ; le générateur les échappe automatiquement en entités HTML valides dans la sortie.
• Les plateformes affichent encore l'ancien aperçu après la mise à jour des balises. — Réanalysez l'URL avec le débogueur de la plateforme (comme le Facebook Sharing Debugger) pour vider l'aperçu mis en cache.

Foire aux questions

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

Le générateur Open Graph est un outil qui produit un bloc HTML prêt à coller de balises meta Open Graph et Twitter Card construites à partir de votre titre, description, URL, image, type et nom de site.

Comment utiliser le générateur Open Graph pour créer des balises meta ?

Renseignez le titre, la description, l'URL canonique, l'og:image, le type et le nom du site de votre page, regardez l'aperçu en direct se mettre à jour, puis cliquez sur Copier ou Télécharger et collez les balises dans le <head> de votre page.

Quelle est la différence entre les balises Open Graph et Twitter Card ?

Les balises Open Graph (og:) sont lues par Facebook, LinkedIn, Slack et bien d'autres, tandis que les balises twitter: sont spécifiques à X/Twitter. Cet outil produit les deux pour que les aperçus fonctionnent partout.

Quelle taille d'og:image fonctionne le mieux ?

Une image de 1200x630 pixels avec une URL absolue est le choix sûr pour les cartes summary_large_image sur la plupart des plateformes.

Pourquoi mes modifications n'apparaissent-elles pas quand je partage le lien ?

Les plateformes sociales mettent les aperçus en cache, collez donc votre URL dans leur débogueur de partage pour forcer une nouvelle analyse après la mise à jour des balises meta.

Mes saisies restent-elles privées dans le générateur Open Graph ?

Oui. Les balises sont construites localement dans votre navigateur, vos données ne quittent jamais votre appareil, et rien de ce que vous saisissez n'est envoyé vers un serveur.

Outils associés

• Formateur HTML — Embellit ou minifie le HTML, met en forme le CSS/JS en ligne et prévisualise le résultat.
• Analyseur d’URL — Décompose une URL en ses parties et liste les paramètres de requête.
• Encoder / Décoder URL — Encode et décode des composants d’URL.
• Échapper / Déséchapper HTML — Échappe et déséchappe les caractères spéciaux et entités HTML.
• Générateur de code QR — Génère un code QR à partir d’un texte ou d’une URL ; téléchargez-le en PNG ou SVG.
• Aperçu Markdown — Rend le Markdown en HTML avec un aperçu en direct.
• Convertisseur de format d’image — Convertit les images entre PNG, JPEG et WebP entièrement dans votre navigateur.

Plus d’outils Web et DevOps

• Générateur robots.txt — Construisez un robots.txt avec règles User-agent et sitemaps.
• Générateur de sitemap XML — Transformez une liste d’URL en un sitemap.xml conforme.
• Générateur .htaccess — Activez des règles Apache : HTTPS, redirections, gzip et cache.
• Générateur de config nginx — Construisez un bloc serveur nginx avec proxy, SSL et gzip.
• Calculateur semver — Analysez, comparez, vérifiez les plages et incrémentez des versions sémantiques.
• Générateur d’en-tête Cache-Control — Construisez un en-tête HTTP Cache-Control correct à partir de simples interrupteurs et d’unités de temps lisibles.
• Générateur de balises meta — Construit des balises SEO, Open Graph et Twitter Card depuis un formulaire.
• Générateur CSP — Construit un en-tête Content-Security-Policy avec extraits meta, nginx et Apache.
• Générateur htpasswd — Crée une ligne .htpasswd en bcrypt ou SHA-1 pour Apache et nginx.
• Générateur de couleurs Tailwind — Transforme une couleur de marque en échelle Tailwind 50-950 en OKLCH avec contraste WCAG par nuance.
• Générateur CSS Grid — Construit une grille CSS visuellement et copie le grid-template avec les placements, dans votre navigateur.
• Calculateur CSS clamp — Transforme une taille min/max et deux largeurs de fenêtre en une valeur clamp() fluide, localement.

Voir tous les outils Web et DevOps (27) · Tous les outils