Comment traduire les métadonnées de page dans Next.js (Pages Router) v16

Traduire les métadonnées pour la recherche et les réseaux sociaux

Problème

Les métadonnées des pages—titres et descriptions—apparaissent en dehors du contenu de la page lui-même. Elles s'affichent dans les onglets du navigateur, les favoris, les résultats des moteurs de recherche et les aperçus sur les réseaux sociaux. Lorsque les métadonnées ne correspondent pas à la langue de la page, les utilisateurs rencontrent une incohérence déconcertante avant même de voir le contenu. Une page en espagnol avec un titre en anglais désoriente les visiteurs et signale une qualité de localisation médiocre.

Les moteurs de recherche interprètent les incohérences linguistiques comme des indicateurs de localisation de faible qualité, ce qui peut réduire le classement dans les résultats spécifiques à une langue. Les plateformes de médias sociaux affichent la mauvaise langue dans les aperçus de liens, réduisant l'engagement des audiences internationales. Une traduction cohérente à travers tous les points de contact—y compris les métadonnées—est essentielle pour une expérience multilingue professionnelle.

Solution

Traduisez les métadonnées des pages en utilisant les mêmes ressources de traduction que pour le contenu de la page. Utilisez le hook useIntl de react-intl pour accéder aux chaînes traduites et placez-les dans le composant <Head> de la page. Cela garantit que les titres et les descriptions correspondent à la locale actuelle dans les onglets du navigateur, les résultats de recherche et les aperçus sociaux.

En extrayant les métadonnées des mêmes catalogues de messages que le contenu visible, vous maintenez la cohérence et évitez de dupliquer l'effort de traduction. Cette approche fonctionne aussi bien pour les pages statiques que pour les routes dynamiques où les métadonnées dépendent des données spécifiques à la page.

Étapes

1. Ajoutez des messages de métadonnées à vos fichiers de traduction

Définissez des descripteurs de messages pour les titres et descriptions de pages dans vos catalogues de traduction, en utilisant la même structure que pour les autres contenus traduits.

{
"home.title": "Bienvenue dans notre boutique",
"home.description": "Découvrez des produits incroyables à des prix avantageux",
"products.title": "Nos produits",
"products.description": "Parcourez notre catalogue complet d'articles"
}

Chaque page nécessitant des métadonnées traduites devrait avoir des identifiants de messages correspondants pour son titre et sa description.

2. Créer un composant de métadonnées traduit

Utilisez le hook useIntl pour accéder à la fonction formatMessage, puis affichez les chaînes traduites à l'intérieur du composant Head.

import Head from "next/head";
import { useIntl } from "react-intl";

export default function HomePage() {
  const intl = useIntl();

  return (
    <>
      <Head>
        <title>{intl.formatMessage({ id: "home.title" })}</title>
        <meta
          name="description"
          content={intl.formatMessage({ id: "home.description" })}
        />
      </Head>
      <main>
        <h1>{intl.formatMessage({ id: "home.title" })}</h1>
      </main>
    </>
  );
}

Le composant Head est un composant React intégré à Next.js qui vous permet de modifier le <head> d'une page. La fonction formatMessage renvoie la chaîne traduite pour la locale actuelle.

3. Ajouter des métadonnées Open Graph et sociales

Étendez le modèle pour inclure les métadonnées Open Graph et Twitter Card pour les aperçus sur les réseaux sociaux.

import Head from "next/head";
import { useIntl } from "react-intl";

export default function ProductsPage() {
  const intl = useIntl();
  const title = intl.formatMessage({ id: "products.title" });
  const description = intl.formatMessage({ id: "products.description" });

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta name="twitter:title" content={title} />
        <meta name="twitter:description" content={description} />
      </Head>
      <main>
        <h1>{title}</h1>
      </main>
    </>
  );
}

Le stockage des messages formatés dans des variables évite d'appeler formatMessage plusieurs fois pour la même traduction et maintient le JSX plus propre.

4. Gérer les métadonnées dynamiques pour les pages paramétrées

Pour les pages avec des routes dynamiques, combinez les paramètres de route avec des chaînes traduites pour créer des métadonnées contextuelles.

import Head from "next/head";
import { useIntl } from "react-intl";
import { useRouter } from "next/router";

export default function ProductDetailPage() {
  const intl = useIntl();
  const router = useRouter();
  const { id } = router.query;

  const title = intl.formatMessage(
    { id: "product.detail.title" },
    { productId: id },
  );

  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>
      <main>
        <h1>{title}</h1>
      </main>
    </>
  );
}

Les descripteurs de messages prennent en charge l'interpolation de variables, ce qui vous permet d'injecter des valeurs dynamiques comme des identifiants ou des noms de produits dans les chaînes de métadonnées traduites. Le message correspondant pourrait être "Produit {productId} - Notre boutique".