","err_audit_input_required":"Collez d'abord le code HTML contenant vos balises méta.","mockups_heading":"À quoi cela ressemble en tant qu'aperçu du lien","mockups_disclaimer":"Ces quatre cartes sont des approximations stylisées du chrome d'aperçu de lien réel de chaque plate-forme, conçues uniquement à des fins de planification - elles ne sont pas une récupération en direct ou une capture d'écran de Twitter/X, Facebook, LinkedIn ou Discord, et les plates-formes peuvent remodeler leur propre interface utilisateur d'aperçu au fil du temps.","mockup_twitter_heading":"Twitter/X","mockup_facebook_heading":"Facebook","mockup_linkedin_heading":"LinkedIn","mockup_discord_heading":"Discorde","mockup_image_alt":"Image d'aperçu du lien","mockup_no_image":"Aucune image fournie","mockup_no_image_short":"Aucune image","domain_default_fallback":"exemple.com","audit_missing_title":"Og:titre manquant — la plupart des plateformes affichent un titre générique ou vide sans celui-ci.","audit_missing_description":"og:description manquant — la carte d'aperçu n'affichera aucun texte récapitulatif.","audit_missing_image":"og:image manquant — la plupart des plates-formes n'affichent aucune image ou reviennent à la première image trouvée sur la page.","audit_missing_url":"og:url manquant — sans cela, les partages d'URL alternatives (avec paramètres de suivi, versions AMP, etc.) pourraient ne pas être consolidés sur la page canonique.","audit_title_too_long":"og:title comporte {length} caractères, au-delà du point de caractère ~{max} où la plupart des plates-formes le tronqueront.","audit_title_long":"og:title comporte {length} caractères, au-delà du point de caractère ~{max} où certaines plates-formes commencent à le tronquer, bien qu'il puisse toujours s'afficher entièrement ailleurs.","audit_title_ok":"og:title comporte {length} caractères – dans la plage de sécurité pour la plupart des plates-formes.","audit_description_too_long":"og:description comporte {length} caractères – au-delà du point de ~{max} caractère où la plupart des plates-formes le couperont.","audit_description_long":"og:description comporte {length} caractères – au-dessus du point de caractère ~{max} où certaines plates-formes commencent à le tronquer.","audit_description_ok":"og:description comporte {length} caractères – dans la plage de sécurité pour la plupart des plates-formes.","audit_url_not_absolute":"og:url value \"{value}\" n'est pas une URL http(s) absolue : il doit s'agir de l'URL canonique complète de la page.","audit_image_not_absolute":"og:la valeur d'image \"{value}\" n'est pas une URL http(s) absolue : la plupart des plates-formes nécessitent une URL d'image complète.","audit_image_dims_small":"L'og:image:width/height déclaré est de {w}×{h} – en dessous du minimum largement recommandé de 1 200 × 630 pour les aperçus de liens.","audit_image_dims_ok":"og:image:width/height déclaré est de {w}×{h} – correspond au minimum largement recommandé de 1 200 × 630.","audit_image_dims_unparseable":"og:image:width/og:image:height sont présents mais ne sont pas des nombres valides.","audit_image_dims_unknown":"Non og:image:width/og:image:height déclaré — les dimensions réelles des pixels ne peuvent pas être vérifiées sans récupérer l'image, ce que cet outil ne fait jamais, de par sa conception, pour des raisons de confidentialité. Minimum recommandé : 1200×630.","audit_twitter_card_missing":"Pas de balise twitter:card — Twitter/X reviendra généralement aux balises og: équivalentes, mais une twitter:card explicite est plus fiable.","audit_twitter_card_invalid":"twitter : la valeur de la carte \"{value}\" n'est pas l'une des quatre valeurs acceptées par le validateur de carte Twitter : summary, summary_large_image, app, player.","audit_twitter_card_ok":"twitter:card est \"{value}\", une valeur valide.","audit_large_image_needs_image":"twitter:card est summary_large_image mais aucun og:image ou twitter:image n'a été trouvé — ce type de carte a besoin d'une image pour s'afficher correctement.","audit_twitter_title_fallback":"Aucun twitter:title défini — Twitter/X reviendra à og:title.","audit_twitter_description_fallback":"Aucun twitter:description défini — Twitter/X reviendra à og:description.","audit_twitter_image_fallback":"Aucun ensemble twitter:image — Twitter/X reviendra à og:image.","audit_duplicate_tag_item":"\"{tag}\" est déclaré {count} fois : seule la dernière analyse analysée par la plupart des plates-formes prendra réellement effet."};
⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Générateur de cartes OG et Twitter – Générateur de balises méta, auditeur et aperçu

Créez des balises <meta> Open Graph et Twitter Card prêtes à coller à partir d'un formulaire, ou collez un <head> existant pour le vérifier pour les balises manquantes, la longueur du titre/description et la validité de la carte twitter : - puis prévisualisez les deux dans des maquettes de cartes de liens Twitter/X, Facebook, LinkedIn et Discord véritablement relookées.

Buy Me a Coffee at ko-fi.com
Traitement... 0%
Entrée de lecture
Création/audit de balises
Aperçus du rendu
Terminé

Résultat

Les balises méta Open Graph et Twitter Card décident à quoi ressemble un lien à l'instant où il est collé dans Slack, iMessage, un tweet ou un canal Discord - un titre, une description et une image choisis par le propre <head> de la page, et non par ce que la plate-forme extrait du corps du texte visible. Cet outil est à la fois un constructeur et un auditeur, et non un remplisseur de modèles génériques. En mode CONSTRUCTION, remplissez un titre, une description, une URL d'image, une URL canonique, un type de contenu et un type de carte Twitter, et il compose le bloc de balises exact <meta property="og:..."> et <meta name="twitter:..."> prêt à être collé dans le <head> de votre page, en ignorant tout champ que vous laissez vide plutôt que d'émettre des balises creuses avec un contenu vide.

En mode AUDIT, collez votre balisage <head> existant ou le HTML d'une page entière et l'outil l'analyse avec le DOMParser natif du navigateur pour extraire chaque balise méta og: et twitter: déjà présente, puis exécute les vérifications qui comptent réellement : les quatre balises couramment requises (og:title, og:description, og:image, og:url) sont signalées si elles sont manquantes ; og:title est mesuré par rapport au point d'environ 60 caractères où certaines plates-formes commencent à le tronquer et au point d'environ 90 caractères où la plupart des plates-formes le feront ; og:description est mesurée par rapport à la plage d'environ 155 à 200 caractères autorisée par la plupart des plates-formes avant de la couper ; twitter:card est vérifié par rapport aux quatre valeurs réelles acceptées par le validateur de carte Twitter – 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, un bug de copier-coller étonnamment courant) sont appelées par leur nom.

Les dimensions de l'image bénéficient d'un traitement honnête : cet outil ne peut pas vérifier la taille réelle des pixels de votre image sans la récupérer, et il ne le fait délibérément jamais, conformément à la politique de non-requête externe de ce site. Si votre code HTML déclare déjà og:image:width et og:image:height, ces nombres déclarés sont comparés au minimum largement recommandé de 1 200 × 630 ; sinon, vous obtenez une note d’orientation claire au lieu d’une réussite ou d’un échec fabriqué. Les deux modes affichent les mêmes quatre maquettes d'aperçu de lien - Twitter/X (basculant entre sa disposition miniature compacte "résumé" et sa disposition pleine largeur "summary_large_image" en fonction de la valeur twitter:card), Facebook, LinkedIn et Discord - chacune véritablement relookée pour correspondre à la typographie et aux conventions de mise en page de cette plate-forme plutôt qu'une boîte avec un logo différent, et chacune est clairement étiquetée comme une approximation illustrative à des fins de planification, puisque les véritables plates-formes relookent leur aperçu. chrome au fil du temps et cet outil ne les récupère ni ne les gratte jamais pour les vérifier.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Le mode CONSTRUCTION compose og:title, og:description, og:image, og:url, og:type, og:site_name et les balises twitter:card/twitter:site/twitter:title/description/image correspondantes, en ignorant tout champ laissé vide, avec une copie en un clic du bloc prêt à coller.
  • Le mode AUDIT extrait chaque balise og:/twitter: <meta> du HTML collé via le DOMParser du navigateur, signale les balises obligatoires manquantes (og:title/description/image/url), les balises en double et les valeurs twitter:card non valides.
  • Le guidage en longueur utilise les véritables seuils couramment cités : og:title environ 60 caractères avant que certaines plateformes ne commencent à le tronquer (jusqu'à environ 90 sur les plus permissives), og:description environ 155-200 caractères.
  • Rend la carte Twitter/X dans sa mise en page correcte pour le type de carte déclaré — une carte « résumé » compacte avec une petite vignette carrée, ou la mise en page « summary_large_image » pleine largeur — aux côtés des aperçus Facebook, LinkedIn et Discord.

Avantages clés

✓ Deux vrais outils en un : un mode BUILD qui génère exactement la balise HTML og: et twitter : <meta> à partir d'un formulaire, et un mode AUDIT qui analyse le HTML collé pour rechercher et noter vos balises existantes.
✓ Véritable validation, pas une liste de contrôle cosmétique : balises requises manquantes, longueur og:title/og:description vérifiée par rapport aux limites réelles auxquelles les plates-formes sont tronquées et twitter:card vérifié par rapport à ses quatre valeurs réelles autorisées.
✓ Honnête sur ce qui ne peut pas être vérifié hors ligne : les dimensions en pixels de l'image sont fournies à titre indicatif uniquement, sauf si votre code HTML déclare déjà og:image:width/og:image:height, car cet outil ne récupère jamais votre image - de par sa conception, pour des raisons de confidentialité.
✓ Quatre maquettes de plate-forme véritablement différentes (mises en page résumé de Twitter/X vs résumé_large_image, Facebook, LinkedIn, Discord) construites à partir du même titre/description/image, clairement étiquetées comme illustratives.

Cas d'utilisation

  • • Envoyez un nouveau billet de blog avec les cartes sociales appropriées : remplissez le titre, la description et une image de couverture hébergée, générez le bloc de balises og:/twitter: et collez-le directement dans le <head> de la page.
  • • Auditez le <head> d'une page de destination existante après une migration vers un CMS pour détecter un og:image manquant, un og:title suffisamment long pour être tronqué sur certaines plates-formes, ou une valeur twitter:card non valide.
  • • Comparez la façon dont le même titre et la même image sont lus dans la carte récapitulative compacte de Twitter/X par rapport à sa disposition summary_large_image pleine largeur avant de décider quel type de twitter:card déclarer.