Prompt file imported from MathiasBoll/Kastrup-Cykelboers-frontend-og-Backend (.github/prompts/build-fase3-seo-landingsside.prompt.md). Copyright stays with the author.

Build: SEO-landingsside til lokal søgetrafik (Fase 3)

Name: build-fase3-seo-landingsside
Author: MathiasBoll

Formål

Byg en public-facing SEO-landingsside på ruten /cykelhandler-kastrup der er målrettet lokal søgeintention for "cykelhandler i Kastrup" og lignende søgninger. Siden skal ranke i Google, skabe tillid og sende besøgende videre til relevante sider.

Feature-ID: FE-055

Allerede implementeret ✅

Filen er bygget og deployed. Ruten er aktiv.

Fil

app/src/pages/public/SeoLandingsside.jsx

Rute

// I App.jsx under PublicLayout
<Route path="/cykelhandler-kastrup" element={<SeoLandingsside />} />

Indhold

SEO-meta: titel, beskrivelse, OG-tags via useSeoMeta
Schemas: LocalBusiness, BreadcrumbList, FAQPage (3 spørgsmål)
Info-kort grid (3): Nye cykler, Brugte cykler, Værksted
Fordel-liste med lokal vinkel
FAQ-sektion (fra schema-array, genbrugt i UI)
Mørk CTA-sektion → /kontakt og /erhverv

Navigation

PublicLayout header: "Guide" → /cykelhandler-kastrup
PublicLayout footer: "Cykelhandler i Kastrup" → /cykelhandler-kastrup

Udvidelsesmuligheder

Tilføj mere lokal SEO-indhold

Tilføj en sektion med lokale søgeord (Tårnby, Amager, Kastrup Havn)
Tilføj åbningstider og adresse direkte på siden

Flere FAQ-entries

Tilføj til SEO_FAQ-arrayet i SeoLandingsside.jsx. Hvert objekt:

{
  spoergsmaal: 'Spørgsmål her?',
  svar: 'Svar her.',
}

Både UI og FAQPage-schema opdateres automatisk.

Tilføj intern linking

Link til /erhverv/referencer for B2B
Link til kategori-sider for specifikke cykeltyper

Tekniske detaljer

SEO-hooks

useSeoMeta i app/src/hooks/useSeoMeta.js
genererLocalBusinessSchema, genererBreadcrumbSchema, genererFaqSchema fra app/src/utils/seoSchema.js

Farver og klasser

.seo-oversigt-grid — wrapper for info-korts grid
.seo-punktliste — fordelsliste
.fremhaevet-sektion — mørk CTA-boks
.info-kort + .info-kort__ikon — individuelle info-kort
Brug --kcb-guld, --kcb-blaa og semantiske tokens fra tokens.css

CSS-filen

app/src/styles/pages.css — tilføj klasser der hvor kategorisering passer semantisk

Test

Åbn /cykelhandler-kastrup i browser
Tjek at meta-title og description er korrekt i browser-tab og <head>
Tjek at JSON-LD schemas er til stede i page source
Tjek at info-kortene linker korrekt til /cykler, /brugte-cykler, /vaerksted
Tjek at CTA-knapper linker til /kontakt og /erhverv

# Build: SEO-landingsside til lokal søgetrafik (Fase 3) ## Formål Byg en public-facing SEO-landingsside på ruten `/cykelhandler-kastrup` der er målrettet lokal søgeintention for "cykelhandler i Kastrup" og lignende søgninger. Siden skal ranke i Google, skabe tillid og sende besøgende videre til relevante sider. **Feature-ID:** FE-055 --- ## Allerede implementeret ✅ Filen er bygget og deployed. Ruten er aktiv. ### Fil - `app/src/pages/public/SeoLandingsside.jsx` ### Rute ```jsx // I App.jsx under PublicLayout <Route path="/cykelhandler-kastrup" element={<SeoLandingsside />} /> ``` ### Indhold - SEO-meta: titel, beskrivelse, OG-tags via `useSeoMeta` - Schemas: `LocalBusiness`, `BreadcrumbList`, `FAQPage` (3 spørgsmål) - Info-kort grid (3): Nye cykler, Brugte cykler, Værksted - Fordel-liste med lokal vinkel - FAQ-sektion (fra schema-array, genbrugt i UI) - Mørk CTA-sektion → `/kontakt` og `/erhverv` ### Navigation - PublicLayout header: "Guide" → `/cykelhandler-kastrup` - PublicLayout footer: "Cykelhandler i Kastrup" → `/cykelhandler-kastrup` --- ## Udvidelsesmuligheder ### Tilføj mere lokal SEO-indhold - Tilføj en sektion med lokale søgeord (Tårnby, Amager, Kastrup Havn) - Tilføj åbningstider og adresse direkte på siden ### Flere FAQ-entries Tilføj til `SEO_FAQ`-arrayet i `SeoLandingsside.jsx`. Hvert objekt: ```js { spoergsmaal: 'Spørgsmål her?', svar: 'Svar her.', } ``` Både UI og FAQPage-schema opdateres automatisk. ### Tilføj intern linking - Link til `/erhverv/referencer` for B2B - Link til kategori-sider for specifikke cykeltyper --- ## Tekniske detaljer ### SEO-hooks - `useSeoMeta` i `app/src/hooks/useSeoMeta.js` - `genererLocalBusinessSchema`, `genererBreadcrumbSchema`, `genererFaqSchema` fra `app/src/utils/seoSchema.js` ### Farver og klasser - `.seo-oversigt-grid` — wrapper for info-korts grid - `.seo-punktliste` — fordelsliste - `.fremhaevet-sektion` — mørk CTA-boks - `.info-kort` + `.info-kort__ikon` — individuelle info-kort - Brug `--kcb-guld`, `--kcb-blaa` og semantiske tokens fra `tokens.css` ### CSS-filen `app/src/styles/pages.css` — tilføj klasser der hvor kategorisering passer semantisk --- ## Test - Åbn `/cykelhandler-kastrup` i browser - Tjek at meta-title og description er korrekt i browser-tab og `<head>` - Tjek at JSON-LD schemas er til stede i page source - Tjek at info-kortene linker korrekt til `/cykler`, `/brugte-cykler`, `/vaerksted` - Tjek at CTA-knapper linker til `/kontakt` og `/erhverv`

{ "prompt": "# Build: SEO-landingsside til lokal søgetrafik (Fase 3)\n\n## Formål\nByg en public-facing SEO-landingsside på ruten `/cykelhandler-kastrup` der er målrettet lokal søgeintention for \"cykelhandler i Kastrup\" og lignende søgninger. Siden skal ranke i Google, skabe tillid og sende besøgende videre til relevante sider.\n\n**Feature-ID:** FE-055\n\n---\n\n## Allerede implementeret ✅\n\nFilen er bygget og deployed. Ruten er aktiv.\n\n### Fil\n- `app/src/pages/public/SeoLandingsside.jsx`\n\n### Rute\n```jsx\n// I App.jsx under PublicLayout\n<Route path=\"/cykelhandler-kastrup\" element={<SeoLandingsside />} />\n```\n\n### Indhold\n- SEO-meta: titel, beskrivelse, OG-tags via `useSeoMeta`\n- Schemas: `LocalBusiness`, `BreadcrumbList`, `FAQPage` (3 spørgsmål)\n- Info-kort grid (3): Nye cykler, Brugte cykler, Værksted\n- Fordel-liste med lokal vinkel\n- FAQ-sektion (fra schema-array, genbrugt i UI)\n- Mørk CTA-sektion → `/kontakt` og `/erhverv`\n\n### Navigation\n- PublicLayout header: \"Guide\" → `/cykelhandler-kastrup`\n- PublicLayout footer: \"Cykelhandler i Kastrup\" → `/cykelhandler-kastrup`\n\n---\n\n## Udvidelsesmuligheder\n\n### Tilføj mere lokal SEO-indhold\n- Tilføj en sektion med lokale søgeord (Tårnby, Amager, Kastrup Havn)\n- Tilføj åbningstider og adresse direkte på siden\n\n### Flere FAQ-entries\nTilføj til `SEO_FAQ`-arrayet i `SeoLandingsside.jsx`. Hvert objekt:\n```js\n{\n spoergsmaal: 'Spørgsmål her?',\n svar: 'Svar her.',\n}\n```\nBåde UI og FAQPage-schema opdateres automatisk.\n\n### Tilføj intern linking\n- Link til `/erhverv/referencer` for B2B\n- Link til kategori-sider for specifikke cykeltyper\n\n---\n\n## Tekniske detaljer\n\n### SEO-hooks\n- `useSeoMeta` i `app/src/hooks/useSeoMeta.js`\n- `genererLocalBusinessSchema`, `genererBreadcrumbSchema`, `genererFaqSchema` fra `app/src/utils/seoSchema.js`\n\n### Farver og klasser\n- `.seo-oversigt-grid` — wrapper for info-korts grid\n- `.seo-punktliste` — fordelsliste\n- `.fremhaevet-sektion` — mørk CTA-boks\n- `.info-kort` + `.info-kort__ikon` — individuelle info-kort\n- Brug `--kcb-guld`, `--kcb-blaa` og semantiske tokens fra `tokens.css`\n\n### CSS-filen\n`app/src/styles/pages.css` — tilføj klasser der hvor kategorisering passer semantisk\n\n---\n\n## Test\n\n- Åbn `/cykelhandler-kastrup` i browser\n- Tjek at meta-title og description er korrekt i browser-tab og `<head>`\n- Tjek at JSON-LD schemas er til stede i page source\n- Tjek at info-kortene linker korrekt til `/cykler`, `/brugte-cykler`, `/vaerksted`\n- Tjek at CTA-knapper linker til `/kontakt` og `/erhverv`", "variables": [], "notes": "Filen er bygget og deployed. Ruten er aktiv.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/MathiasBoll/Kastrup-Cykelboers-frontend-og-Backend", "path": ".github/prompts/build-fase3-seo-landingsside.prompt.md", "ref": "eb9af4007b8fb584c6f6b7d7dfe8537fc3debe81", "url": "https://github.com/MathiasBoll/Kastrup-Cykelboers-frontend-og-Backend/blob/eb9af4007b8fb584c6f6b7d7dfe8537fc3debe81/.github/prompts/build-fase3-seo-landingsside.prompt.md", "key": "MathiasBoll/Kastrup-Cykelboers-frontend-og-Backend/.github/prompts/build-fase3-seo-landingsside.prompt.md" } } }

build-fase3-seo-landingsside

About