Cartes sociales : balises Open Graph et image de partage

Ce qu’est un aperçu de lien

Quand quelqu’un partage un lien sur un réseau social ou dans une messagerie, la plateforme lit la page et construit une petite carte : une image, un titre, un court texte et le domaine. La plupart des plateformes lisent pour cela les balises du protocole Open Graph, des éléments meta dans le head de la page. X, anciennement Twitter, lit aussi ses propres balises qui commencent par twitter:. Chaque plateforme conçoit elle-même sa carte et décide combien de texte elle affiche. Toi, tu décides de ce que la page dit aux plateformes.

Les balises de base

Le protocole Open Graph, publié sur ogp.me, cite quatre propriétés que chaque page devrait avoir : og:title, og:type, og:image et og:url. og:url est l’adresse canonique de la page. Facultatives mais utiles : og:description, og:site_name et og:locale, la langue et la région des balises, par exemple de_DE.

<meta property="og:title" content="Soldes d’été : tous les mugs à prix réduit">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Six mugs bleus sur une table en bois">
<meta property="og:description" content="Jusqu’au 31 août : prix réduits sur les mugs et les assiettes.">
<meta property="og:site_name" content="Boutique Exemple">
<meta name="twitter:card" content="summary_large_image">

Écris chaque adresse en entier, avec https://. Le protocole définit une adresse comme une URL qui utilise http:// ou https://, donc un chemin comme /img/sale.jpg n’est pas une valeur valide. og:url devrait correspondre au lien canonique de la page. Si une balise apparaît deux fois avec des valeurs différentes, le protocole donne la préférence à la première.

L’image de partage

La plupart des aperçus affichent l’image en largeur. Une image au format d’environ 1,91 : 1, par exemple 1 200 × 630 pixels, est souvent recommandée et convient à la plupart des cartes sans recadrage. Les images carrées sont souvent coupées en haut et en bas : garde donc le contenu important au milieu. Pour Google Discover, Google recommande des images d’au moins 1 200 pixels de large, un grand aperçu autorisé avec le réglage max-image-preview:large, et une image définie avec og:image ou un balisage schema.org. Google déconseille aussi les images génériques comme le logo du site.

og:image:width et og:image:height indiquent la taille de l’image en pixels. og:image:alt décrit ce qu’il y a sur l’image, ce n’est pas une légende. Le protocole dit qu’une page avec og:image devrait aussi indiquer og:image:alt.

Titre et description

og:title peut différer de l’élément title. Il n’a pas besoin du nom du site, car og:site_name le porte. Les plateformes coupent les textes longs à leur propre longueur : mets donc les mots importants en premier. Les balises Open Graph comptent aussi au-delà des réseaux sociaux. Google cite le contenu de og:title parmi les sources des liens de titre dans les résultats de recherche, prend en compte og:site_name pour le nom du site et mentionne og:image comme un moyen d’indiquer une image préférée.

Balises pour X

La balise twitter:card choisit le type de carte. La valeur summary_large_image demande une grande image large, summary une petite. Si ta page a déjà des balises Open Graph, ajouter twitter:card suffit souvent. Les pages pour développeurs de X n’ont pas pu être lues pour ce guide : vérifie donc les règles actuelles là-bas avant de te fier à un détail.

Une carte par page

Beaucoup de sites définissent le même titre et la même image pour toutes les pages, souvent via le thème. Chaque lien partagé se ressemble alors. Donne à chaque page importante ses propres og:title, og:description et og:image : à une fiche produit la photo du produit, à un article son image principale. Pour og:type, le protocole utilise entre autres website pour une page générale et article pour un article. Un système de boutique ou de gestion de contenu peut remplir ces balises automatiquement à partir du titre, du résumé et de l’image principale de chaque page. Après un changement, vérifie une page de chaque modèle.

Pourquoi l’aperçu ne change pas

Beaucoup de plateformes enregistrent une carte une fois qu’elles l’ont construite. Si tu changes l’image ou le titre plus tard, les gens peuvent encore voir l’ancienne carte pendant un certain temps. Un nouveau nom de fichier pour une nouvelle image aide, car la plateforme voit alors une nouvelle adresse. Certaines plateformes proposent un outil qui récupère à nouveau la page.

Avant de partager une page

• og:title, og:type, og:image et og:url sont-ils présents, et og:url est-il l’adresse canonique ?
• Chaque adresse est-elle complète, avec https:// ?
• L’image est-elle assez large, se charge-t-elle, et le contenu important est-il au milieu ?
• og:image:alt, og:image:width et og:image:height sont-ils définis ?
• Y a-t-il une balise twitter:card, et le titre est-il assez court ?

Travailler avec Do4U

La Vérification Social Card montre à quoi ressemble une page quand son lien est partagé et vérifie les balises derrière l’aperçu. Tu saisis une adresse. Do4U lit la page et le début de son image de partage. Le code rassemble les balises Open Graph, les balises de carte Twitter/X et les solutions de repli, c’est-à-dire le titre, la méta-description et la première image, ainsi que le lien canonique et la langue. Il lit dans le fichier le format et la taille réels de l’image et les compare aux balises. Tu obtiens un aperçu neutre, un tableau de toutes les balises, des constats avec une courte raison et des balises proposées à copier. Les balises qu’une page définit uniquement avec JavaScript ne sont pas vues. Aucune IA n’est utilisée, et la vérification est gratuite, avec une limite quotidienne.

Do4U trouve des indices, tu vérifies et tu décides. L’aperçu est une esquisse neutre : c’est la plateforme qui décide comment elle affiche le lien.