Pulsars

Générateur de Balises Meta OG & Twitter Card

Champs des balises meta

Recommandé : 1200×630px (ratio 1.91:1)

Prévisualisation en direct

Recherche Google
example.com
Page Title
Page description will appear here...
Twitter / X
No image
Title
Description
example.com
Facebook / LinkedIn
No image
EXAMPLE.COM
Title
Description
iMessage
No image
Title
Description

HTML généré

<!-- Open Graph -->
<meta og-attr">property="og:type" og-attr">content="website" />
 
<!-- Twitter Card -->
<meta og-attr">name="twitter:card" og-attr">content="summary_large_image" />
Vos URLs et contenus restent dans votre navigateur. Rien n’est stocké ni partagé.

Les balises Open Graph (OG) sont un protocole créé par Facebook en 2010, devenu le standard pour contrôler l'apparence d'un lien partagé sur les réseaux sociaux. Les quatre balises essentielles — og:title, og:description, og:image et og:url — déterminent le titre, la description, l'image et l'URL canonique affichés dans les previews sur Facebook, LinkedIn, iMessage et WhatsApp. Twitter utilise un système parallèle (Twitter Cards) avec les balises twitter:card, twitter:title et twitter:image. La taille d'image recommandée est 1200×630 pixels (ratio 1.91:1) pour un affichage optimal sur toutes les plateformes.

Qu'est-ce que le protocole Open Graph et à quoi sert-il ?

Open Graph est un protocole créé par Facebook en 2010 qui transforme n'importe quelle page web en un objet riche dans un graphe social. Quand quelqu'un partage votre URL, la plateforme lit vos balises OG pour générer une carte de prévisualisation avec un titre, une description et une image. Sans ces balises, les plateformes devinent (mal) ou affichent un lien générique. Les balises OG sont supportées par Facebook, LinkedIn, Pinterest, Slack, Discord, Telegram, iMessage et de nombreuses autres plateformes.

Quels sont les différents types de Twitter Card ?

Twitter supporte deux types de cartes principaux : summary (petite image carrée à côté du texte) et summary_large_image (grande image au-dessus du texte). Il existe aussi les types app et player pour les applications mobiles et le contenu vidéo/audio, mais summary_large_image est le choix le plus courant pour les articles, billets de blog et landing pages.

Quelles sont les tailles d'images optimales pour le partage social ?

Plateforme Taille recommandée Ratio
Facebook / LinkedIn 1200 × 630 px 1.91:1
Twitter summary_large_image 1200 × 628 px ~2:1
Twitter summary 144 × 144 px min 1:1
iMessage 1200 × 630 px 1.91:1

Besoin de formater les données structurées de votre page ? Essayez notre formateur JSON pour la validation JSON-LD, ou notre décodeur JWT pour le débogage de tokens API.

Questions fréquentes

Que sont les balises Open Graph ?

+

Les balises Open Graph (OG) sont des balises meta HTML qui contrôlent l'apparence de votre page quand elle est partagée sur les réseaux sociaux comme Facebook, LinkedIn, Twitter et les applications de messagerie. Elles définissent le titre, la description, l'image et l'URL affichés dans la carte de prévisualisation. Sans balises OG, les plateformes devinent quoi afficher — souvent avec de mauvais résultats.

Quelle est la différence entre og:title et la balise title HTML ?

+

La balise HTML <title> est utilisée par les moteurs de recherche pour l'affichage dans les SERP. og:title est utilisé spécifiquement pour les prévisualisations sur les réseaux sociaux. Ils peuvent être différents — votre balise title peut inclure le nom de marque (ex. « Guide React | MonBlog »), tandis que og:title peut être plus engageant pour le partage social.

Quelle taille d'image utiliser pour Open Graph ?

+

La taille recommandée est 1200×630 pixels (ratio 1.91:1) pour Facebook et LinkedIn. Le format summary_large_image de Twitter utilise un ratio similaire de 2:1 (1200×628px). Pour le type summary, utilisez au minimum 144×144px. Utilisez le format PNG ou JPG et gardez la taille du fichier sous 5 Mo.

Quelle est la différence entre summary et summary_large_image sur Twitter ?

+

La carte « summary » affiche une petite vignette carrée à côté du titre et de la description. La carte « summary_large_image » affiche une grande image au-dessus du texte, prenant beaucoup plus de place dans le fil. Utilisez summary_large_image quand votre contenu a un visuel fort (articles, produits, portfolios).

Faut-il les balises OG et les balises Twitter Card ?

+

Twitter se rabat sur les balises OG si aucune balise Twitter spécifique n'est présente. Cependant, pour un contrôle optimal, incluez les deux. Les balises Twitter (twitter:card, twitter:title, etc.) ont priorité sur les balises OG sur Twitter/X. Facebook, LinkedIn et iMessage n'utilisent que les balises OG.

Outils connexes

📋
JSON Formatter & Validator
Format, validate, beautify, and minify JSON instantly. Syntax error detection with line numbers.
🔑
JWT Decoder
Decode JSON Web Tokens instantly. Inspect header, payload, claims, and expiration — 100% client-side.