📌 Exercice : Optimisation SEO avec Next.js
🎯 Objectif
Mettre en place les bonnes pratiques SEO dans une application Next.js en travaillant sur les métadonnées, les Open Graph & Twitter Cards, et la génération d’un sitemap et d’un robots.txt.
🔗 Code source : 📂 GitHub 🚀
🛠 Étape 1 : Définir les métadonnées SEO
1️⃣ Ajouter des métadonnées globales dans layout.tsx
- Ouvrez le fichier
app/layout.tsx - Ajoutez un objet
metadataavec les informations suivantes :title: Nom du sitedescription: Une courte description du sitekeywords: Liste de mots-clés
📌 Exemple :
app/layout.tsx
export const metadata = {
title: "Mon Super Site",
description: "Découvrez des articles passionnants sur le développement web.",
keywords: ["next.js", "seo", "développement web"],
};- Lancez le projet et inspectez la page avec les DevTools (
F12>Elements>head) pour vérifier que les balises<title>et<meta>sont bien générées.
2️⃣ Ajouter des métadonnées dynamiques avec generateMetadata()
- Dans
app/blog/[id]/page.tsx, créez une fonctiongenerateMetadata()pour générer un titre et une description unique pour chaque article de blog.
📌 Exemple :
app/blog/[id]/page.tsx
import { notFound } from "next/navigation";
export async function getPostBySlug(id: string) {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (!response.ok) {
notFound()
}
const post = await response.json();
return {
title: post.title,
excerpt: post.body.substring(0, 150) + "...", // Prend les 150 premiers caractères du contenu
content: post.body,
image: `https://via.placeholder.com/600x400?text=${encodeURIComponent(post.title)}`, // Image générée
};
}
export async function generateMetadata({ params }: { params: { id: string } }) {
const post = await getPostBySlug((await params).id); // Fonction fictive récupérant un article
return {
title: post.title,
description: post.excerpt,
};
}
export default async function PostPage({ params }: { params: { id: string } }) {
const post = await getPostBySlug((await params).id); // Fonction fictive récupérant un article
return <div>
<h1>{post.title}</h1>
</div>
}- Ouvrez un article dans le navigateur et vérifiez que le titre change bien en fonction du contenu du blog.
🖼 Étape 2 : Ajouter Open Graph et Twitter Cards
- Modifiez
generateMetadata()pour inclure des balises Open Graph et Twitter Cards avec une image de partage.
📌 Exemple :
app/blog/[id]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPostBySlug(params.id);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [{ url: `https://via.placeholder.com/600x400?text=${encodeURIComponent(post.title)}` }],
type: "article",
},
twitter: {
card: "summary_large_image",
title: post.title,
description: post.excerpt,
images: [`https://via.placeholder.com/600x400?text=${encodeURIComponent(post.title)}`],
},
};
}- Testez les balises générées avec l’outil Meta Tags ou l’outil Sharing Debugger .
🗺 Étape 3 : Générer un sitemap et un robots.txt
1️⃣ Générer un sitemap.xml dynamique
- Dans
app/sitemap.ts, créez un sitemap listant dynamiquement toutes les pages du blog.
📌 Exemple :
app/sitemap.ts
export async function getAllPosts() {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
if (!response.ok) {
throw new Error("Impossible de récupérer les articles");
}
const posts = await response.json();
return posts.map((post) => ({
slug: post.id.toString(), // JSONPlaceholder utilise des IDs numériques
updatedAt: new Date().toISOString(), // Simule une date de mise à jour
}));
}
export default async function sitemap() {
const posts = await getAllPosts();
return posts.map((post) => ({
url: `https://example.com/blog/${post.slug}`,
lastModified: post.updatedAt,
}));
}- Vérifiez que votre sitemap fonctionne en visitant
http://localhost:3000/sitemap.xml.
2️⃣ Ajouter un robots.txt
- Dans le dossier
public/, ajoutez un fichierrobots.txtavec les directives suivantes :
📌 Exemple :
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml- Vérifiez le fichier en accédant à
http://localhost:3000/robots.txt.
✅ Validation finale
- Vérifier les métadonnées SEO avec Lighthouse (Chrome DevTools > Audits > SEO).
- Tester Open Graph et Twitter Cards avec Meta Tags .
- S’assurer que
sitemap.xmletrobots.txtsont bien accessibles dans le navigateur.
🚀 Félicitations ! Votre site Next.js est maintenant optimisé pour le SEO.
mis à jour le