Salut tout le monde, ans le développement moderne d'applications web, il est essentiel d'optimiser la visibilité des pages sur les moteurs de recherche et d'améliorer l'expérience utilisateur. Next.js, un framework basé sur React, facilite grandement cette tâche grâce à sa gestion des metadata (ou métadonnées en bon français), telles que les titres de pages, les descriptions, et l'intégration avec Open Graph et Twitter Cards.

Dans cet article, nous allons explorer comment définir et personnaliser les métadonnées de vos pages avec Next.js, notamment en utilisant des valeurs par défaut et des templates pour générer des titres dynamiques.

Définir des Metadata avec Next.js (static)

En définissant cette propriété dans vos fichiers de page app/page.tsx ou layout.tsx, layout.tsx définit la structure et les métadonnées partagées pour un ensemble de pages, tandis que page.tsx correspond à une page spécifique avec son contenu et ses métadonnées uniques.

Voici un exemple classique de la structure de base de metadata dans un fichier Next.js :

import type { Metadata } from 'next';

export const metadata: Metadata = {

title: "Site Web 974 | Création de site internet d'excellence",

description: "Experts en sites vitrine, e-commerce, SEO. Votre site professionnel d'exception conçu avec soin."

};

Tu peux aussi créer un template:

import type { Metadata } from 'next';

export const metadata: Metadata = {

title: {

default: "Site Web 974 | Création de site internet d'excellence",

template: "%s | Site Web 974, l'excellence Web",

},

Dans une autre page tu ajoutes :

import { Metadata } from 'next';

export const metadata: Metadata = {

title: "Nos offres",

description: "Découvrez toutes nos offres de créations web: sites vitrine, de boutiques en ligne et projets sur-mesure."

}

Ici %s sera remplacé title

Métadonnées Dynamiques

import { Metadata } from 'next';

export const generateMetadata = async ({

params,

}: {

params: { slug: string };

}): Promise<Metadata> => {

// Simuler la récupération de données d'un article

const { slug } = params;

const post = await getData(slug); // Récupère les données de l'article

return {

title: post?.title || "Article | Site Web 974", // Si le titre n'est pas disponible, utiliser un titre par défaut

description: post?.summary || "Découvrez notre nouvel article", // Si la description n'est pas disponible, message par défaut

};

};

Métadonnées de base : Le titre, la description et l'image sont récupérés à partir des données de l'article. Si ces données sont manquantes, des valeurs par défaut sont utilisées.
OpenGraph et Twitter : Ces métadonnées sont également générées en fonction des données de l'article, avec des valeurs par défaut pour garantir une bonne présentation sur les réseaux sociaux.

Tu peux vérifier l'affichage de tes metadata sur ce site: spotibo.com

N'oubliez pas que bien structurer vos métadonnées est un investissement pour la visibilité de votre site web et pour garantir que vos pages soient bien référencées et correctement affichées sur les réseaux sociaux.

Bonus: Open Graph

openGraph: {

title: "Site Web 974 | Création de site internet d'excellence",

description: "Experts en sites vitrine, e-commerce, référencement en ligne et réparations web. Votre site professionnel d'exception sur mesure, conçu avec le plus grand soin",

url: 'https://siteweb974-latest.vercel.app',

siteName: 'siteweb974',

images: [

{

url: '/og.png',

width: 800,

height: 600,

}

],

locale: 'fr_FR',

type: 'website',

},

twitter: {

images: [

{

url: 'https://siteweb974-latest.vercel.app/og.png',

width: 800,

height: 600,

}

],

}

Le code complet:

import type { Metadata } from 'next';

export const metadata: Metadata = {

title: {

default: "Site Web 974 | Création de site internet d'excellence",

template: "%s | Site Web 974, l'excellence Web",

},

alternates: {

canonical: '',

},

openGraph: {

title: "Site Web 974 | Création de site internet d'excellence",

description: "Experts en sites vitrine, e-commerce, référencement en ligne et réparations web. Votre site professionnel d'exception sur mesure, conçu avec le plus grand soin",

url: 'https://siteweb974-latest.vercel.app',

siteName: 'siteweb974',

images: [

{

url: '/og.png',

width: 800,

height: 600,

}

],

locale: 'fr_FR',

type: 'website',

},

twitter: {

images: [

{

url: 'https://siteweb974-latest.vercel.app/og.png',

width: 800,

height: 600,

}

],

}

}

Tu peux vérifier si les OG images s'affichent en utilisant ce site: opengraph.xyz

Mettre en ligne une application Node.js avec CloudPanel via Hostinger

Mots clés

Commentaires

Articles similaires

Comment corriger l'erreur "Unexpected any" avec TypeScript ?

Créer des Métadata avec Next.js : Optimiser simplement votre SEO !