Open Graph Next.js, l'image des liens partagés

Next.js reconnaît des noms de fichiers précis. C'est la méthode la plus rapide, et elle ne demande pas une ligne de code.

Déposez dans le dossier app un fichier nommé opengraph-image, en .png ou .jpg. Next.js génère seul les balises attendues et sert l'image. Le même fichier placé dans un sous-dossier ne vaut que pour cette section du site, ce qui permet une image par grande famille de pages.

Les 3 réglages à respecter sur le fichier.

• 1200 pixels sur 630. C'est le format universel. LinkedIn annonce 627 de haut, sans conséquence pratique. X recadre en 16 par 9.
• Sous 1 Mo, et plutôt sous 300 Ko si vos liens passent par WhatsApp, qui compresse sans prévenir.
• Le texte au centre. Chaque plateforme recadre à sa façon. Gardez l'essentiel dans une zone centrale d'environ 1080 sur 600.

Profitez du même passage pour poser le favicon. Un fichier favicon.ico déposé dans le dossier app suffit, avec ce nom exact. Il apparaît dans l'onglet du navigateur, mais aussi à côté de votre nom de domaine dans les résultats de Google sur mobile.

Pour comprendre le protocole lui-même, ses balises et ses pièges, voyez notre article de fond sur l'aperçu des liens partagés.

Le fichier image suffit à afficher une vignette. Il ne suffit pas à contrôler ce qui s'écrit autour.

Dans l'objet metadata du gabarit racine, le champ openGraph accueille les valeurs de repli du site entier.

• title et description. Ils peuvent différer de vos balises de référencement. Le titre affiché dans Google cherche la position, celui d'un partage cherche le clic dans une conversation.
• siteName. Le nom de votre site, affiché en petit sous l'aperçu sur plusieurs plateformes.
• locale. La langue et le pays, sous la forme fr_FR.
• type. La valeur website pour les pages courantes, article pour un contenu daté et signé.

Le champ twitter vient ensuite. Une seule valeur compte vraiment, card réglée sur summary_large_image, qui demande le grand format plutôt qu'une vignette carrée. Sans elle, votre belle image s'affiche dans un timbre-poste.

Un point important sur le champ metadataBase, présenté dans notre article sur la metadata Next.js. Sans lui, les adresses d'images restent relatives, et une adresse relative ne veut rien dire pour un serveur distant qui vient chercher votre aperçu. C'est la première cause d'aperçu vide en production.

C'est la fonction que peu de frameworks proposent, et elle change le rendu d'un blog.

Au lieu d'une image fixe, créez un fichier opengraph-image.tsx dans le dossier de la route. Il exporte une fonction qui renvoie un objet ImageResponse, importé de next/og. Vous y décrivez une mise en page avec des blocs et du texte, exactement comme une page, et Next.js en fabrique une vraie image.

3 exports accompagnent la fonction.

• alt, le texte alternatif de l'image.
• size, la largeur et la hauteur. C'est cet export qui fait écrire les balises de dimensions dans la page, et il faut qu'elles correspondent à la réalité.
• contentType, le format produit.

L'intérêt est réel sur X. Depuis plusieurs années, la plateforme n'affiche plus le titre sous l'aperçu, seulement l'image et le nom de domaine. Une image qui porte le titre dessiné devient alors le seul texte visible de votre partage.

2 limites à connaître avant de vous lancer. Le moteur de rendu n'accepte qu'un sous-ensemble des propriétés de style, la mise en page doit rester simple. Et une police personnalisée doit être chargée explicitement dans la fonction, sinon vous obtenez une image dans une police par défaut.

Ne partagez jamais un lien important sans l'avoir vu passer dans un vérificateur. Une erreur d'aperçu se corrige, mais le message déjà envoyé garde l'ancienne vignette.

L'ordre de vérification.

• En local d'abord, dans les outils de développement du navigateur. Dépliez la balise head et cherchez les balises de propriété commençant par og. Vos valeurs doivent y être en clair.
• Une fois en ligne, passez par un vérificateur d'aperçu qui affiche le rendu réel par plateforme.
• Sur les plateformes concernées, l'outil de débogage de Facebook et l'inspecteur de post de LinkedIn permettent de forcer une nouvelle lecture.

Un avertissement qui vous fera gagner une heure. Le validateur de cartes de X est fermé depuis 2022 et n'a jamais été remplacé. Des tutoriels y envoient encore, ils n'ont pas été relus depuis 4 ans.

Reste la question du cache, celle qui fait perdre le plus de temps. Chaque plateforme garde en mémoire le premier aperçu récupéré. Si vous changez votre image après un premier partage, l'ancienne continue de s'afficher pendant un moment. Les outils de débogage servent précisément à forcer ce rafraîchissement, un par plateforme.

Une astuce d'organisation pour un site actif. Décidez une fois pour toutes du gabarit de vos images d'aperçu, puis générez-les automatiquement. Une image faite à la main par article finit toujours par manquer sur les 3 derniers publiés.