Inclut SPECS_SVELTE.md : conventions Svelte 5/SvelteKit pour veille-ia, consolidées depuis doc2sveltekit-transition (playbook, charte OKI, best practices).
706 lines
24 KiB
Markdown
706 lines
24 KiB
Markdown
# PRD : Recommandations Web — AI Overview & SEO Top-Tier
|
|
## Pour agents LLM — Refonte / Création de site web
|
|
|
|
**Version :** 1.0 — Juillet 2026
|
|
**Auteur :** AKILPA / o-k-i
|
|
**Langue :** Français (terminologie technique en anglais conservée)
|
|
**Licence :** CC BY-SA 4.0 — Libre réutilisation avec attribution
|
|
|
|
---
|
|
|
|
## 0. Philosophie directrice
|
|
|
|
> **« Penser machine d'abord, humain ensuite. »**
|
|
|
|
Google AI Overview ne "lit" pas un site comme un humain. Il l'ingère, le fragmente, le recompose. Chaque page doit être conçue comme une **base de connaissances structurée** avant d'être une expérience utilisateur.
|
|
|
|
**Règle d'or :** Si un LLM ne peut pas extraire une réponse directe en 3 phrases depuis ta page, Google AI Overview ne te citera pas.
|
|
|
|
---
|
|
|
|
## 1. Architecture technique fondamentale
|
|
|
|
### 1.1 HTML sémantique strict
|
|
|
|
| Élément | Usage obligatoire | Anti-pattern à bannir |
|
|
|---------|-------------------|----------------------|
|
|
| `<main>` | Contenu principal unique par page | `<div id="content">` |
|
|
| `<article>` | Contenu autonome (blog, fiche, news) | `<div class="post">` |
|
|
| `<section>` | Regroupement thématique avec heading | `<div class="section">` |
|
|
| `<header>` | En-tête de page OU d'article | `<div class="header">` |
|
|
| `<footer>` | Pied de page OU d'article | `<div class="footer">` |
|
|
| `<nav>` | Navigation principale | `<div class="menu">` |
|
|
| `<aside>` | Contenu complémentaire | `<div class="sidebar">` |
|
|
| `<time datetime="...">` | Dates publiées/modifiées | Texte brut sans attribut |
|
|
| `<address>` | Coordonnées organisation | `<p>` générique |
|
|
| `<figure>` + `<figcaption>` | Images avec légende | `<div class="img-wrapper">` |
|
|
|
|
**Impératif :** Aucun `<div>` ou `<span>` ne doit remplacer un élément sémantique disponible.
|
|
|
|
### 1.2 Hiérarchie de headings (H1-H6)
|
|
|
|
```
|
|
H1 : Titre principal de la page (UN SEUL)
|
|
H2 : Section majeure
|
|
H3 : Sous-section
|
|
H4 : Détail
|
|
H2 : Section majeure suivante
|
|
H3 : Sous-section
|
|
```
|
|
|
|
**Règles :**
|
|
- H1 = question principale que la page résout
|
|
- H2 = questions fréquentes liées (format interrogatif privilégié)
|
|
- H3 = réponses structurées ou sous-thèmes
|
|
- Jamais de saut (H2 → H4 sans H3)
|
|
- Jamais de headings pour du style (utiliser CSS)
|
|
|
|
### 1.3 Attributs ARIA stratégiques
|
|
|
|
```html
|
|
<article aria-labelledby="titre-article">
|
|
<h2 id="titre-article">Titre</h2>
|
|
</article>
|
|
|
|
<nav aria-label="Navigation principale">
|
|
<!-- liens -->
|
|
</nav>
|
|
|
|
<aside aria-label="Contenu connexe">
|
|
<!-- contenu -->
|
|
</aside>
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Schema.org — Le squelette invisible
|
|
|
|
### 2.1 Types obligatoires par type de page
|
|
|
|
| Type de page | Schema.org principal | Schémas secondaires |
|
|
|--------------|----------------------|---------------------|
|
|
| Page d'accueil | `Organization` + `WebSite` | `LocalBusiness` si applicable |
|
|
| Article de blog | `BlogPosting` | `Article`, `Person` (auteur) |
|
|
| Page produit | `Product` | `Offer`, `Review`, `AggregateRating` |
|
|
| Page service | `Service` | `Organization` (fournisseur) |
|
|
| Page événement | `Event` | `Place`, `Offer` |
|
|
| Page FAQ | `FAQPage` | `Question` + `Answer` (xN) |
|
|
| Page HowTo | `HowTo` | `HowToStep`, `HowToTool`, `HowToSupply` |
|
|
| Page personne | `Person` | `Organization` (affiliation) |
|
|
| Page contact | `ContactPage` | `Organization` |
|
|
| Page mentions légales | `AboutPage` | `Organization` |
|
|
|
|
### 2.2 JSON-LD template générique (à adapter)
|
|
|
|
```json
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@graph": [
|
|
{
|
|
"@type": "Organization",
|
|
"@id": "https://example.com/#organization",
|
|
"name": "Nom de l'organisation",
|
|
"url": "https://example.com",
|
|
"logo": {
|
|
"@type": "ImageObject",
|
|
"url": "https://example.com/logo.png",
|
|
"width": 512,
|
|
"height": 512
|
|
},
|
|
"sameAs": [
|
|
"https://twitter.com/compte",
|
|
"https://linkedin.com/company/compte",
|
|
"https://github.com/compte"
|
|
],
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"streetAddress": "Adresse",
|
|
"addressLocality": "Ville",
|
|
"postalCode": "Code postal",
|
|
"addressCountry": "FR"
|
|
}
|
|
},
|
|
{
|
|
"@type": "WebSite",
|
|
"@id": "https://example.com/#website",
|
|
"url": "https://example.com",
|
|
"name": "Nom du site",
|
|
"publisher": {
|
|
"@id": "https://example.com/#organization"
|
|
},
|
|
"potentialAction": {
|
|
"@type": "SearchAction",
|
|
"target": {
|
|
"@type": "EntryPoint",
|
|
"urlTemplate": "https://example.com/search?q={search_term_string}"
|
|
},
|
|
"query-input": "required name=search_term_string"
|
|
}
|
|
},
|
|
{
|
|
"@type": "WebPage",
|
|
"@id": "https://example.com/page/#webpage",
|
|
"url": "https://example.com/page",
|
|
"name": "Titre de la page",
|
|
"description": "Meta description de la page",
|
|
"isPartOf": {
|
|
"@id": "https://example.com/#website"
|
|
},
|
|
"about": {
|
|
"@id": "https://example.com/#organization"
|
|
},
|
|
"datePublished": "2026-07-24T00:00:00+00:00",
|
|
"dateModified": "2026-07-24T00:00:00+00:00",
|
|
"breadcrumb": {
|
|
"@id": "https://example.com/page/#breadcrumb"
|
|
}
|
|
},
|
|
{
|
|
"@type": "BreadcrumbList",
|
|
"@id": "https://example.com/page/#breadcrumb",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "Accueil",
|
|
"item": "https://example.com/"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "Catégorie",
|
|
"item": "https://example.com/categorie"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 3,
|
|
"name": "Page actuelle"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
### 2.3 FAQPage Schema (critique pour AI Overview)
|
|
|
|
```json
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
"mainEntity": [
|
|
{
|
|
"@type": "Question",
|
|
"name": "Question exacte en langage naturel ?",
|
|
"acceptedAnswer": {
|
|
"@type": "Answer",
|
|
"text": "<p>Réponse concise en 40-60 mots. <strong>Première phrase = réponse directe.</strong> Suite = contexte ou nuance.</p>"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
**Règle critique :** Chaque FAQ doit correspondre à une section H2/H3 visible sur la page. Le texte du schema doit être **identique** au texte visible (pas de contenu caché).
|
|
|
|
### 2.4 Speakable Schema (pour assistants vocaux)
|
|
|
|
```json
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
"speakable": {
|
|
"@type": "SpeakableSpecification",
|
|
"cssSelector": [".summary", ".key-facts"]
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Stratégie de contenu — Format AI-Overview Ready
|
|
|
|
### 3.1 Structure de page type
|
|
|
|
```
|
|
[Zone A — Résumé immédiat]
|
|
├─ H1 : Question principale / promesse
|
|
├─ Paragraphe 1 (50-80 mots) : Réponse directe, sans préambule
|
|
├─ Liste à puces (3-5 items) : Points clés
|
|
└─ [Optionnel] Encadré "En résumé" ou "Points essentiels"
|
|
|
|
[Zone B — Développement]
|
|
├─ H2 : "Qu'est-ce que [sujet] ?"
|
|
├─ H2 : "Pourquoi [sujet] est important ?"
|
|
├─ H2 : "Comment [action] ?" (ou "Quelles sont les étapes ?")
|
|
├─ H2 : "Quels sont les avantages/inconvénients ?"
|
|
├─ H2 : "FAQ" (ou "Questions fréquentes")
|
|
└─ H2 : "Conclusion" ou "Pour aller plus loin"
|
|
```
|
|
|
|
### 3.2 Règles de rédaction machine-first
|
|
|
|
| Règle | Explication | Exemple |
|
|
|-------|-------------|---------|
|
|
| **Réponse dès la 1ère phrase** | Pas d'introduction narrative | ❌ "Depuis des siècles, l'humanité..." → ✅ "Le lambi est un mollusque gastéropode des Caraïbes, symbole du patrimoine guadeloupéen." |
|
|
| **Phrases < 25 mots** | Facilite le parsing par l'IA | Découper les phrases complexes |
|
|
| **Paragraphes < 100 mots** | Blocs auto-contenus | 3-4 phrases max par `<p>` |
|
|
| **Vocabulaire consistant** | Même terme pour même concept | Ne pas alterner "lambi" / "conque" / "coquillage" sans explication |
|
|
| **Active voice** | Sujet + verbe + complément | ❌ "Il est recommandé que..." → ✅ "Nous recommandons..." |
|
|
| **Pas de jargon sans définition** | Ou définir immédiatement | "Le fédivers (réseaux sociaux décentralisés via ActivityPub)..." |
|
|
| **Dates visibles et structurées** | `<time datetime="...">` | Mise à jour = crédibilité |
|
|
| **Chiffres et données** | L'IA cite les chiffres | "317% plus de citations" plutôt que "beaucoup plus" |
|
|
|
|
### 3.3 Format spécifique par type de contenu
|
|
|
|
**Article informatif :**
|
|
- Résumé en 3 bullets en tête
|
|
- H2 sous forme de questions
|
|
- Réponse en 2-3 phrases sous chaque H2
|
|
- Source/citation en fin de section
|
|
|
|
**Page produit/service :**
|
|
- "En 1 minute" : ce que c'est, pour qui, prix
|
|
- Tableau comparatif (si comparaison)
|
|
- Avantages en liste numérotée
|
|
- Témoignage avec `Review` schema
|
|
|
|
**Page organisation (AKILPA-type) :**
|
|
- Mission en 1 phrase
|
|
- 3 piliers d'action en H3
|
|
- Chiffres clés (adhérents, actions, dates)
|
|
- Équipe avec photos et bios
|
|
- Partenaires et réseaux
|
|
|
|
---
|
|
|
|
## 4. Métadonnées et signaux de confiance (EEAT)
|
|
|
|
### 4.1 EEAT — Experience, Expertise, Authoritativeness, Trustworthiness
|
|
|
|
| Signal | Implémentation technique |
|
|
|--------|--------------------------|
|
|
| **Auteur identifié** | Page `/auteurs/[nom]` avec bio, photo, credentials, liens sociaux |
|
|
| **Date de publication** | `<time datetime="...">` visible + schema `datePublished` |
|
|
| **Date de modification** | `<time datetime="...">` visible + schema `dateModified` |
|
|
| **Sources citées** | Liens externes vers sources fiables (`.gov`, `.edu`, médias établis) |
|
|
| **Mentions légales** | Page `/mentions-legales` avec schema `AboutPage` |
|
|
| **Politique de confidentialité** | Page `/politique-confidentialite` |
|
|
| **Contact vérifiable** | Adresse physique, téléphone, email (schema `ContactPoint`) |
|
|
| **HTTPS obligatoire** | Certificat valide, HSTS activé |
|
|
| **Mentions d'erreur corrigées** | Section "Mise à jour" ou "Erratum" visible |
|
|
|
|
### 4.2 Meta tags essentiels
|
|
|
|
```html
|
|
<!-- Basiques -->
|
|
<title>Titre de page | Nom du site</title>
|
|
<meta name="description" content="Résumé de 150-160 caractères. Contient le mot-clé principal. Réponse à la question principale.">
|
|
<meta name="author" content="Nom Prénom">
|
|
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="Titre de page">
|
|
<meta property="og:description" content="Description">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="https://example.com/page">
|
|
<meta property="og:image" content="https://example.com/image-1200x630.jpg">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:locale" content="fr_FR">
|
|
<meta property="og:site_name" content="Nom du site">
|
|
<meta property="article:published_time" content="2026-07-24T00:00:00+00:00">
|
|
<meta property="article:modified_time" content="2026-07-24T00:00:00+00:00">
|
|
<meta property="article:author" content="https://example.com/auteurs/nom">
|
|
<meta property="article:section" content="Catégorie">
|
|
<meta property="article:tag" content="tag1, tag2, tag3">
|
|
|
|
<!-- Twitter Cards -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Titre">
|
|
<meta name="twitter:description" content="Description">
|
|
<meta name="twitter:image" content="https://example.com/image-1200x600.jpg">
|
|
<meta name="twitter:creator" content="@compte">
|
|
|
|
<!-- Canonical -->
|
|
<link rel="canonical" href="https://example.com/page">
|
|
|
|
<!-- Alternate languages -->
|
|
<link rel="alternate" hreflang="fr" href="https://example.com/page">
|
|
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
|
|
<link rel="alternate" hreflang="x-default" href="https://example.com/page">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
```
|
|
|
|
### 4.3 Fichier humans.txt (transparence)
|
|
|
|
```
|
|
/* TEAM */
|
|
Lead Developer: [Nom]
|
|
Site: [URL]
|
|
Twitter: [@compte]
|
|
Location: [Ville, Pays]
|
|
|
|
/* THANKS */
|
|
Name: [Nom] — [Rôle]
|
|
|
|
/* SITE */
|
|
Last update: 2026/07/24
|
|
Standards: HTML5, CSS3, ES2022
|
|
Components: [Framework]
|
|
Software: [Éditeur, outils]
|
|
```
|
|
|
|
---
|
|
|
|
## 5. Performance et Core Web Vitals
|
|
|
|
### 5.1 Seuils à atteindre
|
|
|
|
| Métrique | Objectif | Outil de test |
|
|
|----------|----------|---------------|
|
|
| **LCP** (Largest Contentful Paint) | < 2.5s | PageSpeed Insights |
|
|
| **INP** (Interaction to Next Paint) | < 200ms | PageSpeed Insights |
|
|
| **CLS** (Cumulative Layout Shift) | < 0.1 | PageSpeed Insights |
|
|
| **TTFB** (Time to First Byte) | < 600ms | WebPageTest |
|
|
| **FCP** (First Contentful Paint) | < 1.8s | PageSpeed Insights |
|
|
|
|
### 5.2 Checklist technique
|
|
|
|
- [ ] **Images :** Format WebP/AVIF, lazy loading (`loading="lazy"`), dimensions explicites (`width`/`height`)
|
|
- [ ] **Polices :** `font-display: swap`, sous-ensemble de glyphes (subset), préchargement des polices critiques
|
|
- [ ] **CSS :** Critical CSS inline, reste en fichier externe, pas de `@import`
|
|
- [ ] **JS :** `defer` ou `async`, pas de render-blocking, code splitting
|
|
- [ ] **CDN :** Contenu statique servi depuis CDN géolocalisé
|
|
- [ ] **Compression :** Brotli ou Gzip activé
|
|
- [ ] **Caching :** Headers `Cache-Control` appropriés
|
|
- [ ] **HTTP/2 ou HTTP/3 :** Serveur compatible
|
|
- [ ] **Préconnexion :** `<link rel="preconnect">` vers domaines tiers
|
|
- [ ] **Prefetching :** `<link rel="prefetch">` pour pages suivantes probables
|
|
|
|
### 5.3 Accessibilité (WCAG 2.1 AA minimum)
|
|
|
|
- [ ] Contraste texte/fond ≥ 4.5:1 (normal), ≥ 3:1 (gros texte)
|
|
- [ ] Texte redimensionnable à 200% sans perte de fonction
|
|
- [ ] Navigation au clavier complète (tabindex logique)
|
|
- [ ] Lecteur d'écran : labels sur tous les champs de formulaire
|
|
- [ ] Images : `alt` descriptif (pas de "image" ou "photo")
|
|
- [ ] Vidéos : sous-titres, transcription texte
|
|
- [ ] Focus visible sur tous les éléments interactifs
|
|
- [ ] Pas de contenu clignotant (> 3Hz interdit)
|
|
- [ ] Formulaires : messages d'erreur explicites, liés aux champs
|
|
|
|
---
|
|
|
|
## 6. Maillage interne et architecture d'information
|
|
|
|
### 6.1 Structure URL
|
|
|
|
```
|
|
https://example.com/
|
|
├── /a-propos/
|
|
├── /services/
|
|
│ ├── /services/service-a/
|
|
│ └── /services/service-b/
|
|
├── /blog/
|
|
│ ├── /blog/categorie/
|
|
│ └── /blog/article-slug-optimise/
|
|
├── /faq/
|
|
├── /contact/
|
|
└── /mentions-legales/
|
|
```
|
|
|
|
**Règles :**
|
|
- URL en minuscules, sans accents, mots séparés par tirets
|
|
- Pas de paramètres d'URL pour la navigation (utiliser des routes propres)
|
|
- Slug = mot-clé principal de la page
|
|
- Profondeur max : 3 clics depuis l'accueil
|
|
|
|
### 6.2 Maillage thématique (Query Fan-Out)
|
|
|
|
Pour chaque page principale, créer **au moins 3 pages connexes** qui répondent aux questions suivantes logiques :
|
|
|
|
```
|
|
Page principale : "Qu'est-ce que le lambi ?"
|
|
→ "Où trouve-t-on le lambi ?" (géographie)
|
|
→ "Comment prépare-t-on le lambi ?" (culture/cuisine)
|
|
→ "Le lambi est-il en danger ?" (environnement)
|
|
→ "Quelle est l'importance du lambi en Guadeloupe ?" (patrimoine)
|
|
```
|
|
|
|
Chaque page doit contenir :
|
|
- 3-5 liens internes vers pages connexes (contextuels, pas "Lire aussi")
|
|
- 1 lien vers page parente
|
|
- 1 lien vers page d'accueil (via le logo/breadcrumb)
|
|
|
|
### 6.3 Breadcrumb navigation
|
|
|
|
```html
|
|
<nav aria-label="Fil d'Ariane">
|
|
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
|
|
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
|
<a itemprop="item" href="/">
|
|
<span itemprop="name">Accueil</span>
|
|
</a>
|
|
<meta itemprop="position" content="1">
|
|
</li>
|
|
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
|
<a itemprop="item" href="/categorie/">
|
|
<span itemprop="name">Catégorie</span>
|
|
</a>
|
|
<meta itemprop="position" content="2">
|
|
</li>
|
|
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
|
<span itemprop="name">Page actuelle</span>
|
|
<meta itemprop="position" content="3">
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
```
|
|
|
|
---
|
|
|
|
## 7. Multimédia et contenu enrichi
|
|
|
|
### 7.1 Images
|
|
|
|
| Attribut | Règle |
|
|
|----------|-------|
|
|
| `alt` | Description fonctionnelle (pas décorative) |
|
|
| `width` / `height` | Dimensions réelles pour éviter le CLS |
|
|
| `loading="lazy"` | Sauf image LCP (héros) |
|
|
| `decoding="async"` | Pour toutes les images non-LCP |
|
|
| Format | WebP prioritaire, fallback JPEG/PNG |
|
|
| Taille | < 200 Ko idéalement, < 500 Ko maximum |
|
|
| Nom de fichier | `mots-cles-descriptifs.webp` (pas `IMG_1234.jpg`) |
|
|
|
|
### 7.2 Vidéos
|
|
|
|
- Durée : 60-90s pour les vidéos d'aperçu (format privilégié par AI Overview)
|
|
- Hébergement : YouTube (SEO) + auto-hébergé WebM/MP4 (souveraineté)
|
|
- Schema `VideoObject` obligatoire
|
|
- Transcription texte visible sous la vidéo
|
|
- Thumbnail optimisé (1280x720 minimum)
|
|
|
|
### 7.3 Infographies et données
|
|
|
|
- Toujours accompagnées d'un texte alternatif complet
|
|
- Données en tableau HTML (pas image)
|
|
- Schema `Dataset` si données structurées
|
|
- Téléchargement possible (PDF ou CSV)
|
|
|
|
---
|
|
|
|
## 8. Robots.txt et gestion des crawlers
|
|
|
|
### 8.1 Template standard
|
|
|
|
```
|
|
User-agent: *
|
|
Allow: /
|
|
Disallow: /admin/
|
|
Disallow: /api/
|
|
Disallow: /panier/
|
|
Disallow: /compte/
|
|
Disallow: /*?*
|
|
Disallow: /recherche/
|
|
|
|
# Blocage crawlers d'entraînement (optionnel)
|
|
User-agent: GPTBot
|
|
Disallow: /
|
|
|
|
User-agent: ClaudeBot
|
|
Disallow: /
|
|
|
|
User-agent: CCBot
|
|
Disallow: /
|
|
|
|
User-agent: Google-Extended
|
|
Disallow: /
|
|
|
|
# Sitemap
|
|
Sitemap: https://example.com/sitemap.xml
|
|
```
|
|
|
|
**Note critique :** `Google-Extended` bloque l'entraînement de Gemini, mais PAS Google AI Overview (qui utilise Googlebot standard). Il n'existe actuellement aucun moyen technique d'être dans Google Search tout en étant exclu de l'AI Overview.
|
|
|
|
### 8.2 Sitemap.xml
|
|
|
|
```xml
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
|
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
|
|
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
|
|
xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
|
|
<url>
|
|
<loc>https://example.com/page</loc>
|
|
<lastmod>2026-07-24</lastmod>
|
|
<changefreq>monthly</changefreq>
|
|
<priority>0.8</priority>
|
|
<image:image>
|
|
<image:loc>https://example.com/image.webp</image:loc>
|
|
<image:title>Titre de l'image</image:title>
|
|
<image:caption>Légende descriptive</image:caption>
|
|
</image:image>
|
|
</url>
|
|
</urlset>
|
|
```
|
|
|
|
---
|
|
|
|
## 9. Internationalisation (si applicable)
|
|
|
|
### 9.1 Structure multi-langue
|
|
|
|
**Recommandé :** Sous-répertoires avec `hreflang`
|
|
```
|
|
/fr/ — Français (par défaut)
|
|
/en/ — Anglais
|
|
/ht/ — Créole haïtien
|
|
/gp/ — Guadeloupe (variante régionale)
|
|
```
|
|
|
|
### 9.2 Attributs lang
|
|
|
|
```html
|
|
<html lang="fr">
|
|
<p lang="ht">Fraz an kreyòl.</p>
|
|
<p lang="en">Sentence in English.</p>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## 10. Checklist de livraison (pour agent LLM)
|
|
|
|
### Avant mise en ligne
|
|
|
|
- [ ] HTML sémantique validé (W3C Validator)
|
|
- [ ] Schema.org JSON-LD testé (Google Rich Results Test)
|
|
- [ ] Core Web Vitals tous verts (PageSpeed Insights)
|
|
- [ ] Accessibilité WCAG 2.1 AA (axe DevTools ou Lighthouse)
|
|
- [ ] Mobile-first responsive (Chrome DevTools)
|
|
- [ ] Meta tags complets et uniques par page
|
|
- [ ] Canonical et hreflang corrects
|
|
- [ ] Robots.txt et sitemap.xml fonctionnels
|
|
- [ ] HTTPS forcé (HSTS)
|
|
- [ ] Pas de contenu dupliqué (Siteliner ou Screaming Frog)
|
|
- [ ] Liens internes fonctionnels (pas de 404)
|
|
- [ ] Images optimisées (format, taille, alt)
|
|
- [ ] Formulaires testés (validation, messages d'erreur)
|
|
- [ ] Analytics et Search Console connectés
|
|
|
|
### Post-mise en ligne
|
|
|
|
- [ ] Soumission sitemap dans Google Search Console
|
|
- [ ] Inspection d'URL pour les pages clés
|
|
- [ ] Test Rich Results pour chaque type de schema
|
|
- [ ] Monitoring Core Web Vitals (Search Console > Experience)
|
|
- [ ] Indexation vérifiée (`site:example.com`)
|
|
|
|
---
|
|
|
|
## 11. Anti-patterns à bannir absolument
|
|
|
|
| Anti-pattern | Pourquoi c'est mortel | Solution |
|
|
|--------------|----------------------|----------|
|
|
| Contenu généré par IA non révisé | Hallucinations, pénalité Google "Helpful Content" | Révision humaine obligatoire, sources citées |
|
|
| Keyword stuffing | Pénalité algorithmique | Vocabulaire naturel, LSI keywords |
|
|
| Contenu caché (display:none pour SEO) | Pénalité manuelle | Contenu visible ou schema approprié |
|
|
| Liens achetés / fermes de liens | Pénalité manuelle | Maillage naturel, guest posting qualité |
|
|
| Duplicate content interne | Cannibalisation | Canonical, consolidation, 301 |
|
|
| Pages vides / placeholders | Indexation gaspillée | Noindex jusqu'à contenu complet |
|
|
| JavaScript pour le contenu principal | Crawler ne voit pas le contenu | SSR ou hydratation côté serveur |
|
|
| Pop-ups intrusives (interstitiels) | Pénalité mobile | Bannières discrètes, pas de blocage |
|
|
| URLs avec session ID | Contenu dupliqué | Cookies pour les sessions |
|
|
| Redirections en chaîne | Perte de jus SEO | Redirection directe 301 |
|
|
|
|
---
|
|
|
|
## 12. Spécificités contexte Caraïbe / AKILPA
|
|
|
|
### 12.1 Référencement local
|
|
|
|
```json
|
|
{
|
|
"@type": "LocalBusiness",
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"streetAddress": "...",
|
|
"addressLocality": "Basse-Terre",
|
|
"addressRegion": "Guadeloupe",
|
|
"postalCode": "97100",
|
|
"addressCountry": "FR"
|
|
},
|
|
"geo": {
|
|
"@type": "GeoCoordinates",
|
|
"latitude": "15.9950",
|
|
"longitude": "-61.7295"
|
|
},
|
|
"telephone": "+590-...",
|
|
"openingHoursSpecification": [...]
|
|
}
|
|
```
|
|
|
|
### 12.2 Contenu patrimonial
|
|
|
|
- **Termes en créole :** baliser avec `<span lang="ht">` ou `<span lang="gcf">` (guadeloupéen)
|
|
- **Définitions :** glossaire lié ou infobulles pour les termes locaux
|
|
- **Sources :** citation des archives, ouvrages de référence (Fanon, Glissant, etc.)
|
|
- **Multimédia :** photos d'archives avec crédits, enregistrements audio (voix créole)
|
|
|
|
### 12.3 Souveraineté numérique
|
|
|
|
- **Auto-hébergement privilégié** (pas de Google Fonts, pas de CDN Google)
|
|
- **Analytics alternatives** : Matomo, Plausible (pas Google Analytics)
|
|
- **Polices libres** : Google Fonts self-hostées ou alternatives (Fontsource)
|
|
- **Pas de reCAPTCHA** : hCaptcha ou solution libre
|
|
- **Formulaires** : pas de Typeform/Google Forms, solutions auto-hébergées
|
|
|
|
---
|
|
|
|
## 13. Ressources et outils de validation
|
|
|
|
| Outil | Usage | URL |
|
|
|-------|-------|-----|
|
|
| **W3C Validator** | HTML sémantique | validator.w3.org |
|
|
| **Google Rich Results Test** | Schema.org | search.google.com/test/rich-results |
|
|
| **PageSpeed Insights** | Core Web Vitals | pagespeed.web.dev |
|
|
| **Lighthouse** | Audit complet (Chrome DevTools) | Intégré Chrome |
|
|
| **Schema Markup Validator** | Schema.org | validator.schema.org |
|
|
| **axe DevTools** | Accessibilité | deque.com/axe/devtools |
|
|
| **Screaming Frog** | Crawl SEO (desktop) | screamingfrog.co.uk |
|
|
| **Siteliner** | Contenu dupliqué | siteliner.com |
|
|
| **Google Search Console** | Monitoring indexation | search.google.com/search-console |
|
|
| **Bing Webmaster Tools** | Indexation Bing | bing.com/webmasters |
|
|
|
|
---
|
|
|
|
## 14. Glossaire des termes techniques
|
|
|
|
| Terme | Définition |
|
|
|-------|------------|
|
|
| **AI Overview** | Résumé généré par IA en haut des résultats Google |
|
|
| **Schema.org** | Vocabulaire sémantique structuré pour le web |
|
|
| **JSON-LD** | Format de données liées pour Schema.org |
|
|
| **EEAT** | Experience, Expertise, Authoritativeness, Trustworthiness |
|
|
| **LCP** | Largest Contentful Paint (métrique de performance) |
|
|
| **INP** | Interaction to Next Paint (métrique d'interactivité) |
|
|
| **CLS** | Cumulative Layout Shift (métrique de stabilité visuelle) |
|
|
| **Hreflang** | Attribut indiquant la langue/cible géo d'une page |
|
|
| **Canonical** | URL préférée pour éviter le contenu dupliqué |
|
|
| **Sitemap** | Fichier listant les URLs à indexer |
|
|
| **Robots.txt** | Instructions pour les crawlers |
|
|
| **SSR** | Server-Side Rendering (rendu côté serveur) |
|
|
| **CSR** | Client-Side Rendering (rendu côté client) |
|
|
| **Lazy loading** | Chargement différé des ressources |
|
|
| **Critical CSS** | CSS nécessaire au rendu initial, inline |
|
|
|
|
---
|
|
|
|
*Document généré pour une utilisation par agents LLM dans le cadre de projets web.
|
|
À adapter selon le contexte spécifique de chaque site.*
|