Strapi CMS + Next.js Hjemmeside med Avanceret SEO-arkitektur
En voksende virksomhed havde brug for en hurtig, indholdsrig marketinghjemmeside, hvor deres ikke-tekniske marketingteam selvstændigt kunne administrere sider, blogindlæg og landingssider – samtidig med at de sikrede, at siden rangerede konkurrencedygtigt i organisk søgning fra dag ét.
Diskuter Dit Projekt
Udfordringen
Den eksisterende hjemmeside var bygget på et monolitisk CMS, der skabte eskalerende problemer:
- Langsom Ydeevne — Server-renderede sider med oppustede plugins havde en gennemsnitlig indlæsningstid på 4-6 sekunder, hvilket skadede Core Web Vitals
- Udviklerflaskehals — Hver indholdsændring (ny landingsside, blog-layout, CTA-opdatering) krævede, at en udvikler rørte ved skabelonfiler
- Dårlig SEO-grundlag — Ingen struktureret data, inkonsekvente meta tags, manglende canonical URLs og intet programmatisk sitemap førte til svag organisk synlighed
- Stiv Indholdsmodel — Tilføjelse af en ny indholdstype (casestudier, ofte stillede spørgsmål (FAQs), teamprofiler) krævede skemamigrationer og skabelonomskrivninger
- Ingen forhåndsvisning — Redaktører udgav 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, et statisk genereret Next.js frontend med ISR for næsten øjeblikkelige opdateringer, og et omfattende SEO-system, der dækkede teknisk, on-page og struktureret dataoptimering.
Arkitektur
- CMS: Strapi (selvhostet) med tilpassede indholdstyper 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 generatorer, automatiseret sitemap/robots.txt
- Medie: Strapi Mediebibliotek med Cloudinary provider for optimeret levering
- Hosting: Vercel (frontend), cloud-hostet Strapi backend, Cloudinary (medie CDN)
- Database: PostgreSQL til Strapi indholdslagring
- Cache: ISR med on-demand revalidation via Strapi webhooks
Strapi Indholdsmodellering
Indholdstyper
CMS'et blev struktureret omkring indholdstyper, der dækkede alle forretningsbehov: marketingsider, blogindlæg med kategorier og forfattere, kampagne-landingssider, service/produkttilbud, teammedlemsbiografier, ofte stillede spørgsmål (FAQs), udtalelser og en global indstillingssingleton for site-dækkende konfiguration.
Dynamic Zones (Sidebygger)
Strapi Dynamic Zones giver redaktører mulighed for at sammensætte sideindhold fra genanvendelige komponenter — hver zoneindgang mappes til en React-komponent på frontend. Tilgængelige blokke inkluderer heroes, feature grids, tekst-med-billede layouts, udtalelsessektioner, CTA-bannere, FAQ-harmonikaer, statistik-tællere, pristabeller, logo-grids, embeds, blog-højdepunkter og kontaktformularer — der dækker alle almindelige marketing side-mønstre.
SEO-komponent (Genanvendelig)
En delt SEO-komponent knyttet til hver indholdstype giver felter for tilpasset meta title, meta description, canonical URL override, Open Graph image, indekseringsdirektiver, fokusnøgleord og valgfri structured data override — hvilket sikrer konsekvent SEO-styring på tværs af alt indhold.
Next.js Frontend Arkitektur
Komponentstruktur
Frontend følger en lagdelt arkitektur:
- Blokkomponenter mapper direkte til Strapi Dynamic Zone indgange
- UI-primitiver leverer konsistente designsystemelementer
- 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 renderes den tilsvarende React-komponent for hver indgang.
Datahentningsstrategi
Alle ruter bruger Incremental Static Regeneration (ISR) med on-demand revalidation udløst af Strapi webhooks. Når en redaktør udgiver 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 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 udgivet 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 overskrives fra CMS
Struktureret Data (JSON-LD)
Automatiseret skemagenerering dækker:
- Organisation — Site-dækkende skema fra globale indstillinger
- Artikel — Blogindlæg med overskrift, forfatter, datoer og udgiver
- Ofte stillede spørgsmål (FAQ) — Autogenereres, når FAQ-blokke bruges på en side
- Brødkrumme — Autogenereres fra URL-sti-hierarki
- Service — Servicesider med udbyder og dækningsområde
- Lokal Virksomhed — Valgfri, for virksomheder med fysiske placeringer
Ydeevne SEO (Core Web Vitals)
- LCP — Hero-billeder forudindlæst, Cloudinary auto-format (WebP/AVIF), kritisk CSS indlejret, Server Components eliminerer unødvendig klient JS
- CLS — Eksplicitte billeddimensioner fra mediebiblioteket, optimeret skrifttypeindlæsning med size-adjust, skeleton placeholders, faste-dimensioners embed-containere
- INP — Minimal klient-side JavaScript, letvægts interaktive handlere, kodeopdeling pr. rute
On-Page SEO Værktøjer
CMS'et inkluderer redaktørvejledning med tegnantalindikatorer for meta-felter, validering af obligatoriske felter, der sikrer, at ingen side udgives uden SEO-metadata, og automatisk udfyldning af SEO-felter fra indholdsoverskrifter og uddrag med manuelle overstyringsmuligheder.
Mediepipeline
Billeder uploadet til Strapi gemmes på Cloudinary CDN, med Next.js frontend, der anmoder om optimerede varianter med automatisk formatvalg, responsiv størrelse, edge caching og lazy loading med slørings-placeholders for above-fold prioritetsindlæsning.
Nøglefunktioner
- Dynamic Zone Sidebygger — 12+ komponerbare blokke til sideoprettelse uden udvikler
- Genanvendelig SEO-komponent — Knyttet til hver indholdstype for ensartet meta-styring
- Automatiseret Struktureret Data — JSON-LD for Organisation, Artikel, FAQ, Brødkrumme, Service
- ISR + Webhooks — Indholdsopdateringer live på få sekunder uden fuld genopbygning
- Programmatisk Sitemap — Autogenereret fra alt udgivet Strapi-indhold
- Cloudinary Mediepipeline — Auto-format, responsiv størrelse, CDN-levering
- Core Web Vitals Optimeret — Server Components, billedforudindlæsning, skrifttypeoptimering, minimal JS
- Kladdeforhåndsvisning — Strapi forhåndsvisningsknap renderes kladdeindhold i Next.js før udgivelse
- i18n Klar — Strapi's indbyggede internationalisering for fremtidig flersproget udvidelse
- Redaktørvejledninger — Tegntællere, obligatoriske felter og nøgleordsvejledning i Strapi admin
Resultater
Teknologistak
caseStudyDetail.more Casestudier
Udforsk flere af vores tekniske implementeringer
Headless WordPress CMS med Next.js, ACF & genanvendelig komponentarkitektur
En virksomhed havde brug for et højtydende, SEO-optimeret marketingwebsite med WordPress' fleksibilitet inden for indholdsredigering, men med hastigheden og udvikleroplevelsen fra en moderne React frontend — uden begrænsningerne fra traditionelle WordPress-temaer.
AI-drevet fakturabehandling med OCR og QuickBooks-integration
En mellemstor virksomhed, der månedligt behandler hundredvis af leverandørfakturaer, havde brug for at eliminere manuel dataindtastning ved automatisk at udtrække fakturadata ved hjælp af AI/OCR og synkronisere dem direkte til QuickBooks for bogføring og sporing af betalinger.
Klar til at Transformere Din Virksomhed?
Lad os drøfte, hvordan vi kan anvende lignende løsninger til dine udfordringer.