Hakukoneoptimoidut ja responsiiviset verkkosivut Webflow:lla
Aaltonen, Minea (2025)
2025
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2025053018638
https://urn.fi/URN:NBN:fi:amk-2025053018638
Tiivistelmä
Tämä toiminnallinen opinnäytetyö toteutettiin toimeksiantona Helkama Kodinkoneille Oy. Työn tavoitteena oli kehittää hakukoneoptimoidut ja responsiiviset verkkosivut kehitysalusta Webflow:lla kodinkonebrändi Rosenlewille. Brändillä ei ollut entuudestaan verkkosivuja omistajanvaihdoksen myötä. Verkkosivusto haluttiin tukemaan brändin näkyvyyttä, luotettavuutta, digimarkkinointia ja toimimaan julkistusalustana uudelle mallistolle. Työssä toteutettiin sivustolle etu- ja huoltosivu.
Työn tietoperusta jakautui neljään eri alalukuun. Ensiksi tutustutaan lyhyesti digimarkkinointiin ja sen eri muotoihin. Tämän jälkeen perehdytään enemmän verkkosivujen tärkeyteen ja niiden rooliin digimarkkinoinnissa. Seuraavaksi tietoperustassa pohditaan responsiivista suunnittelua, sen kolmea pääkomponenttia – mediakyselyitä ja pysäytyspisteitä, skaalautuvia kuvia ja joustavaa asettelua sekä responsiivisessa suunnittelussa toimivaa mobiili ensin-periaatetta. Tietoperusta jatkuu kehitysalusta Webflow:n komponenttien ja toiminnan tarkastelulla, minkä jälkeen perehdytään hakukoneoptimointiin. Työssä jaotellaan hakukoneoptimoinnin eri osa-alueet tekniseen, sisäiseen ja ulkoiseen hakukoneoptimointiin.
Opinnäytetyön empiirisessä osuudessa kuvataan verkkosivujen kehitysvaiheita, aloittaen vaatimusten keräämisestä, sivuston sisällön ja rakenteen suunnitellusta jatkuen produktin kehittämiseen. Valmiiden sivujen jälkeen edistettiin sivuston hakukoneoptimointia eri toimenpiteiden avulla. Sivuston elementtien responsiivisuudesta huolehdittiin kehitysvaiheessa kunkin komponentin kohdalla erikseen. Työssä sivuston tuottaminen perustui iteratiiviseen kehitykseen toimeksiantajan palautteiden perusteella.
Verkkosivuston hakukoneoptimoinnin ja responsiivisuuden onnistumista arvioitiin analyysityökalujen avulla. Analyysityökalujen Google Search Console ja Lighthouse-raportin tulosten perusteella huomattiin sivuston hakukoneoptimoinnin olevan onnistunut erinomaisesti. Sivuston responsiivisuuden analysointiin hyödynnettiin Webflow:n pysäytyspisteitä sekä Lighthouse-raportin mobiilisimulaattoria. Responsiivisuuden analysoinnissa huomattiin etusivun bannerin tuottavan lataushitauksia mobiililaitteilla, minkä korjaaminen huomioitiin jatkokehitysaiheena työn pohdinnassa. Pohdinnassa arvioitiin projektin onnistuneisuutta vaatimuksiin peilaten, työn ajankohtaisuutta, luotettavuutta ja omaa oppimista. Lopullinen tuotos on löydettävissä osoitteesta www.rosenlew.fi.
Työn tietoperusta jakautui neljään eri alalukuun. Ensiksi tutustutaan lyhyesti digimarkkinointiin ja sen eri muotoihin. Tämän jälkeen perehdytään enemmän verkkosivujen tärkeyteen ja niiden rooliin digimarkkinoinnissa. Seuraavaksi tietoperustassa pohditaan responsiivista suunnittelua, sen kolmea pääkomponenttia – mediakyselyitä ja pysäytyspisteitä, skaalautuvia kuvia ja joustavaa asettelua sekä responsiivisessa suunnittelussa toimivaa mobiili ensin-periaatetta. Tietoperusta jatkuu kehitysalusta Webflow:n komponenttien ja toiminnan tarkastelulla, minkä jälkeen perehdytään hakukoneoptimointiin. Työssä jaotellaan hakukoneoptimoinnin eri osa-alueet tekniseen, sisäiseen ja ulkoiseen hakukoneoptimointiin.
Opinnäytetyön empiirisessä osuudessa kuvataan verkkosivujen kehitysvaiheita, aloittaen vaatimusten keräämisestä, sivuston sisällön ja rakenteen suunnitellusta jatkuen produktin kehittämiseen. Valmiiden sivujen jälkeen edistettiin sivuston hakukoneoptimointia eri toimenpiteiden avulla. Sivuston elementtien responsiivisuudesta huolehdittiin kehitysvaiheessa kunkin komponentin kohdalla erikseen. Työssä sivuston tuottaminen perustui iteratiiviseen kehitykseen toimeksiantajan palautteiden perusteella.
Verkkosivuston hakukoneoptimoinnin ja responsiivisuuden onnistumista arvioitiin analyysityökalujen avulla. Analyysityökalujen Google Search Console ja Lighthouse-raportin tulosten perusteella huomattiin sivuston hakukoneoptimoinnin olevan onnistunut erinomaisesti. Sivuston responsiivisuuden analysointiin hyödynnettiin Webflow:n pysäytyspisteitä sekä Lighthouse-raportin mobiilisimulaattoria. Responsiivisuuden analysoinnissa huomattiin etusivun bannerin tuottavan lataushitauksia mobiililaitteilla, minkä korjaaminen huomioitiin jatkokehitysaiheena työn pohdinnassa. Pohdinnassa arvioitiin projektin onnistuneisuutta vaatimuksiin peilaten, työn ajankohtaisuutta, luotettavuutta ja omaa oppimista. Lopullinen tuotos on löydettävissä osoitteesta www.rosenlew.fi.