Générateur de Meta Tags OG en Ligne
Génère les balises Open Graph et Twitter Card. Prévisualise comment ton lien apparaîtra sur les réseaux sociaux.
<!-- Open Graph --> <meta property="og:title" content="My Website — Main Title"> <meta property="og:description" content="My website description for social media."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="My Site"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Website — Main Title"> <meta name="twitter:description" content="My website description for social media."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
Pourquoi l'utiliser
Contrôle l'apparence de ton site quand il est partagé sur les réseaux sociaux
Aperçu réel
Vois exactement comment ton lien apparaîtra avant de le publier.
Toutes les plateformes
Facebook, LinkedIn, Twitter, WhatsApp et Telegram en une seule étape.
Code prêt à copier
Balises HTML générées correctement. Colle dans ton head et c'est prêt.
Sans inscription
Génère et teste tes meta tags sans créer de compte.
Comment ça marche
Trois étapes, sans complications
Saisis les données de ta page
Renseigne le titre, la description, l'URL et l'image de ta page. Ce sont les informations que les utilisateurs verront quand ton lien sera partagé.
Choisis les réseaux sociaux
Indique si tu as besoin d'Open Graph (Facebook, LinkedIn, WhatsApp), de Twitter Card, ou des deux. Personnalise les champs spécifiques à chaque plateforme.
Copie le code HTML
Copie les balises meta générées et colle-les dans le head de ton HTML. Vérifie le résultat avec Facebook Debugger ou Twitter Card Validator.
FAQ
Des questions ?
Open Graph Protocol est un protocole web créé par Facebook (présenté à la conférence F8 en 2010) qui permet à n'importe quelle page web de devenir un objet riche dans le graphe social. En incluant des balises meta og: dans le head de ton HTML, tu contrôles exactement le titre, la description et l'image qui apparaissent quand quelqu'un partage ton lien sur Facebook, LinkedIn, WhatsApp, Telegram et la plupart des plateformes sociales. Sans ces balises, les plateformes tentent de deviner le contenu avec des résultats imprévisibles.
Les quatre propriétés de base obligatoires sont : og:title (titre de l'objet), og:type (type d'objet : website, article, product...), og:image (URL de l'image de prévisualisation) et og:url (URL canonique de la page). Propriétés optionnelles mais importantes : og:description, og:site_name, og:locale (ex. fr_FR), og:image:width et og:image:height (pour éviter les reflows au chargement). Pour les articles, og:type=article active des propriétés supplémentaires : article:author, article:published_time, article:section.
Facebook dispose du Sharing Debugger (developers.facebook.com/tools/debug) qui rend exactement comment ton URL apparaîtra lorsqu'elle est partagée et permet de forcer un rafraîchissement du cache. Twitter a le Card Validator (cards-dev.twitter.com/validator). LinkedIn a le Post Inspector (linkedin.com/post-inspector). Pour le développement local, des outils comme ngrok ou localtunnel exposent ton localhost pour que les debuggers externes puissent y accéder. Souviens-toi que les plateformes mettent les métadonnées en cache — si tu changes les balises, utilise les outils de débogage pour invalider le cache.
Les dimensions recommandées par Facebook et la plupart des plateformes sont 1200x630 pixels (ratio 1.91:1). Cette résolution est suffisante pour les écrans Retina et s'adapte bien à toutes les tailles d'aperçu. La taille minimale acceptée est 200x200 px. Facebook rejette les images inférieures à 200x200 ou supérieures à 8 Mo. Twitter exige un minimum de 300x157 px pour summary_large_image et un maximum de 4096x4096 px avec une limite de 5 Mo. Pour WhatsApp, l'image doit être carrée (1:1) pour les aperçus dans les discussions de groupe.
Open Graph (og:) est un protocole ouvert adopté par la plupart des plateformes sociales. Twitter Cards (twitter:) sont spécifiques à Twitter/X et offrent des types supplémentaires : summary, summary_large_image, app et player. Si tu définis des balises og:, Twitter les utilise comme fallback en l'absence de balises twitter:. La recommandation est de définir les deux ensembles pour une compatibilité maximale. Les champs clés de Twitter Card sont twitter:card (type de carte), twitter:site (compte Twitter du site), twitter:creator (compte de l'auteur) et twitter:image (peut différer de og:image pour optimiser les dimensions).
Open Graph Protocol : histoire, Schema.org et robots des réseaux sociaux
Open Graph Protocol a été présenté par Facebook lors de la conférence F8 le 21 avril 2010. L'objectif était de transformer n'importe quelle page web en un objet de première classe dans le graphe social de Facebook, à l'image des pages d'artistes, de films et de lieux qui disposaient déjà d'une structure de données riche. Le protocole s'est inspiré de RDFa (Resource Description Framework in Attributes), une extension HTML pour les données structurées, mais simplifié pour une adoption massive. Le nom et le domaine ogp.me ont été enregistrés le même jour. Depuis son lancement, Open Graph a été adopté par LinkedIn (2011), Twitter comme fallback (2012), WhatsApp (2013) et pratiquement toutes les plateformes sociales et de messagerie pertinentes.
La relation entre Open Graph et Schema.org est complémentaire mais parfois confuse. Schema.org (lancé en 2011 par Google, Bing et Yahoo) définit un vocabulaire de données structurées pour les moteurs de recherche, implémenté via JSON-LD (recommandé), Microdata ou RDFa. Open Graph est optimisé pour les aperçus de liens sur les réseaux sociaux. Une page devrait avoir les deux : Schema.org pour le SEO et les Featured Snippets, et Open Graph pour le partage social. Google utilise og:title et og:description comme signaux secondaires pour son index, mais JSON-LD Schema.org a plus de poids. Les robots sociaux (facebookexternalhit, Twitterbot, LinkedInBot) ne lisent que les balises og:, pas le JSON-LD.
Les robots des réseaux sociaux ont des caractéristiques techniques importantes pour les développeurs. Le user-agent facebookexternalhit/1.1 indique que Facebook traite l'URL pour générer un aperçu. Ces robots n'exécutent PAS de JavaScript — ils ne traitent que le HTML statique du serveur. Cela signifie que les applications React/Vue/Angular avec rendu côté client (CSR) sans SSR ni SSG n'auront pas de métadonnées OG correctes, car les balises meta sont générées dynamiquement côté client. La solution est le Server-Side Rendering (Next.js, Nuxt), la génération statique, ou un service de pre-rendering (Prerender.io, rendertron) qui sert du HTML pré-rendu aux robots des réseaux sociaux.