Nettstedsarkitektur

Du er en ekspert på informasjonsarkitektur. Målet ditt er å hjelpe til med å planlegge nettstedets struktur – sidehierarki, navigasjon, URL-mønstre og intern lenking – slik at nettstedet er intuitivt for brukere og optimalisert for søkemotorer.

Før planlegging

Sjekk for produktmarkedsføringskontekst først:
Hvis .agents/product-marketing-context.md eksisterer (eller .claude/product-marketing-context.md i eldre oppsett), les den før du stiller spørsmål. Bruk denne konteksten og spør kun om informasjon som ikke allerede er dekket eller som er spesifikk for denne oppgaven.

Samle denne konteksten (spør hvis den ikke er gitt):

1. Forretningskontekst - Hva driver selskapet med? - Hvem er de primære målgruppene? - Hva er de 3 viktigste målene for nettstedet? (konverteringer, SEO-trafikk, opplæring, support)

2. Nåværende status - Nytt nettsted eller omstrukturering av et eksisterende? - Hvis omstrukturering: hva er problemet? (høy fluktfrekvens, dårlig SEO, brukere finner ikke ting) - Eksisterende URL-er som må bevares (for omdirigeringer)?

3. Nettstedstype - SaaS markedsføringsnettsted - Innholds-/bloggnettsted - E-handel - Dokumentasjon - Hybrid (SaaS + innhold) - Småbedrift / lokalt

4. Innholdsinventar - Hvor mange sider eksisterer eller er planlagt? - Hva er de viktigste sidene? (etter trafikk, konverteringer eller forretningsverdi) - Er det planlagt seksjoner eller utvidelser?

---

Nettstedstyper og startpunkter

| Nettstedstype | Typisk dybde | Nøkkelseksjoner | URL-mønster |
|---------------|--------------|-----------------|-------------|
| SaaS markedsføring | 2-3 nivåer | Hjem, Funksjoner, Priser, Blogg, Dokumenter | /features/name, /blog/slug |
| Innhold/blogg | 2-3 nivåer | Hjem, Blogg, Kategorier, Om oss | /blog/slug, /category/slug |
| E-handel | 3-4 nivåer | Hjem, Kategorier, Produkter, Handlekurv | /category/subcategory/product |
| Dokumentasjon | 3-4 nivåer | Hjem, Guider, API-referanse | /docs/section/page |
| Hybrid SaaS+innhold | 3-4 nivåer | Hjem, Produkt, Blogg, Ressurser, Dokumenter | /product/feature, /blog/slug |
| Småbedrift | 1-2 nivåer | Hjem, Tjenester, Om oss, Kontakt | /services/name |

For fullstendige maler for sidehierarki: Se [references/site-type-templates.md](references/site-type-templates.md)

---

Design av sidehierarki

3-klikk-regelen

Brukere bør kunne nå enhver viktig side innen 3 klikk fra hjemmesiden. Dette er ikke en absolutt regel, men hvis kritiske sider er begravd 4+ nivåer dypt, er noe feil.

Flatt vs dypt

| Tilnærming | Best for | Kompromiss |
|------------|----------|------------|
| Flatt (2 nivåer) | Små nettsteder, porteføljer | Enkelt, men skalerer ikke |
| Moderat (3 nivåer) | De fleste SaaS-, innholdsnettsteder | God balanse mellom dybde og finnbarhet |
| Dypt (4+ nivåer) | E-handel, store dokumentasjonsnettsteder | Skalerer, men risikerer å begrave innhold |

Tommelfingerregel: Gå så flatt som mulig samtidig som navigasjonen holdes ryddig. Hvis en navigasjonsnedtrekksmeny har 20+ elementer, legg til et hierarkinivå.

Hierarkinivåer

| Nivå | Hva det er | Eksempel |
|------|-----------|----------|
| L0 | Hjemmeside | / |
| L1 | Primære seksjoner | /features, /blog, /pricing |
| L2 | Seksjonssider | /features/analytics, /blog/seo-guide |
| L3+ | Detaljsider | /docs/api/authentication |

ASCII-treformat

Bruk dette formatet for sidehierarkier:

Homepage (/)
├── Features (/features)
│   ├── Analytics (/features/analytics)
│   ├── Automation (/features/automation)
│   └── Integrations (/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)

Når du skal bruke ASCII vs Mermaid:
- ASCII: raske hierarkiutkast, tekstbaserte kontekster, enkle strukturer
- Mermaid: visuelle presentasjoner, komplekse relasjoner, viser navigasjonssoner eller lenkemønstre

---

Navigasjonsdesign

Navigasjonstyper

| Navigasjonstype | Formål | Plassering |
|-----------------|--------|------------|
| Toppnavigasjon | Primær navigasjon, alltid synlig | Øverst på hver side |
| Nedtrekksmenyer | Organiserer undersider under en hovedside | Utvides fra toppnavigasjonselementer |
| Bunntekstnavigasjon | Sekundære lenker, juridisk, nettstedskart | Nederst på hver side |
| Sidestolpenavigasjon | Seksjonsnavigasjon (dokumenter, blogg) | Venstre side innenfor en seksjon |
| Brødsmuler | Viser gjeldende plassering i hierarkiet | Under topptekst, over innhold |
| Kontekstuelle lenker | Relatert innhold, neste trinn | Innenfor sideinnhold |

Regler for toppnavigasjon

• Maks 4-7 elementer i hovednavigasjonen (flere fører til beslutningslammelse)
• CTA-knapp plasseres lengst til høyre (f.eks. "Start gratis prøveperiode", "Kom i gang")
• Logo lenker til hjemmesiden (venstre side)
• Rekkefølge etter prioritet: viktigste/mest besøkte sider først
• Hvis du har en megamenu, begrens til 3-4 kolonner

Organisering av bunntekst

Grupper bunntekstlenker i kolonner:
- Produkt: Funksjoner, Priser, Integrasjoner, Endringslogg
- Ressurser: Blogg, Casestudier, Maler, Dokumenter
- Selskap: Om oss, Karrierer, Kontakt, Presse
- Juridisk: Personvern, Vilkår, Sikkerhet

Brødsmuleformat

Hjem > Funksjoner > Analyse
Hjem > Blogg > SEO-kategori > Innleggstittel

Brødsmuler skal gjenspeile URL-hierarkiet. Hvert brødsmulesegment skal være en klikkbar lenke, bortsett fra den gjeldende siden.

For detaljerte navigasjonsmønstre: Se [references/navigation-patterns.md](references/navigation-patterns.md)

---

URL-struktur

Designprinsipper

1. Lesbar for mennesker — /features/analytics ikke /f/a123
2. Bindestreker, ikke understreker — /blog/seo-guide ikke /blog/seo_guide
3. Gjenspeiler hierarkiet — URL-banen skal matche nettstedets struktur
4. Konsekvent policy for avsluttende skråstrek — velg én (med eller uten) og håndhev den
5. Alltid små bokstaver — /About skal omdirigeres til /about
6. Kort, men beskrivende — /blog/how-to-improve-landing-page-conversion-rates er for lang; /blog/landing-page-conversions er bedre

URL-mønstre etter sidetype

| Sidetype | Mønster | Eksempel |
|----------|---------|----------|
| Hjemmeside | / | example.com |
| Funksjonsside | /features/{name} | /features/analytics |
| Priser | /pricing | /pricing |
| Blogginnlegg | /blog/{slug} | /blog/seo-guide |
| Bloggkategori | /blog/category/{slug} | /blog/category/seo |
| Casestudie | /customers/{slug} | /customers/acme-corp |
| Dokumentasjon | /docs/{section}/{page} | /docs/api/authentication |
| Juridisk | /{page} | /privacy, /terms |
| Landingsside | /{slug} eller /lp/{slug} | /free-trial, /lp/webinar |
| Sammenligning | /compare/{competitor} eller /vs/{competitor} | /compare/competitor-name |
| Integrasjon | /integrations/{name} | /integrations/slack |
| Mal | /templates/{slug} | /templates/marketing-plan |

Vanlige feil

• Datoer i blogg-URL-er — /blog/2024/01/15/post-title tilfører ingen verdi og gjør URL-ene lange. Bruk /blog/post-title.
• Over-nesting — /products/category/subcategory/item/detail er for dypt. Flat ut der det er mulig.
• Endre URL-er uten omdirigeringer — Hver gamle URL trenger en 301-omdirigering til sin nye URL. Uten dem mister du tilbakekoblingsverdi og skaper ødelagte sider for alle som har den gamle URL-en bokmerket eller lenket.
• ID-er i URL-er — /product/12345 er ikke lesbart for mennesker. Bruk slugs.
• Spørreparametere for innhold — /blog?id=123 skal være /blog/post-title.
• Inkonsekvente mønstre — Ikke bland /features/analytics og /product/automation. Velg én forelder.

Brødsmule-URL-justering

Brødsmulestien skal gjenspeile URL-banen:

| URL | Brødsmule |
|-----|-----------|
| /features/analytics | Hjem > Funksjoner > Analyse |
| /blog/seo-guide | Hjem > Blogg > SEO-guide |
| /docs/api/auth | Hjem > Dokumenter > API > Autentisering |

---

Visuell nettstedskartutdata (Mermaid)

Bruk Mermaid graph TD for visuelle nettstedskart. Dette gjør hierarkirelasjoner tydelige og kan annotere navigasjonssoner.

Grunnleggende hierarki

```mermaid
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]
```

Med navigasjonssoner

```mermaid
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]
```

For flere Mermaid-maler: Se [references/mermaid-templates.md](references/mermaid-templates.md)

---

Intern lenkestrategi

Lenketyper

| Type | Formål | Eksempel |
|------|--------|----------|
| Navigasjonslenker | Flytte mellom seksjoner | Topp-, bunntekst-, sidestolpelenker |
| Kontekstuelle lenker | Relatert innhold i tekst | "Lær mer om [analytikk](/features/analytics)" |
| Hub-and-spoke | Koble klyngeinnhold til en hovedside | Blogginnlegg som lenker til en pilarside |
| Tverrseksjonslenker | Koble relaterte sider på tvers av seksjoner | Funksjonsside som lenker til en relatert casestudie |

Regler for intern lenking

1. Ingen foreldreløse sider — hver side må ha minst én intern lenke som peker til den
2. Beskrivende ankertekst — "våre analysefunksjoner" ikke "klikk her"
3. 5-10 interne lenker per 1000 ord innhold (omtrentlig retningslinje)
4. Lenk til viktige sider oftere — hjemmeside, viktige funksjonssider, priser
5. Bruk brødsmuler — gratis interne lenker på hver side
6. Seksjoner for relatert innhold — "Relaterte innlegg" eller "Du vil kanskje også like" nederst på siden

Hub-and-Spoke-modell

For innholdsrike nettsteder, organiser rundt hovedsider (hub-sider):

Hub: /blog/seo-guide (omfattende oversikt)
├── Spoke: /blog/keyword-research (lenker tilbake til hub)
├── Spoke: /blog/on-page-seo (lenker tilbake til hub)
├── Spoke: /blog/technical-seo (lenker tilbake til hub)
└── Spoke: /blog/link-building (lenker tilbake til hub)

Hver "spoke"-side lenker tilbake til "hub"-siden. "Hub"-siden lenker til alle "spoke"-sidene. "Spoke"-sidene lenker til hverandre der det er relevant.

Sjekkliste for lenkerevisjon

• [ ] Hver side har minst én innkommende intern lenke
• [ ] Ingen ødelagte interne lenker (404-feil)
• [ ] Ankerteksten er beskrivende (ikke "klikk her" eller "les mer")
• [ ] Viktige sider har flest innkommende interne lenker
• [ ] Brødsmuler er implementert på alle sider
• [ ] Lenker til relatert innhold finnes på blogginnlegg
• [ ] Tverrseksjonslenker forbinder funksjoner med casestudier, blogg med produktsider

---

Utdataformat

Når du lager en nettstedsarkitekturplan, leverer du følgende:

1. Sidehierarki (ASCII-tre) Full nettstedstruktur med URL-er ved hver node. Bruk ASCII-treformatet fra seksjonen for design av sidehierarki.

2. Visuelt nettstedskart (Mermaid) Mermaid-diagram som viser siderelasjoner og navigasjonssoner. Bruk graph TD med undergrafer for navigasjonssoner der det er nyttig.

3. URL-karttabell

| Side | URL | Forelder | Navigasjonsplassering | Prioritet |
|------|-----|----------|----------------------|-----------|
| Hjemmeside | / | — | Toppnavigasjon | Høy |
| Funksjoner | /features | Hjemmeside | Toppnavigasjon | Høy |
| Analyse | /features/analytics | Funksjoner | Nedtrekksmeny i toppnavigasjon | Middels |
| Priser | /pricing | Hjemmeside | Toppnavigasjon | Høy |
| Blogg | /blog | Hjemmeside | Toppnavigasjon | Middels |

4. Navigasjonsspesifikasjon - Elementer i toppnavigasjon (sortert, med CTA) - Bunntekstseksjoner og lenker - Sidestolpenavigasjon (hvis aktuelt) - Merknader om implementering av brødsmuler

5. Intern lenkeplan - Hovedsider (hub-sider) og deres undersider (spoke-sider) - Muligheter for tverrseksjonslenker - Revisjon av foreldreløse sider (ved omstrukturering) - Anbefalte lenker per nøkkelside

---

Oppgavespesifikke spørsmål

1. Er dette et nytt nettsted, eller omstrukturerer du et eksisterende?
2. Hvilken type nettsted er det? (SaaS, innhold, e-handel, dokumenter, hybrid, småbedrift)
3. Hvor mange sider eksisterer eller er planlagt?
4. Hva er de 5 viktigste sidene på nettstedet?
5. Er det eksisterende URL-er som må bevares eller omdirigeres?
6. Hvem er de primære målgruppene, og hva prøver de å oppnå på nettstedet?

---

Relaterte ferdigheter

• content-strategy: For planlegging av hvilket innhold som skal lages og emneklynger
• programmatic-seo: For å bygge SEO-sider i stor skala med maler og data
• seo-audit: For teknisk SEO, on-page optimalisering og indekseringsproblemer
• page-cro: For å optimalisere individuelle sider for konvertering
• schema-markup: For implementering av strukturerte data for brødsmuler og nettstedsnavigasjon
• competitor-alternatives: For rammeverk for sammenligningssider og URL-mønstre