SEO - Structure des URLs | Next.js Français

La structure des URLs est un élément important d'une stratégie SEO. Bien que Google ne divulgue pas le poids accordé à chaque aspect du SEO, des URLs bien conçues sont considérées comme une meilleure pratique, qu'elles représentent ou non un facteur de classement majeur ou mineur.

Voici quelques principes à suivre :

Sémantique : Il est préférable d'utiliser des URLs sémantiques, c'est-à-dire qui utilisent des mots plutôt que des identifiants ou des nombres aléatoires. Exemple : /learn/basics/create-nextjs-app est meilleur que /learn/course-1/lesson-1
Modèles logiques et cohérents : Les URLs doivent suivre un modèle cohérent entre les pages. Par exemple, regrouper toutes les pages produits dans un même dossier plutôt que d'avoir des chemins différents pour chaque produit.
Axé sur les mots-clés : Google base encore une partie importante de ses systèmes sur les mots-clés contenus dans un site. Utiliser des mots-clés dans vos URLs peut faciliter la compréhension de l'objectif des pages.
Sans paramètres : Utiliser des paramètres pour construire vos URLs n'est généralement pas une bonne idée. Ils ne sont pas sémantiques dans la plupart des cas, et les moteurs de recherche pourraient les confondre et réduire leur classement dans les résultats.

Comment les routes sont-elles définies dans Next.js ?

Next.js utilise un système de routage basé sur le système de fichiers construit sur le concept de pages. Lorsqu'un fichier est ajouté au répertoire pages, il devient automatiquement disponible comme route. Les fichiers et dossiers à l'intérieur du répertoire pages peuvent être utilisés pour définir les modèles les plus courants.

Examinons quelques URLs simples et comment les ajouter à votre routeur Next.js :

Page d'accueil : https://www.example.com → pages/index.js
Listes : https://www.example.com/products → pages/products.js ou pages/products/index.js
Détail : https://www.example.com/products/product → pages/products/product.js

Pour un blog ou un site e-commerce, vous voudrez probablement utiliser l'ID du produit ou le nom du blog comme slug dans l'URL. C'est ce qu'on appelle le routage dynamique :

Produit : https://www.example.com/products/nextjs-shirt → pages/products/[product].js
Blog : https://www.example.com/blog/seo-in-nextjs → pages/blog/[blog-name].js

Pour utiliser le routage dynamique, vous pouvez ajouter des crochets à un nom de page dans vos sous-dossiers products ou blogs.

Voici un exemple de page optimisée pour cela en utilisant SSG (Génération de site statique) :

// pages/blog/[slug].js
 
import Head from 'next/head';
 
export async function getStaticPaths() {
  // Appel à une API externe pour obtenir les articles
  const res = await fetch('https://www.example.com/api/posts');
  const posts = await res.json();
 
  // Obtenir les chemins à pré-rendre basés sur les articles
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  // Définir fallback sur 'blocking'. Maintenant, tout nouvel article ajouté après le build utilisera SSR
  // pour garantir le SEO. Il sera ensuite statique pour toutes les requêtes suivantes
  return { paths, fallback: 'blocking' };
}
 
export async function getStaticProps({ params }) {
  const res = await fetch(`https://www.example.com/api/blog/${params.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
function BlogPost({ blog }) {
  return (
    <>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </>
  );
}
 
export default BlogPost;

Voici un autre exemple utilisant SSR (Rendu côté serveur) :

// pages/blog/[slug].js
 
import Head from 'next/head';
function BlogPost({ blog }) {
  return (
    <div>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </div>
  );
}
 
export async function getServerSideProps({ query }) {
  const res = await fetch(`https://www.example.com/api/blog/${query.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
export default BlogPost;

Pour aller plus loin

Next.js : Introduction au routage
Next.js : Pages
Next.js : Routage dynamique

Structure des URLs

Comment les routes sont-elles définies dans Next.js ?

Pour aller plus loin

On this page