Strapi CMS + Next.js -sivusto kehittyneellä SEO-arkkitehtuurilla
Kasvava yritys tarvitsi nopean, sisällöltään rikkaan markkinointisivuston, jossa heidän ei-tekninen markkinointitiiminsä voisi hallita sivuja, blogikirjoituksia ja laskeutumissivuja itsenäisesti — samalla varmistaen, että sivusto sijoittuu kilpailukykyisesti orgaanisessa haussa alusta alkaen.
Keskustele Projektistasi
Haaste
Nykyinen verkkosivusto oli rakennettu monoliittiselle CMS:lle, joka aiheutti moninkertaisia ongelmia:
- Hidas Suorituskyky — Palvelinrenderöidyt sivut turvonneilla lisäosilla keskimäärin 4-6 sekunnin latausajat, mikä heikensi Core Web Vitals -arvoja
- Kehittäjäpullonkaula — Jokainen sisällön muutos (uusi laskeutumissivu, blogin asettelu, CTA-päivitys) vaati kehittäjää koskemaan mallipohjatiedostoihin
- Heikko SEO-perusta — Ei jäsenneltyä dataa, epäjohdonmukaiset metatunnisteet, puuttuvat kanoniset URL-osoitteet ja ohjelmallisen sivustokartan puute johtivat heikkoon orgaaniseen näkyvyyteen
- Jäykkä Sisältömalli — Uuden sisältötyypin lisääminen (tapaustutkimukset, usein kysytyt kysymykset, tiimin esittelyt) vaati skeeman migraatioita ja mallipohjien uudelleenkirjoituksia
- Ei Esikatselua — Toimittajat julkaisivat sisältöä sokeasti — ei ollut tapaa esikatsella muutoksia ennen julkaisua
- Lokalisaatiotarpeet — Tuleva laajentuminen useille kielille vaati CMS:n, joka tukee i18n:ää natiivisti
Meidän Ratkaisumme
Rakensimme Strapi + Next.js headless -arkkitehtuurin, jossa on joustava sisällönmallinnuskerros Strapissa, staattisesti generoitu Next.js-frontend ISR:llä lähes välittömiin päivityksiin ja kattava SEO-järjestelmä, joka kattaa teknisen, sivukohtaisen ja jäsennellyn datan optimoinnin.
Arkkitehtuuri
- CMS: Strapi (itse isännöity) mukautetuilla sisältötyypeillä ja Dynamic Zoneilla
- Frontend: Next.js App Routerilla, React Server Componentsilla, TypeScriptillä
- Tyylitys: Tailwind CSS design-järjestelmän tokeneilla
- SEO-kerros: Next.js Metadata API, JSON-LD generaattorit, automatisoitu sivustokartta/robots.txt
- Media: Strapi Media Library Cloudinary-tarjoajalla optimoitua toimitusta varten
- Isännöinti: Vercel (frontend), pilvi-isännöity Strapi-taustajärjestelmä, Cloudinary (media CDN)
- Tietokanta: PostgreSQL Strapi-sisällön tallennukseen
- Välimuisti: ISR on-demand uudelleenvalidaatiolla Strapi-webhookien kautta
Strapi Sisällönmallinnus
Sisältötyypit
CMS oli rakennettu sisältötyyppien ympärille, jotka kattavat kaikki liiketoiminnan tarpeet: markkinointisivut, blogikirjoitukset kategorioilla ja kirjoittajilla, kampanjan laskeutumissivut, palvelu-/tuotetarjoukset, tiimin jäsenten esittelyt, usein kysytyt kysymykset, asiakastarinat ja maailmanlaajuinen asetusten singleton sivuston laajuiseen konfiguraatioon.
Dynamic Zones (Sivunrakentaja)
Strapi Dynamic Zones mahdollistaa toimittajien koostaa sivusisältöä uudelleenkäytettävistä komponenteista — jokainen vyöhykkeen merkintä vastaa React-komponenttia frontendissä. Käytettävissä olevat lohkot sisältävät sankarit, ominaisuusruudukot, teksti-kuva-asettelut, asiakastarinat, CTA-bannerit, FAQ-accordionit, tilastolaskurit, hintataulukot, logoruudukot, upotukset, blogin kohokohdat ja yhteydenottolomakkeet — kattaen kaikki yleiset markkinointisivumallit.
SEO-komponentti (Uudelleenkäytettävä)
Jaettu SEO-komponentti, joka on liitetty jokaiseen sisältötyyppiin, tarjoaa kenttiä mukautetulle metatittelille, metakuvaukselle, kanonisen URL-osoitteen ohitukselle, Open Graph -kuvalle, indeksointiohjeille, fokusavaimelle ja valinnaiselle jäsennellyn datan ohitukselle — varmistaen johdonmukaisen SEO-hallinnan kaikessa sisällössä.
Next.js Frontend-arkkitehtuuri
Komponenttirakenne
Frontend noudattaa kerrostettua arkkitehtuuria:
- Lohkokomponentit vastaavat suoraan Strapi Dynamic Zone -merkintöjä
- Käyttöliittymän peruselementit tarjoavat johdonmukaiset design-järjestelmän elementit
- Asettelu komponentit käsittelevät otsikon, alatunnisteen ja navigoinnin
- SEO-apuohjelmat generoivat jäsenneltyä dataa ja metatunnisteita
Keskitetty Dynamic Zone -renderöijä käy läpi Strapin lohkotaulukon ja renderöi vastaavan React-komponentin jokaiselle merkinnälle.
Datankeräysstrategia
Kaikki reitit käyttävät Incremental Static Regenerationia (ISR) on-demand uudelleenvalidaatiolla, joka laukaistaan Strapi-webhookeilla. Kun toimittaja julkaisee tai päivittää sisältöä, Strapi lähettää webhookin, joka laukaisee uudelleenvalidaation kyseiselle vaikuttavalle sivulle, varmistaen, että päivitykset tulevat voimaan sekunneissa ilman täydellisiä uudelleenrakennuksia.
SEO-toteutus
Tekninen SEO
- Sivukohtaiset metatiedot — Otsikko, kuvaus, kanoninen URL, Open Graph ja Twitter-korttitunnisteet generoidaan Strapi SEO -kentistä älykkäillä varajärjestelmillä
- Automaattinen sivustokartta — Ohjelmallisesti generoitu kaikesta julkaistusta sisällöstä sopivilla muutosfrekvenssi- ja prioriteettiarvoilla
- Robots.txt — Ympäristötietoinen generointi (tuotanto sallii indeksoinnin, testaus estää sen)
- Kanoniset URL-osoitteet — Automaattisesti generoitu perässä olevan kauttaviivan normalisoinnilla, ohitettavissa CMS:stä
Jäsennelty Data (JSON-LD)
Automaattinen skeemagenerointi kattaa:
- Organisaatio — Sivuston laajuinen skeema globaalista asetuksista
- Artikkeli — Blogikirjoitukset otsikolla, kirjoittajalla, päivämäärillä ja julkaisijalla
- FAQ — Automaattisesti generoitu, kun FAQ-lohkoja käytetään sivulla
- Breadcrumb — Automaattisesti generoitu URL-polun hierarkiasta
- Palvelu — Palvelusivut tarjoajan ja palvelualueen kanssa
- Paikallinen Yritys — Valinnainen, yrityksille, joilla on fyysisiä sijainteja
Suorituskykyinen SEO (Core Web Vitals)
- LCP — Sankarikuvat esiladattu, Cloudinary automaattinen muoto (WebP/AVIF), kriittinen CSS upotettu, palvelinkomponentit eliminoivat tarpeettoman asiakas-JS:n
- CLS — Selkeät kuvamitat mediakirjastosta, optimoitu fontin lataus koko-säädöllä, luurankopaikat, kiinteämittaiset upotuskontit
- INP — Vähimmäismäärä asiakaspuolen JavaScriptiä, kevyet interaktiiviset käsittelijät, reittikohtainen koodin jakaminen
Sivukohtainen SEO-työkalut
CMS sisältää toimittajan ohjeistuksen merkkimäärän indikaattoreilla metakentille, vaadittujen kenttien validoinnin varmistaen, että mikään sivu ei julkaista ilman SEO-metatietoja, ja SEO-kenttien automaattisen täytön sisällön otsikoista ja katkelmista manuaalisilla ohitusvaihtoehdoilla.
Media Pipeline
Strapiin ladatut kuvat tallennetaan Cloudinary CDN:ään, ja Next.js-frontend pyytää optimoituja versioita automaattisella muotovalinnalla, responsiivisella mitoituksella, reunavälimuistilla ja laiskalla latauksella sumennuspaikoilla etusijalla oleville latauksille.
Avainominaisuudet
- Dynamic Zone Page Builder — 12+ yhdistettävää lohkoa kehittäjättömään sivun luontiin
- Uudelleenkäytettävä SEO-komponentti — Liitetty jokaiseen sisältötyyppiin johdonmukaiseen metahallintaan
- Automaattinen Jäsennelty Data — JSON-LD Organisaatiolle, Artikkelille, FAQ:lle, Breadcrumbille, Palvelulle
- ISR + Webhooks — Sisältöpäivitykset elävät sekunneissa ilman täydellistä uudelleenrakennusta
- Ohjelmallinen Sivustokartta — Automaattisesti generoitu kaikesta julkaistusta Strapi-sisällöstä
- Cloudinary Media Pipeline — Automaattinen muoto, responsiivinen mitoitus, CDN-toimitus
- Core Web Vitals Optimoitu — Palvelinkomponentit, kuvien esilataus, fontin optimointi, vähimmäis-JS
- Luonnoksen Esikatselu — Strapi-esikatselupainike renderöi luonnossisällön Next.js:ssä ennen julkaisua
- i18n Valmis — Strapin sisäänrakennettu kansainvälistäminen tulevaan monikieliseen laajentumiseen
- Toimittajan Suojakaiteet — Merkkimäärät, vaaditut kentät ja avainsanaohjeet Strapi-hallinnassa
Tulokset
Teknologiapino
caseStudyDetail.more Tapaustutkimukset
Tutustu lisää teknisiin toteutuksiimme
Headless WordPress CMS Next.js:llä, ACF:llä ja uudelleenkäytettävällä komponenttiarkkitehtuurilla
Liiketoiminta tarvitsi korkean suorituskyvyn, SEO-optimoidun markkinointiverkkosivuston, jossa yhdistyisi WordPressin sisällönhallinnan joustavuus ja modernin React-frontendin nopeus sekä kehittäjäkokemus – ilman perinteisten WordPress-teemojen rajoituksia.
Catant HR & Workforce Management Platform
Catant on modulaarinen HR- ja työvoiman hallintajärjestelmä, joka auttaa yrityksiä hallitsemaan työntekijöitä, palkanlaskentaa, läsnäoloa ja vaatimustenmukaisuutta yhdestä kojelaudasta.
Valmis Muuttamaan Liiketoimintaasi?
Keskustellaan siitä, miten voimme soveltaa vastaavia ratkaisuja haasteisiisi.