# 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 `` 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 pour `og:url`, `canonical` et URLs absolues des images (défaut **`https://ben-to.fr`** au build ; en dev, défaut **`http://localhost:<port>`** sauf si cette variable est définie). ### Validation manuelle (critères ticket) Après déploiement, utiliser par exemple [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) 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`.