Kuinka teet omat verkkosivut Squarespace alustalla? Tässä ohjeessa käyn vaihe vaiheelta läpi mitä tulee muistaa, kun rakennat Squarespace verkkosivuja; mistä kannattaa aloittaa, missä järjestyksessä verkkosivuja tehdään ja mitä tulee huomioida julkaisun jälkeen.

Haluaisitko tehdä omat verkkosivut itsellesi tai yrityksellesi, mutta et ole ihan varma mistä edes aloittaisit?

Ammattimaisten verkkosivujen toteuttaminen ei itse asiassa ole enää hankalaa. Yksi oma suosikkini verkkosivujen rakennustyökaluista on Squarespace. Squarespace alustalla luot itsellesi tai yrityksellesi näyttävät, siistit ja hakukoneystävälliset verkkosivut jopa alle päivässä!

Olemme toteuttaneet täysin alusta loppuun lukuisia verkkosivu- ja verkkokauppa-projekteja. Olemme kokeilleet ja käyttäneet mm. Wordpress (+WooCommerce) sekä Magento alustoja, mutta viime vuosien aikana olemme päätyneet käyttämään lähes poikkeuksetta kahta eri alustaa:

1. Squarespace kaikkiin verkkosivuihin

2. Shopify (lähes) kaikkiin verkkokauppoihin.

Tässä julkaisussa paneudun juurikin Squarespace alustaan ja kuinka Sinä voit toteuttaa omat verkkosivut Squarespacella.

Mikä on Squarespace verkkosivu-alusta

Squarespace on nykyaikainen drag-and-drop verkkosivu-alusta ja rakennustyökalu, jolla saat tehtyä verkkosivut ilman teknistä (koodi)osaamista. Squarespace kotisivut ovat ammattimaisen näköisiä, niitä on helppoa ja nopeaa päivittää tai muokata ja ne toimivat täysin pilvipohjaisena palveluna, mikä tarkoittaa, että Sinun ei tarvitse huolehtia sivujen teknisistä päivityksistä tai turvallisuudesta - kyseessä on ajatukseltaan hyvin vastaava kuin Shopify verkkokauppa-alusta.

Mikäli olet lukenut blogiani ja erityisesti Shopify aiheisia julkaisuja niin tiedät, että Shopify kauppaa on helppoa muokata, mutta muokkaus verrattain rajattua teema-kohtaisesti. Squarespace alustalla taas on paljon laajemmat visuaaliset muokkausmahdollisuudet mm. elementtien ja ominaisuuksien suhteen. Kuitenkin verkkokauppa-alustaksi Squarespace on hyvin suppea eikä tarjoa läheskään samaa mitä Shopify.

Aloita rekisteröitymällä Squarespace-alustalle ilmaiseksi täältä

Squarespace kotisivujen toteutuksen valmistelut

Niinpä - ei hypättykään suoraan syvään päätyyn ja Squarespace kotisivujen pariin vaan alkuun on todella järkevä tehdä muutamia valmisteluja. Se tulee säästämään paljon aikaa ja ylimääräistä työtä myöhemmin.

#1 Määrittele ideaali sivustosi vierailija (tai asiakkaasi)

Epämääräinen käsitys siitä, ketä yrität tavoittaa tai palvella vaikeuttaa sivuston suunnittelua ja asettelua. Kun on selvillä kohdeyleisö niin sivuston asettelu, tekstisisältö, ulkoasu ja tyyli on helpompi toteuttaa.

#2 Määrittele sivustosi tavoitteet

Shopify verkkokauppaa rakentaessa tämä on helppoa: tavoitteesi on saada kauppaa ja tilauksia verkkokauppaasi. Mutta muita kuin verkkokauppoja tehtäessä pitää sivuille määritellä jokin tavoite.

Haluatko kerätä liidejä ja saada yhteydenottoja asiakkailta? Haluatko myydä valokuvauspalveluitasi hääpareille? Onko kyseessä oma ammatillinen portfolio-sivusi esim työnhakuun tai osaamisesi esittelyyn? Vai haluatko perustaa ruoanlaittoon keskittyneen blogin?

Oli tavoite mikä tahansa, sen selkeä määrittely helpottaa verkkosivujesi toteutusta, koska tiedät mitä sivuiltasi haet!

#3 Valitse SEO hakusanat, joilla haluat listautua Googlen hakutuloksiin

Kun luot sivuasi niin tulet käyttämään ja sisällyttämään näitä hakusanoja ja hakulausekkeita sivuillesi sekä sivustosi asetuksiin - on siis järkevää miettiä Sinulle tärkeät hakusanat heti alun alkaen valmiiksi, jotta voit ottaa ne huomioon sivuja tehdessä.

#4 Osta domain eli sivujen verkko-osoite

Olisi hyvin harmillista, jos juuri ennen sivujen julkaisua keksit täydellisen domainin sivuillesi ja se olisikin varattu jo toiselle verkkosivulle. Vältetään tämä “pienoinen” pettymys ja ostetaan domain heti alkuun.

Jos haluat sivuillesi .fi päätteisen domainin (erityisesti suomenkieliset sivut) niin sen voit ostaa Suomalaiselta palveluntarjoajalta. Me olemme käyttäneet mm. Hostingpalvelua edullisten hintojen ja helppokäyttöisyyden vuoksi, mutta toki mikä tahansa domain-välittäjä sopii hyvin.

Mikäli haluat .com päätteisen domainin niin tämän voit ostaa suoraan Squarespace alustalta eikä sitä tarvitse tällöin ohjata erikseen sivuillesi! Huomioithan, että jos maksat Squarespace alustan koko vuodeksi kerralla niin .com -päätteinen domain tulee veloituksetta - kannattaa siis hyödyntää tämä etu.

Vinkki: Muista myös katsoa domain nimen valinnan yhteydessä sometilien saatavuus. Itselleni on nimittäin käynyt niin, että haluamani domain oon ollut vapaana, mutta sometilit olivatkin varattuja. Erityisesti kannattaa tarkistaa Instagram, Facebook ja Youtube. Toki sivujesi aiheesta riippuen myös Pinterest, Twitter ja Linkedin voivat olla tärkeitä.

Visuaalisuuden ja sisällön suunnittelu

Kyllä - lisää valmisteluja ja suunnittelua. Kokemuksesta kerron, että mikäli jaksat alkuun suunnitella verkkosivusi ja -kauppasi hyvin niin säästyt myöhemmin turhalta vaivalta.

#5 Luo kansisivu Squarespace alustalla (valinnainen)

Squarespace kansisivu (Cover page) eli “Tulossa pian” sivu on visuaalisesti tyylikäs ratkaisu rakennusvaiheessa oleville sivuille. Tämä on helppo luoda Squarespace alustalla valmiiseen pohjaan ja asettaa kotisivuksi.

Päivitys: Squarespace 7.1 alustalla kansisivut eivät ole vielä saatavilla (5/2020), mutta vanhemmalla Squarespace 7.0 alustalla on. Oletettavasti Squarespace 7.1 versioon tulee kansisivut myös lähiaikoina.

#6 Luo Pinterest taulu tai muu visuaalinen suunnitelma (valinnainen)

Myönnetään - tätä en itse tee enää vaikka monesti Pinterestiä hyödynnän uusia ideoita etsiessä. Mutta tiedän, että monelle visuaalisesta hahmotelmasta on todella iso hyöty. Mikäli koet tarvitsevasi inspiraatiota niin kasaa itsellesi esimerkiksi Pinterest taulu, johon tulee värejä, logoja, fontteja sekä esimerkkejä inspiroivista verkkosivuista.

#7 Kirjoita verkkosivujen rakenne (Sivustokartta eli sitemap)

Mitä sivuja tarvitset ja haluat saada? Kuinka nämä linkittyy toisiinsa? Luomalla alustavan sivustokartan määrittelet tämän ja verkkosivujen toteutusvaiheessa ei tarvitse miettiä mitä sivuja tarvitset.

Mikäli olet tekemässä ensimmäisiä verkkosivujasi niin suosittelemme vahvasti sivustokartan miettimistä etukäteen. Kun kokemusta sivujen rakentamisesta on kertynyt niin todennäköisesti et enää mieti sivujen rakennetta etukäteen vaan se tulee “luonnostaan” sivujen toteutuksessa.

Huomioithan, että tässä en tarkoita sivustojen .xml sivustokarttaa vaan itsellesi omaa suunnitelmaa sivujen rakenteesta (.xml sitemap muodostuu kaikkiin Squarespce sivustoihin automaattisesti).

#8 Määrittele päänavigaation sekä footerin sisältö

Navigaatiorakenne liittyy myös kohtaan #7. Mieti sivustosi rakenne ja mitkä aiheet sekä linkit tulevat sivujesi ylimmäiseen ns. päänavigaatioon sekä mitkä aiheet ja linkit tulee sivujesi alareunan “footer” valikkoon.

Määrittele tärkeimmät aiheesi ja sivusi sekä niiden sijainnit.

#9 Hae tai valokuvaa sivustosi kuvamateriaali

Yksi tärkeimpiä asioita sivuillasi on visuaalinen ilme - se antaa ensivaikutelman kävijöille.

Huonolaatuiset tai muutoin huonot kuvat pilaavat hienoimmankin visuaalisen ilmeen. Kannattaa siis panostaa verkkosivujen kuvamaailmaan.

• Voit etsiä kuvia esimerkiksi ilmaisista kuvapankeista (Squarespace tarjoaa suoraan Unsplash kuvapankkiin integraation, mutta katsothan aina kuvien käyttöoikeuden ennen lisäämistä sivuillesi).

• Voit ostaa kuvat maksullisista kuvapankeista. Luethan meidän postauksen ja arvostelun Canva Pro sovelluksesta - julkaisusta löytyy myös erittäin hyvä pointti liittyen kuvapankkeihin.

• Jos olet osaava valokuvaaja tai valmis panostamaan kuvaajaan niin voit myös ottaa itse sivustosi kuvamateriaalin.

#10 Kirjoita sivustosi sisältö

Tämän voi myös toteuttaa sivujen teon kanssa samalla, mutta itse olen aikanaan sivustojen tekoa aloittaessani tykännyt luoda pääasialliset sisältötekstit etukäteen omille tai asiakkaidemme sivuille esimerkiksi ihan Google Docs tai Word tiedostoksi. Nykyään tulee tehtyä kaikki suoraan sivuille.

Sisältötekstien kirjoittaminen etukäteen helpottaa verkkosivujen designissa, sillä voit vain kopioida ja liittää valmiit tekstit sivuillesi ja sitten myöhemmin tehdä visuaalisia muutoksia. Näet tällöin heti miten muutokset vaikuttavat sisältöösi.

Sisältötekstejä kirjoittaessa muistathan huomioida kohdan #3 eli sivustosi ja aiheesi tärkeimmät hakusanat ja hakulausekkeet. Näitä tulee sisällyttää sisältöteksteihin (mm. otsikot, väliotsikot ym).

Verkkosivujen rakentaminen Squarespace alustalla

Seuraavaksi seuraa se paras vaihe. Tässä kohdassa laadukas esivalmistelu yllä olevien ohjeiden mukaan tulee helpottamaan runsaasti, sillä nyt Sinulla on jo kaikki valmiina: ajatus, ideat, domain, sisältö ja avainsanat ja kuvat.

#11 Luo kotisivu / etusivu

Tykkään itse aloittaa aina kotisivusta. Se yleensä määrittelee eniten sivustosi tyyliä ja ilmettä, joten pystyt tässä vaiheessa hyvin testailemaan eri design tyylejä, asetteluja ja asioita. Jos kirjoitit sisältötekstit valmiiksi niin kotisivujen visuaalisuuden suunnittelu on helpompaa, kun sivuilla on jo sisältöä.

Vinkki: Kotisivujen suunnittelun jälkeen voit hyödyntää kotisivujen tyyliä muilla sivuilla luomalla kotisivuistasi aina kopion uuden sivun pohjaksi. Tämä paitsi nopeuttaa sivujen tekoa myös varmistaa, että sivujen asettelu pysyy yhtenäisenä.

#12 Luo päänavigaatio ja footer

Nämä olit jo suunnitellut (olithan?) aikaisemmin niin nyt voit määritellä ja luoda itsellesi navigaatio-rakenteen lisäämällä sivuja Squarespace editorissa. Koska aikaisemmin mietittiin sivujen sisältö niin uusien sivujen luominen onnistuu nopeammin vain kopioimalla sisältötekstejä, lisäämällä kuvia ja tekemällä tarvittavia säätöjä.

Verkkosivujen säädöt

Ennen sivujen julkaisua on syytä tarkistaa muutamia asioita ja tehdä tarvittaessa muutoksia.

#13 Katso miltä sivusi näyttää mobiilissa ja tee tarvittavat säädöt

Squarespacella näkymä on valmiina desktop-näytölle sopiva, mutta sitä on helppo vaihtaa yläkulman painikkeesta (puhelin ikoni). Tämä on erittäin tärkeä tarkistaa, sillä (tietysti sivuston aiheesta riippuen) mobiilikäyttäjien määrä tulee olemaan merkittävä. Itse asiassa lähes kaikilla - ellei täysin kaikilla - meidän toteuttamilla sivuilla mobiilikäyttäjien määrä on enemmistö. Osassa sivuistamme mobiilikäyttäjien määrä on jopa yli 90%.

Mobiilikäyttäjien osuus on siis merkittävä ja siksi tarkistus on tärkeää. On todennäköistä, että joudut säätämään joidenkin tekstien, painikkeiden tai kuvien etäisyyksiä ja asetteluita uudelleen.

#14 Tarkista linkitykset ja muut toiminnaliisuudet

Tärkeimmät linkit, kuten navigaatio, footer sekä painikkeet verkkosivuillasi kannattaa tarkistaa. Itse saatan välillä jättää linkkien tarkistuksen vasta sivun julkaisun jälkeen, sillä esim kaikkia blogi-linkkejä ei Squarespace alustalla saa helposti ja nopeasti etsittyä ellei sivua ole julkaistu ensin.

Lisäksi tarkista myös muut toiminnallisuudet, kuten yhteydenottolomakkeet. On parempi, että testaat ne itse ensin ennen sivusi vierailijoita - erityisesti, jos jokin ei toimi kuten pitää.

#15 Tarkista sivujesi SEO ominaisuudet

Squarespacella on simppeliä muokata sivujesi hakukoneominaisuuksia, kuten sivujen page title ja description -kentät. Tarkista, että kaikki näyttää järkevältä Squarespace SEO muokkauksen kautta, jotta sivustosi voi listautua Googleen.

Squarespace verkkosivujen julkaisuvalmistelut

#16 Kytke suojattu yhteys päälle

Squarespace alusta tarjoaa suojatun SSL-yhteyden (tästä kerroimme tarkemmin Shopify vs WooCommerce vertailussa). Kytke SSL-suojattu yhteys päälle Squarespace alustalle, jos se ei vielä ole päällä. 

Käyttäjien ja sivuston vierailijoiden lisäksi myös Google arvostaa suojattua yhteyttä ja jotkin selaimet eivät enää edes avaa sivuja, joissa ei SSL-suojausta ole laisinkaan.

#17 Lisää Sivuston title ja description (SEO näkyvyyttä ajatellen)

Kun sivustosi näkyy Googlen hakutuloksissa niin potentiaaliset vierailijat näkevät kuvauksen sivustasi, mikäli olet lisännyt kuvauksen sivuillesi.

#18 Kytke Squarespace AMP päälle

Squarespace AMP tarkoittaa Accelerated Mobile Pages joka on tehostettu mobiilikäytettävyys. Käytännössä se saa sivusi latautumaan nopeammin mobiilikäyttäjille ja tästä tykkäävät sekä mobiililaitteella selaavat vierailijat sekä Google.

#19 Lisää favicon eli selainkuvake

Selainkuvake eli favicon näkyy sivustollasi pienenä ikonina selaimen url-osoitekentän yläpuolella. Googlella favicon on G -logo, Youtubella punainen play-painike. Sinulla se voi olla logosi tai yksinkertaistettu versio siitä.

Favicon lisää sivujesi tunnistettavuutta ja persoonallisuutta.

#20 Poista Squarespace mainos

Squarespace sivuilla on sivujen alimmaisena teksti “Build with Squarespace”. Tämä on pelkkä teksti, jonka voit ottaa pois. Sivujesi tulee olla Sinun - ei Squarespacen.

Julkaise omat Squarespace kotisivut

#21 Valitse sopivin Squarespace kuukausilaskutustaso

Olet lähes valmis! Jotta saat verkkosivut julkiseksi nettiin, tulee Sinun ensin valita sopivin Squarespace kuukausilaskutus sivuillesi.

Vinkki: Jos maksat koko vuoden kerralla niin saat ilmaisen .com domainin vuodeksi. Suosittelemme hyödyntämään tämän.

#22 Linkitä oma domain

Kuukausilaskutuksen maksun jälkeen sivusi ovat julki! Jos käytät .fi päätteistä domainia niin viimeinen vaihe on linkittää domain sivuillesi. Sen jälkeen kestää yleensä muutama tunti, kun omat, upeat Squarespace verkkosivusi ovat kaikkien löydettävissä!

Lopuksi

Toivottavasti tämä opas auttaa muistamaan kaikki ne tärkeimmät vaiheet, mitä omien Squarespace sivujesi teko alusta loppuun vaatii. Muistathan, että verkkosivut eivät ole periaatteessa koskaan valmiita. Voit aina muokata, päivittää tai lisätä asioita sivuillesi. Voit parantaa sivustosi hakukonelöydettävyyttä yhdistämällä sivusi Google Analytics ja Google Search Console palveluihin sekä hyödyntämällä niiden tarjoamaa dataa.

Jos olet kiinnostunut saamaan tarjouksen Squarespace verkkosivujen toteutuksesta niin otathan yhteyttä täältä!

Hei vielä! 👋 Osa tässä postauksessa olevista linkeistä on affiliatelinkkejä, joita todella toivon, että käytät. 🖤 Linkin klikkaaminen ei aiheuta sinulle lainkaan lisäkuluja, joten voit rauhassa tutustua postauksessa suositeltuihin sivustoihin ja ohjelmiin. Mikäli päädyt maksavaksi asiakkaaksi linkkini kautta, saan siitä pienen komission.