Skip to Content
🎉 Utilisez JS efficacement →
Next.jsSEO 📈SEO

🌍 Utilisation des metadata dans Next.js 13+

Next.js 13+ introduit une API native pour gĂ©rer les mĂ©tadonnĂ©es (title, description, og:image, etc.) directement dans les pages et layouts. Cela amĂ©liore le SEO et l’accessibilitĂ© sans nĂ©cessiter de bibliothĂšques comme next/head.

1ïžâƒŁ Ajouter des mĂ©tadonnĂ©es dans layout.tsx

📍 But : DĂ©finir des mĂ©tadonnĂ©es globales pour l’ensemble du site.

app/layout.tsx
export const metadata = {
  title: "Mon Site Next.js",
  description: "Un site web performant avec Next.js 13+",
  keywords: ["Next.js", "SEO", "Performance"],
  openGraph: {
    title: "Mon Site Next.js",
    description: "Découvrez Next.js et ses fonctionnalités avancées",
    url: "https://monsite.com",
    siteName: "Mon Site",
    images: [
      {
        url: "/og-image.jpg", 
        // Image affichée sur les réseaux sociaux
        // Ă  placer dans le dossier "/public"
        width: 1200,
        height: 630,
        alt: "BanniĂšre de Mon Site Next.js",
      },
    ],
    locale: "fr_FR",
    type: "website",
    alternates: {
      canonical: './',
      // Défini l'url de la page en cours préférable à "/"
    },
  },
};
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        {children}
      </body>
    </html>
  );
}

✅ Effet :

  • Toutes les pages hĂ©ritent des mĂ©tadonnĂ©es dĂ©finies ici.
  • SEO amĂ©liorĂ© avec des balises optimisĂ©es (title, description, og:image, etc.).

2ïžâƒŁ Ajouter des mĂ©tadonnĂ©es spĂ©cifiques Ă  une page (page.tsx)

📍 But : Personnaliser les mĂ©tadonnĂ©es par page.

app/about/page.tsx
export const metadata = {
  title: "À propos - Mon Site",
  description: "DĂ©couvrez qui nous sommes et notre mission.",
};
 
export default function AboutPage() {
  return (
    <div>
      <h2 className="text-2xl font-bold">À propos de nous</h2>
      <p>Nous sommes passionnés par Next.js et le développement web.</p>
    </div>
  );
}

✅ Effet :

  • La page /about aura un titre unique "À propos - Mon Site".
  • PrioritĂ© aux mĂ©tadonnĂ©es locales si elles existent, sinon celles du layout.tsx s’appliquent.

3ïžâƒŁ GĂ©nĂ©rer dynamiquement des mĂ©tadonnĂ©es (generateMetadata)

📍 But : GĂ©nĂ©rer des mĂ©tadonnĂ©es en fonction d’un contenu dynamique (ex : article de blog).

app/blog/[slug]/page.tsx
import { Metadata } from "next";
 
type Props = {
  params: { slug: string };
};
 
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const article = await fetch(`https://api.monsite.com/articles/${params.slug}`).then((res) =>
    res.json()
  );
 
  return {
    title: article.title,
    description: article.excerpt,
    openGraph: {
      title: article.title,
      description: article.excerpt,
      images: [{ url: article.image }],
    },
  };
}
 
export default function BlogPost({ params }: Props) {
  return (
    <div>
      <h1>Article : {params.slug}</h1>
      <p>Contenu de l’article...</p>
    </div>
  );
}

✅ Effet :

  • SEO dynamique : Chaque article a ses propres mĂ©tadonnĂ©es.
  • Optimisation pour le partage sur les rĂ©seaux sociaux (og:title, og:image).

🎯 Conclusion : Pourquoi utiliser les metadata de Next.js ?

✅ FacilitĂ© → Plus besoin de next/head, tout est intĂ©grĂ© dans metadata.
✅ Performance → MĂ©tadonnĂ©es gĂ©rĂ©es directement au niveau du serveur.
✅ SEO optimal → Personnalisation des balises title, description, og:image.

mis Ă  jour le
ExercicesgenerateMetadata