jondillemuth.fi, osa 1: Tech stack, strategia ja lähtötilanne

Miksi teen tämän case studyn?

Kun etsit SEO-konsulttia tai digimarkkinoinnin tekijää, joudut yleensä luottamaan lupauksiin. Tässä case study -sarjassa näytän kaiken avoimesti: mitä teen, miksi teen ja mitä tuloksia saan aikaan. Seuraamalla mukana opit, mitä sinunkin sivustoltasi kannattaa vaatia.

Monet puhuvat SEO:sta ja digimarkkinoinnista teoriassa. Haluan näyttää käytännössä, miten rakennan ja optimoin sivuston alusta asti ja mitä tuloksia saan aikaan.

Tämä on ensimmäinen osa sarjasta, jossa seuraan jondillemuth.fi-sivuston kehitystä. Uuden osan julkaisen aina kun on jotain merkittävää raportoitavaa. Jokainen osa keskittyy yhteen teemaan: tech stack, sisältöstrategia, tekninen SEO, konversio-optimointi ja niin edelleen.

Tech stack

Astro

Valitsin Astron kahdesta syystä: minulla on aiempaa taustaa koodarina JavaScript-ekosysteemissä, ja Astro mahdollistaa Zero JS -arkkitehtuurin. Käytännössä tämä tarkoittaa, että Astro kääntää kaikki komponentit puhtaaksi HTML- ja CSS-koodiksi. Lopulliseen sivustoon ei päädy yhtään ylimääräistä skriptitiedostoa, ellei sitä erikseen tarvita vuorovaikutukseen.

Tämä tekee sivuista erittäin kevyitä ja nopeita ladata. Tavallinen tekstisivu latautuu käytännössä välittömästi, koska selaimen ei tarvitse ladata ja suorittaa raskaita JavaScript-paketteja pelkän tekstin näyttämiseen.

Käytännön kehitystyössä Astron oma syntaksi muistuttaa puhdasta HTML:ää, mikä pitää oppimiskynnyksen matalana. Samalla Astron Content Collections -järjestelmä hallinnoi sisältöä automaattisesti: se tyypittää ja validoi esimerkiksi blogiartikkelien frontmatter-kentät jo ennen julkaisua. Jos yritän tallentaa artikkelin ilman pakollista kenttää, Astro ilmoittaa virheestä heti buildissa.

Netlify

Netlify valikoitui hostingiksi, koska se on tuttu, toimii hyvin Astron kanssa ja ilmainen taso riittää tämän kokoiselle sivustolle. Erityistä teknistä syytä ei ole, koska sivusto on puhdas staattinen build. Sama lopputulos syntyisi Vercelillä, Cloudflare Pagesilla tai millä tahansa muulla staattisella hostingilla.

Se mitä Netlify tekee hyvin: joka kerta, kun pusken koodia GitHubiin, Netlify rakentaa ja julkaisee sivuston automaattisesti. Pull requesteista syntyy deploy preview, jolla voin tarkistaa muutokset ennen julkaisua. SSL-sertifikaatti tulee automaattisesti, ja sisältö jaetaan CDN:n kautta lähimmältä palvelimelta. Kaikki tämä toimii ilman erillistä konfigurointia.

n8n

Valitsin n8n:n automaatiotyökaluksi yhden syyn takia: sen voi self-hostata ilmaiseksi, ilman rajoja executioneiden tai workflowjen määrässä.

Yksi konkreettinen esimerkki: sivustolla pyörii n8n-automaatio, joka kuuntelee Netlifyn deploy-webhookia. Aina kun uusi blogiposti julkaistaan ja Netlify rakentaa sivuston uudelleen, n8n päivittää automaattisesti Google-sitemapin, lähettää indeksointipyynnön Google Indexing API:n kautta ja ilmoittaa uudesta sivusta Bingille ja muille hakukoneille IndexNow-protokollan avulla. Uusi sivu päätyy siis sekä Googlen että Bingin indeksiin minuuttien, ei päivien päästä julkaisusta.

Rehellisyyden nimissä: tällä hetkellä n8n pyörii Dockerissa omalla koneellani, eli varsinaista VPS:ää en ole vielä hankkinut sitä varten. Se on työlistalla, kunhan osaaminen karttuu. Töissä olen tottunut käyttämään Make.comia, joten n8n:n logiikka on tuttu, mutta käyttöliittymä ja nodet vaativat vielä opettelua.

Claude Code

Claude Code on Anthropicin AI-työkalu, jota käytän päivittäin sivuston kehitykseen ja datan analysointiin. Suurin hyöty tulee siitä, että Claude Code kytkeytyy suoraan rajapintoihin: Google Analytics 4, Search Console ja PageSpeed Insights. Voin pyytää ad hoc -analyysejä luonnollisella kielellä ilman erillisiä dashboardeja. Esimerkiksi: “mitkä sivut menettivät orgaanista liikennettä viime viikolla” tai “vertaa konversioasteita mobiili vs. desktop viimeisen 30 päivän ajalta”.

Käytän sitä myös sivuston tekniseen kehitykseen: uusien komponenttien ja sivupohjien rakentamiseen, build-virheiden diagnosointiin ja konfiguraatio-ongelmien selvittämiseen. Käytännössä se toimii kuin toinen kehittäjä, jolla on pääsy samoihin työkaluihin ja rajapintoihin kuin minulla.

Stape (Server-Side Tagging)

Perinteisessä client-side tagging -mallissa kaikki seurantaskriptit (GA4, Google Ads, Facebook Pixel jne.) latautuvat suoraan käyttäjän selaimessa. Server-side tagging siirtää seurannan palvelinpuolelle.

Käyttäjän selain lähettää datan omalle palvelimellesi (first-party domain), ja palvelin välittää sen eteenpäin Googlelle, Metalle tai minne tahansa.

Valitsin Stapen palveluntarjoajaksi, koska se oli selvästi helpoin tapa pystyttää server-side tagging -ympäristö. Stape tarjoaa valmiit Google Cloud -pohjaiset kontit, ja käyttöönotto onnistui ilman syvällistä pilvi-infrastruktuuriosaamista. Vaihtoehto olisi ollut pystyttää oma tagging-palvelin Google Cloudiin tai AWS:ään manuaalisesti, mutta se olisi vaatinut huomattavasti enemmän konfigurointia.

Analytiikka ja seuranta

Sivustolla on käytössä seuraavat seuranta- ja analytiikkatyökalut:

• Google Analytics 4 (GA4) kerää käyttäjädatan: liikennelähteet, sivukatselut, tapahtumat ja konversiot.
• Google Tag Manager (server-side) hallinnoi kaikkia tageja. GTM pyörii Stapen palvelimella, ei selaimessa, joten tagien hallinta ei hidasta sivustoa.
• Cookiebot hoitaa evästesuostumuksen ja toimii Consent Mode v2 -yhteensopivasti. Ennen käyttäjän suostumusta analytiikka ja mainosdata on estetty oletuksena.
• Google Ads -konversioseuranta mittaa mainoskampanjoiden tuloksia: lomakelähetykset, puhelut ja muut tavoitteet.
• Meta Pixel seuraa Facebook- ja Instagram-mainosten konversioita.
• Google Search Console seuraa orgaanista näkyvyyttä: hakukyselyt, sijoitukset, klikkaukset ja indeksoinnin tila.

YouTube-upotukset

Blogiartikkeleissa käytetään privacy-friendly YouTube-upotuksia youtube-nocookie.com -domainin kautta. Käytännössä tämä tarkoittaa, että YouTube ei aseta evästeitä ennen kuin käyttäjä painaa play. Upotukset latautuvat myös lazy loadilla, eli ne eivät hidasta sivun alkuperäistä latausta.

Calendly

Yhteystiedot-sivulla ajanvaraus toimii Calendlyn kautta. Asiakas voi varata 30 minuutin kartoituksen suoraan kalenteristani ilman edestakaisin sähköpostiviestejä. Calendly synkronoituu Google Calendariin, joten päällekkäisyyksiä ei synny.

Dynaamiset OG-kuvat

Jokaiselle sivulle generoituu automaattisesti oma Open Graph -kuva buildin aikana. Taustalla toimii Satori (JSX → SVG) ja resvg-js (SVG → PNG). Käytännössä tämä tarkoittaa, että kun joku jakaa artikkelin LinkedIniin tai muualle, esikatselukuvassa näkyy artikkelin otsikko tyyliteltynä, ei geneerinen sivuston logo.

SEO-automaatiot

Sivusto generoi buildissa automaattisesti useita SEO-kriittisiä tiedostoja:

• Sitemap (/sitemap.xml) listaa kaikki sivut ja niiden viimeisimmän päivityspäivän hakukoneille.
• RSS-syöte (/rss.xml) mahdollistaa blogisisällön seuraamisen lukijasovelluksissa.
• robots.txt hallinnoi, mitä crawlerit saavat indeksoida. Huomionarvoista: AI-crawlerit (GPTBot, ClaudeBot, PerplexityBot, Google-Extended ym.) on sallittu eksplisiittisesti. Tämä on tietoinen valinta, koska haluan näkyä tekoälyhauissa ja AI-yhteenvedoissa.
• llms.txt on robots.txt:n vastine tekoälymalleille. Se kertoo AI-järjestelmille kuka olen, mitä teen ja miten sivuston sisältöä tulisi tulkita. Standardi on vielä tuore, mutta kustannus sen ylläpitämiseen on nolla.
• IndexNow ilmoittaa Bingille, Yandexille ja muille tukeville hakukoneille välittömästi, kun sivustolla on uutta tai päivitettyä sisältöä. Googlen oma Indexing API hoitaa saman Googlen suuntaan. Yhdessä nämä tarkoittavat, että uuden sivun indeksointi ei ole kiinni siitä, milloin crawler sattuu käymään.

Schema-arkkitehtuuri (rakenteellinen data)

Sivusto generoi jokaiselle sivulle automaattisesti JSON-LD-muotoisen Schema.org-merkinnän. Tämä kertoo hakukoneille rakenteellisesti mitä sivu sisältää, mikä parantaa näkyvyyttä rikastettuina hakutuloksina (rich results). Käytössä olevat schema-tyypit:

• Organization ja LocalBusiness: yritystiedot, sijainti ja yhteystiedot. Näkyvät Googlen Knowledge Panelissa.
• Person: konsultin profiilitiedot.
• Service: palvelusivujen rakenne, eli hinta, prosessi ja toimitusaika.
• Article (BlogPosting): jokaiselle blogiartikkelille, case studylle ja auditoinnille. Sisältää otsikon, julkaisupäivän, kirjoittajan ja avainsanat.
• FAQPage: generoidaan automaattisesti frontmatterin faq-kentästä. Näkyy hakutuloksissa suoraan kysymys-vastaus -muodossa.
• HowTo: vaiheittaiset ohjeet, generoidaan howToSteps-kentästä.
• VideoObject: YouTube-upotusten metatiedot.
• BreadcrumbList: navigointipolku jokaisella sivulla.
• CollectionPage: listaussivujen (blogi, case studyt, auditoinnit) rakenne.

Jokainen schema generoituu automaattisesti sisällön perusteella. Esimerkiksi kun lisään artikkelin frontmatteriin FAQ-kentän, FAQPage-schema syntyy ilman erillistä konfigurointia.

Strategia

Miten haluan erottua

Iso digitoimisto myy prosessia: vakiopaketit, kuukausiraportit ja account manager, joka hoitaa kymmentä asiakasta samaan aikaan. Freelancer taas myy joustavuutta, mutta usein osaaminen rajoittuu yhteen osa-alueeseen.

Haluan tarjota molemmat: freelancerin henkilökohtaisen kontaktin ja huolenpidon, mutta ison toimiston osaamisen ja kokemuksen. Käytännössä tämä tarkoittaa, että panostan pikkuasioihin, joihin isoilla yrityksillä ei ole resursseja tai aikaa. Jokainen asiakas saa suoran yhteyden minuun, ei välikäsiin.

Läpinäkyvyys

Yksi iso ongelma digimarkkinoinnissa on, että asiakas ei usein tiedä, mitä hän saa rahoilleen. Raportti näyttää lukuja, mutta konkreettinen työ jää näkymättömiin.

Siksi teen nämä case studyt ja auditoinnit julkisesti. Ne näyttävät tarkasti, mitä teen, miten ajattelen ja millaisia tuloksia saan aikaan. Jos harkitset yhteistyötä, sinun ei tarvitse luottaa pelkästään lupauksiin, vaan voit lukea itse miten työskentelen.

Sisältöjakelu

Pelkkä sisällön julkaiseminen sivustolla ei riitä. Jokainen artikkeli, case study ja auditointi jaetaan aktiivisesti LinkedIniin ja muille alustoille. Tavoite on tuoda sisältö sinne missä kohderyhmä jo on, sen sijaan, että odottaisin heidän löytävän sivustolleni. LinkedIn on tässä pääkanava, koska siellä tavoitan suoraan yritysten päätöksentekijöitä.

Tarjous josta ei voi kieltäytyä

Lähtötilanne ja mittarit

Sivusto on vielä tuore, joten orgaanista liikennettä, hakusijoituksia ja konversioita ei juuri ole. Tämä on tarkoituksella lähtöpiste: seuraavissa osissa seuraan, miten luvut kehittyvät sitä mukaa, kun sisältöä julkaistaan ja optimointeja tehdään.

PageSpeed Insights -tulokset

Mobile

Olen melko tyytyväinen mobiilitulokseen. Performance-pisteet 93 on hyvä tulos, ja Accessibility, Best Practices ja SEO ovat kaikki täydet sata. Tuosta paremmaksi nostaminen vaatisi Cookiebotin latauslogiikan kanssa sellaista kikkailua, että tässä vaiheessa on helpompi tyytyä tähän.

Desktop

Desktopilla Performance on 99. Yksi piste täydestä sadasta jää harmittamaan, mutta kaiken kaikkiaan todella hyvä tulos. Kolme muuta kategoriaa ovat täydet sata.

Seuraavassa osassa

Seuraavassa osassa katsotaan, toimiiko tämä kaikki oikeasti. Käyn läpi ensimmäiset Google Search Console -datat: kuinka nopeasti sivut pääsivät indeksiin, mitkä hakukyselyt tuottivat ensimmäiset impressiot ja näkyikö n8n-automaation ja IndexNow:n vaikutus indeksointinopeuteen.