Files

T

cyber-mawonaj dc6bf1bbde chore : import initial du dossier de travail (PRD, guides, recommandations doc2sveltekit)

Inclut SPECS_SVELTE.md : conventions Svelte 5/SvelteKit pour veille-ia,
consolidées depuis doc2sveltekit-transition (playbook, charte OKI, best practices).

2026-08-01 09:18:27 -04:00

24 KiB

Raw Blame History

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

<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)

{
  "@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)

{
  "@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)

{
  "@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

<!-- 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)

<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 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 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

{
  "@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.

24 KiB Raw Blame History