Analyse Open Graph

Comment fonctionne cette vérification

Scanaris cherche dans le <head> de ta page trois balises Open Graph : og:title, og:description et og:image. Si les trois sont là avec un contenu, il n'y a rien à dire. S'il en manque une, il ouvre un constat informatif qui indique lesquelles ; s'il manque les trois, le constat dit directement que la page n'a pas d'Open Graph. C'est informatif, donc ça ne retire pas de points : ce n'est ni une faille de sécurité ni d'indexation, c'est une occasion manquée chaque fois que quelqu'un partage ton site.

Pourquoi c'est important

Quand quelqu'un colle ton lien dans WhatsApp, X, LinkedIn, Slack, Discord, iMessage ou Telegram, l'application visite l'URL, lit ces balises et construit la carte d'aperçu : grande image, titre et description. Sans elles, la carte sort sans image, avec l'URL brute ou un morceau de texte quelconque de la page. La différence de clics entre un lien avec carte et un lien sans est grande, surtout sur mobile, où la carte occupe tout l'écran. Et l'image que tu choisis est, pour beaucoup de gens, la première impression de ta marque.

Comment corriger

<meta property="og:title" content="Scanner de sécurité pour applis faites avec l'IA">
<meta property="og:description" content="Analyse ton site en 60 secondes et reçois chaque faille avec sa solution.">
<meta property="og:image" content="https://tondomaine.com/og/home.png">
<meta property="og:url" content="https://tondomaine.com/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

• L'image est en URL absolue et en HTTPS, de 1200 par 630 pixels, en JPG ou PNG et sous 1 Mo pour que toutes les plateformes l'acceptent. Un fond aux couleurs de la marque, le titre de la page en grand et le logo, c'est la formule qui marche.
• Une par page, pas la même partout. Un article avec son titre dans l'image se partage plus qu'un article avec l'image générique du site. Nuxt a un module qui génère ces images à partir d'un modèle ; Next.js le fait avec un fichier opengraph-image.tsx dans chaque route.
• Nuxt : useSeoMeta({ ogTitle, ogDescription, ogImage, twitterCard: 'summary_large_image' }). Next.js : metadata.openGraph et metadata.twitter. WordPress : Yoast et Rank Math les génèrent par article à partir de l'image mise en avant.
• twitter:card est la seule balise propre dont X a besoin ; pour le titre, la description et l'image, il utilise les og: s'il ne trouve pas les siennes.

Les plateformes mettent la carte en cache la première fois qu'elles voient une URL. Après avoir changé les balises, demande un nouveau passage dans le débogueur de partage de Facebook, l'inspecteur de publications de LinkedIn ou le validateur de X ; WhatsApp et Telegram la renouvellent seuls après un moment.

Vérifie que c'est corrigé

curl -s https://tondomaine.com | grep -oE '<meta (property|name)="(og:|twitter:)[^"]+" content="[^"]*"'
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" "$(curl -s https://tondomaine.com | grep -oE 'og:image" content="[^"]+"' | cut -d'"' -f3)"

La première liste les balises ; la seconde télécharge l'image et doit donner 200 avec un type image. Ensuite, colle l'URL dans une discussion avec toi-même et regarde la carte.

Questions fréquentes

J'ai déjà un titre et une meta description. Ça ne suffit pas ?

Certaines plateformes les utilisent en secours, mais aucune n'affiche d'image sans og:image, et c'est l'image qui fait bondir les clics. Les balises og: te permettent en plus un titre différent de celui de Google, plus court et plus direct.

Est-ce que ça compte pour le SEO ?

Pas directement : Google n'utilise pas Open Graph pour le classement. Ça compte pour que les gens partagent et cliquent, ce qui finit en liens et en trafic. Ce que Google lit vraiment est examiné par métadonnées SEO.

Mon image apparaît coupée dans certaines applications.

Chaque plateforme recadre à sa proportion. En 1200 par 630 avec le contenu important centré et une marge sur les bords, ça rend bien partout. Évite le petit texte collé dans les coins.