Ajouter les aperçus Open Graph

Quand un itinéraire est partagé, une plateforme peut afficher un titre générique, une image absente ou une mauvaise adresse. Vous allez compléter les métadonnées déjà générées pour chaque randonnée afin que l’aperçu de partage décrive la bonne page et pointe vers une image disponible.

La leçon précédente a mis en place les titres et descriptions propres à chaque route dynamique avec l’API Metadata de Next.js. Vous allez réutiliser ces données, sans créer une seconde source de contenu, pour renseigner Open Graph et l’adresse canonique de l’itinéraire.

Compléter l’utilitaire de métadonnées

Conservez la fonction et les types déjà présents dans lib/metadonnees.ts, puis ajoutez les champs de partage à l’objet qu’elle retourne. L’exemple ci-dessous présente le fichier complet dans l’état attendu : il suppose que l’utilitaire existant accepte le titre, la description, le slug et le chemin de l’image, et qu’il construit déjà les champs title et description utilisés par la page.

import type { Metadata } from "next";

const origine = process.env.NEXT_PUBLIC_SITE_URL ?? "https://randonnees.example";

export function creerMetadonneesItineraire({
  titre,
  description,
  slug,
  image
}: {
  titre: string;
  description: string;
  slug: string;
  image: string;
}): Metadata {
  const url = new URL(`/randonnees/${slug}`, origine).toString();
  const urlImage = new URL(image, origine).toString();

  return {
    title: titre,
    description,
    alternates: {
      canonical: url
    },
    openGraph: {
      type: "article",
      locale: "fr_FR",
      url,
      title: titre,
      description,
      images: [
        {
          url: urlImage,
          alt: titre
        }
      ]
    }
  };
}

La propriété openGraph permet à Next.js de produire les balises correspondantes dans le document HTML. Le champ images fournit une URL absolue et un texte alternatif ; alternates.canonical identifie l’adresse de référence de la page, indépendamment des paramètres éventuellement ajoutés à l’URL.

Transmettre les données de l’itinéraire

Dans app/randonnees/[slug]/page.tsx, gardez la récupération des données et le traitement des slugs inconnus déjà en place. Modifiez la fonction qui génère les métadonnées pour transmettre au même utilitaire le chemin réel de l’image de la randonnée ; le fragment suivant montre l’appel attendu à l’intérieur de cette fonction.

return creerMetadonneesItineraire({
  titre: randonnee.titre,
  description: randonnee.description,
  slug,
  image: randonnee.image
});

Les noms des propriétés de votre objet doivent correspondre à ceux déjà définis dans lib/randonnees.ts. Pour les Crêtes du Jura, la valeur doit désigner le fichier existant sous public/images/randonnees/, par exemple /images/randonnees/cretes-du-jura.webp. Le navigateur de partage reçoit ainsi une URL publique, et non un chemin local tel que public/images/....

Vérifier les métadonnées produites

Lancez l’application et consultez le code source HTML de /randonnees/cretes-du-jura, ou vérifiez la réponse HTML avec un outil en ligne de commande. Les balises doivent être présentes dans le document initial : elles doivent donc être lisibles sans exécuter le JavaScript de la page.

curl -s http://localhost:3000/randonnees/cretes-du-jura | grep -E 'canonical|og:title|og:description|og:url|og:image'

<link rel="canonical" href="https://randonnees.example/randonnees/cretes-du-jura" />
<meta property="og:title" content="Crêtes du Jura" />
<meta property="og:description" content="..." />
<meta property="og:url" content="https://randonnees.example/randonnees/cretes-du-jura" />
<meta property="og:image" content="https://randonnees.example/images/randonnees/cretes-du-jura.webp" />

Remplacez l’origine d’exemple par celle de votre environnement et vérifiez que l’image répond bien à une requête HTTP, sans redirection vers une page d’erreur. Répétez le contrôle sur une autre randonnée lorsqu’elle sera ajoutée : le titre, la description, l’URL canonique et l’image doivent tous varier avec ses données. Si l’image de partage diffère de l’image d’affichage, ajoutez un champ dédié dans les données de l’itinéraire plutôt que de fabriquer le chemin à partir du slug.

À retenir

• Déclarez Open Graph dans l’objet Metadata retourné pour chaque itinéraire, à partir de ses données propres.
• Fournissez une image accessible par une URL absolue et un texte alternatif adapté.
• Définissez l’URL canonique avec l’origine publique correcte pour éviter de référencer un domaine de prévisualisation.
• Contrôlez les balises dans le HTML initial et testez l’URL de l’image.

Dans la prochaine leçon, vous ajouterez des données JSON-LD qui décrivent l’itinéraire affiché.