Strapi CMS + Next.js Website med Avanceret SEO-arkitektur
En voksende virksomhed havde brug for et hurtigt, indholdsrigt marketingwebsite, hvor deres ikke-tekniske marketingteam selv kunne administrere sider, blogindlæg og landingssider – samtidig med at de sikrede, at sitet rangerede konkurrencedygtigt i organisk søgning fra dag ét.
Diskuter Dit Projekt
Udfordringen
Det eksisterende website var bygget på et monolitisk CMS, der skabte eskalerende problemer:
- Langsom Ydeevne — Server-renderede sider med oppustede plugins havde i gennemsnit indlæsningstider på 4-6 sekunder, hvilket ødelagde Core Web Vitals
- Udviklerflaskehals — Hver indholdsændring (ny landingsside, bloglayout, CTA-opdatering) krævede, at en udvikler skulle ændre i skabelonfiler
- Dårligt SEO-grundlag — Ingen struktureret data, inkonsistente meta tags, manglende canonical URLs og intet programmatisk sitemap førte til svag organisk synlighed
- Stiv Indholdsmodel — Tilføjelse af en ny indholdstype (casestudier, FAQs, team bios) krævede skemamigreringer og omskrivning af skabeloner
- Ingen forhåndsvisning — Redaktører publicerede indhold "blindt" – ingen måde at forhåndsvise ændringer på, før de gik live
- Lokaliseringsbehov — Fremtidig udvidelse til flere sprog krævede et CMS, der understøttede i18n nativt
Vores Løsning
Vi byggede en Strapi + Next.js headless-arkitektur med et fleksibelt indholdsmodelleringslag i Strapi, en statisk genereret Next.js frontend med ISR for næsten øjeblikkelige opdateringer, og et omfattende SEO-system, der dækker teknisk, on-page og struktureret dataoptimering.
Arkitektur
- CMS: Strapi (selv-hostet) med brugerdefinerede content types og Dynamic Zones
- Frontend: Next.js med App Router, React Server Components, TypeScript
- Styling: Tailwind CSS med design system tokens
- SEO-lag: Next.js Metadata API, JSON-LD generators, automatiseret sitemap/robots.txt
- Medie: Strapi Media Library med Cloudinary-udbyder for optimeret levering
- Hosting: Vercel (frontend), cloud-hostet Strapi backend, Cloudinary (media CDN)
- Database: PostgreSQL til Strapi-indholdslagring
- Cache: ISR med on-demand revalidation via Strapi webhooks
Strapi Indholdsmodellering
Content Types
CMS'et blev struktureret omkring content types, der dækkede alle forretningsbehov: marketingsider, blogindlæg med kategorier og forfattere, kampagnesider, service-/produkttilbud, teammedlemsprofiler, FAQs, udtalelser og en global indstillings-singleton til site-dækkende konfiguration.
Dynamic Zones (Page Builder)
Strapi Dynamic Zones gør det muligt for redaktører at sammensætte sideindhold fra genanvendelige komponenter — hver zonepost knytter sig til en React-komponent på frontend'en. Tilgængelige blokke inkluderer heroes, feature grids, tekst-med-billede layouts, testimonial-sektioner, CTA-bannere, FAQ-harmonikaer, statistik-tællere, prisskemaer, logo-gitter, embeds, blog-højdepunkter og kontaktformularer — der dækker alle gængse marketing side-mønstre.
SEO-komponent (Genanvendelig)
En delt SEO-komponent knyttet til hver content type leverer felter til brugerdefineret meta title, meta description, tilsidesættelse af canonical URL, Open Graph-billede, indekseringsdirektiver, fokusnøgleord og valgfri tilsidesættelse af structured data – hvilket sikrer konsekvent SEO-styring på tværs af alt indhold.
Next.js Frontend-arkitektur
Komponentstruktur
Frontend'en følger en lagdelt arkitektur:
- Blokkomponenter kortlægger direkte til Strapi Dynamic Zone-poster
- UI-primitiver leverer konsistente design system-elementer
- Layoutkomponenter håndterer header, footer og navigation
- SEO-værktøjer genererer structured data og meta tags
En central Dynamic Zone renderer itererer gennem blok-arrayet fra Strapi og render React-komponenten for hver post.
Datahentningsstrategi
Alle ruter bruger Incremental Static Regeneration (ISR) med on-demand revalidation udløst af Strapi webhooks. Når en redaktør publicerer eller opdaterer indhold, affyrer Strapi en webhook, der udløser revalidation af den specifikke berørte side, hvilket sikrer, at opdateringer går live inden for få sekunder uden fulde genopbygninger.
SEO-implementering
Teknisk SEO
- Metadata pr. side — Title, description, canonical URL, Open Graph og Twitter Card tags genereret fra Strapi SEO-felter med intelligent fallback
- Automatiseret sitemap — Programmatisk genereret fra alt publiceret indhold med passende ændringsfrekvens og prioriteringsværdier
- Robots.txt — Miljøbevidst generering (produktion tillader crawling, staging blokerer det)
- Canonical URLs — Autogenereret med trailing slash normalisering, kan tilsidesættes fra CMS
Struktureret data (JSON-LD)
Automatisk skemagenerering dækker:
- Organisation — Site-dækkende skema fra globale indstillinger
- Artikel — Blogindlæg med overskrift, forfatter, datoer og udgiver
- FAQ — Autogenereret når FAQ-blokke bruges på en side
- Brødkrumme — Autogenereret fra URL-sti-hierarki
- Service — Servicesider med udbyder og betjeningsområde
- Lokal Virksomhed — Valgfrit, for virksomheder med fysiske lokationer
Performance SEO (Core Web Vitals)
- LCP — Hero-billeder forudindlæst, Cloudinary auto-format (WebP/AVIF), kritisk CSS inlinet, Server Components eliminerer unødvendig client JS
- CLS — Eksplicitte billeddimensioner fra mediebibliotek, optimeret skrifttypeindlæsning med size-adjust, skeleton placeholders, fixed-dimension embed containers
- INP — Minimal client-side JavaScript, lightweight interaktive handlere, per-rute code splitting
On-Page SEO-værktøjer
CMS'et inkluderer redaktørvejledning med tegnantalindikatorer for meta-felter, obligatorisk feltvalidering, der sikrer, at ingen side publiceres uden SEO-metadata, og automatisk udfyldelse af SEO-felter fra indholdsoverskrifter og uddrag med manuelle tilsidesættelsesmuligheder.
Mediepipeline
Billeder uploadet til Strapi gemmes på Cloudinary CDN, hvor Next.js frontend'en anmoder om optimerede varianter med automatisk formatvalg, responsiv dimensionering, edge caching og lazy loading med slørings-placeholders for above-fold prioriteret indlæsning.
Nøglefunktioner
- Dynamic Zone Page Builder — 12+ komponerbare blokke til sideoprettelse uden udvikler
- Genanvendelig SEO-komponent — Knyttet til hver content type for konsekvent meta-styring
- Automatisk struktureret data — JSON-LD til Organisation, Artikel, FAQ, Brødkrumme, Service
- ISR + Webhooks — Indholdsopdateringer live på få sekunder uden fuld genopbygning
- Programmatisk Sitemap — Autogenereret fra alt publiceret Strapi-indhold
- Cloudinary Mediepipeline — Auto-format, responsiv dimensionering, CDN-levering
- Core Web Vitals Optimeret — Server Components, forudindlæsning af billeder, skrifttypeoptimering, minimal JS
- Udkastforhåndsvisning — Strapi preview-knap render udkastindhold i Next.js før publicering
- i18n Klar — Strapi's indbyggede internationalisering for fremtidig flersproget udvidelse
- Redaktør-sikkerhedsforanstaltninger — Tegntællere, obligatoriske felter og nøgleordsvejledning i Strapi admin
Resultater
Teknologistak
Klar til at Transformere Din Virksomhed?
Lad os drøfte, hvordan vi kan anvende lignende løsninger til dine udfordringer.