Hyvä verkkosivu on paljon enemmän kuin pelkkä sivu jolla on yrityksesi nimi. Tässä on lista asioita joita rakennamme jokaiselle sivulle.
01 · Löydettävyys
Verkkosivu on hyödytön jos asiakkaat eivät löydä sitä. Rakennamme sivut niin että ne näkyvät Googlessa silloin kun lähistöllä etsitään juuri sinun alasi palvelua — ja yhä useammin myös tekoälysovelluksissa kuten ChatGPT:ssä, Claudessa ja Perplexityssä.
Strukturoitu data: LocalBusiness ja FAQPage JSON-LD -skeemat jokaisella sivulla, sisältäen osoitteen, puhelinnumeron, palvelualueet ja aukioloajat.
Meta-tagit: täydellinen sarja — title, description, Open Graph (Facebook, LinkedIn), Twitter Card — kaikki täytetty oikealla yritysdatalla.
Sitemap ja robots.txt: hakukoneille jäsennelty lista sivun osioista ja selkeät ohjeet siitä mitä saa indeksoida.
llms.txt: tekoälysovelluksille suunnattu yhteenveto (suomeksi) yrityksestäsi — uusi de facto -standardi jota Anthropic, OpenAI ja Perplexity hyödyntävät.
Canonical URL: estää duplikaattisisältöongelmat kun siirryt pages.dev-osoitteesta omaan domainiin.
Kielimerkintä: <html lang="fi"> ja og:locale: fi_FI kertovat sekä hakukoneille että käyttäjien selaimille että sisältö on suomeksi.
02 · Saavutettavuus
Sivuilla on kävijöitä joita et välttämättä tule ajatelleeksi: näkövammaisia, vanhempia ihmisiä, ihmisiä jotka käyttävät näppäimistöä hiiren sijasta. Hyvin rakennetut sivut palvelevat heitä kaikkia — eivätkä unohda mobiilikäyttäjiä, joita useimmilla palvelualoilla on yli puolet kävijöistä.
Semanttinen HTML: oikeat elementit (<h1>, <button>, <a>) eivät pelkkiä div-elementtejä. Hakukoneet ja apuvälineet ymmärtävät rakenteen suoraan.
ARIA-attribuutit: ikonit on merkitty aria-hidden="true" ja ikonipainikkeissa on aria-label-selitteet ruudunlukijoita varten.
Focus-visible: näppäimistökäyttäjät näkevät selkeän reunuksen aktiivisen elementin ympärillä, hiirikäyttäjille ei näytetä turhia visualisointeja.
WCAG 2.1 AA -tason kontrastisuhteet: värien välinen kontrasti on testattu lukijoille jotka näkevät huonosti.
Kielimerkintä: <html lang="fi"> kertoo apuvälineille että sisältö on suomeksi — esim. ruudunlukijat valitsevat oikean ääntämysprofiilin.
Alt-tekstit kuvilla: koristeellisille kuville alt="", informaatiokuville kuvaileva alt-teksti.
03 · Nopeus
Asiakkaat eivät odota. Jos sivu latautuu yli kolme sekuntia, puolet kävijöistä on jo poistunut. Rakennamme sivut niin että ne ovat valmiina näytöllä silmänräpäyksessä — niin tietokoneella kuin huonon mobiiliyhteyden takaa.
Static site generation (Astro): sivut on käännetty staattiseksi HTML:ksi build-vaiheessa, ei runtime-renderöintiä. Sama syy miksi staattisia sivuja syytettiin aikoinaan jäykiksi, on nykyisin niiden suurin etu.
Cloudflare CDN: globaali edge-CDN, 200+ palvelinta maailmanlaajuisesti — pyyntö menee aina lähimpään.
Lazy loading: loading="lazy" kaikilla gallerian ja todistusten kuvilla. Hero-kuvalle fetchpriority="high" ja <link rel="preload">.
Font-preconnect: selain alkaa avaamaan TLS-yhteyttä Google Fonts -palveluun jo ennen kuin sitä tarvitaan — säästyy ~100ms.
Ei framework-runtime-koodia: käyttäjälle ei ladata React-, Vue- tai Angular-kirjastoja. Pelkkä HTML + CSS + minimaalinen vanilla-JS lomakkeen lähetykseen (alle 3 KB).
Tailwind CSS purge: rakennusvaiheessa vain käytetyt utility-luokat säilyvät, tuotannon CSS on noin 10 KB minifioituna.
Liikkeenvähennyksen kunnioitus: prefers-reduced-motion — pehmeä rullaus poistuu käyttäjillä joiden käyttöjärjestelmässä on liikkeenvähennys päällä.
04 · Muotoilu
Sivusi ei näytä viime viikolla tehdyltä putkiliikkeen sivulta. Joka sivulle valitaan oma värimaailma, fontit ja layout siten että lopputulos näyttää sinulta — ei kaikilta muilta. Mobiililaitteilla sivut näyttävät ja toimivat yhtä hyvin kuin tietokoneella.
Design tokens: --color-primary, --font-heading jne. pitää sivun teeman hallittavana. Yhdellä muutoksella koko sivun ulkoasu päivittyy.
Sinulle räätälöity: värimaailma, fontit ja layout valitaan ja sovitetaan sinun yritystäsi varten — sivu rakennetaan tilauksesta, ei valmiista sapluunasta jota leikataan haluttuun muotoon.
Saman alan sivuja ei toisteta: pidämme kirjaa mitkä yhdistelmät ovat olleet käytössä millä alalla ja paikkakunnalla — naapurikollegasi sivu ei näytä samalta kuin sinun.
Mobile-first responsive: suunnittelu lähtee puhelinnäytöstä ja skaalautuu ylöspäin. Tailwind-breakpointit (sm/md/lg/xl) hoitavat siirtymät pienistä puhelimista isoihin näyttöihin.
Section dividers: SVG-siirtymät osioiden välillä (aalto, kulma, kaari) tuovat sivulle omaa visuaalista luonnetta — käytämme harkiten, ei joka osion väliin.
text-wrap: balance otsikoilla: estää otsikoiden outoja rivityksiä mobiilissa (esim. yksittäinen sana yksinään seuraavalla rivillä).
05 · Sisältö
Sivuilla on sinun yrityksesi oikeat tiedot — ei keksittyä sisältöä, ei lorem ipsumia. Analysoimme nykyiset sivusi ja keräämme palvelusi, yhteystietosi ja muut olennaiset tiedot. Muokkaamme tekstit ammattimaisempaan asuun, mutta aina sinun aitojen tietojesi pohjalta — emme keksi palveluita joita et tarjoa.
Playwright-pohjainen skreippaus: tutkii nykyiset sivut ja jopa 8 sisäistä alasivua, poimii tekstit, otsikot, linkit ja yhteystiedot. Tekee samalla kuvakaappaukset desktop-koossa (1440×900) ja mobiilikoossa (375×812).
Geokoodaus: osoite muutetaan koordinaateiksi OpenStreetMapin Nominatim-rajapinnan kautta (ilmainen, ei API-avaimia).
Yhteystietojen tunnistus: regex-säännöt suomalaiselle puhelinformaatille (040 1234567, +358 40 1234567), sähköposteille ja katuosoitteille.
Strukturoitu sisältö content.json-tiedostossa: jokainen osio (palvelut, ukk, suosittelut, galleria, perustiedot) on erillinen rakenne — muokattavissa portaalin lomakkeilla, ei raakahtml:llä.
Tekoälykäännös ihmiskääntäjän valvonnassa: tekstit luonnostellaan Claude-mallilla, mutta jokainen sivu käydään läpi ihmisen toimesta ennen julkaisua.
06 · Turvallisuus ja tietosuoja
Yhteydenottolomake on yleinen vektori roskaposti- ja huijausyrityksille. Suojaamme sivusi automaattisilla esteillä jotka pysäyttävät botit, mutta päästävät oikeat asiakkaat läpi. Lisäksi sivut eivät seuraa kävijöitäsi millään tavalla — GDPR on kunnossa ilman ärsyttäviä eväste-bannereita.
Cloudflare Turnstile -widget lomakkeella, taustaservicen verifiointi: Turnstile arvioi käyttäjän käytöksen taustalla, eikä kysele kuvia paitsi epävarmoissa tapauksissa.
HMAC-SHA256-token sivun identiteetin todentamiseen: jokainen sivu allekirjoittaa lomakelähetyksensä omalla salaisuudellaan. Jos hakkeri kopioi lomakehtml:n omille sivuilleen, viestit hylätään.
Lähetysten rajoitus: liiallinen lähetys samasta lähteestä estetään automaattisesti — botit eivät pääse tukkimaan postilaatikkoasi.
CORS-tarkistus: lomakebackend hyväksyy vain pyyntöjä joiden alkuperä on sivun oma domain.
Ei kolmannen osapuolen seurantaa: ei Google Analyticsia, ei Facebook-pikseleitä, ei mainosseurantaa. Sivuillasi käyvät ihmiset eivät päädy minkään muun yrityksen tietokantoihin.
Resend-sähköpostipalvelu: viestit eivät lähde suoraan sivulta vaan sertifioidun lähetyspalvelun kautta. Lähettäjäosoite todennetaan SPF/DKIM/DMARC-tavoilla, joten viestit menevät perille eivätkä päädy roskapostiin.
07 · Ylläpito ja muutokset
Sivun julkaisun jälkeen palvelu jatkuu. Lähetät muutostoiveet portaalin kautta ja me toteutamme ne — vähintään kerran kuukaudessa, yleensä useammin. Hosting, SSL-sertifikaatit ja palvelinpäivitykset kuuluvat palveluun — sinun ei tarvitse muistaa eikä huolehtia mistään teknisestä.
Cloudflare Pages -hosting: globaali edge-CDN, atomiset deployaukset (uusi versio menee live kerralla tai ei ollenkaan), automaattinen SSL-sertifikaatti Let's Encryptin kautta.
Asiakasportaali (portal.webpaja.fi): magic-link-kirjautuminen sähköpostiin — ei tarvitse muistaa salasanoja.
Strukturoitu sisältöeditointi: muutospyynnöt tallennetaan tietovarastoon, ylläpito toteuttaa ja tarkistaa muutokset ennen julkaisua.
Staattinen rakenne = ei haavoittuvuuksia: ei tietokantaa, ei plugineja, ei tunnettuja CVE:itä joita pitää säännöllisesti paikata. Sivut eivät vanhene samalla tavalla kuin WordPress-asennukset.
Sentry-virheloggaus (valinnainen): seuraa että lomake toimii, hälyttää jos jotain hajoaa.
Lomakelähetykset: 90 päivän säilytys, näkyvissä hallintapaneelissa — kuka on yrittänyt ottaa yhteyttä on aina jäljitettävissä.
Kerro yrityksestäsi ja nykyisistä sivuistasi. Otamme yhteyttä ja kerromme lisää.
Ota yhteyttä