Générateur de cartes OG & Twitter — Créateur, auditeur et aperçu de balises meta
Créez des balises <meta> Open Graph et Twitter Card prêtes à coller à partir d'un formulaire, ou collez un <head> existant pour l'auditer à la recherche de balises manquantes, vérifier la longueur du titre et de la description, ainsi que la validité du twitter:card, puis prévisualisez le résultat dans des maquettes de cartes de lien Twitter/X, Facebook, LinkedIn et Discord au style fidèlement reproduit.
🔒 Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
Les balises meta Open Graph et Twitter Card déterminent l'apparence d'un lien à l'instant même où il est collé dans un canal Slack, iMessage, un tweet ou Discord — un titre, une description et une image choisis par le <head> de la page elle-même, et non par ce que la plateforme pourrait récupérer du texte visible. Cet outil est à la fois un créateur et un auditeur, pas un simple modèle à remplir. En mode CRÉATION, remplissez un titre, une description, l'URL de l'image, l'URL canonique, le type de contenu et le type de carte Twitter, et il compose le bloc exact de balises <meta property="og:..."> et <meta name="twitter:..."> prêt à être collé dans le <head> de votre page, en sautant tout champ que vous laissez vide plutôt qu'en émettant des balises vides avec un contenu absent.
En mode AUDIT, collez votre balisage <head> existant ou le code HTML complet d'une page, et l'outil l'analyse avec le DOMParser natif du navigateur pour extraire chaque balise meta og: et twitter: déjà présente, puis exécute les vérifications qui comptent vraiment : les quatre balises communément requises (og:title, og:description, og:image, og:url) sont signalées si elles sont absentes ; og:title est mesuré par rapport au seuil d'environ 60 caractères où certaines plateformes commencent à le tronquer et au seuil d'environ 90 caractères où la plupart le feront ; og:description est mesuré par rapport à la fourchette d'environ 155 à 200 caractères que la plupart des plateformes autorisent avant de le couper ; twitter:card est vérifié par rapport aux quatre valeurs réelles que le validateur de cartes Twitter accepte — summary, summary_large_image, app, player — et signalé s'il s'agit d'autre chose ; et les balises en double (la même propriété déclarée deux fois, une erreur de copier-coller étonnamment fréquente) sont signalées par leur nom.
Les dimensions de l'image sont traitées avec honnêteté : cet outil ne peut pas vérifier la taille réelle en pixels de votre image sans la récupérer, et il ne le fait délibérément jamais, conformément à la politique de ce site de n'effectuer aucune requête externe. Si votre HTML déclare déjà og:image:width et og:image:height, ces valeurs déclarées sont comparées au minimum largement recommandé de 1200×630 ; sinon, vous recevez une note d'information claire au lieu d'une réussite ou d'un échec fabriqué. Les deux modes affichent les quatre mêmes maquettes d'aperçu de lien — Twitter/X (basculant entre sa mise en page compacte avec vignette « summary » et sa mise en page pleine largeur « summary_large_image » selon la valeur de twitter:card), Facebook, LinkedIn et Discord — chacune fidèlement restylée pour correspondre aux conventions typographiques et de mise en page propres à chaque plateforme, plutôt qu'une seule boîte avec un logo différent, et chacune est clairement indiquée comme une approximation illustrative à des fins de planification, car les plateformes réelles font évoluer l'apparence de leurs aperçus au fil du temps et cet outil ne les interroge ni ne les scrape jamais pour vérifier.