Strapi CMS + Next.js -verkkosivusto edistyksellisellä SEO-arkkitehtuurilla
Kasvava yritys tarvitsi nopean, sisältörikkaan markkinointiverkkosivuston, jossa sen ei-tekninen markkinointitiimi voisi hallita sivuja, blogikirjoituksia ja laskeutumissivuja itsenäisesti – samalla varmistaen, että sivusto sijoittui kilpailukykyisesti orgaanisessa haussa heti alusta alkaen.
Keskustele Projektistasi
Haaste
Olemassa oleva verkkosivusto oli rakennettu monoliittiselle CMS:lle, joka aiheutti kiihtyviä ongelmia:
- Hidas suorituskyky — Palvelinpohjaiset sivut pullistuneine laajennuksineen kuormittuivat keskimäärin 4–6 sekuntia, mikä laski Core Web Vitals -arvoja
- Kehittäjähässäkkä — Jokainen sisältömuutos (uusi laskeutumissivu, blogin asettelu, CTA-päivitys) vaati kehittäjää muokkaamaan mallitiedostoja
- Heikko SEO-pohja — Ei strukturoitua dataa, epäjohdonmukaisia meta-tageja, puuttuvia kanonisia URL-osoitteita eikä ohjelmallista sivukarttaa johti heikkoon orgaaniseen näkyvyyteen
- Jäykkä sisältömalli — Uuden sisältötyypin (tapaustutkimukset, UKK-osiot, tiimin esittelyt) lisääminen vaati skeemamuutoksia ja mallipohjien uudelleenkirjoittamista
- Ei esikatselua — Toimittajat julkaisivat sisältöä sokeasti – muutoksia ei voinut esikatsella ennen julkaisua
- Lokalisointitarpeet — Tuleva laajentuminen useille kielille vaati natiivisti i18n-tukea sisältävän CMS:n
Meidän Ratkaisumme
Rakensimme Strapi + Next.js headless -arkkitehtuurin, jossa Strapi tarjosi joustavan sisällön mallintamisen tason, staattisesti generoitu Next.js-käyttöliittymä käytti ISR:ää lähes välittömiin päivityksiin, ja kattava SEO-järjestelmä kattoi teknisen, sivun sisäisen ja strukturoidun datan optimoinnin.
Arkkitehtuuri
- CMS: Strapi (itse isännöity) mukautetuilla sisältötyypeillä ja Dynamic Zones -ominaisuudella
- Frontend: Next.js App Routerin, React Server Componentsin ja TypeScriptin kanssa
- Styling: Tailwind CSS design system tokenien kanssa
- SEO Layer: Next.js Metadata API, JSON-LD-generaattorit, automaattinen sitemap/robots.txt
- Media: Strapi Media Library Cloudinary-palveluntarjoajan kanssa optimoituun toimitukseen
- Hosting: Vercel (frontend), pilvipohjainen Strapi-taustajärjestelmä, Cloudinary (media CDN)
- Database: PostgreSQL Strapi-sisällön tallennukseen
- Cache: ISR kysynnän mukaisella uudelleenvalidoinnilla Strapi-webhookien kautta
Strapi-sisällön mallinnus
Sisältötyypit
CMS oli rakennettu sisältötyyppien ympärille, jotka kattoivat kaikki liiketoiminnan tarpeet: markkinointisivut, blogikirjoitukset kategorioineen ja kirjoittajineen, kampanjoiden laskeutumissivut, palvelu-/tuotetarjoukset, tiimin jäsenten esittelyt, UKK-osiot, suositukset ja globaali asetussingletoni sivuston laajuiseen konfiguraatioon.
Dynamic Zones (Sivunrakentaja)
Strapi Dynamic Zones antaa toimittajien koostaa sivun sisältöä uudelleenkäytettävistä komponenteista – jokainen vyöhykkeen merkintä vastaa React-komponenttia käyttöliittymässä. Saatavilla olevia lohkoja ovat mm. sankarikuvaosiot, ominaisuusruudukot, teksti-kuva-asettelut, suositusosiot, CTA-bannerit, UKK-harmonikat, tilastolaskurit, hinnastot, logoruudukot, upotukset, blogin kohokohdat ja yhteydenottolomakkeet – kattaen kaikki yleiset markkinointisivujen mallit.
SEO-komponentti (uudelleenkäytettävä)
Jokaisen sisältötyypin yhteyteen liitetty jaettu SEO-komponentti tarjoaa kentät mukautetulle meta-otsikolle, meta-kuvaukselle, kanonisen URL-osoitteen ohitukselle, Open Graph -kuvalle, indeksointiohjeille, avainsanalle ja valinnaiselle strukturoidun datan ohitukselle – varmistaen johdonmukaisen SEO-hallinnan kaikessa sisällössä.
Next.js-käyttöliittymäarkkitehtuuri
Komponenttirakenne
Käyttöliittymä noudattaa kerrosarkkitehtuuria:
- Lohkokomponentit vastaavat suoraan Strapi Dynamic Zone -merkintöjä
- UI primitives tarjoavat johdonmukaisia design system -elementtejä
- Asettelukomponentit hoitavat ylä-, ala- ja navigointipalkin
- SEO utilities luovat strukturoitua dataa ja meta-tageja
Keskitetty Dynamic Zone -renderöijä iteroi Strapi-lohkotaulukon läpi ja renderöi vastaavan React-komponentin jokaiselle merkinnälle.
Tiedonhaun strategia
Kaikki reitit käyttävät Incremental Static Regeneration (ISR) -toimintoa, jossa kysynnän mukainen uudelleenvalidointi käynnistetään Strapi-webhookien avulla. Kun toimittaja julkaisee tai päivittää sisältöä, Strapi laukaisee webhookin, joka käynnistää tietyn muuttuneen sivun uudelleenvalidoinnin, varmistaen, että päivitykset tulevat näkyviin sekunneissa ilman täydellisiä uudelleenrakennuksia.
SEO-toteutus
Tekninen SEO
- Sivukohtainen metadata — Otsikko, kuvaus, kanoninen URL, Open Graph ja Twitter Card -tagit, jotka on luotu Strapi SEO -kentistä älykkäillä varajärjestelmillä
- Automatisoitu sivukartta — Ohjelmallisesti luotu kaikesta julkaistusta sisällöstä sopivilla muutosfrekvenssi- ja prioriteettiarvoilla
- Robots.txt — Ympäristötietoinen luonti (tuotanto sallii indeksoinnin, staging estää sen)
- Kanoniset URL-osoitteet — Automaattisesti luodut loppuuko-viiva-normalisoinnilla, ohitettavissa CMS:stä
Strukturoitu data (JSON-LD)
Automaattinen skeemojen generointi kattaa:
- Organisaatio — Sivuston laajuinen skeema globaaleista asetuksista
- Artikkeli — Blogikirjoitukset otsikolla, kirjoittajalla, päivämäärillä ja julkaisijalla
- UKK — Automaattisesti luotu, kun UKK-lohkoja käytetään sivulla
- Murupolku — Automaattisesti luotu URL-polun hierarkiasta
- Palvelu — Palvelusivut palveluntarjoajineen ja palvelevine alueineen
- Paikallinen yritys — Valinnainen, fyysisiä toimipisteitä omaaville yrityksille
Suorituskyvyn SEO (Core Web Vitals)
- LCP — Sankarikuva-alueen kuvat esiladattu, Cloudinary automaattimuotoilu (WebP/AVIF), kriittinen CSS rivitetty, Server Components eliminoi tarpeettoman asiakaspuolen JS:n
- CLS — Kuvatiedostojen selkeät mitat mediakirjastosta, optimoitu fonttien lataus kokoa säätämällä, luurankokorvikkeet, kiinteämitaiset upotuskehykset
- INP — Minimaalinen asiakaspuolen JavaScript, kevyet interaktiiviset käsittelijät, reittikohtainen koodin jakaminen
On-Page SEO -työkalut
CMS sisältää toimittajalle ohjeistuksen merkkimääräindikaattoreilla meta-kentille, pakollisten kenttien validoinnin varmistaen, ettei sivua julkaista ilman SEO-metadataa, ja SEO-kenttien automaattisen täytön sisällön otsikoista ja otteista manuaalisilla ohitusvaihtoehdoilla.
Media-putki
Strapiin ladatut kuvat tallennetaan Cloudinary CDN:ään, ja Next.js-käyttöliittymä pyytää optimoituja versioita automaattisella muotoilun valinnalla, responsiivisella mitoituksella, reunan välimuistilla ja laiskalla latauksella sumeuskorvikkeilla yläpuolisen alueen prioriteettilatausta varten.
Tärkeimmät ominaisuudet
- Dynamic Zone -sivunrakentaja — Yli 12 yhdisteltävää lohkoa sivujen luomiseen ilman kehittäjän apua
- Uudelleenkäytettävä SEO-komponentti — Liitetty jokaiseen sisältötyyppiin johdonmukaisen meta-hallinnan varmistamiseksi
- Automatisoitu strukturoitu data — JSON-LD organisaatiolle, artikkeleille, UKK-osioille, murupolulle ja palveluille
- ISR + Webhooks — Sisältöpäivitykset näkyvissä sekunneissa ilman täyttä uudelleenrakennusta
- Ohjelmallinen sivukartta — Automaattisesti generoitu kaikesta julkaistusta Strapi-sisällöstä
- Cloudinary Media Pipeline — Automaattinen muotoilu, responsiivinen mitoitus, CDN-toimitus
- Core Web Vitals -optimoitu — Server Components, kuvien esilataus, fonttien optimointi, minimaalinen JS
- Luonnos-esikatselu — Strapi-esikatselupainike renderöi luonnos sisällön Next.js:ssä ennen julkaisua
- i18n-valmis — Strapin sisäänrakennettu kansainvälistyminen tulevaa monikielistä laajentumista varten
- Toimittajan ohjeet — Merkkimäärät, pakolliset kentät ja avainsanaohjeet Strapi-hallintapaneelissa
Tulokset
Teknologiapino
Valmis Muuttamaan Liiketoimintaasi?
Keskustellaan siitä, miten voimme soveltaa vastaavia ratkaisuja haasteisiisi.