Comment lier les versions linguistiques alternatives dans Next.js (Pages Router) v16

Lier les alternatives linguistiques pour les moteurs de recherche

Problème

Lorsqu'un site web propose le même contenu dans plusieurs langues, les moteurs de recherche rencontrent des URL distinctes pour chaque version sans comprendre leur relation. Un utilisateur français effectuant une recherche pourrait voir la version anglaise mieux classée que la version française, même si les deux existent. De même, une page anglaise et sa traduction française pourraient être traitées comme des doublons concurrents plutôt que comme des alternatives coordonnées. Sans signaux explicites reliant ces versions linguistiques, les moteurs de recherche ne peuvent pas servir en toute confiance la version la plus appropriée aux utilisateurs en fonction de leurs préférences linguistiques, ce qui entraîne une autorité de classement fragmentée et une mauvaise expérience utilisateur.

Solution

Ajoutez des éléments link avec des attributs hreflang dans la section head de chaque page, en listant toutes les versions linguistiques, y compris la page elle-même. Chaque variante de page doit inclure un ensemble identique de liens référençant chaque version linguistique disponible. Cette liaison bidirectionnelle garantit que les moteurs de recherche reconnaissent les pages comme des traductions plutôt que comme des doublons, leur permettant de servir la version linguistique correcte aux utilisateurs en fonction des préférences du navigateur et du contexte de recherche.

Étapes

1. Créer un composant pour générer les liens de langues alternatives

Importez le composant Head depuis next/head pour modifier les métadonnées de la page. Accédez aux informations de locale via le hook useRouter pour construire des liens pour toutes les versions linguistiques disponibles.

import Head from "next/head";
import { useRouter } from "next/router";

interface AlternateLinksProps {
  path?: string;
}

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, locale: currentLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

Le composant parcourt les locales disponibles depuis le routeur et génère dynamiquement des éléments link pour toutes les pages.

2. Ajouter le composant aux pages qui ont des traductions

Incluez le composant AlternateLinks dans chaque composant de page qui existe dans plusieurs langues.

import AlternateLinks from "@/components/AlternateLinks";

export default function AboutPage() {
  return (
    <>
      <AlternateLinks />
      <main>
        <h1>About Us</h1>
      </main>
    </>
  );
}

Le composant garantit que chaque page inclut l'ensemble complet de liens alternatifs, satisfaisant l'exigence que toutes les variantes se référencent mutuellement.

3. Inclure un lien auto-référentiel pour la locale actuelle

Chaque page doit inclure une balise hreflang auto-référentielle indiquant sa propre langue. Le composant gère déjà cela en itérant à travers toutes les locales, y compris la locale actuelle.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

Chaque page inclut désormais des balises hreflang pointant vers elle-même ainsi que des balises pour les autres versions.

4. Ajouter un lien de secours x-default

Ajoutez un lien x-default pour spécifier quelle version les utilisateurs doivent voir lorsque leur langue n'est pas disponible.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, defaultLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales || !defaultLocale) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
      <link
        rel="alternate"
        hrefLang="x-default"
        href={`${process.env.NEXT_PUBLIC_SITE_URL}/${defaultLocale}${canonicalPath}`}
      />
    </Head>
  );
}

Le lien x-default dirige les utilisateurs dont les préférences linguistiques ne correspondent pas vers la locale par défaut.