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 de page — 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éroute les visiteurs et signale une localisation de mauvaise qualité.

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 réseaux sociaux affichent la mauvaise langue dans les aperçus de liens, réduisant l'engagement des audiences internationales. Une traduction cohérente sur 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 de page en utilisant les mêmes ressources de traduction que 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 descriptions correspondent à la locale actuelle dans les onglets du navigateur, les résultats de recherche et les aperçus sociaux.

En utilisant 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. L'approche fonctionne à la fois pour les pages statiques et les routes dynamiques où les métadonnées dépendent de données spécifiques à la page.

Étapes

1. Ajouter les messages de métadonnées à vos fichiers de traduction

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

{
"home.title": "Welcome to Our Store",
"home.description": "Discover amazing products at great prices",
"products.title": "Our Products",
"products.description": "Browse our full catalog of items"
}

Chaque page nécessitant des métadonnées traduites doit avoir des ID de message correspondants pour son titre et sa description.

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

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 les 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>
    </>
  );
}

Stocker les 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 les 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, vous permettant d'injecter des valeurs dynamiques comme des ID ou des noms de produits dans les chaînes de métadonnées traduites. Le message correspondant pourrait être "Product {productId} - Our Store".