Planifier l'architecture de site avec un agent IA

Conception de la hiérarchie des pages

La règle des 3 clics

Les utilisateurs doivent pouvoir atteindre n'importe quelle page importante en 3 clics depuis la page d'accueil. Ce n'est pas une règle absolue, mais si les pages critiques sont enfouies à 4 niveaux ou plus de profondeur, quelque chose ne va pas.

Structure plate vs profonde

Approche	Idéale pour	Compromis
Plate (2 niveaux)	Petits sites, portfolios	Simple mais n'évolue pas
Modérée (3 niveaux)	Plupart des SaaS, sites de contenu	Bon équilibre entre profondeur et accessibilité
Profonde (4+ niveaux)	E-commerce, grande documentation	Évolue mais risque d'enfouir le contenu

Règle générale : Restez aussi plat que possible tout en maintenant une navigation claire. Si un menu déroulant contient 20 éléments ou plus, ajoutez un niveau de hiérarchie.

Niveaux de hiérarchie

Niveau	Définition	Exemple
L0	Page d'accueil	`/`
L1	Sections principales	`/features`, `/blog`, `/pricing`
L2	Pages de section	`/features/analytics`, `/blog/seo-guide`
L3+	Pages de détail	`/docs/api/authentication`

Format d'arbre ASCII

Utilisez ce format pour les hiérarchies de pages :

Homepage (/)
├── Features (/features)
│   ├── Analytics (/features/analytics)
│   ├── Automation (/features/automation)
│   └── Integrations (/features/integrations)
├── Pricing (/pricing)
├── Blog (/blog)
│   ├── [Category: SEO] (/blog/category/seo)
│   └── [Category: CRO] (/blog/category/cro)
├── Resources (/resources)
│   ├── Case Studies (/resources/case-studies)
│   └── Templates (/resources/templates)
├── Docs (/docs)
│   ├── Getting Started (/docs/getting-started)
│   └── API Reference (/docs/api)
├── About (/about)
│   └── Careers (/about/careers)
└── Contact (/contact)

Quand utiliser ASCII vs Mermaid :

ASCII : brouillons rapides de hiérarchies, contextes texte uniquement, structures simples
Mermaid : présentations visuelles, relations complexes, visualisation des zones de navigation ou des motifs de liens

Conception de la navigation

Types de navigation

Type de nav	Objectif	Emplacement
Nav d'en-tête	Navigation principale, toujours visible	Haut de chaque page
Menus déroulants	Organiser les sous-pages sous un parent	Se déploie depuis les éléments d'en-tête
Nav de pied de page	Liens secondaires, légal, plan du site	Bas de chaque page
Nav latérale	Navigation de section (docs, blog)	Côté gauche dans une section
Fil d'Ariane	Affiche la localisation actuelle dans la hiérarchie	Sous l'en-tête, au-dessus du contenu
Liens contextuels	Contenu connexe, prochaines étapes	Dans le contenu de la page

Règles de navigation d'en-tête

4 à 7 éléments maximum dans la navigation principale (plus cause une paralysie de décision)
Bouton CTA en position la plus à droite (par ex. « Essai gratuit », « Commencer »)
Logo renvoie à la page d'accueil (côté gauche)
Ordre par priorité : pages les plus importantes/visitées en premier
Si vous avez un méga menu, limitez à 3-4 colonnes

Organisation du pied de page

Groupez les liens du pied de page en colonnes :

Produit : Features, Pricing, Integrations, Changelog
Ressources : Blog, Case Studies, Templates, Docs
Entreprise : About, Careers, Contact, Press
Légal : Privacy, Terms, Security

Format du fil d'Ariane

Accueil > Features > Analytics
Accueil > Blog > Catégorie SEO > Titre de l'article

Le fil d'Ariane doit refléter la hiérarchie de l'URL. Chaque segment du fil d'Ariane doit être un lien cliquable sauf la page actuelle.

Pour les motifs de navigation détaillés : Consultez references/navigation-patterns.md

Structure des URL

Principes de conception

Lisibles par les humains — /features/analytics et non /f/a123
Traits d'union, pas traits de soulignement — /blog/seo-guide et non /blog/seo_guide
Reflètent la hiérarchie — Le chemin URL doit correspondre à la structure du site
Politique cohérente sur la barre oblique finale — choisissez une (avec ou sans) et appliquez-la
Toujours en minuscules — /About doit rediriger vers /about
Courtes mais descriptives — /blog/how-to-improve-landing-page-conversion-rates est trop long ; /blog/landing-page-conversions est mieux

Motifs d'URL par type de page

Type de page	Motif	Exemple
Page d'accueil	`/`	`example.com`
Page de feature	`/features/{name}`	`/features/analytics`
Tarification	`/pricing`	`/pricing`
Article de blog	`/blog/{slug}`	`/blog/seo-guide`
Catégorie blog	`/blog/category/{slug}`	`/blog/category/seo`
Cas d'usage	`/customers/{slug}`	`/customers/acme-corp`
Documentation	`/docs/{section}/{page}`	`/docs/api/authentication`
Légal	`/{page}`	`/privacy`, `/terms`
Landing page	`/{slug}` ou `/lp/{slug}`	`/free-trial`, `/lp/webinar`
Comparaison	`/compare/{competitor}` ou `/vs/{competitor}`	`/compare/competitor-name`
Intégration	`/integrations/{name}`	`/integrations/slack`
Template	`/templates/{slug}`	`/templates/marketing-plan`

Erreurs courantes

Dates dans les URL de blog — /blog/2024/01/15/post-title n'apporte aucune valeur et rend les URL longues. Utilisez /blog/post-title.
Sur-imbrication — /products/category/subcategory/item/detail est trop profond. Aplatissez où possible.
Changement d'URL sans redirections — Chaque ancienne URL a besoin d'une redirection 301 vers sa nouvelle URL. Sans cela, vous perdez l'équité des backlinks et créez des pages brisées pour quiconque a l'ancienne URL en favoris ou liée.
IDs dans les URL — /product/12345 n'est pas lisible par les humains. Utilisez des slugs.
Paramètres de requête pour le contenu — /blog?id=123 devrait être /blog/post-title.
Motifs incohérents — Ne mélangez pas /features/analytics et /product/automation. Choisissez un parent.

Alignement fil d'Ariane-URL

Le chemin du fil d'Ariane doit refléter le chemin URL :

URL	Fil d'Ariane
`/features/analytics`	Accueil > Features > Analytics
`/blog/seo-guide`	Accueil > Blog > SEO Guide
`/docs/api/auth`	Accueil > Docs > API > Authentication

Sortie visuelle du plan du site (Mermaid)

Utilisez Mermaid graph TD pour les plans de site visuels. Cela rend les relations de hiérarchie claires et peut annoter les zones de navigation.

Hiérarchie de base

graph TD
    HOME[Homepage] --> FEAT[Features]
    HOME --> PRICE[Pricing]
    HOME --> BLOG[Blog]
    HOME --> ABOUT[About]

    FEAT --> F1[Analytics]
    FEAT --> F2[Automation]
    FEAT --> F3[Integrations]

    BLOG --> B1[Post 1]
    BLOG --> B2[Post 2]

Avec zones de navigation

graph TD
    subgraph Header Nav
        HOME[Homepage]
        FEAT[Features]
        PRICE[Pricing]
        BLOG[Blog]
        CTA[Get Started]
    end

    subgraph Footer Nav
        ABOUT[About]
        CAREERS[Careers]
        CONTACT[Contact]
        PRIVACY[Privacy]
    end

    HOME --> FEAT
    HOME --> PRICE
    HOME --> BLOG
    HOME --> ABOUT

    FEAT --> F1[Analytics]
    FEAT --> F2[Automation]

Pour plus de modèles Mermaid : Consultez references/mermaid-templates.md

Stratégie de liens internes

Types de liens

Type	Objectif	Exemple
Navigation	Se déplacer entre les sections	Liens d'en-tête, de pied de page, latéraux
Contextuel	Contenu connexe dans le texte	« Découvrez nos fonctionnalités analytics »
Hub-and-spoke	Connecter le contenu de cluster à un hub	Articles de blog reliant à une page pilier
Entre-sections	Connecter les pages connexes entre sections	Page de feature reliant à un cas d'usage connexe

Règles de liens internes

Pas de pages orphelines — chaque page doit avoir au moins un lien interne pointant vers elle
Texte d'ancrage descriptif — « nos fonctionnalités analytics » et non « cliquez ici »
5 à 10 liens internes par 1000 mots de contenu (directive approximative)
Lier plus souvent vers les pages importantes — page d'accueil, pages de features clés, tarification
Utiliser les fils d'Ariane — liens internes gratuits sur chaque page
Sections de contenu connexe — « Articles connexes » ou « Vous pourriez aussi aimer » au bas de la page

Modèle Hub-and-Spoke

Pour les sites riches en contenu, organisez autour de pages hub :

Hub: /blog/seo-guide (aperçu complet)
├── Spoke: /blog/keyword-research (renvoie au hub)
├── Spoke: /blog/on-page-seo (renvoie au hub)
├── Spoke: /blog/technical-seo (renvoie au hub)
└── Spoke: /blog/link-building (renvoie au hub)

Chaque spoke renvoie au hub. Le hub renvoie à tous les spokes. Les spokes se lient les uns aux autres où pertinent.

Liste de contrôle d'audit des liens

[ ] Chaque page a au moins un lien interne entrant
[ ] Aucun lien interne brisé (404s)
[ ] Le texte d'ancrage est descriptif (pas « cliquez ici » ou « en savoir plus »)
[ ] Les pages importantes ont le plus de liens internes entrants
[ ] Les fils d'Ariane sont implémentés sur toutes les pages
[ ] Des liens de contenu connexe existent sur les articles de blog
[ ] Des liens entre-sections connectent les features aux cas d'usage, le blog aux pages produit

Format de sortie

Lors de la création d'un plan d'architecture de site, fournissez ces livrables :

1. Hiérarchie des pages (arbre ASCII)

Structure complète du site avec URLs à chaque nœud. Utilisez le format d'arbre ASCII de la section Conception de la hiérarchie des pages.

2. Plan du site visuel (Mermaid)

Diagramme Mermaid affichant les relations entre pages et les zones de navigation. Utilisez graph TD avec des subgraphs pour les zones de nav où utile.

3. Tableau de mappage des URL

Page	URL	Parent	Emplacement nav	Priorité
Page d'accueil	`/`	—	En-tête	Haute
Features	`/features`	Accueil	En-tête	Haute
Analytics	`/features/analytics`	Features	Dropdown en-tête	Moyenne
Pricing	`/pricing`	Accueil	En-tête	Haute
Blog	`/blog`	Accueil	En-tête	Moyenne

4. Spécification de navigation

Éléments de la navigation d'en-tête (ordonnés, avec CTA)
Sections et liens du pied de page
Nav latérale (le cas échéant)
Notes d'implémentation du fil d'Ariane

5. Plan de liens internes

Pages hub et leurs spokes
Opportunités de liens entre-sections
Audit de pages orphelines (si restructuration)
Liens recommandés par page clé

Questions spécifiques à la tâche

S'agit-il d'un nouveau site ou d'une restructuration d'un site existant ?
Quel type de site ? (SaaS, contenu, e-commerce, docs, hybride, petite entreprise)
Combien de pages existent ou sont prévues ?
Quelles sont les 5 pages les plus importantes du site ?
Y a-t-il des URL existantes à conserver ou à rediriger ?
Qui sont les audiences principales et que cherchent-elles à accomplir sur le site ?

Compétences associées

content-strategy : Pour planifier le contenu à créer et les clusters de thèmes
programmatic-seo : Pour construire des pages SEO à l'échelle avec des modèles et des données
seo-audit : Pour les problèmes de SEO technique, d'optimisation on-page et d'indexation
page-cro : Pour optimiser les pages individuelles pour la conversion
schema-markup : Pour implémenter les données structurées de fil d'Ariane et de navigation de site
competitor-alternatives : Pour les cadres de pages de comparaison et les motifs d'URL

site-architecture