# 06 — Image Open Graph : dimensions déclarées mensongères

> **Spec** : Open Graph protocol — tier **recommended**
> **Verdict** : 🟠 **PARTIAL** · **Priorité : P2**
> **Effort estimé** : 1-2 h (création d'une image + mise à jour du helper)

## Ce qui est conforme

Le jeu de balises est complet et pré-rendu serveur sur l'accueil :

- `og:title`, `og:description`, `og:type="website"` (correct pour l'accueil), `og:url` (= canonical ✓), `og:site_name="ABC Guêpes"`, `og:locale="fr_FR"`
- `og:image` en URL absolue https ✓, `og:image:alt` présent ✓, `og:image:type="image/png"` ✓
- Twitter Cards : `twitter:card="summary_large_image"`, title, description, image, `site=@abcguepes`, `creator=@vivacoda`
- Poids : 83 Ko — sous le plafond WhatsApp (300 Ko) ✓

## Problème

**Trois dimensions différentes sont déclarées pour le même fichier `/images/logo.png` :**

| Source | Dimensions déclarées |
|---|---|
| `og:image:width` / `og:image:height` | 1200 × 630 (ratio 1,91:1) |
| JSON-LD `logo` (ImageObject) | 512 × 512 |
| **Fichier réel** | **1239 × 1077** (ratio ≈ 1,15:1) |

L'image de partage est en réalité le **logo de l'entreprise**, presque carré, annoncé comme une carte 1,91:1.

## Impact

- Facebook, WhatsApp, LinkedIn, iMessage recadrent selon les dimensions déclarées ou re-mesurent : le logo quasi carré affiché en carte large 1,91:1 sera **rogné haut/bas ou pillarboxé** — rendu dégradé sur chaque partage du site.
- Certains scrapers (Facebook notamment) utilisent width/height déclarés pour afficher la carte **dès le premier partage** sans attendre le téléchargement — des valeurs fausses produisent un premier rendu cassé.
- Un logo n'est pas une image de partage : aucune information (service, zone, téléphone) n'est communiquée dans le feed.

## Correctif

1. **Créer une vraie image de partage** dédiée, `1200 × 630` (ratio exact 1,91:1), < 300 Ko : logo + « Destruction nids de guêpes & frelons — Île-de-France — Intervention 24h » sur fond de marque (#e6332a est déjà le theme-color). La servir par ex. sous `/images/og-card.png`.
2. **Aligner les déclarations sur la réalité** :
   ```html
   <meta property="og:image" content="https://www.abc-guepes.com/images/og-card.png" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
   <meta property="og:image:alt" content="ABC Guêpes — destruction de nids de guêpes et frelons en Île-de-France" />
   ```
3. **Corriger le JSON-LD** `logo` pour refléter les dimensions réelles du fichier logo (1239×1077), ou fournir un vrai logo carré 512×512 si c'est le format voulu (Google recommande un logo ≥ 112×112, ratio 1:1 idéal). Voir [issue 09](09-structured-data.md).
4. Optionnel mais rentable : décliner l'image OG par template (pages départements/villes avec le nom de la zone) — Gatsby permet de générer ces cartes au build.

## Vérification

- [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) et [opengraph.xyz](https://www.opengraph.xyz) : la carte s'affiche entière, sans recadrage.
- `identify` (ImageMagick) sur le fichier servi = exactement 1200×630 = valeurs des metas.
- Partage test WhatsApp/LinkedIn : rendu correct.