Génération dynamique des balises Open Graph dans une SPA React avec backend Node.js/Express
Bonjour à tous,
Je développe un site avec un frontend React (SPA) et un backend Node.js/Express. Je souhaite générer dynamiquement des balises Open Graph (OG) sur une route spécifique /Evenement/:id afin d’avoir un bon aperçu lorsque je partage un événement sur les réseaux sociaux (Facebook, LinkedIn…)
Ce que j’ai fait :
Dans mon backend Express, j’ai une route /Evenement/:id qui détecte les bots (user-agent facebookexternalhit, twitterbot, linkedinbot) et renvoie une page HTML avec des balises OG spécifiques à l’événement.
Si ce n’est pas un bot, je renvoie la page React SPA classique (index.html).
Voici un extrait simplifié de mon backend :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
app.get('/Evenement/:id', async (req, res) => {
const isCrawler = /facebookexternalhit|twitterbot|linkedinbot/i.test(req.headers['user-agent']);
if (!isCrawler) {
return res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
}
const eventData = await Evenements.findById(req.params.id);
const cleanDescription = eventData.texte.replace(/<[^>]*>/g, '').substring(0, 160);
const imageUrl = `https://moncoach.tn/${eventData.photo}`;
const pageUrl = `https://moncoach.tn/Evenement/${eventData._id}`;
return res.send(`
<html>
<head>
<meta property="og:title" content="${eventData.titre}" />
<meta property="og:description" content="${cleanDescription}" />
<meta property="og:image" content="${imageUrl}" />
<meta property="og:url" content="${pageUrl}" />
</head>
<body></body>
</html>
`);
}); |
Mon problème :
Quand je partage un lien /Evenement/:id sur Facebook ou LinkedIn, les balises OG affichées sont celles de ma page React SPA (index.html) et pas celles dynamiques envoyées par mon backend.
Je précise que dans React, j’utilise aussi react-helmet pour gérer les balises meta côté client.
Mes questions :
Est-ce que le fait d’utiliser React Helmet côté client ne suffit pas pour que les bots récupèrent les bonnes balises OG ?
Comment être sûr que ma route backend est bien prioritaire par rapport au serveur React SPA ?
Y a-t-il des paramètres à vérifier côté proxy / serveur pour ne pas écraser ma réponse dynamique ?
Quelle est la meilleure pratique pour gérer ces balises OG dynamiques dans une SPA React + backend Node.js ?
Merci d’avance pour votre aide !
