2.4 KiB
SEO et aperçus sociaux des URLs recette (/r/...)
Contrainte
Les robots des réseaux (Facebook, X, LinkedIn, etc.) lisent le HTML de la première réponse HTTP. Une SPA qui ne met à jour <title> et les balises Open Graph qu’après exécution du JavaScript voit souvent des aperçus génériques ou incorrects.
Stratégie retenue : pré-rendu statique au build + middleware en développement
| Phase | Comportement |
|---|---|
vite build |
Après génération de dist/index.html, le plugin recipeSeoPlugin (apps/web/vite-plugin-recipe-seo.ts) lit dist/recipes/catalog.json, construit pour chaque couple (baseId, variantId) du catalogue un fichier dist/r/<baseEnc>/<variantEnc>/index.html avec les mêmes scripts/CSS que la page d’accueil, mais un <head> dédié (og:*, twitter:*, canonical, etc.). Les segments de chemin utilisent encodeURIComponent, comme le routeur Solid. |
vite (dev) |
Un middleware HTTP intercepte les GET /r/:base/:variant, recharge public/recipes/catalog.json et index.html, puis applique la même injection de métadonnées. Les tests Playwright et le débogage local voient donc des balises correctes sans produire un build. |
Ce n’est pas une solution « meta uniquement côté client » : le HTML servu pour ces URLs contient déjà les bonnes balises.
Déploiement
Le serveur statique ou CDN doit servir le fichier correspondant à l’URL lorsqu’il existe (ex. essai try_files $uri $uri/ ... côté nginx, ou équivalent). Les chemins % dans les noms de dossiers reflètent les IDs catalogue encodés (base:… → base%3A…).
Variable d’environnement
BEN_TO_SITE_ORIGIN: origine canonique pourog:url,canonicalet URLs absolues des images (défauthttps://ben-to.frau build ; en dev, défauthttp://localhost:<port>sauf si cette variable est définie).
Validation manuelle (critères ticket)
Après déploiement, utiliser par exemple Facebook Sharing Debugger ou l’outil cartes Twitter/X pour une URL /r/... et vérifier titre, description et image recette.
Données
Les titres et descriptions utilisent la locale fr (alignée sur lang="fr" du document). L’image privilégiée est recipeCoverImageUrl, puis coverImageUrl, puis le logo sous /branding/onigiri-logo.png.