31 lines
2.4 KiB
Markdown
31 lines
2.4 KiB
Markdown
# 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 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`.
|