Générateur Open Graph
Génère des balises meta Open Graph et Twitter avec aperçu de carte sociale.
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.
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
- Saisissez le titre, la description, l'URL et l'URL de l'image de votre page dans les champs.
- Définissez l'og:type et le style de carte Twitter, puis ajoutez le nom de votre site.
- Vérifiez l'aperçu de carte sociale en direct pour confirmer l'apparence du lien.
- Cliquez sur Copier pour récupérer le HTML ou utilisez Télécharger pour enregistrer meta-tags.html.
- 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
Tous les outils ArrayKit