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

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

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.

Introduction : Comprendre Open Graph

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’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 :

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

Et lancez l'application :

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

Maintenant, passons au code.

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

Voici la structure du projet final :

├── pnpm-lock.yaml
├── next-env.d.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── public
        // image de fond
│   ├── og-bg.png
│   ├── next.svg
│   └── vercel.svg
├── src
│   └── app
│   │   └── og
            // la nouvelle route
│   │       └── route.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── tailwind.config.ts
└── tsconfig.json

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

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: '400',
	subsets: ['latin'],
});

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',
				backgroundColor: '#000000',
				paddingLeft: 20,
				paddingRight: 20,
			}}
		>
			<div
				style={{
					height: '100%',
					width: '100%',
					display: 'flex',
					flexDirection: 'column',
					justifyContent: 'space-between',
					color: '#FFFFFF',
					fontWeight: 'bold',
					padding: '40px',
					backgroundImage,
					backgroundSize: 'cover',
					backgroundRepeat: 'no-repeat',
					borderRadius: 20,
				}}
			>
				<div
					style={{
						display: 'flex',
						flexDirection: 'column',
					}}
				>
					<p
						style={{
							fontSize: '30px',
							fontWeight: '900',
							letterSpacing: '-0.025em',
							color: '#FFFFFF',
						}}
					>
						{protocol}//{host}
					</p>
					<div
						style={{
							marginTop: '40px',
							fontSize: '96px',
							fontWeight: '900',
							lineHeight: '6rem',
							padding: '0 0 100px 0',
							letterSpacing: '-0.025em',
							color: '#FFFFFF',
							lineClamp: 4,
						}}
					>
						{postTitle}
					</div>
				</div>
				<div
					style={{
						width: '100%',
						display: 'flex',
						flexDirection: 'row',
						alignItems: 'center',
						justifyContent: 'flex-end',
						gap: '20px',
					}}
				>
					<img
						src={authorImage}
						alt="Cuzeac Florin"
						style={{
							width: '80px',
							height: '80px',
							objectFit: 'cover',
							objectPosition: 'top',
							borderRadius: '50%',
						}}
					/>
					<div
						style={{
							display: 'flex',
							flexDirection: 'column',
							alignItems: 'flex-start',
							justifyContent: 'center',
						}}
					>
						<div
							style={{
								fontSize: '28px',
								fontWeight: '900',
								letterSpacing: '-0.025em',
								color: '#FFFFFF',
							}}
						>
							Cuzeac Florin
						</div>
						<div
							style={{
								fontSize: '16px',
								fontWeight: '400',
								letterSpacing: '-0.025em',
								color: '#FFFFFF',
							}}
						>
							Développeur Web
						</div>
					</div>
				</div>
			</div>
		</div>,
		{
			width: 1500,
			height: 800,
		},
	);
};

Explication du code :

1. Importation de types et de la police Inter depuis Google Fonts.
2. Récupération des paramètres de la requête, du protocole et de l’hôte (ce qui nous permettra de tester la route en développement sans se soucier du chemin de l'image)
3. Utilisation de ImageResponse pour générer une image et mise en page avec des styles CSS inline pour afficher le fond, le titre du post, et les informations de l’auteur.
4. Pour finir, la taille de l’image générée est de 1500x800 pixels.

Étape 3 : Test de la route

Maintenant, testons la route. Suivez ces étapes :

1. Démarrez votre serveur de développement Next.js avec pnpm run dev
2. 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)

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

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 :

<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" />

Conclusion

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.