Strapi CMS + Next.js Verkkosivusto Edistyneellä SEO-arkkitehtuurilla
Kasvava yritys tarvitsi nopean, sisältörikkaan markkinointiverkkosivuston, jossa sen ei-tekninen markkinointitiimi voisi hallita sivuja, blogikirjoituksia ja laskeutumissivuja itsenäisesti – varmistaen samalla, että sivusto sijoittui kilpailukykyisesti orgaanisessa haussa heti alusta alkaen.
Keskustele Projektistasi
Haaste
Olemassa oleva verkkosivusto oli rakennettu monoliittiselle CMS-järjestelmälle, mikä loi kertaantuvia ongelmia:
- Hidas suorituskyky — Palvelinpohjaisesti renderöidyt sivut ja turvonneet lisäosat aiheuttivat keskimäärin 4–6 sekunnin latausajat, mikä heikensi Core Web Vitals -arvoja
- Kehittäjän pullonkaula — Jokainen sisällönmuutos (uusi laskeutumissivu, blogin asettelu, CTA-päivitys) edellytti kehittäjän puuttumista mallitiedostoihin
- Heikko SEO-perusta — Ei strukturoitua dataa, epäjohdonmukaiset meta tagit, puuttuvat canonical URL-osoitteet ja ohjelmallisen sivustokartan puuttuminen heikensivät orgaanista näkyvyyttä
- Jäykkä sisältömalli — Uuden sisältötyypin (tapaustutkimukset, usein kysytyt kysymykset, tiimin esittelyt) lisääminen vaati skeemamigraatioita ja mallipohjien uudelleenkirjoittamista
- Ei esikatselua — Toimittajat julkaisivat sisältöä sokeasti – ei mahdollisuutta esikatsella muutoksia ennen julkaisua
- Lokalisointitarpeet — Tuleva laajentuminen useille kielille edellytti CMS-järjestelmää, joka tuki i18n:ää natiivisti
Meidän Ratkaisumme
Rakensimme Strapi + Next.js headless-arkkitehtuurin, jossa oli joustava sisältömallinnuskerros Strapi-alustalla, staattisesti generoidun Next.js-käyttöliittymän ISR:llä lähes välittömiä päivityksiä varten, sekä kattavan SEO-järjestelmän, joka kattoi teknisen, on-page- ja strukturoidun datan optimoinnin.
Arkkitehtuuri
- CMS: Strapi (itse ylläpidetty) mukautetuilla sisältötyypeillä ja Dynamic Zones -ominaisuuksilla
- Käyttöliittymä: Next.js App Routerilla, React Server Componentsilla, TypeScriptillä
- Tyylitys: Tailwind CSS design system -tunnuksilla
- SEO-kerros: Next.js Metadata API, JSON-LD-generaattorit, automatisoitu sivustokartta/robots.txt
- Media: Strapi Media Library Cloudinary-palveluntarjoajalla optimoitua toimitusta varten
- Hosting: Vercel (käyttöliittymä), pilvipohjainen Strapi-taustajärjestelmä, Cloudinary (media CDN)
- Tietokanta: PostgreSQL Strapi-sisällön tallennukseen
- Välimuisti: ISR on-demand-uudelleenvalidointi Strapi webhooksien kautta
Strapi-sisältömallinnus
Sisältötyypit
CMS oli jäsennelty sisältötyyppien ympärille, jotka kattoivat kaikki liiketoiminnan tarpeet: markkinointisivut, blogikirjoitukset kategorioineen ja tekijöineen, kampanjoiden laskeutumissivut, palvelu-/tuotetarjoukset, tiimin jäsenten esittelyt, usein kysytyt kysymykset, suositukset ja globaali asetus-singleton sivuston laajuista konfiguraatiota varten.
Dynamic Zones (sivunrakentaja)
Strapi Dynamic Zones mahdollistavat toimittajille sivujen sisällön kokoamisen uudelleenkäytettävistä komponenteista – jokainen vyöhykkeen syöte vastaa React-komponenttia käyttöliittymässä. Saatavilla olevia lohkoja ovat mm. sankarit, ominaisuustaulukot, 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ä)
Jokaiseen sisältötyyppiin liitetty jaettu SEO-komponentti tarjoaa kentät mukautetulle meta titlelle, meta descriptionille, canonical URL -ohitukselle, Open Graph -kuvalle, indeksointidirektiiveille, fokusavainsanalle ja valinnaiselle structured data -ohitukselle – varmistaen johdonmukaisen SEO-hallinnan kaikessa sisällössä.
Next.js-käyttöliittymän arkkitehtuuri
Komponenttirakenne
Käyttöliittymä noudattaa kerroksellista arkkitehtuuria:
- Lohkokomponentit vastaavat suoraan Strapi Dynamic Zone -merkintöjä
- Käyttöliittymäprimitiiivit tarjoavat johdonmukaisia design system -elementtejä
- Asettelukomponentit käsittelevät otsikkoa, alatunnistetta ja navigointia
- SEO-apuohjelmat luovat strukturoitua dataa ja meta tageja
Keskeinen Dynamic Zone -renderöijä käy läpi Strapi-järjestelmän lohkojen taulukon ja renderöi vastaavan React-komponentin jokaiselle merkinnälle.
Tiedonhaku strategia
Kaikki reitit käyttävät Incremental Static Regeneration (ISR) -toimintoa on-demand-uudelleenvalidointiin, joka käynnistyy Strapi-webhookien kautta. Kun toimittaja julkaisee tai päivittää sisältöä, Strapi lähettää webhookin, joka laukaisee kyseisen sivun uudelleenvalidoinnin, varmistaen päivitysten ilmestymisen muutamassa sekunnissa ilman täydellisiä uudelleenrakennuksia.
SEO-toteutus
Tekninen SEO
- Sivukohtainen metadata — Otsikko, kuvaus, canonical URL, Open Graph ja Twitter Card -tagit, jotka on luotu Strapi SEO-kentistä älykkäillä varavaihtoehdoilla
- Automatisoitu sivustokartta — Ohjelmallisesti luotu kaikesta julkaistusta sisällöstä sopivilla muutostiheys- ja prioriteettiarvoilla
- Robots.txt — Ympäristötietoinen luonti (tuotanto sallii indeksoinnin, staging estää sen)
- Canonical URL-osoitteet — Automaattisesti luotu loppupisteen normalisoinnilla, ohitettavissa CMS:stä
Strukturoitu data (JSON-LD)
Automatisoitu skeeman luonti kattaa:
- Organisaatio — Sivuston laajuinen skeema globaaleista asetuksista
- Artikkeli — Blogikirjoitukset otsikolla, tekijällä, päivämäärillä ja julkaisijalla
- UKK — Automaattisesti luotu, kun UKK-lohkoja käytetään sivulla
- Murupolku — Automaattisesti luotu URL-polun hierarkiasta
- Palvelu — Palvelusivut palveluntarjoajalla ja palvellulla alueella
- Paikallinen yritys — Valinnainen, fyysisiä toimipaikkoja omaaville yrityksille
Suorituskyky SEO (Core Web Vitals)
- LCP — Sankarikuvan esilataus, Cloudinary auto-format (WebP/AVIF), kriittinen CSS sisällytetty, Server Components eliminoivat tarpeettoman client-puolen JS:n
- CLS — Kuvan eksplisiittiset mitat medialähteestä, optimoitu fonttien lataus size-adjust-ominaisuudella, luuranko-paikkamerkit, kiinteämittoiset upotusastiat
- INP — Minimaalinen client-side JavaScript, kevyet interaktiiviset käsittelijät, reittikohtainen koodin jakaminen
On-Page SEO -työkalut
CMS sisältää toimittajan opastuksen merkki-laskureilla meta-kentille, pakollisten kenttien validoinnin varmistaen, ettei sivua julkaista ilman SEO-metadataa, sekä SEO-kenttien automaattisen täytön sisällön otsikoista ja otteista manuaalisilla ohitusvaihtoehdoilla.
Mediaputki
Strapiin ladatut kuvat tallennetaan Cloudinary CDN:ään, ja Next.js-käyttöliittymä pyytää optimoituja versioita automaattisella formaattivalinnalla, responsiivisella mitoituksella, reunamuistilla ja lazy loadingilla sumeuspaikkamerkeillä yläosan prioriteettilatausta varten.
Pääominaisuudet
- Dynamic Zone -sivunrakentaja — Yli 12 yhdisteltävää lohkoa sivujen luomiseen ilman kehittäjää
- Uudelleenkäytettävä SEO-komponentti — Liitetty jokaiseen sisältötyyppiin johdonmukaista metahallintaa varten
- Automatisoitu strukturoitu data — JSON-LD organisaatiolle, artikkelille, UKK:lle, murupolulle, palvelulle
- ISR + Webhooks — Sisältöpäivitykset näkyvät sekunneissa ilman täydellistä uudelleenrakennusta
- Ohjelmallinen sivustokartta — Automaattisesti luotu kaikesta julkaistusta Strapi-sisällöstä
- Cloudinary-mediaputki — Automaattinen formaatti, responsiivinen mitoitus, CDN-toimitus
- Core Web Vitals -optimoitu — Server Components, kuvien esilataus, fonttien optimointi, minimaalinen JS
- Luonnos-esikatselu — Strapi-esikatselupainike renderöi luonnostilassa olevan sisällön Next.js:ssä ennen julkaisua
- i18n valmis — Strapiin sisäänrakennettu kansainvälistyminen tulevaa monikielistä laajenemista varten
- Toimittajan ohjeistus — Merkkimäärät, pakolliset kentät ja avainsanaohjaus Strapi-ylläpitäjässä
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.
AI-pohjainen laskujen käsittely OCR:n ja QuickBooks-integraation avulla
Keskisuuri yritys, joka käsitteli satoja toimittajalaskuja kuukausittain, halusi poistaa manuaalisen tiedonsyötön poimimalla laskutiedot automaattisesti AI/OCR:n avulla ja synkronoimalla ne suoraan QuickBooks-järjestelmään kirjanpitoa ja maksujen seurantaa varten.
Valmis Muuttamaan Liiketoimintaasi?
Keskustellaan siitä, miten voimme soveltaa vastaavia ratkaisuja haasteisiisi.