7 helppoa vaihetta verkkosivujen rakentamiseen + 7 askelta ylläpitoon
Squarespace on suosittu kotisivualusta, jonka avulla teet tyylikkäät ja toimivat sivut ilman koodaustaitoja. Se toimii erityisen hyvin visuaalisesti näyttävien sivustojen rakentamiseen, mutta taipuu lähes mihin tahansa palvelualan yrittäjän kotisivutoteutukseen.
Tässä oppaassa on kaksi aihetta:
- miten rakennat Squarespace-nettisivut itse
- miten pidät Squarespace-nettisivusi nopeina, ajantasaisina ja hakukoneystävällisinä
Saat siis samalla vinkit perustason hakukoneoptimointiin, responsiivisuuteen, sisältösuunnitteluun, analytiikkaan ja käyttäjäkokemuksen kehittämiseen. Rahanarvoisia vinkkejä siis luvassa, ilman turhaa teknistä jargonia tai gatekeepausta!
Postauksen sisältö
Osa 1 Miten tehdä Squarespace-nettisivut itse
1.1 Squarespace-nettisivutoteutuksen valmistelu
Aletaanpa sitten selvittämään miten tehdä Squarespace-verkkosivut itse, ilman aiempaa osaamista. Käydään jokainen tarvittava vaihe läpi kuvallisin ohjein.
⭢ Rekisteröidy Squarespaceen
Luo ilmainen tili menemällä Squarespacen-verkkosivuille ja valitsemalla Get Started. Kun olet luonut kerran tilin, pääset kirjautumaan tilillesi samasta paikasta valitsemalla Log In.
Squarespace-nettisivuja varten et tarvitse webhotellia, sillä levytila (= se mitä webhotelli käytännössä tarjoaa) kuuluu Squarespacen vuosimaksuun.
Sinun ei myöskään tarvitse ladata koneellesi mitään ohjelmistoja, vaan Squarespace toimii suoraan selaimessa pilvipalveluna. Seuraava vaihe on miettiä, miksi teet verkkosivut tai blogin.
1.2 Mitä ovat Squarespace-nettisivujesi tavoitteet
Ennen kuin aloitat verkkosivujen rakentamisen, on tärkeää määrittää tavoitteet verkkosivuillesi. Kysy itseltäsi:
- Miksi rakennat verkkosivut? Onko tarkoitus esitellä palveluitasi, myydä tuotteita, jakaa blogisisältöä vai edistää henkilöbrändiäsi?
- Kenelle verkkosivut on suunnattu? Määrittele tarkasti kohdeyleisösi. Ymmärrä heidän tarpeet ja mieltymykset. Miksi verkkosivuillesi tullaan, mitä kipukohtia potentiaaliselle sivukävijällä on, kuinka voit vastata sivukävijän kysymyksiin ja mitä hän saa, kun saapuu sisältöjesi pariin.
- Mitä haluan, että kävijä tekee sivuillani? Haluatko heidän tilaavan uutiskirjeen, ottavan yhteyttä, ostavan tuotteen tai lukevan blogipostauksiasi? Tee tämän toiminnon suorittamisesta helppoa. Neuvo sivukävijää jatkuvasti, minne mennä seuraavaksi.
- Tee avainsanatutkimus. Sen avulla tiedät mitä kirjoitat tuleville verkkosivuillesi.
Lue lisää: Kaikki mitä sinun tarvitsee tietää hakukoneoptimoinnista
Tavoitteiden selkiyttäminen ohjaa koko verkkosivuprojektia ja auttaa sinua tekemään johdonmukaisia päätöksiä sisällön, ulkoasun ja toiminnallisuuksien suhteen. Älä siis skippaa tätä vaihdetta!
1.3 Avainsanatutkimus ja kilpailija-analyysi
On tärkeää tietää tarkalleen, mitä sinne verkkosivuille kirjoitetaan. Usein on tilanne, ettei aluksi ole mahdollista palkata hakukoneoptimoinnin ammattilaista apuun. Avainsanatutkimus ei ole rakettitiedettä. Avainsanatutkimun on pohjimmiltaan tutkimista millä hakutermeillä ja hakulauseilla sivukävijät etsivät tietoa hakukoneissa.
Lue lisää: Avainsanatutkimus
Kilpailija-analyysi kuulostaa ”kovalle” ja vaikealle, mutta se ei ole. Jokaisen tulisi katsoa hieman omaa tonttiaan pidemmälle. Mitä kollegani tai kilpailijani tekee? Mitä he tekevät, jotka ovat Googlen hakutuloksissa kärkisijoilla? Millaiset verkkosivut heillä on? Mitä sisältöjä heidän verkkosivuilla on?
Lue lisää: Näin teet kilpailija-analyysin (super helpot ohjeet)
1.4 Kotisivujen ulkoasun ja sisältöjen suunnittelu
Seuraava askel on suunnitella Squarespace verkkosivujesi ulkoasu ja visuaalinen ilme. Squarespace tarjoaa monia valmiita malleja (eli templateja), mutta on tärkeää valita sellainen, joka tukee sivustosi tavoitteita ja houkuttelee kohdeyleisöäsi. Voit myös rakentaa verkkosivusi aivan alusta alkaen itse.
1.4.1 Luo brändillesi tunnistettava visuaalinen ilme
Määritä brändisi visuaalinen tyyli (värit, fontit, kuvien tyyli). Luo yhtenäinen ilme, joka tukee brändiäsi ja tekee verkkosivustasi houkuttelevan.
⭢ Värit
Valitse kotisivuillesi tulevat värit. 2-3 pääväriä sekä 1-2 korostusväriä on hyvä määrä. Liikaa erilaisia värejä tekee brändistäsi sekavan ja verkkosivuista epäammattimaisen näköiset. Huomioi myös kontrasti – on tärkeää että verkkosivuilla kävijä näkee tekstisi taustasta.
⭢ Fontit
Valitse fontit, jotka ovat helposti luettavia. Squarespace käyttää Adoben fontteja, mutta voit lisätä sinne helposti myös custom-fontteja esimerkiksi Googlelta tai mikäli olet ostanut fontin, jota haluat käyttää.
⭢ Kuvamaailma
Valitse brändillesi yhtenäinen kuvamaailma. Voit koostaa esimerkiksi Pinterestiin taulun, jossa määrittelet minkä tyylisiä kuvia käytät. Ilmaisia kuvapankkeja ovat esimerkiksi Pexels, Lummi.ai tai Unsplash, mikäli sinulla ei ole omia kuvia käytössä.
1.5 Suunnittele Squarespace verkkosivujesi rakenne
Useimmilla verkkosivuilla sivurakenne on seuraava:
- Etusivu
- Tietoa meistä
- Palvelut/tuotteet
- Mahdollisesti blogi/artikkelit
- Yhteystiedot
⭢ Suunnittele siis ensin verkkosivuillesi tulevat sisäsivut
Tee tämä varsinkin silloin, kun toteutat ensimmäisiä verkkosivujasi. Suunnittele, mille sisäsivuille sijoitat mitäkin teksti-, kuva- ja videosisältöä. Hakukoneoptimoinnin näkökulmasta jokaiselle palvelulle kannattaa tehdä oma sisäsivunsa. Myös yksisivuiset kotisivut ovat hakukoneoptimoinnin näkökulmasta ei-niin-hyvä ratkaisu. Yksisivuisilla kotisivuilla kaikki asia on samalla sivulla, eikä hakukoneet ymmärrä millä termeillä tätä sivua pitäisi näyttää.
⭢ Mieti päänavigaation sekä footerin sisältö
Älä tee jokaiselle pikkuaiheelle omaa sivua. Pidä myös huoli, että navigaatiopalkkisi on vain yksirivinen (tästä lisää seuraavassa luvussa). Mikäli haluat laittaa navigaatioon enemmän sivuja, kuin yhdelle riville mahtuisi niin A) karsi sivujen määrää – oikeasti B) käytä dropdowneja.
Footeriin laitetaan yleensä yhteystiedot sekä linkitetään sosiaalisen median tilit.
⭢ Kirjoita verkkosivujesi sisältö valmiiksi
Kun olet tehnyt avainsanatutkimuksen ja kilpailija-analyysin, tiedät mitä kirjoittaa. Voit käyttää esimerkiksi ChatGPT:tä sparraajana, mutta älä kopioi sen tuottamaa tekstiä suoraan verkkosivuillesi.
Lue lisää: Mikä on hyvää sisältöä kotisivuilla
1.6 Verkkosivujen rakentaminen Squarespace-alustalle
Seuraavaksi opit, miten tehdä Squarespace-verkkosivut käytännössä askel askeleelta.
1.6.1 Perusta verkkosivu
Nyt alkaa verkkosivujen varsinainen rakennustyö. Kirjaudu sisään Squarespace-tilillesi ⭢ Mene kohtaan Dashboard ⭢ Create Website. Valitse Squarespace Templates, jos haluat käyttää valmiita malleja tai Blank Template, jos haluat rakentaa verkkosivusi alusta alkaen itse.
Tämän jälkeen seuraa ohjeita ja valitse Start With This Design, kun olet valmis aloittamaan. Squarespace neuvoo sinua hyvin läpi verkkosivujen avausprosessin. Tässä kohtaa sinun ei tarvitse maksaa mitään, vaan saat käyttöösi 14 päivän ilmaisen suunnitteluajan.
⭢ Sivun kieli: Valitse kieli, millä kielellä aiot verkkosivusi luoda.
⭢ Site title, eli sivun nimi: Anna verkkosivuillesi nimi. Tätä voit vaihtaa myöhemminkin. Nimi voi olla vaikka sinun nimesi tai mitä ikinä keksitkin. Tämä on hyvä suunnitella kilpailija-analyysia ja avainsanatutkimusta tehdessä.
⭢ Tämän jälkeen Squarespace näyttää ohjeita kuinka mm. luot sivuja. Käydään nämä vaiheet seuraavaksi läpi. Alla olevassa kuvassa on näkymä, mikä tulee kun olet luonut sivun onnistuneesti. Tässä on kyseessä Blank Template.
1.6.2 Luo globaalit tyylimuotoilut verkkosivuillesi
Tämä tarkoittaa, että valitset fontit ja verkkosivuillasi käytettävät värit. Näin sinun ei tarvitse joka osioon tai sivulle laittaa niitä uudestaan. Pääset valitsemaan verkkosivullesi tyylit menemällä sivun oikeasta laidasta pensselin kuvasta Site Styles.
1.6.3 Luo etusivu
Etusivu on verkkosivujesi tärkein sivu. Se yleensä määrittelee kotisivujesi tyylin. Etusivun rakentamiseen kuluu tyypillisesti eniten aikaa ja se kannattaa tehdä huolella. Etusivulle määrittelemääsi tyyliä voit helposti käyttää myös muilla sivuilla.
1.6.4 Luo navigaatio ja footer
Viemällä hiiren sivujen alkuun, pääset muokkaamaan navigaatiopalkkia (Edit Site Header). Viemällä hiiren ihan sivun alalaitaan pääset muokkaamaan footeria (Edit Site Footer).
Tutustu: Tarkemmat kirjalliset ohjeet Squarespace-verkkosivujen tekoon
1.6.5 Luo muut sivut
Luo muut sivut samaan tapaan kuin etusivu. Ensimmäisen kuvan näkymä on ns. Squarespacen hallintapaneeli. Luodaksesi sivuja lisää mene kohtaan Website – Pages (kuva 2) ja paina +. Nimeä sivu, kuten haluat.
1.6.6 Tarkasta sivujen responsiivisuus (eli mobiiliystävällisyys)
Responsiivinen verkkosivusto, joka toimii hyvin kaikilla laitteilla, on nykyään välttämättömyys. Squarespace-verkkosivut ovat automaattisesti responsiivisia, mutta on silti tärkeää varmistaa, että sivustosi toimii saumattomasti myös mobiililaitteilla. Kannattaa siis katsoa myös mobiilinäkymä kuntoon, vaikka Squarespace sen automaattisesti tekeekin. Klikkaamalla oikealta yläkulmasta kännykän kuvaa pääset muokkaamaan Squarespace-verkkosivujesi mobiilinäkymää.
Kannattaa aina katsoa responsiivisuus myös parilla eri internet-selaimella (esim. Chrome ja Firefox) ja omalla tabletillasi tai kännykälläsi. Mikään ei ole pahempi turn-off potentiaaliselle asiakkaallesi, kuin tulla katsomaan sun verkkosivuja ja siellä hyppii kuvat ja tekstit miten sattuu. Ostaisitko itse sellaiselta brändiltä mitään?
Edistyneempi vinkki: Jos haluat aidosti tutkia, miten Squarespace-kotisivusi käyttäytyy eri kokoisilla näytöillä, voit tarkastella sitä selaimen Inspector (Firefox) tai DevTool (Chrome) työkaluilla. Pääset tähän työkaluun menemällä sivustollesi ja painamalla hiiren oikealla painikkeella ja valitsemalla Tarkastele. Katso alla olevista kuvista apua, mikäli et ole aiemmin tehnyt näin.
Klikkaa ensin tarkastele hiiren oikealla painikkeella, niin pääset alla olevan kuvan näkymään.
Tämän jälkeen vaihda responsiiviseen näkymään (kuvassa punainen nuoli oikealla, hieman kuvan keskikohdan jälkeen). Tämän jälkeen voit valita haluamasi kokoisia laitteita (vasemman puoleinen punainen nuoli) ja varmistua siitä, että kaikki toimii kuten pitääkin. Mikäli ei toimi mene takaisin Squarespaceen muokkaamaan mobiilinäkymää.
1.6.7 Hakukoneoptimoi kaikki sivusi
Pääset muokkaamaan jokaisen luomasi sivun asetuksia menemällä kohtaan Pages – haluttu sivu – vie hiiri sivun päälle, mutta älä klikkaa – paina hammasrattaan kuvaa.
Alla olevassa kuvassa näkyvä näkymä näyttää jokaisen sivun asetukset. Kohdasta SEO pääset tekemään hakukoneoptimointia. Katso General kohdasta aika URL-slug kuntoon, eli tee sivustosi url-osoitteista kuvaavia (esim /palvelut tai /yhteystiedot). Älä käytä ääkkösiä.
⭢ SEO: Lisää jokaiselle sivuille title (otsikko)
⭢ SEO: Lisää jokaiselle sivulle description (kuvaus)
⭢ Joka sisäsivulle erikseen: Laita kuville alt-tekstit
Lue lisää: Squarespace verkkosivujen hakukoneoptimointi – näin löydyt hakukoneista
1.7 Verkkosivujen julkaiseminen
Pääset tekemään näitä asetuksia menemällä hallintapaneelissa sen alareunaan ja klikkaamalla hammasratasta (Settings).
Seuraavaksi aukeaa tällainen näkymä. Täältä pystyt tekemään kaikki alla olevan listan mukaiset asetukset.
⭢ Laita SSL-yhteys päälle
Kohdasta Domains & Email pääset hallinnoimaan tätä.
⭢ Lisää Social Sharing Image
Kohdasta Website – Social Sharing pääset lisäämään kuvan, joka näkyy aina silloin kun jaat verkkosivujesi linkkiä esimerkiksi sosiaalisessa mediassa.
⭢ Lisää favicon (selainkuvake)
Kohdasta Website – Favicon voit vaihtaa selainkuvakkeesi. Selainkuvake on selaimessa välilehdellä ennen verkkosivujesi nimeä näkyvä kuvake.
⭢ Huomioi evästehallinta
Mikäli tarvitset kotisivuillesi evästebannerin, niin pääset ottamaan sen käyttöön maksutta asetuksista – Website – Cookies and Data Privacy. Valitse Banner kohdasta Enabled ja pääset muokkaamaan evästehallinnan tarpeisiisi sopivaksi.
Lue lisää: Milloin kotisivuille tarvitaan evästekysely
⭢ Laita Squarespace AMP päälle
AMP (Accelerated Mobile Pages) tarkoittaa Squarespace-verkkosivujesi optimointi mobiililaitteille.
Lue lisää: Using AMP with Squarespace
⭢ Valitse Squarespacen maksusuunnitelma (pricing plan)
Kohdasta Website – Site Availability näkyy että sivu on yksityinen (Private), sillä maksusuunnitelmaa ei ole valittu. Valitse painike Upgrade to Publish ja seuraa selkeitä ohjeita sivustosi julkaisemista varten.
⭢ Osta tai linkitä oma domain
Squarespacen kautta ei saa hankittua .fi-päätteistä domainia. Mikäli haluat sellaisen, osta se erikseen esim. Hostaanin tai Zonerin kautta ja liitä se Squarespace-sivuihisi.
Mikäli haluat domainin jollain muulla päätteellä, voit valita sen Squarespacen maksusuunnitelman valinnan jälkeen. Mikäli maksat kerralla Squarespacen vuosimaksun, saat domainin 1. vuodeksi ilmaiseksi.
Osa 2 Miten ylläpitää Squarespace-kotisivuja (7 helppoa askelta)
2.1 Päivitä kotisivujesi sisältöä säännöllisesti
Ajantasainen ja arvokas sisältö on avain menestyvään verkkosivustoon. Mieti strategisesti, mitä tietoa haluat tarjota kävijöillesi ja kuinka tuet heitä ostopolulla.
⭢ Päivitä sivuston tekstisisällöt, kuvat ja videot säännöllisesti. Tarkista, että tuotteiden ja palveluiden tiedot ovat oikeat.
⭢ Muista päivittää myös metakuvaukset.
⭢ Hyödynnä blogia: Kirjoita uutta sisältöä blogiin tai artikkeleihin, jotta sivustosi pysyy aktiivisena. Tämä on myös erinomainen tapa parantaa hakukonenäkyvyyttä, kun sisältö vastaa asiakkaiden kysymyksiin.
2.2 Squarespace-verkkosivuston hakukoneoptimointi
SEO on tärkeää, jotta kävijät löytävät sivustosi hakukoneista. Squarespace tarjoaa hyvät työkalut hakukoneoptimointiin sekä analytiikkaan. Käy läpi verkkosivuiltasi ainakin nämä asiat:
⭢ Meta-kuvaukset ja avainsanat:
Tarkista ja optimoi metatiedot jokaisella sivulla. Käytä avainsanoja, jotka ovat merkityksellisiä liiketoiminnallesi ja vastaavat hakutrendejä.
⭢ Avainsanojen käyttö sisällöissä:
Käytä relevantteja avainsanoja tekstisisällöissäsi, kuvien tiedostonimissä, alt-teksteissä, otsikoissa. Älä kuitenkaan spämmää, haukoneet tunnistavat sen.
⭢ Alt-tekstit ja kuvien hakukoneoptimointi:
Muista lisätä kuviin alt-tekstit, jotka parantavat hakukonenäkyvyyttä ja tekevät sivustosta saavutettavamman. Mikäli kuvat eivät jostain syystä toimisi sivuillasi, alt-teksti tulee silloin näkyviin kuvan tilalle.
Lue lisää: Kaikki mitä sinun tarvitsee tietää hakukoneoptimoinnista
2.3 Optimoi Squarespace-kotisivujesi nopeus
Nopeasti latautuvat kotisivut tarjoavat paremman käyttäjäkokemuksen ja saavat myös paremman sijoituksen hakutuloksissa. Squarespacessa, kuten muillakin verkkosivustojen no-code rakennusalustoilla, esiintyy ylimääräisiä koodirakenteita (”bloat code”), jotka hidastavat verkkosivujasi etkä pääse muokkaamaan tätä koodia. On kuitenkin asioita, joita voit hyvin optimoida Squarespace-sivustollasi.
- Kuvien optimointi: Käytä kevyitä kuvakokoja (tiedostokoko mieluiten alle 200 kB), jotta sivut latautuvat nopeammin.
- Vähennä turhia skriptejä: Poista tarpeettomat seurantapikselit tai skriptit, jotka voivat hidastaa sivustoa.
2.4 Laita SSL-sertifikaatti kuntoon
⭢ Squarespace tarjoaa SSL-sertifikaatin automaattisesti, mutta varmista että se on aktiivisena ja että sivustosi osoite alkaa https://.
2.5 Seuraa Squarespacen analytiikkaa
Analytiikka on olennainen osa verkkosivuston ylläpitoa, sillä se kertoo, miten hyvin sivustosi toimii ja missä on parantamisen varaa.
⭢ Liikenteen seuranta: Squarespacen sisäänrakennetun analytiikan avulla voit tarkkailla, mistä kävijäsi tulevat, mitä sivuja he katsovat ja kuinka kauan he viipyvät. Tämä auttaa sinua optimoimaan sisältöjä ja käyttökokemusta.
⭢Konversioiden seuranta: Jos sivustollasi on verkkokauppa, analytiikka auttaa seuraamaan ostoprosessia ja parantamaan myyntiä.
2.6 Kerää palautetta ja kehitä käyttäjäkokemusta
Käyttäjäkokemus ratkaisee sivustosi menestyksen. Hankalat, hitaat tai sekavat sivut karkottavat takuuvarmasti sivukävijät. Helppo tapa testata sivustosi loogisuutta ja toimivuutta on pyytää tuttavaasi kokeilemaan ja antamaan rehellisesti palautetta.
Kannattaa myös pyytää esimerkiksi asiakkaita palautetta verkkosivuista. Moni antaa mielellään palautetta, varsinkin jos tarjoat kiitoksena vaikkapa alekoodin. Kun keräät palautetta, muista myös hyödyntää sitä!
Lisäapua Squarespace-kotisivuillesi & avaimet käteen -ratkaisut
Jos tarvitset apua kotisivujesi kanssa, olen täällä auttamassa! 💻✨ Liity myös Facebook-ryhmääni, jossa voit kysyä neuvoja kotisivujesi rakentamiseen. Mikäli olet kiinnostunut avaimet käteen -kotisivupaketeista, jossa rakennan sinulle kustannustehokkaasti verkkosivut, tutustu tarjoamiini kotisivupaketteihin tästä.
⭢ Pikaopas Squarespace-sivuston hakukoneoptimointiin 9,90€ (sis. alv)
⭢ Opas Squarespacen yleisimmistä toiminnoista 19,90€ (sis. alv)
BONUS: Inspiraatiota
Näistä on hyötyä, kun suunnittelet kotisivujasi. Ja mikä parasta, nämä kaikki on ilmaisia!
Fontit: Adobe Fonts, Google Fonts, FontSquirrel
Värit: Coolors.co, ColorSpace, uiGradients
Kuvat, ikonit ym: Icons8, SVGSilh, Pexels, Unsplash
Layouts: LandBook, Design Vault, Designspiration
CSS-generaattorit: CSS Loaders, 10015.io “free all-in-one toolbox”