Générateur de balises meta et Open Graph

Comment utiliser l’outil

Pour vérifier une page déjà publiée, collez son adresse et cliquez sur « Récupérer ». L’outil lit ses balises, remplit les champs et signale ce qui manque : une balise Open Graph absente, une image indiquée par une adresse relative, une balise viewport oubliée. Pour une page en préparation, remplissez simplement les champs.

Les contrôles et les aperçus se mettent à jour à chaque frappe. L’image est chargée par votre navigateur pour mesurer sa largeur et sa hauteur, qui sont ajoutées au code. Quand tout est au vert, copiez le code et collez-le dans la partie <head> de la page, à la place des balises existantes.

Qui lit quelles balises ?

Les balises d’une page ne s’adressent pas toutes aux mêmes lecteurs. Google lit la balise title, la meta description, la balise robots et la balise viewport, dont la présence lui indique que la page est adaptée aux mobiles. Il ignore la balise meta keywords, qu’il range parmi les balises non prises en charge.¹

Facebook, LinkedIn, les messageries et la plupart des réseaux lisent les balises Open Graph, un protocole public.² X lit ses propres balises, qui commencent par twitter:, et reprend les balises Open Graph quand elles manquent. Une page bien balisée porte donc les trois familles, sans répéter inutilement ce que X sait reprendre.

Les balises Open Graph indispensables

Le protocole Open Graph en exige quatre sur chaque page : og:title, le titre du contenu ; og:type, son type ; og:image, l’adresse de l’image ; og:url, l’adresse canonique de la page, qui sert d’identifiant permanent. Il recommande aussi og:description, une ou deux phrases de présentation, og:site_name, le nom du site, et og:locale, la langue. Dès qu’une page indique une image, elle devrait aussi fournir og:image:alt, la description de ce que l’image montre.²

La documentation de Meta pour les webmasters ajoute deux précisions utiles.³ Sans og:type, Facebook considère que la page est de type website. Et og:title doit porter le titre du contenu sans le nom du site, qui s’affiche déjà grâce à og:site_name : l’outil le signale quand il retrouve le nom du site dans le titre de partage.

Quelle taille pour l’image de partage ?

Chaque plateforme publie ses propres exigences. Voici celles que l’outil contrôle.

Une image de 1 200 × 630 pixels satisfait tout le monde : elle atteint le format conseillé par Facebook, dépasse le minimum de LinkedIn de trois pixels en hauteur, compte 756 000 pixels pour Discover, et X la recadre légèrement pour la ramener à 2:1. Gardez le sujet au centre, puisque les bords peuvent être coupés selon la plateforme.

Les cartes X

La balise twitter:card choisit la forme de la carte. Avec summary_large_image, l’image occupe toute la largeur au-dessus du lien ; avec summary, elle devient une petite vignette à côté du texte. Sans twitter:card mais avec og:type, og:title et og:description, une carte réduite peut s’afficher : pour obtenir la grande image, il faut donc déclarer summary_large_image.⁶

X reprend og:title, og:description, og:image et og:image:alt quand les balises twitter: équivalentes manquent. Le code de l’outil s’en tient donc à twitter:card et, si vous le renseignez, à twitter:site, le compte auquel la carte est rattachée. X demande aussi une image propre à la page, plutôt que le logo du site ou une photo d’auteur reprise partout.⁶

Pourquoi l’aperçu ne change pas après une correction

Les réseaux gardent en mémoire ce qu’ils ont lu la première fois qu’un lien a été partagé. Meta met en cache les images selon leur adresse : pour remplacer une image déjà partagée, il faut publier la nouvelle sous une autre adresse, puis demander une nouvelle lecture de la page dans son débogueur de partage. Meta conseille aussi de déclarer og:image:width et og:image:height : avec ces deux balises, l’image peut s’afficher dès le premier partage, sans attendre que le robot l’ait téléchargée.⁴ C’est pour cela que l’outil mesure l’image et les ajoute au code.

Open Graph et référencement

Les balises Open Graph ne figurent pas dans la liste des balises meta que Google dit prendre en charge pour la recherche.¹ Elles servent d’abord au partage. Google Discover fait exception pour l’image : Google indique que la balise og:image, comme le balisage schema.org, peut influencer la vignette choisie, à condition que les grandes images soient autorisées par max-image-preview:large.⁷ Le balisage schema.org relève quant à lui des données structurées et des résultats enrichis.

Pour le résultat Google lui-même, ce sont la balise title et la meta description qui comptent. Leur longueur en pixels et leur aperçu sur ordinateur et sur mobile se vérifient avec le testeur de longueur du title et de la meta description.

Questions fréquentes