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 :
npx create-next-app@latest
Une fois le projet créé, changez de répertoire vers le projet nouvellement créé :
cd demo-opengraph-dynamique
Et lancez l'application :
pnpm run dev
É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 :
- Importation de types et de la police Inter depuis Google Fonts.
- 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)
- 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.
- 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 :
- Démarrez votre serveur de développement Next.js avec pnpm run dev
- 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.