27/11/2023

Améliorer le SEO avec Metadata dans Next.js 13.2+

Le SEO (Search Engine Optimization) est crucial pour améliorer la visibilité et le classement des sites web dans les résultats des moteurs de recherche tels que Google. Next.js 13.2+ offre des fonctionnalités intégrées pour optimiser le SEO de votre site, dont la gestion de la metadata. Découvrons comment utiliser le nouvel API Metadata.

Avantages SEO de NEXTJS

Avant d'explorer le nouvel API Metadata, comprenons comment NEXTJS améliore le SEO :

Server Side Rendering
Code splitting automatique
Meta tags dynamiques
Génération de sitemap
Images optimisées
Intégration Schema.org

Ces fonctionnalités sont des optimisations intégrées qui renforcent le SEO de manière significative.

Metadata Statique dans NEXTJS

La metadata statique peut être définie dans le composant Head en JSX. Voici comment le faire :

import Head from 'next/head'

function MyPage() {
  return (
    <>
      <Head>
        <title>My Page Title</title>
        <meta name="description" content="My page description" />
      </Head>
      {/* Contenu de la page */}
    </>
  )
}

export default MyPage

Metadata Dynamique dans NEXTJS

La metadata dynamique peut être définie en passant des props au composant Head. Voici comment le faire :

export async function getStaticProps() {
  const pageTitle = "My Page Title"
  const pageDescription = "My page description";

  return {
    props: {
      pageTitle,
      pageDescription
    }
  }
}

function MyPage({ pageTitle, pageDescription }) {
  return (
    <>
      <Head>
        <title>{pageTitle}</title>
        <meta name="description" content={pageDescription} />
      </Head>
      {/* Contenu de la page */}
    </>
  )
}

export default MyPage;

Nouvel API Metadata dans NEXTJS 13.2+

L'API Metadata propose une nouvelle convention basée sur les fichiers en plus de la configuration, offrant une personnalisation plus simple des pages pour améliorer le SEO et le partage. Voici comment utiliser cette API :

Pour la metadata statique

/* Metadata statique */
export const metadata = {
  title: 'Page title',
};

Ou pour la metadata dynamique

/* Metadata dynamique */
export async function generateMetadata({ params }) {
  const data = await getData(params.id);
  return {
    title: `${data.title} | Apprendre Le Web`,
    desciption: data.content
  };
}

Cette API prend également en charge des conventions de fichiers pour des éléments tels que opengraph-image, twitter-image, favicon, sitemap, robots, manifest, etc.

Génération Dynamique d'Images Open Graph

Next.js 13.2+ propose également la génération d'images dynamiques avec l'API Image Response. Elle peut être utilisée pour générer des images Open Graph et Twitter lors de la construction ou dynamiquement à la demande.

/* Exemple d'utilisation d'Image Response */
/app/about/opengraph-image.tsx

import { ImageResponse } from 'next/server';

export const size = { width: 1200, height: 600 };
export const alt = 'About Acme';
export const contentType = 'image/png';
export const runtime = 'edge';

export default function og() {
  return new ImageResponse();
  {/* ... */}
}

Cette intégration naturelle avec d'autres API Next.js facilite la génération d'images dynamiques.

En Résumé

Avec NEXTJS 13.2+, l'API Metadata offre une solution complète pour gérer la metadata statique et dynamique. Les avantages SEO intégrés et la facilité d'utilisation font de cette API un outil puissant pour les développeurs web.