MEITRIZ
←Retour au blog
6 mars 2026

Optimiser la structure d'un site NextJS pour un affichage groupé dans les résultats Google

GEO / SEO

Découvrez comment structurer votre site NextJS pour un affichage groupé dans Google (nom du site + sous-pages). Optimisez le SEO et boostez votre visibilité.

Introduction : Pourquoi la Structure de Votre Site NextJS Compte pour le SEO

Dans l’univers du développement web moderne, NextJS s’impose comme l’un des frameworks React les plus populaires pour créer des sites performants, dynamiques et optimisés pour le référencement naturel (SEO). Pourtant, même avec un outil aussi puissant, de nombreux développeurs et propriétaires de sites se heurtent à un problème récurrent : leurs pages apparaissent de manière isolée dans les résultats de recherche Google, sans bénéficier de l’affichage groupé sous le nom du site (comme dans l’exemple ci-dessous).

Le nom du site
 - Page 1
 - Page 2
 - Page 3

Cet affichage, appelé "sitelinks" ou liens de site, est un atout majeur pour :

  • Améliorer la visibilité de votre site dans les SERPs (pages de résultats).
  • Augmenter le taux de clics (CTR) en guidant les utilisateurs vers les pages les plus pertinentes.
  • Renforcer la crédibilité de votre marque en affichant une structure claire et organisée.

Dans cet article, nous allons explorer comment structurer un site NextJS pour maximiser vos chances d’obtenir cet affichage groupé. Nous aborderons les bonnes pratiques SEO, les configurations techniques spécifiques à NextJS, et les stratégies de contenu à mettre en place.

1. Comprendre les Critères de Google pour les Sitelinks

Avant de plonger dans le code, il est essentiel de comprendre comment Google génère les sitelinks. Bien que l’algorithme exact reste secret, plusieurs facteurs clés ont été identifiés par les experts SEO :

a) Une Hiérarchie de Site Claire et Logique

Google privilégie les sites avec une structure hiérarchique bien définie, où les pages sont organisées de manière intuitive. Par exemple :

  • Une page d’accueil (/).
  • Des catégories principales (/services, /produits).
  • Des sous-pages logiquement liées (/services/seo, /produits/nextjs).

b) Un Contenu de Qualité et Pertinent

Les pages proposées en sitelinks sont généralement celles qui :

  • Répondent à des intentions de recherche précises.
  • Ont un taux de clics (CTR) élevé dans les résultats.
  • Sont fréquemment visitées par les utilisateurs.

c) Une Navigation Intuitive

Un menu de navigation bien conçu, avec des liens internes pertinents, aide Google à comprendre la relation entre vos pages. Les breadcrumbs (fil d’Ariane) et les liens contextuels dans le contenu jouent également un rôle crucial.

d) Un Balisage Schema.org Optimisé

Le balisage structuré (comme WebSite, BreadcrumbList, ou SiteNavigationElement) fournit à Google des indices explicites sur la structure de votre site. Nous y reviendrons en détail plus tard.

2. Structurer un Site NextJS pour les Sitelinks

NextJS offre des fonctionnalités natives qui facilitent la création d’une structure SEO-friendly. Voici les étapes clés à suivre :

a) Organiser les Routes de Manière Hiérarchique

NextJS utilise un système de fichiers et dossiers pour générer les routes. Pour une structure optimale :

/pages
  ├── index.js          // Page d'accueil (/)
  ├── services
  │   ├── index.js      // Page catégorie (/services)
  │   ├── seo.js       // Sous-page (/services/seo)
  │   └── nextjs.js    // Sous-page (/services/nextjs)
  └── produits
      ├── index.js      // Page catégorie (/produits)
      └── nextjs.js    // Sous-page (/produits/nextjs)

Pourquoi c’est important ?

  • Google interprète cette structure comme une hiérarchie logique.
  • Les sous-pages sont naturellement liées à leur catégorie parente, ce qui renforce leur pertinence.

b) Utiliser des URLs Descriptives et Optimisées

Évitez les URLs génériques comme /page1 ou /article?id=123. Privilégiez des URLs claires et riches en mots-clés :

✅ Bon exemple : /services/optimisation-seo-nextjs ❌ Mauvais exemple : /services?id=456

Astuce NextJS : Utilisez le fichier next.config.js pour configurer des rewrites ou des redirects si nécessaire :

module.exports = {
  async rewrites() {
    return [
      {
        source: '/optimisation-seo',
        destination: '/services/seo',
      },
    ];
  },
};

c) Implémenter un Menu de Navigation SEO-Friendly

Votre menu principal doit refléter la structure hiérarchique de votre site. Voici un exemple avec NextJS et le composant Link :

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link href="/">Accueil</Link></li>
        <li>
          <Link href="/services">Services</Link>
          <ul>
            <li><Link href="/services/seo">SEO</Link></li>
            <li><Link href="/services/nextjs">NextJS</Link></li>
          </ul>
        </li>
        <li><Link href="/produits">Produits</Link></li>
      </ul>
    </nav>
  );
}

Points clés :

  • Utilisez des balises sémantiques (<nav>, <ul>, <li>).
  • Évitez les menus en JavaScript pur (non crawlables par Google).
  • Ajoutez des attributs aria-label pour l’accessibilité.

3. Optimiser le Balisage Structuré pour les Sitelinks

Le balisage Schema.org est un levier puissant pour aider Google à comprendre la structure de votre site. Voici les types de balises les plus utiles pour les sitelinks :

a) Balise WebSite

Cette balise indique à Google que votre site est une entité unique et fournit des informations sur sa structure globale.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Mon Site NextJS",
  "url": "https://monsite.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://monsite.com/recherche?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

b) Balise BreadcrumbList

Les breadcrumbs aident Google à comprendre la hiérarchie des pages et améliorent l’affichage dans les résultats.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Accueil",
      "item": "https://monsite.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Services",
      "item": "https://monsite.com/services"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO",
      "item": "https://monsite.com/services/seo"
    }
  ]
}
</script>

Comment l’implémenter dans NextJS ? Utilisez le composant Head de NextJS pour injecter le balisage dans le <head> de vos pages :

import Head from 'next/head';

export default function SEO() {
  return (
    <Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          // ... (balisage ici)
        }) }}
      />
    </Head>
  );
}

c) Balise SiteNavigationElement

Cette balise décrit explicitement la structure de navigation de votre site, ce qui peut influencer les sitelinks.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SiteNavigationElement",
  "name": "Menu Principal",
  "url": "https://monsite.com",
  "hasPart": [
    {
      "@type": "WebPage",
      "name": "Services",
      "url": "https://monsite.com/services"
    },
    {
      "@type": "WebPage",
      "name": "Produits",
      "url": "https://monsite.com/produits"
    }
  ]
}
</script>

4. Stratégies de Contenu pour Maximiser les Sitelinks

Une structure technique optimisée ne suffit pas : le contenu de vos pages joue un rôle clé dans l’obtention des sitelinks. Voici comment l’optimiser :

a) Créer des Pages Catégories Pertinentes

Les pages catégories (ex: /services, /produits) doivent :

  • Résumer clairement le contenu des sous-pages.
  • Inclure des liens internes vers les sous-pages avec des ancres descriptives.
  • Avoir un titre et une meta description optimisés pour le SEO.

Exemple de structure pour une page catégorie :

## Nos Services SEO pour NextJS

Chez [Mon Site], nous proposons une gamme complète de services pour optimiser votre site NextJS :

- [Optimisation technique SEO](/services/seo/technique) : Améliorez la vitesse et la crawlabilité de votre site.
- [Stratégie de contenu](/services/seo/contenu) : Créez des articles qui rankent sur Google.
- [Netlinking et autorité](/services/seo/netlinking) : Obtenez des backlinks de qualité.

**Pourquoi choisir nos services ?**
- Expertise NextJS et SEO combinée.
- Résultats mesurables en 3 mois.
- Approche personnalisée pour chaque client.

b) Optimiser les Ancres des Liens Internes

Les ancres (texte cliquable des liens) doivent être descriptives et riches en mots-clés. Évitez les ancres génériques comme "cliquez ici" ou "en savoir plus".

✅ Bon exemple :

<a href="/services/seo">Découvrez nos services SEO pour NextJS</a>

❌ Mauvais exemple :

<a href="/services/seo">Cliquez ici</a>

c) Utiliser des Titres et Sous-Titres Hiérarchisés

Les balises <h2>, <h3>, etc., aident Google à comprendre la structure sémantique de vos pages. Par exemple :

## Pourquoi Choisir NextJS pour Votre Site ?

### Performance et SEO
NextJS offre un rendu côté serveur (SSR) et une génération statique (SSG), ce qui améliore la vitesse de chargement.

### Flexibilité et Écosystème
Avec NextJS, vous bénéficiez de l’écosystème React tout en ayant accès à des fonctionnalités avancées comme les API routes.

5. Techniques Avancées pour NextJS

Pour aller plus loin, voici quelques techniques spécifiques à NextJS qui peuvent booster vos chances d’obtenir des sitelinks :

a) Génération Statique (SSG) vs Rendu Côté Serveur (SSR)

  • SSG (Static Site Generation) : Idéal pour les pages statiques (ex: blog, pages produits). Utilisez getStaticProps pour pré-générer les pages.
  • SSR (Server-Side Rendering) : Utile pour les pages dynamiques (ex: tableau de bord utilisateur). Utilisez getServerSideProps.

Exemple avec getStaticProps :

export async function getStaticProps() {
  const res = await fetch('https://api.monsite.com/services');
  const services = await res.json();

  return {
    props: { services },
  };
}

b) Utiliser les API Routes pour le SEO Dynamique

Les API routes de NextJS permettent de générer dynamiquement des meta tags ou du balisage structuré en fonction du contenu.

Exemple :

// pages/api/seo.js
export default function handler(req, res) {
  const { page } = req.query;
  const meta = {
    title: `Services ${page} | Mon Site`,
    description: `Découvrez nos services ${page} pour optimiser votre site NextJS.`,
  };
  res.status(200).json(meta);
}

c) Optimiser les Images avec next/image

Les images optimisées améliorent la vitesse de chargement, un facteur clé pour le SEO. Utilisez le composant next/image :

import Image from 'next/image';

<Image
  src="/image-seo.jpg"
  alt="Optimisation SEO pour NextJS"
  width={800}
  height={400}
  priority
/>

6. Surveiller et Améliorer Vos Résultats

Une fois votre site structuré et optimisé, il est crucial de surveiller ses performances dans les résultats de recherche. Voici quelques outils et méthodes :

a) Google Search Console

  • Vérifiez l’apparence dans les résultats (onglet "Améliorations").
  • Identifiez les pages les plus performantes (onglet "Performances").
  • Corrigez les erreurs d’exploration (onglet "Couverture").

b) Outils d’Analyse SEO

  • Ahrefs ou SEMrush : Analysez les backlinks et les mots-clés positionnés.
  • Screaming Frog : Auditez la structure de votre site et détectez les problèmes techniques.

c) Tests A/B pour les Sitelinks

Si vous n’obtenez pas encore de sitelinks, testez différentes approches :

  • Modifiez les titres et meta descriptions des pages principales.
  • Ajoutez ou supprimez des liens internes pour renforcer la hiérarchie.
  • Expérimentez avec différents balisages Schema.org.

Conclusion : Une Structure Optimisée pour des Résultats Concrets

Obtenir un affichage groupé sous forme de sitelinks dans les résultats Google n’est pas une question de chance, mais le résultat d’une stratégie SEO bien pensée et d’une structure technique optimisée. Avec NextJS, vous disposez d’un framework puissant pour mettre en place ces bonnes pratiques.

Pour résumer, voici les étapes clés à retenir :

  1. Organisez vos routes de manière hiérarchique (dossiers et fichiers dans /pages).
  2. Optimisez les URLs, les titres et les meta descriptions pour chaque page.
  3. Implémentez un balisage Schema.org (WebSite, BreadcrumbList, SiteNavigationElement).
  4. Créez un contenu de qualité avec une navigation intuitive et des liens internes pertinents.
  5. Surveillez vos performances avec Google Search Console et ajustez votre stratégie.

En suivant ces conseils, vous maximiserez vos chances de voir votre site NextJS apparaître de manière groupée dans les résultats Google, augmentant ainsi votre visibilité et votre trafic organique.

Prochaines étapes :

  • Auditez la structure actuelle de votre site NextJS.
  • Identifiez les pages prioritaires pour les sitelinks.
  • Commencez par implémenter les optimisations techniques (balisage, URLs, navigation).

Besoin d’aide pour structurer votre site NextJS ? Contactez nos experts SEO pour un audit personnalisé !