Partie 3 sur 22

Canonical et hreflang : une page, une adresse

Canonical et hreflang : une page, une adresse

Le contenu dupliqué peut créer une ambiguïté d'indexation sur les sites multilingues et les pages avec paramètres. Deux mécanismes aident à la gérer.

Le canonical désigne l'URL préférée

Il indique aux moteurs de recherche quelle URL est préférée lorsque plusieurs adresses servent le même contenu (paramètres de suivi, barres obliques, pagination) :

export async function generateMetadata({ params }): Promise<Metadata> {
  return {
    alternates: {
      canonical: `/blog/${params.slug}`,
    },
  };
}

hreflang relie les versions linguistiques

Il indique aux moteurs de recherche quelles versions linguistiques existent et les aide à choisir la bonne. La façon de récupérer les adresses dépend de votre modèle de contenu ; l'exemple suppose que getLocalizedUrls() renvoie l'URL réelle de chaque version :

export async function generateMetadata({ params }): Promise<Metadata> {
  const { lang } = params;
  const localizedUrls = await getLocalizedUrls(params);

  return {
    alternates: {
      canonical: localizedUrls[lang],
      languages: {
        ...localizedUrls,
        "x-default": localizedUrls.en,
      },
    },
  };
}

Erreurs de mise en œuvre courantes

  • hreflang doit être réciproque. Si la page EN pointe vers la version PL, la page PL doit pointer en retour vers EN, sinon Google peut ignorer tout le groupe.
  • Chaque page doit s'inclure elle-même dans la table languages.
  • Slugs localisés : si un article polonais vit sous un autre slug, hreflang doit pointer vers l'URL localisée réelle, et non vers le mécanique /pl/ + le même slug. Générez la table à partir de la source du contenu, ne la codez pas en dur.
  • x-default prend en charge les utilisateurs dont vous ne gérez pas la langue : dirigez-le vers la locale principale.
  • Le canonical doit mener à une page qui renvoie 200 et sans noindex : un canonical vers une URL qui redirige est ignoré.

Checklist :

  • Canonical auto-référencé sur chaque page indexable
  • hreflang généré à partir de vrais slugs localisés, réciproque dans tous les sens
  • x-default présent
  • Paramètres d'URL (utm, filtres, tri) canonisés vers l'adresse propre

Vous préférez que quelqu'un s'en charge pour vous ?

J'audite et je corrige le SEO technique des sites Next.js : indexation, vitesse, hreflang et visibilité dans les moteurs d'IA.

Service de SEO technique