Aperçu Open Graph

Colle une URL publique pour prévisualiser ses cartes sociales Open Graph et Twitter ou X, voir quel champ alimente la carte, mesurer l'image et obtenir un plan d'action.

Cet outil d'aperçu Open Graph récupère les métadonnées sociales en direct de n'importe quelle URL publique, puis te montre ce que les plateformes vont vraiment en construire. Il lit les balises Open Graph, les fallbacks Twitter ou X, et le titre, la description et la canonique SEO classiques, et il les pose dans une seule matrice de champs pour que tu voies quel signal gagne. Il choisit le titre, la description et l'image selon la priorité de source que tu décides, dessine le résultat en carte large et en carte compacte, et mesure l'image choisie directement dans le navigateur quand il arrive à la charger. Tu obtiens aussi un brouillon de carte modifiable, une synthèse notée, une liste de corrections priorisée et un rapport copiable. Prévisualise d'abord le lien canonique, confirme que les champs Open Graph existent au lieu de rouler sur un fallback de titre, et vérifie les deux recadrages avant de publier.

Les requêtes passent par le service de lookup PeopleAreGeek. Nous ne journalisons rien.

Labo d'audit et d'aperçu de carte sociale en direct

J'ai déjà mis en ligne des pages qui rendaient nickel partout, sauf au seul endroit qui comptait : le lien que quelqu'un balance dans Slack. Du coup, colle une URL publique ici. Je vais récupérer ses balises Open Graph et Twitter/X, te montrer quel champ alimente vraiment la share card, et mesurer l'image quand le navigateur me laisse faire. Ensuite je dessine le résultat de trois façons (une carte large, une compacte, et un brouillon que tu peux trifouiller). Tout ça avant de cliquer sur Publier et de l'apprendre à tes dépens.

URL à prévisualiser

Source de l'aperçu

Chaque plateforme recadre, met en cache et attrape ses métadonnées un peu différemment. J'ai construit ça pour mettre ces choix au grand jour, histoire que tu repères le signal faible et que tu le corriges avant que personne ne voie la carte.

Ce qu'un aperçu Open Graph vérifie vraiment

Un aperçu Open Graph, c'est la petite vitrine que ton URL traîne dans le fil ou les DM de quelqu'un. Un titre. Une ligne de description. Un lien et une image. Quatre éléments, et ça reste aussi simple que ça jusqu'au moment où tu te rends compte que la page jongle avec une balise title, un og:title, un titre Twitter, une URL canonique, une poignée d'images, plus un cache de plateforme qui sert encore fièrement la version d'hier.

C'est ce bazar que je voulais démêler. Donc l'outil pose côte à côte les champs Open Graph, les fallbacks Twitter/X et les champs SEO classiques, puis construit la carte selon plusieurs priorités de source. C'est comme ça que tu découvres si tes vraies balises sociales font le boulot. Ou si la carte n'a l'air correcte que parce que le titre de la page et la meta description l'ont discrètement sauvée.

Des bonnes métadonnées sociales, c'est précis

Les cartes qui décrochent vraiment un clic ne récitent pas un slogan de site flou. Elles nomment la page et te donnent une vraie raison de l'ouvrir, en s'appuyant sur une image qui reste lisible une fois que le recadrage l'a bien mâchée. Pour un outil, franchement, j'écrirais un titre clair sur la tâche, une ligne qui promet ce que tu obtiens, et une image d'aperçu avec un contraste correct et zéro texte microscopique. Pour un guide, c'est pareil. Le sujet et le bénéfice devraient atterrir avant même que le doigt ne bouge.

Open Graph title : décris la page que tu partages, pas juste la marque sur la porte.
Open Graph description : écris-la comme le ferait une vraie personne, pas comme un tas de mots-clés qui prient pour un clic.
Open Graph image : choisis-en une qui survit à la fois à un recadrage large et à un aperçu de la taille d'une vignette.
Open Graph type : un petit indice, d'accord, mais il dit aux plateformes quel genre de chose elles affichent.
Twitter card fields : ces champs lèvent le doute partout où Twitter/X lit ses propres balises directement.

Les contrôles d'image ont besoin de contexte

Les dimensions, c'est la chose facile à vérifier. Mais ce n'est pas toute l'histoire. J'ai vu une image parfaitement énorme se planter quand même parce que le texte clé collait à un bord de recadrage, ou que le sujet était flou, ou que quelqu'un avait livré la bannière générique du site au lieu de quoi que ce soit lié à la page réelle. Donc l'outil mesure l'image choisie chaque fois que le navigateur veut bien la charger, et il garde l'URL de l'image et la source de fallback bien à l'écran. Quand un aperçu disparaît ou se fait bloquer, tu veux savoir pourquoi en quelques secondes, pas après vingt minutes à plisser les yeux sur le view-source.

Un workflow de partage concret

Commence par prévisualiser l'URL publique canonique. Celle exacte que tu t'apprêtes à balancer dans une campagne ou un fil de communauté.
Confirme que les champs Open Graph existent réellement, au lieu de rouler en douce sur un fallback de titre de page.
Regarde l'image dans la mise en page large et dans la compacte, parce qu'elles recadrent différemment et l'une des deux va te trahir.
Compare le titre et la description sociaux au snippet de recherche, pour que la promesse que tu fais corresponde à la page vers laquelle tu envoies les gens.
Une fois que tu as corrigé un truc, laisse du temps. Quelques plateformes continueront à servir l'ancienne carte un moment, quoi que tu fasses.

Questions fréquentes

L'Open Graph, c'est seulement pour Facebook ?

Non. Facebook l'a lancé, mais aujourd'hui toutes sortes de choses lisent l'Open Graph : applis de chat, dérouleurs de liens, le petit aperçu que l'outil de projet de ton équipe assemble. Elles ne se comportent pas toutes pareil, par contre. C'est toute la raison pour laquelle tu veux des fallbacks corrects en place.

Une page peut-elle se partager sans image Open Graph ?

Oui, mais la carte finit en général par avoir l'air maigre, et ce que tu obtiens change d'une plateforme à l'autre. Choisis une image délibérée et la carte se lit mieux au premier coup d'oeil. En plus, quand quelque chose casse, tu as une variable de moins à courir après.

Quelles balises Open Graph sont essentielles ?

Quatre, en vrai : og:title, og:description, og:image et og:url. Saute og:image et la plateforme attrape juste une image au pif sur la page (ou rien du tout), et voilà, plus aucune raison de cliquer pour qui que ce soit.

Quelle est la taille d'image Open Graph recommandée ?

Par défaut, je pars sur 1200 par 630 pixels. Ce ratio de 1.91:1 passe bien sur Facebook, LinkedIn, et à peu près partout ailleurs. Garde le fichier sous environ 5 Mo, et rends l'URL absolue, jamais relative. Le coup du chemin relatif, c'est celui que je vois faire trébucher les gens le plus souvent.

Pourquoi mon aperçu de lien ne se met-il pas à jour après que j'ai changé les balises ?

Parce que les plateformes mettent ça en cache à fond. Tu as changé les balises ; leur copie n'a jamais reçu le mémo. Passe la page dans le sharing debugger de la plateforme elle-même pour forcer un nouveau scrape. Sinon la carte périmée peut traîner pendant des jours, et ouais, c'est rageant.