Tous mes articles de blog

Générer des balises Open Graph dynamiques avec Next.js 14

Cuzeac Florin

7 août 2024

98 vues

Une façon puissante d’améliorer le partage de liens de votre site web sur les réseaux sociaux est de mettre en œuvre ce qu'on appelle des balises méta Open Graph dynamiques. Dans ce tutoriel, nous allons explorer comment vous pouvez y parvenir facilement avec Next.js 14.

Avant de plonger dans les détails de l’implémentation, comprenons l’importance d’Open Graph. Développé par Facebook, Open Graph est un protocole internet qui standardise l’incorporation de métadonnées sur une page web pour représenter son contenu.

Implémentation d’une balise Open Graph dynamique avec Next.js 14 et App Router

Adoptons une approche pratique et voyons comment nous pouvons implémenter des balises Open Graph dynamiques avec Next.js. Le code suivant montre comment générer des images Open Graph dynamiques basées sur le titre d’un article.

Étape 1 : Créer un nouveau projet Next.js à l'aide du terminal

Commencez par créer un nouveau projet Next.js.

Ouvrez votre terminal et exécutez la commande suivante :

bash
npx create-next-app@latest

Dans le CLI, nommez votre projet demo-opengraph-dynamique, pour les besoins de ce tutoriel. Vous pouvez choisir un autre nom si vous le souhaitez.

Une fois le projet créé, changez de répertoire vers le projet nouvellement créé :

bash
cd demo-opengraph-dynamique

Et lancez l'application :

bash
pnpm run dev

Étape 2 : Implémenter la route Open Graph dynamique

Maintenant, passons au code.

Après la création de votre application, et l'installation de toutes les dépendances, vous devriez avoir cette structure de dossier :

Une fois l'installation terminée, ouvrez votre éditeur de code et créez un nouveau fichier route.tsx dans le dossier app/og.

Dans le fichier route.tsx, ajoutez le code suivant :

tsx
import { env } from '@/env/client';
import type { NextFont } from 'next/dist/compiled/@next/font';
import { Inter } from 'next/font/google';
import { ImageResponse } from 'next/og';
import type { NextRequest } from 'next/server';

export const runtime = 'edge';

const inter: NextFont = Inter({
	weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
	subsets: ['latin'],
});

const name: string = `${env.NEXT_PUBLIC_NAME} ${env.NEXT_PUBLIC_SURNAME}`;

export const GET = async (req: NextRequest): Promise<ImageResponse> => {
	const { searchParams, host, protocol } = req.nextUrl;
	const backgroundImage: string = `url(${protocol}//${host}/og-bg.png)`;
	const authorImage: string = `${protocol}//${host}/og-author.png`;
	const postTitle: string | null = searchParams.get('title');

	return new ImageResponse(
		<div
			className={inter.className}
			style={{
				height: '100%',
				width: '100%',
				display: 'flex',
				flexDirection: 'column',
				alignItems: 'center',
				justifyContent: 'center',
				backgroundColor: '#000000',
				paddingRight: 20,
				paddingLeft: 20,
			}}
		>
			<div
				tw="rounded-3xl w-full h-full p-16 flex flex-col justify-between"
				style={{
					backgroundImage,
					backgroundSize: 'cover',
					backgroundRepeat: 'no-repeat',
				}}
			>
				<div tw="flex flex-col">
					<p tw="font-medium text-3xl text-white">
						{protocol}//{host}
					</p>
					<h1 tw="text-8xl font-geist-sans text-white leading-[7rem]">
						{postTitle}
					</h1>
				</div>
				<div tw="w-full flex flex-row items-center justify-end">
					<img
						src={authorImage}
						alt="Image de l'auteur"
						tw="w-16 h-16 rounded-full object-cover object-top rounded-full mr-3"
					/>
					<div tw="flex flex-col items-start justify-center">
						<h2 tw="text-2xl font-geist-sans text-white font-bold m-0">
							{name}
						</h2>
						<p tw="m-0 text-white text-base">Développeur Web</p>
					</div>
				</div>
			</div>
		</div>,
		{
			width: 1500,
			height: 800,
		},
	);
};

Voici une explication du code :

Imports :
- Le type NextFont et la police Inter sont importés pour styliser le texte en utilisant la police Inter de Google.
- ImageResponse et NextRequest sont importés de next/og et next/server respectivement, pour gérer les réponses d'images et les types de requêtes.

Exécution Edge :
- runtime = 'edge' spécifie que cette fonction doit s'exécuter dans un environnement de type edge, offrant une latence plus faible.

Configuration de la police :
- La constante inter est configurée comme un NextFont en utilisant la police Inter avec un poids de '400' et un sous-ensemble 'latin'.

Fonction GET :
- C'est une fonction asynchrone qui répond aux requêtes GET, prenant un objet NextRequest.
- Elle extrait les paramètres de recherche, l'hôte et le protocole de l'URL de la requête.
- Construit les URLs pour une image de fond et une image de l'auteur en utilisant le protocole et l'hôte.
- Récupère un titre de publication à partir des paramètres de recherche. Rendu de l'Image :

ImageResponse génère une image Open Graph.
- Le conteneur principal utilise une mise en page Flexbox pour centrer le contenu et applique des styles comme un fond noir, du padding, et une classe de police Inter pour le style.
- Deux divs enfants : l'un pour l'URL du site et le titre de la publication, et l'autre pour les informations de l'auteur.
- Le titre de la publication est affiché dans une grande police en gras.
- Les informations de l'auteur comprennent une image et une description ("Cuzeac Florin", "Développeur Web").
- ImageResponse spécifie des dimensions d'image de 1500x800 pixels pour le rendu final.

Pour utiliser Tailwind CSS pour styliser l'image Open Graph, au lieu d'utiliser style, on utilise tw.

Étape 3 : Test de la route

J'ai créé un composant pour tester la génération d'une image Open Graph dynamique. Vous pouvez tester en renseignant un titre de publication dans le champ ci-dessous.

Essayez avec un autre titre :

Générer des balises Open Graph dynamiques avec Next.js 14

Maintenant, testons la route. Suivez ces étapes :

Démarrez votre serveur de développement Next.js avec pnpm run dev, dans votre terminal.
Ouvrez votre navigateur et accédez à http://localhost:3000/og?title=VotreTitreDynamique.

Remplacez “VotreTitreDynamique” par le titre souhaité pour votre image Open Graph.

Étape 4 : Implémenter les balises méta Open Graph dynamiques

Next.js 14 utilise un objet appelé metadata pour décrire les attributs SEO de la page, y compris les attributs OG. (peut être placé dans layout.jsx/tsx / page.jsx/tsx)

tsx
// si vous utilisez TypeScript
import { Metadata } from 'next';

export const metadata: Metadata = {
	openGraph: {
        title: 'Next.js',
        description: 'Le framework React pour le web',
        url: 'https://nextjs.org',
        siteName: 'Next.js',
        images: [
            // Route OG dynamique
            {
                url: 'http://localhost:3000/og?title=Next.js',
                width: 800,
                height: 600,
            },
            // Route OG dynamique
            {
                url: 'http://localhost:3000/og?title=Next.js',
                width: 1800,
                height: 1600,
                alt: 'Ma description personnalisée',
            },
        ],
        locale: 'fr_FR',
        type: 'website',
    },
};

export default function Page() {
	return (<section>Ma page avec Next.js</section>)
}

Le code ci-dessus générera les balises méta suivantes :

html
<meta property="og:title" content="Next.js" />
<meta property="og:description" content="Le framework React pour le web" />
<meta property="og:url" content="https://nextjs.org/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:image:url" content="http://localhost:3000/og?title=Next.js" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image:url" content="http://localhost:3000/og?title=Next.js" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="1600" />
<meta property="og:image:alt" content="Ma description personnalisée" />
<meta property="og:type" content="website" />

Avec ces étapes, vous avez réussi à implémenter et tester des balises Open Graph dynamiques dans votre projet Next.js. Cette fonctionnalité améliore le partage de liens de votre site web sur les réseaux sociaux et offre une représentation visuelle attrayante de votre contenu.

Pour plus d’informations, consultez la documentation officielle sur Open Graph.