# 04 — Titles : longueurs excessives, téléphone et emojis

> **Spec** : The `<title>` element — tier **required**
> **Verdict** : 🟠 **PARTIAL** (structurellement conforme, qualité défaillante) · **Priorité : P2**
> **Effort estimé** : 0,5 jour (templates) + passe éditoriale

## Ce qui est conforme

Un seul `<title>` par page, non vide, pré-rendu serveur, **unique sur chaque page échantillonnée**, partie spécifique en premier + marque en dernier. La mécanique est bonne — c'est le contenu des templates qui pèche.

## Problèmes & preuves (titles verbatim)

| Page | Title | Longueur | Problème |
|---|---|---|---|
| `/` | `Destruction nid de guêpes et frelons en Île-de-France \| ABC Guêpes` | 66 | Légèrement au-dessus de la cible 50-60 |
| `/nid-…-seine-et-marne-77` | `Traitement & Destruction Nid Guêpes Frelons Seine-et-Marne 77 \| ABC Guêpes ☎ 06.31.26.63.84` | **91** | Téléphone + emoji, troncature SERP garantie |
| `/nid-…-seine-saint-denis-93` | même template | **94** | idem |
| `/nid-…-paris-75` | `Traitement & Destruction Nid Guêpes Frelons Paris 75 \| ABC Guêpes ☎ 06.31.26.63.84` | 82 | idem |
| `/presentation-deratisation` | `Guide Complet Dératisation \| Rats, Souris, Méthodes Professionnelles - ABC Guêpes 77 91 94` | 90 | Trop long, double séparateur `\|` et `-` |
| `/presentation-chenilles-…` | `Guide Chenilles Processionnaires \| Dangers, Identification & Traitement - ABC Guêpes 77 91 94` | **93** | idem |
| `/blog/destruction-…-qui-paie` | (…) | **107** | Troncature massive |
| `/blog/nouvelles-especes-frelons` | `🚨 ALERTE : Trois Nouvelles Espèces de Frelons Menacent l'Europe \| ABC Guêpes` | 77 | Emoji clickbait en tête de title |
| `/contact` | `Contact ABC Guêpes 77 91 94 \| Devis gratuit destruction nids guêpes frelons` | 75 | Long |
| `/nid-…-yerres-91330` (template ×622) | `Nid guêpes frelons Yerres 91330 \| ABC` | 37 | **Marque tronquée en « ABC »** |

## Impact

- Au-delà de ~600 px (≈ 55-60 caractères), Google tronque et **réécrit souvent le title** — le site perd le contrôle de son affichage SERP sur ses pages les plus stratégiques (départements).
- Le numéro de téléphone dans le `<title>` n'est **jamais cliquable en SERP** : il consomme la moitié du budget de caractères sans valeur. Sa place est dans le JSON-LD LocalBusiness (déjà présent ✓) et le contenu de page.
- « ABC » seul (pages villes) n'a aucune valeur de marque ; incohérent avec les autres templates qui affichent « ABC Guêpes ».
- Le title est aussi le libellé d'onglet, d'historique, de favori et de partage — les emojis 🚨/☎ y dégradent la lisibilité.

## Correctif

Règles de template (cible **50-60 caractères**, max ~65) :

- **Ville** : `Nid de guêpes et frelons à <Ville> (<CP>) | ABC Guêpes` → ex. `Nid de guêpes et frelons à Yerres (91330) | ABC Guêpes` (55).
- **Département** : `Destruction nid de guêpes et frelons <Dept> (<NN>) | ABC Guêpes` → ex. `…Seine-et-Marne (77) | ABC Guêpes` — **sans téléphone ni ☎**.
- **Guides/services** : un seul séparateur, marque courte : `Dératisation : guide complet | ABC Guêpes` (41).
- **Blog** : retirer les emojis et le style « ALERTE » ; l'angle éditorial vit dans le H1 et la description, pas dans le title.
- Uniformiser le séparateur (`|` partout) et la marque (`ABC Guêpes` partout, jamais « ABC »).

Implémentation Gatsby : centraliser la construction du title dans un helper unique (composant SEO/Head commun) avec `titleTemplate: '%s | ABC Guêpes'` et une validation de longueur au build (warning si > 65 caractères).

## Vérification

- Extraction de tous les titles post-build : `grep -rhoP '(?<=<title>)[^<]+' public/**/index.html | awk '{ print length, $0 }' | sort -rn | head -30` → aucun > 65 caractères, aucun `☎`/`🚨`, aucun ` | ABC` final tronqué.
- Unicité : `… | sort | uniq -d` → vide.