En bref: pour vérifier Open Graph en ligne, collez l’adresse de la page dans l’outil gratuit de débogage Open Graph PromoPilot. Il analysera toutes les balises og:* et Twitter Card, vérifiera la présence et la taille de l’image, évaluera l’intégralité du balisage et affichera des aperçus des liens pour Facebook, Twitter et LinkedIn, ainsi que des recommandations sur les éléments à ajouter. Aucune inscription n’est requise. Vous trouverez ci-dessous les balises obligatoires, la taille requise pour og:image et la procédure pour mettre à jour un aperçu bloqué.
Je crée des sites web depuis 12 ans, et j'entends plus souvent mes clients me demander « Pourquoi Telegram n'a-t-il pas d'image?» que des questions sur le référencement. En général, ça ne prend que cinq minutes, si on sait où chercher.
Que vérifie Open Graph Debugger?
Lorsque vous insérez un lien dans une publication ou un message, la plateforme accède à la page et recherche les balises Open Graph. Si elle en trouve une, elle génère une fiche personnalisée. Sinon, elle utilise l'URL disponible ou affiche simplement l'URL. L'outil vérifie uniquement les informations que les réseaux sociaux peuvent lire.
| Que vérifie-t-il? | Que regarde-t-il? | Pourquoi les entreprises ont-elles besoin de cela? |
|---|---|---|
| Toutes les balises og:* | og:titre, og:description, og:image, og:url, og:type, og:nom_site, og:locale | À partir de ces données, les sites recueillent le titre, la description et l'image de la carte. |
| Carte Twitter | twitter:card, twitter:title, twitter:description, twitter:image | X (Twitter) lit ses tags, et s'ils sont absents, partiellement og |
| Image originale | Y a-t-il une photo et quelle est sa taille? | La petite image transforme la carte en une minuscule icône sur le côté. |
| Évaluation de l'exhaustivité | Combien de tags recommandés sont renseignés? | Référence rapide: tout est en place? |
| Aperçus du réseau | Cartes pour Facebook, X et LinkedIn | Vous pouvez voir à quoi ressemblera l'article avant sa publication. |
| Recommandations | Que dois-je ajouter ou corriger? | Une liste de tâches toute prête pour un développeur ou pour vous |
Comment consulter les pages Open Graph en ligne?
- Ouvrir le débogueur Open Graph.
- Saisissez l'URL de la page que vous souhaitez partager: un article, un produit ou une page de destination publicitaire. Cliquez sur « Vérifier».
- Examinez la liste des balises: lesquelles sont définies, lesquelles sont vides et s’il existe une adresse étrangère ou de test dans og:url.
- Vérifiez l'aperçu pour chaque réseau: le titre est-il coupé, l'image est-elle visible et y a-t-il du texte important autour des bords?
- Veuillez ajouter les balises manquantes comme recommandé et vérifier à nouveau la page.
Page de l'outil: champ d'adresse, bouton « Vérifier», liste des vérifications et FAQ.
Cet outil est simple d'utilisation: une limite journalière suffit à un visiteur pour consulter tous les modèles du site (page d'accueil, catégories, produits et articles). Après une inscription gratuite, cette limite est triplée.
Quelles sont les erreurs les plus fréquentes dans Open Graph?
Voici ce que je trouve sur presque tous les autres sites, et dans quel ordre il faut le corriger.
- L'attribut og:image est absent ou l'URL est relative. Les réseaux sociaux ne comprennent pas
content="/img/cover.jpg": l'URL complète, commençant parhttps://est indispensable. Sans image, la portée de la publication diminue considérablement. - L'image est trop petite. Le logo de 200 x 200 pixels transforme la carte en un petit carré sur le côté. Il faut une image de 1200 x 630 pixels.
- Une seule image og:image pour l'ensemble du site. Chaque article et chaque produit sur les réseaux sociaux doit afficher le même logo. Pour le blog et le catalogue, l'image doit être extraite de la photo principale de la page.
- og:url redirige vers une autre adresse: la page d’accueil, un domaine de test ou la version
http://. La plateforme peut regrouper tous les liens sur une seule page. - Il n'existe pas de twitter:card. Sans cela, X affiche souvent une petite carte. Pour une image plus grande, vous avez besoin
summary_large_image. - La balise og:title duplique le titre en y ajoutant « acheter» et la marque. Sur les réseaux sociaux, cela ressemble à une publicité; un titre percutant, comme celui d'une publication, est préférable.
L'ensemble minimal correct ressemble à ceci:
<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">Comment préparer une image pour og:image?
L'image est l'élément le plus visible de la carte, et c'est souvent là que l'on néglige son aspect. Voici quelques règles que je suis:
- La photo mesure 1200 × 630 pixels et est au format paysage. Le réseau social recadre le haut et le bas de la photo carrée, ce qui peut entraîner l'absence d'une partie visible (tête ou semelle).
- L'important est le centre. Le rognage varie selon les plateformes, et sur mobile, la carte est encore plus petite. Veillez à ce que le texte soit grand et éloigné des bords.
- Texte minimal. Le titre figure déjà sous l'image; 3 à 6 mots, voire aucune légende, suffisent sur l'image elle-même.
- Fichier léger. Un fichier JPG ou PNG de taille raisonnable se chargera rapidement et la plateforme ne subira pas de délai d'attente.
- Une image dédiée pour chaque page clé. Pour les articles et les produits, il est pratique d'en créer une automatiquement: une image de couverture ou la photo principale du produit.
Un bon test consiste à ouvrir l'aperçu dans le débogueur de votre téléphone. Si le lien n'est pas net sans zoomer, l'image doit être retravaillée.
Comment mettre à jour une ancienne version préliminaire après une correction?
Scénario fréquent: vous avez corrigé les balises, mais le réseau social affiche obstinément l’ancienne image. La raison? Le cache: la plateforme conserve en mémoire l’aperçu du premier partage. Sur Facebook récupérer les données dans l’outil de débogage de partage peut aider; sur LinkedIn, avec l’inspecteur de publications; et sur Telegram, avec le bot @WebpageBot auquel vous envoyez le lien. En dernier recours, ajoutez un paramètre anodin à l’adresse, comme ?v=2: pour la plateforme, il s’agit d’un nouveau lien.
Comparaison: Débogueur Open Graph et alternatives
| Outil | Qu'est-ce qui est gratuit? | Restrictions | À qui convient-il? |
|---|---|---|---|
| PromoPilot - Débogueur Open Graph | Toutes les balises og et Twitter, taille des images og, aperçus pour Facebook, X et LinkedIn, recommandations | Ne vide pas le cache des réseaux sociaux | Vérifiez votre page immédiatement avant de la publier sur les réseaux sociaux. |
| Partage du débogueur (Méta) | Aperçu et collecte de données Facebook | Connexion à un compte Facebook uniquement. | Réinitialiser l'ancien aperçu sur Facebook |
| Inspecteur de publications LinkedIn | Aperçu et actualisation du cache LinkedIn | Accès réservé aux utilisateurs LinkedIn, connexion requise | Pour ceux qui font de la promotion sur LinkedIn |
| @WebpageBot sur Telegram | Mise à jour de l'aperçu du lien dans Telegram | Seul Telegram ne prend pas en compte les balises | Pour les propriétaires de chaînes Telegram |
Conclusion: les débogueurs officiels des plateformes sont nécessaires pour vider le cache, mais chaque plateforme n’affiche que son propre réseau. Pour visualiser tous les aperçus et la liste des balises manquantes en une seule opération, un débogueur universel est plus pratique.
Au fait, PromoPilot propose 87 outils SEO gratuits. Si vous n'avez pas encore configuré vos balises, nous avons un article dans notre série sur un générateur de balises méta qui créera un bloc Open Graph avec aperçu.
En quoi le débogueur Open Graph diffère-t-il de l'analyse des métadonnées?
L'analyse des balises méta examine une page du point de vue d'un moteur de recherche: titre, description, balise canonique, hreflang et Open Graph ne sont qu'un exemple. L'outil de débogage, quant à lui, se concentre sur les réseaux sociaux: il crée des fiches pour différentes plateformes, vérifie la taille des images et formule des recommandations personnalisées à partir des aperçus. Si les liens vers votre site sont fréquemment partagés sur les réseaux sociaux et les applications de messagerie, cet outil s'avère particulièrement utile.
Ces deux méthodes présentent une limitation: elles lisent le code HTML renvoyé par le serveur. Si les balises sont insérées par un script du navigateur, de nombreux réseaux sociaux ne les reconnaîtront pas; ce problème doit être résolu côté site web. Autre point important: le débogueur vérifie les balises, mais pas le partage lui-même. Si la page est protégée par un mot de passe, soumise à un blocage géographique ou protégée contre les robots, le réseau social risque de ne pas pouvoir y accéder, même si toutes les balises sont présentes.
Quand un outil gratuit ne suffit-il pas?
Un outil de débogage indiquera que la page ne contient pas d'élément og:image. Cependant, s'il y a des milliers de pages, l'insertion manuelle d'images est impossible. L'intervention d'un spécialiste est alors nécessaire.
- Chaque produit ou article devrait avoir sa propre image de prévisualisation, collectée automatiquement;
- Le site renvoie des balises via un script, et les réseaux sociaux ne les voient pas;
- Vous lancez des publicités et des envois par courrier où chaque aperçu influe sur le coût par clic;
- Nous avons besoin d'une combinaison de « site web + chaîne Telegram + publication automatique» avec les cartes appropriées.
Que puis-je faire pour votre site web?
Je suis Valeriy Danyuk, développeur et spécialiste SEO avec 12 ans d'expérience et plus de 200 clients. Un aperçu de lien de qualité est offert gratuitement et je le personnalise pour chaque projet.
Référencement et promotion
- Audit SEO clé en main pour votre site web: je vérifie toutes les balises du modèle, configure les images de prévisualisation automatiques et corrige le code.
Sites Web et boutiques en ligne
- Transférer votre boutique d' Instagram vers votre site web — des produits avec des aperçus appropriés pour un partage facile.
- Une page de destination pour un nouveau produit créée en une soirée – une étude de cas NordHarvest avec une fiche produit prête à l'emploi pour les réseaux sociaux.
- Un site web de clinique de chirurgie plastique avec IA et applications via Telegram.
- Site web hébergé sur 1001site: les aperçus pour les réseaux sociaux et la publication automatique sur Telegram sont configurés automatiquement.
Bots et automatisation
- Bot Telegram avec IA pour une boutique de sauces en ligne.
- QuestFlow est un outil SaaS de création de bots Telegram avec IA.
- Des agents de commerce électronique plutôt que des chatbots.
Envoyez-moi un lien qui s'affiche mal dans une messagerie Telegram et je vous dirai quelle balise est manquante.
Résultat
- Un outil en ligne de vérification Open Graph permet de visualiser l'apparence d'un lien sur Facebook, X et LinkedIn, et d'identifier les balises manquantes.
- Le minimum requis est og:title, og:type, og:image (1200×630, adresse complète) et og:url, plus twitter:card.
- Après la correction, réinitialisez le cache des sites: Sharing Debugger, Post Inspector, @WebpageBot.
- Pour le catalogue et le blog, les images de prévisualisation devraient être collectées automatiquement, comme sur 1001site.
Vérifiez la page que vous vous apprêtez à partager dans l'outil gratuit Open Graph Debugger avant que vos abonnés ne voient la publication.
Sources
- Page de l'outil de débogage Open Graph de PromoPilot — liste des vérifications et FAQ.
- Protocole Open Graph (ogp.me) - propriétés obligatoires et facultatives.
- L'outil de débogage de partage de Meta et l'inspecteur de publications LinkedIn sont les outils officiels des plateformes.
