Yli 80 sivun kotipalvelusivusto Webflow'lla

Hemma — yli 80 sivun kotipalvelusivusto Webflow'lla alle kuukaudessa

Hemma tarjoaa uuden ajan kotipalveluita senioreille, perheille ja yrityksille pääkaupunkiseudulla: kotiapua, kiireetöntä kotihoitoa, kotisiivousta, fysioterapiaa ja viriketoimintaa Espoossa, Helsingissä, Kauniaisissa ja Vantaalla. Palvelut räätälöidään aina asiakkaan tilanteen mukaan — ja juuri se asettaa verkkosivustolle vaatimuksen, jota ei ratkaista sivu kerrallaan: saman palvelun on löydyttävä yhtä selkeänä riippumatta siitä, mistä kaupungista tai kaupunginosasta sitä haetaan.

Lähtötilanne

Hemman toiminnan kasvaessa ja palvelukokonaisuuden laajentuessa aiempi sivusto jäi jälkeen. Sisältö oli osin pirstaleista, rakenne ei tukenut palvelukokonaisuuden hahmottamista ja ylläpito oli hidasta. Pahimmillaan sivusto tai yksittäiset sivut eivät ajoittain avautuneet lainkaan.

Vanha sivusto ei enää vastannut Hemman nykyistä toimintaa ja kasvun vaihetta. Sisältö oli osin pirstaleista, rakenne ei tukenut palvelukokonaisuuden hahmottamista, eikä sivusto toiminut parhaalla mahdollisella tavalla pitkän aikavälin näkyvyyden ja löydettävyyden kannalta. Uudistukselle oli selkeä tarve.

— Jari kertoo lähtötilanteesta

Uudistuksen tavoitteena oli rakentaa selkeä, rauhallinen ja uskottava kokonaisuus, joka tukee Hemman brändiä ja liiketoimintaa pitkällä aikavälillä. Halusimme sivuston, joka toimii hyvänä perustana kasvulle, on teknisesti kestävä ja helppo jatkokehittää.

— Jari tiivistää

Ratkaisu

Toimitimme uudistuksen avaimet käteen. Aloitimme sisältörakenteesta: palvelut jäsennettiin kolmeen kokonaisuuteen — kodeille, yrityksille ja palvelutaloille — ja vasta selkeän rakenteen päälle suunniteltiin ulkoasu ja rakennettiin sivusto Webflow'lla.

• Sisältöarkkitehtuuri — palvelut, paikkakunnat, hinnasto ja tietosisällöt omiksi selkeiksi kokonaisuuksikseen.
• Ulkoasun suunnittelu — visuaalinen ilme, komponentit ja niistä koottu designjärjestelmä.
• Tekninen toteutus Webflow'lla sivupohjien, komponenttien ja modulaarisen rakenteen varaan.
• Hakukonenäkyvyys ja AI-löydettävyys — sivukohtaiset schema-merkinnät, llms.txt ja johdonmukainen sisältöhierarkia.
• Analytiikka ja evästehallinta Kuasin omalla Cookie Consent -ratkaisulla.
• Automaatio, joka tuo sosiaalisen median julkaisut myös verkkosivuille.

Skaalautuva rakenne: yli 80 sivua alle kuukaudessa

Sivusto rakennettiin sivupohjien ja komponenttien varaan, ei sivu kerrallaan. Jokaisella palvelulla on oma sivunsa, ja saman pohjan päälle syntyy paikkakuntakohtainen versio Espooseen, Helsinkiin, Kauniaisiin ja Vantaalle — samoin kaupunginosatasolle. Näin yli 80 sivun kokonaisuus valmistui alle kuukaudessa, ja uusi palvelu tai uusi paikkakunta syntyy nyt olemassa olevista paloista sen sijaan, että se rakennettaisiin alusta.

Tänään sivustolla on yli sata osoitetta: kolmisenkymmentä palvelusivua, yli viisikymmentä paikkakunta- ja kaupunginosasivua sekä kasvava artikkeliarkisto. Rakenne kantaa ne kaikki ilman, että navigaatio tai ylläpito monimutkaistuu.

SEO, GEO ja AEO huomioitu kokonaisvaltaisesti

Meille on tärkeää, että sivusto ei ole vain visuaalisesti toimiva, vaan myös rakenteellisesti ja teknisesti nykyaikainen. Hakukäyttäytyminen ja tiedonhaku kehittyvät jatkuvasti, ja koemme tärkeäksi, että sivusto on rakennettu tavalla, joka tukee myös uusia tapoja löytää ja tulkita sisältöä – ilman että se näkyy käyttäjälle monimutkaisuutena.

— Jari kertoo

Sivusto rakennettiin alusta alkaen tukemaan sekä perinteistä hakukonenäkyvyyttä että tekoälypohjaista tiedonhakua:

• Sivukohtaiset schema-merkinnät. Palvelusivu kertoo koneluettavasti, mikä palvelu on kyseessä, kuka sen tuottaa ja millä alueella — ja tuo mukanaan murupolun sekä yrityksen yhteystiedot. Usein kysytyt kysymykset on merkitty FAQ-rakenteena.
• llms.txt kokoaa sivuston tärkeimmät sivut ja palvelukuvaukset kielimalleille luettavaan muotoon.
• Selkeä sivurakenne ja sisällön hierarkia — läpinäkyvä hinnasto ja vastaukset oikeisiin kysymyksiin siellä, missä ne kysytään.

Toteutuksessa hyödynnettiin myös Webflow'n AI-ominaisuuksia sisällön ja rakenteen optimoinnin tukena.

Designjärjestelmä

Ilme rakentuu yhden värin ja yhden kirjasimen varaan. Hemman punainen kantaa painikkeet, linkit ja korostukset; sama punainen 12 prosentin läpinäkyvyydellä muodostaa vaaleanpunaiset osiot, joilla sivu hengittää. Kirjasimena on Satoshi kahdessa paksuudessa — otsikoissa lihava, leivässä tavallinen. Väreillä on Webflow'ssa omat muuttujansa, joten teema on yhdessä paikassa eikä hajallaan sääntöjen seassa.

Toistuvaksi aiheeksi tuli repeytyvä paperireuna, joka erottaa osiot toisistaan pehmeämmin kuin suora viiva — sama kuvio kulkee etusivulta palvelusivujen kautta alatunnisteeseen.

Sivut rakentuvat samoista paloista: palvelukortit, hintakortit, arvostelunostot, UKK-haitari ja yhteydenottolomake toistuvat läpi sivuston. Uusi sivu syntyy olemassa olevista komponenteista, jolloin ulkoasu pysyy yhtenäisenä ilman että jokainen sivu suunnitellaan erikseen.

Automaatio tukemaan sisällöntuotantoa

Hemmalle rakennettiin automaatio, jossa sosiaaliseen mediaan julkaistu sisältö luodaan automaattisesti myös verkkosivuille. Julkaisu tehdään kerran, ja se näkyy sekä somessa että etusivun nostossa. Sivusto pysyy ajantasaisena ilman manuaalista työtä, ja hakukoneet näkevät tuoretta sisältöä ilman erillistä sisällöntuotantoputkea.

Kysy lisää automaatioratkaisuistamme

Analytiikka ja evästeet – GDPR kunnossa

Sivustolle toteutettiin analytiikka ja evästehallinta Kuasin Cookie Consent -ratkaisulla, joka varmistaa GDPR:n mukaisen suostumuksen hallinnan. Kuasin evästehallintaratkaisu on verkkosivuasiakkaillemme täysin lisämaksuton palvelu.

Kysy lisää Kuasin Cookie Consent -ratkaisusta

Tulokset

Hemmalla on nyt sivusto, joka kestää kasvun. Rakenne ohjaa kävijän suoraan siihen palveluun ja siihen kaupunkiin, jota hän hakee; hinnasto on läpinäkyvä ja vastaukset löytyvät ilman soittoa. Uusi palvelu tai uusi paikkakunta lisätään olemassa olevilla sivupohjilla, ja some-julkaisut päätyvät sivustolle ilman erillistä työvaihetta. Työpöydällä sivusto latautuu sekunnissa, ja sivukohtaiset schema-merkinnät sekä llms.txt tekevät sisällöstä luettavaa myös tekoälypohjaisille hauille.