Jos palkkaamasi hakukoneoptimointiexpertti alkaa heti kärkeen jupisemaan SEO-otsikoista ja meta-kuvausteksteistä, suosittelen kohteliaasti vaihtamaan asiantuntijaa. Nykypäivän hakukoneoptimoinnissa näillä helpoilla teknisillä kikkailuilla ei saada huomattavaa etua kilpailijoihin.

Hakukoneoptimointi on kehittynyt kovasti antiikkisesta hakusanojen syöttämisestä koodiin. Esim. Google sijoittaa sivustot tuloksiin mm. alla olevin perustein (lähde Moz.com):

1. Verkkotunnuksen ja yksittäisen sivun luotettavuuden pisteytys ja linkitykset muilta verkkosivuilta
2. Sivun teksti- ja muun sisällön laatu sekä relevanssi hakusanoihin
3. Sivun sisällön pituus, luettavuus, ainutlaatuisuus, avainsanat ja latausnopeus
4. Verkkotunnuksen ja brändin luotettavuus sekä maininnat mediassa ja muualla ulkopuolisissa lähteissä
5. Sosiaalisen median maininnat ja linkitykset

Moderni hakukoneoptimointi onkin sisällöntuotannon, mukavan käyttökokemuksen ja teknisesti hyvin toimivan sivuston liittouma.

Sisältö on kunkku

Millään teknisillä kikkailuilla ei ole merkitystä, jos sivuston sisältö on kuraa. Hakukoneoptimointi lähteekin aina teksti-, kuva-, video-, ym. sisällöstä, joka:

• Vastaa käyttäjän ja kohderyhmän kysymyksiin sekä hakuihin.
• On uniikkia, eikä plagioitu muualta.
• Ei ole toistuvaa sisältöä muualla sivustolla.
• Sisältöä on riittävästi. Tähän ei ole absoluuttista oikeaa vastausta, mutta useissa tapauksissa hyvänä nyrkkisääntönä on vähintään 500 sanaa tekstiä.
• On formatoitu oikein sekä muotoiltu helposti luettavaksi ja silmäiltäväksi.

Hyvä hakukoneoptimoija on siis ensisijaisesti hyvä sisällöntuottaja. Hän ymmärtää kohderyhmän tarpeet ja osaa tuottaa sekä ilmaista niihin ratkaisut kiinnostavalla tavalla. Pohjatyö, kuten hakusanatutkimus on tehty huolellisesti.

Käyttökokemus kunniaan

Kun sisältö on kunnossa, tärkein yksittäinen tekijä sivuston hyvään sijoittumiseen on linkitykset muilta hyvämaineisilta sivustoilta. Tämä onkin ehkä se vaikeimmin vaikutettavissa oleva asia hakukoneoptimoinnissa.

Tämänkin vuoksi sivuston timanttiseen käyttökokemukseen on syytä kiinnittää huomiota. Kun sivustoa on mukava käyttää, käyttäjä jaksaa selata sitä pidempään ja hartaammin. Tämä taas sisällön ohella houkuttelee jakamaan sivua eteenpäin esim. someen tai parhaassa tapauksessa linkityksiä tipahtaa muilta verkkosivuilta.

Erinomaiseen käyttökokemukseen voi laskea mm. nämä asiat:

• Vikkelät latausnopeudet
• Looginen ja intuitiivinen navigointi sivuilla sekä käyttöliittymä kaikilla laitteilla
• Kohderyhmää puhutteleva ulkoasu
• Tiedon ja relevantin sisällön vaivaton löydettävyys
• Sisältö muotoiltu mukavasti selailtavaan muotoon

Teknisillä viilauksilla kirsikka kakun päälle

Huijasin hieman. Jos oletetaan että sivusto toimii oikein, niin yksi tekninen asia on tärkeämpi kuin mikään edellän mainituista: sivuston indeksointikelpoisuus. Googlen täytyy pystyä käymään sivustosi lävitse roboteillaan, jotta se voidaan sijoittaa hakutuloksiin.

Huolimattomalla toteutuksella jokin verkkosivustosi sivu saattaa olla indeksointikelvoton esim. robots.txt tiedoston, noindex tagin tai canonical tagin johdosta. Voit tarkistaa sivusi indeksoinnin esim. Google Search consolesta tai tällä smallseotools.com työkalulla.

Seuraavaksi tärkein teknistä huomiota vaativa seikka on sivuston latausnopeus. Hitaat ja tahmaiset verkkosivut karkoittavat käyttäjiä ruton lailla. Myös organisaatioisi maine ja uskottavuus voi olla käyttäjän silmissä koetuksella. Voit tarkistaa latausnopeudet esim. tällä Googlen työkalulla tai tällä GTmetrixin työkalulla. Jos viisari värähti punaisen puolelle, niin tässä listaa mahdollisista toimenpiteistä:

• Optimoi kuvat ja muut suurikokoiset ladattavat tiedostot pienemmäksi tai poista kokonaan.
• Karsi turhat ei-käytössä-olevat resurssit, kuten suuret scriptitiedostot, fontit ja kuvakekirjastot koodista. Tämä voi olla haastavaa esim. WordPressin valmisteemoilla tai page-buildereilla kasatuilla sivustoilla.
• Ota pakkaus ja välimuistitus käyttöön sivustolla. WordPressillä homma hoituu esim. LiteSpeed Cache tai WP Fastest Cache lisäosilla.
• Varmista, että sivuston nopeus ei jää verkkosivuja pyörittävästä palvelinraudasta tai vanhasta php-ohjelmointikielen versiosta kiinni. Yleensä kahden euron webhotellit ovat väärä säästökohde.

Tukkoista valmisratkaisuilla ja pagebuildereilla kyllästettyä WordPress sivustoa voi olla silti mahdotonta saada latautumaan nopeasti. Tässäpä taas yksi syy valita WordPress projektin toteuttajaksi luotettava ja hyvämaineinen WP-talo, joka ei tyydy tällaisiin halpoihin ja kyseenalaisiin oikoreitteihin. Ainakin jos verkkonäkyvyyteen on tarkoitus panostaa ja se koetaan tärkeäksi.

Kun Google löytää nopeat sivusi, sen sisältö on tikissä ja käyttökokemus kunnossa, on aika viimeistellä homma muilla teknisillä viilauksilla. Näillä mm. lisätään sivuston linkkien houkuttelevuutta hakutuloksissa sekä parannetaan käyttökokemusta ja luotettavuutta.

Varmista verkkosivuista vastaavalta taholta, että ainakin nämä tekniset asiat ovat sivulla kunnossa:

• SEO-otsikko (title) on asetettu.
• SEO-kuvausteksti (meta-description) on asetettu.
• Sisällöstä löytyvät H1, H2 ja H3 otsikot hierarkisesti.
• Sivun osoite (url) on selkeä ja ytimekäs.
• Sivustolta löytyy XML-sivukartta. Linkitä tämä myös Google Search consoleen.
• Sivustolla on käytössä turvallisempi ja paremmalta näyttävä https-muotoinen osoite. Tämä näkyy useimmissa selaimissa osoiterivin vasemmassa reunassa lukkokuvakkeena.
• Sivustokuvakkeet (favicon) löytyvät. Nämä ovat pieniä kuvakkeita esim. selaimen välilehdellä tai älylaitteen näytöillä.
• Sivu ei sisällä kuolleita linkkejä, jotka johtavat käytöstä poistettuun sisältöön.
• Kuvilla on vaihtoehtoisen alt-tekstit.
• Mahdollinen tuplasisältö on merkitty noindex- tai canonical-tageilla.
• Sivu toimii ja näyttää hyvältä kaikilla laitteilla mobiilista ultraleveisiin näyttöihin.

8 Vinkkiä WordPress verkkosivujen tekniseen hakukoneoptimointiin

Koska sisällöntuotanto ja käyttökokemuksen suunnittelu ovat omia massiivisia aiheitaan, tyydyn tässä antamaan nopeat käytännön vinkit WordPress sivuston hakukoneoptimointiin tekniseltä kantilta.

WordPressin suosituin lisäosa hakukoneoptimointiin on ylivoimaisesti Yoast SEO. Kyseessä on pätevä palikka, vaikka sen mukana ilmestyvät mainokset ja jatkomyynti monia ärsyttääkin. Tarvittaessa voit asentaa Hide SEO Bloat -lisäosan, joka piilottaa mainokset ja tarvittaessa muunkin ylimääräisen romppeen näkyvistä.

Alla olevissa vinkeissä käytössä ovat Yoast SEO ja WP Fastest Cache -lisäosat. Skippaa huoletta asiat, jotka tiedän olevan verkkosivuillasi jo kunnossa.

1. Tarkista WordPress asennuksen eheys

WordPressistä löytyy sisäänrakennettuna kätevä työkalu sivuston ja palvelimen karuimpien virheiden selvittämiseen. Työkaluun löytyy linkki WP hallinnan ohjausnäkymästä, jonka lisäksi voit navigoida sivustosiosoite.fi/wp-admin/site-health.php.

Tämä työkalu varmistaa, että WordPress asennus on ajan tasalla ja toimii tekniikan tasolla oikein. Lisäksi monilla työkalun ilmoittamista virhetilanteista on suora yhteys mm. sivuston latausnopeuksiin ja sitä kautta hakukoneoptimointiin.

Ainakin kriittiset virheet tulisi selvittää. Jos et ole varma muista työkalun antamista parannusehdotuksista, konsultoi luotettavaa WP-taloa tarvittavista toimenpiteistä.

2. Käytä hakukoneystävällisiä url-osoitteita

Hakukoneystävällinen url-osoite kuvaa ytimekkäästi sivun aihetta. Esimerkiksi tämän kirjoituksen url-osoite on muotoa https://sivututka.fi/wordpress-verkkosivujen-hakukoneoptimointi/.

Aloita tarkistamalla WordPressistä osoiterakenne hallintapaneelin kohdasta Asetukset > Osoiterakenne. Vältä ainakin ”Riisuttu” tai ”Numeron mukainen” asetuksia.

Oletuksena WordPress luo sivuille ja artikkeleille url-osoitteet näiden otsikoista. Joskus otsikot venyvät sen verran pitkiksi, että url-osoite kaipaa pätkimistä ollakseen ytimekäs ja hakukoneystävällinen.

WordPressin oletuseditorissa voit vaihtaa url-osoitteen valitsemalla ylhäältä oikealta ”Asiakirja” > Avaa oikealta ”Kestolinkki” välilehti, jonka ”Polkutunnus” kenttään voit vaihtaa uuden osoitteen.

3. Lisää XML-sivukartta Google Search Consoleen

Yoast SEO luo sivukartan automaattisesti. Voi tarkistaa sen toimivuuden osoitteesta sivustosiosoite.fi/sitemap_index.xml.

Jos sinulla ei syystä tai toisesta vielä ole Google Search Consolea käytössä, niin voit ottaa sen käyttöön täältä. XML-sivukartan lisääminen onnistuu esim. näillä Yoastin ohjeilla.

4. Lisää SEO-otsikko ja meta-kuvausteksti

Avaa optimoitavan sivun tai muun sisällön hallintanäkymä ja scrollaa alas kohtaan Yoast SEO.

Klikkaa hakunäkymän esimerkin tekstiä. Lisää sivua muutamalla sanalla ytimekkäästi kuvaava otsikko kohtaan ”SEO title”. Tämä näkyy hakutuloksissa tekstilinkkinä.

Kuvaile sivun sisältöä 1-2 lauseella kohtaan ”Meta description”. Tämä näkyy hakutuloksissa linkin kuvaustekstinä, jos Google arvioi sen tarpeeksi hyvin sisältöä kuvaavaksi.

5. Estä turhien arkistojen indeksointi

WordPress luo artikkeleiden kategorioille, avainsanoille ja muille ryhmittelyille omat arkistosivunsa. Nämä arkistosivut aiheuttavat helposti ongelmia hakukoneoptimointiin tuplasisältöjen kautta, jos niille ei tehdä mitään.

Käväise estämässä ei-toivottujen arkistosivujen näyttäminen hakutuloksissa. Tämä onnistuu Yoastin Search Appearance (sivustosiosoite.fi/wp-admin/admin.php?page=wpseo_titles) asetuksista Taxonomies ja Archives -välilehdiltä.

6. Optimoi otsikot

Googlen algoritmi päättelee sivulla käsiteltävän aiheen mm. otsikoiden perusteella. Tämän vuoksi otsikoita (H1, H2, H3, H4) kannattaa käyttää fiksusti. Muutama vinkki otsikoiden käyttöön:

• Sivulla tulisi olla vain yksi H1 pääotsikko. Huomaa, että monesti tämä luodaan sivulle ilman, että sitä tarvitsee erikseen kirjoittaa editorissa. Yleensä H1 otsikko luodaan automaattisesti sivun otsikosta/nimestä.
• H2, H3, ym. otsikoita voi ja kannattaa käyttää tilanteen mukaan useampia.
• Käytä haluttuja hakusanoja ainakin H1 otsikossa. Hakusanoja kannattaa käyttää myös muissa otsikoissa, mutta vältä keinotekoista hakusanojen viljelemistä.
• Käytä otsikoita hierarkisesti siten, että H1 otsikko on sivuilla järjestyksessä ennen H2 otsikkoa, ensimmäinen H2 on sivuilla ennen ensimmäistä H3 otsikkoa, jne.

WordPressin oletuseditorissa voit lisätä otsikon ylhäältä vasemmalta plus-kuvakkeesta ja valitsemalla ”Otsikko”. Voit myös muuttaa kirjoittamasi tekstikappaleen otsikoksi klikkaamalla tekstiä ja valitsemalla vasemmanpuoleisin kuvake, jonka jälkeen pääset vaihtamaan tekstin muodon otsikoksi.

Oletuksena otsikko on H2 muodossa. Voit vaihtaa otsikon alempitasoiseksi otsikoksi klikkaamalla tekstiä ja valitsemalla ”H2” kuvakkeesta uuden tason.

7. Optimoi kuvat

Voit optimoida kuvan tiedostokoon ennen sivuille lisäämistä esim. tinypng työkalulla. Monesti WordPress kuitenkin luo kuvista omat kuvakoot, jolloin vaihtoehtona on käyttää vaikkapa Smush lisäosaa kuvien automaattiseen optimoimiseen.

Lisää kuville myös vaihtoehtoiset alt-tekstit. Nämä auttavat kertomaan hakukoneille ja avustuslaitteiden kautta mm. näkövammaisille kuvan sisällöstä.

8. Käytä välimuistitusta ja pakkausta

Välimuistitus nopeuttaa sivuston toimintaa luomalla staattiset sivut, jotka ladataan käyttäjille kuormittamatta palvelinta. Gzip pakkaus taas pienentää useiden ladattavien tiedostojen kokoa.

Jos sivustollasi ei ole vielä välimuistitusta käytössä, niin voit asentaa tätä varten esim. WP Fastest Cache -lisäosan alla olevan kuvan asetuksilla.

Yhteenveto

Hakukoneoptimointi on jatkuvassa muutoksessa hakukoneiden algoritmien muuttuessa lähes päivittäin. Trendi on silti ollut jo pitkään selvä: palvele kohderyhmääsi mielenkiintoisella sisällöllä ja moitteettomalla käyttökokemuksella, niin palkinto odottaa ennemmin tai myöhemmin. Varmista myös, että sivusto toimii teknisesti moitteettomasti ja hakukoneiden suosimalla tavalla.

Se miten nopeasti tai helposti palkinto tulee, riippuu paljon myös kilpailusta halutuilla hakusanoilla.

Jos siis tavoitteenasi on hankkia hakutuloksissa hyvin sijoittuvat verkkosivut, niin varmista että:

• Kohderyhmän tarpeet on ymmärretty
• Hakusanatutkimus on tehty
• Sisällöntuottaja osaa luoda mielenkiintoista sisältöä ja verkkoon sopivassa muodossa
• Suunnittelija tietää miten luodaan erinomainen käyttökokemus kohderyhmälle
• Toteutuksessa huomioidaan latausnopeudet ja muut hakukoneoptimoinnin tekniset seikat

Meillä Sivututkallahan nämä hommat sisältyvät luonnollisesti pieniinkin sivustoihin. Hakukoneoptimoitu ja verkkosivuille sopiva sisällöntuotantokin hoituu lisäpalveluna.

Heräsikö aiheesta kommenttia tai kysyttävää? Heitä vastausta twitteriin, facebookiin, linkediniin tai instagramiin.

Olet saanut meiltä tarjouksen verkkosivuprojektista. Kaikki vaikuttaa hyvältä ja uskot, että Sivututkan tyyppeihin voi luottaa. Varsinkin, kun lupasivat täyden tyytyväisyystakuun koko hommalle. Jos projekti menee metsään, niin ainakaan rahoja ei menetä. Hyväksyt tarjouksen ja työt voidaan aloittaa.

Aivan aluksi tutustumme sinuun ja yritykseesi. Tarkoituksena olisi ymmärtää yritystoimintaasi, tavoitteitasi ja asiakkaitasi. Ilman ymmärrystä verkkosivujen toteutus menisi arvailuksi, joten tämä perustustyö on syytä hoitaa huolella.

Homma polkaistaan käyntiin muutaman tunnin kickoff-palaverilla, jossa tapaamme joko etänä tai ihan kasvotusten. Tapaamisessa juttelemme mm. seuraavista asioista:

• Mikä on sivuston tarkoitus, eli mihin sivustolla pyritään?
• Mikä on käytännön tavoite, mitä sivustolla kävijän halutaan tekevän?
• Keitä ovat tärkeimmät asiakkaasi ja kohderyhmäsi?
• Ketkä ovat kovimmat kilpailijasi?
• Miten eroat kilpailijoistasi? Miksi asiakkaasi ostavat juuri sinulta?
• Millaista sisältöä sivustolle tullaan julkaisemaan?
• Millaisia tuntemuksia sivustolla kävijässä halutaan herättää?

Kun olemme samalla aaltopituudella ja meillä on ymmärrys toiminnastasi, kohderyhmästäsi ja tavoitteistasi, niin pääsemme aloittamaan ajatustyön ja suunnittelun.

Vaihe 2: Tyylin ja sisällön suunnittelu (1-2 viikkoa)

Seuraavaksi ryhdymme työstämään sivuston tyyliä ja sisältöä. Tämä vaihe luo pohjan itse sivuston suunnittelulle.

Tyylin suunnittelussa tärkeintä on huomioida brändisi ja kohderyhmäsi. Minkälaisia tuntemuksia halutaan herättää? Sopisiko sivustolle äijämäisen rouhea vai kenties elegantimpi tyyli? Millä tavalla nämä saataisiin parhaiten esitettyä?

Tyylin suunnitteluun kuuluu mm:

• Fonttien valinnat ja typografian, eli fonttien yksityiskohtien suunnittelu
• Värimaailma ja värien käyttö
• Esimerkkejä graafisista ja visuaalisista elementeistä
• Kuvamaailman luonnostelu
• Esimerkkejä ja inspiraatiota muilta sivustoilta

Nämä kaikki koostetaan tyylikokoelmaksi pilvipalvelussa sijaitsevaan kansioon.

Tyylin kanssa samassa rytäkässä suunnitellaan myös sivuston sisältö. Useimmilla verkkosivuilla (teksti)sisältö on kaikkein tärkeimmässä asemassa. Siksi sisällön ja esitystavan suunnittelu on kriittinen osa onnistunutta verkkosivuprojektia.

Sisältöä varten mietitään vastauksia mm. tällaisiin kysymyksiin:

• Millä tavalla yrityksen viesti saadaan parhaiten perille kohderyhmälle?
• Mitä eri sisältöjä sivustolle tulee?
• Mitä eri sivuja tai osioita sivustolle tarvitaan?
• Millä tavalla sisällöt esitetään?

Sisältö koostetaan sisältösuunnitelmaan, joka on ns. rautalankaversio verkkosivuista. Sisältösuunnitelmassa on jo tekstit ja muiden sisältöjen sijainnit paikallaan, ilman tarkempaa visuaalista ilmettä. Eli selkeä esitys mitä sivustolla tullaan sanomaan ja viestimään kävijälle.

Sisältösuunnitelmasta luodaan prototyyppi, jota pääsen selaamaan nettiselaimellasi normaalin verkkosivun tavoin.

Tyylikokoelma ja sisältösuunnitelma esitellään sinulle lyhyessä etätapaamisessa. Pääset halutessasi kommentoimaan ja tekemään suunnitelmiin muutosehdotuksia.

Vaihe 3: Sivuston ulkoasun ja rakenteen suunnittelu (1-3 viikkoa)

Tyylin ja sisällön suunnittelemisen jälkeen on aika käydä sivuston ulkoasun kimppuun. Tyyli ja sisältö yhdistetään saumattomaksi suunnitelmaksi, joka näyttää hyvältä, palvelee tavoitteitasi ja puhuttelee kohderyhmääsi.

Sivuston suunnittelu sisältää paljon muutakin, kuin vain eeppisen hienon ulkoasun luomisen sivustolle. Rakenteen tulee palvella sivuston tavoitetta ja tarkoitusta. Kohderyhmä pitää huomioida. Ydinviesti täytyy tehdä selväksi kävijälle. Tämä kaikki esteettömyys ja mukava käyttökokemus huomioiden.

Sivuston suunnittelussa tehdyt valinnat pohjautuvat pitkälti tutustumisvaiheessa tehtyihin havaintoihin. Jos tavoitteena on esimerkiksi kerätä potentiaalisilta asiakkailta yhteydenottoja lomakkeella, niin sivusto suunnitellaan ohjaamaan kävijää tätä tavoitetta kohti ja sen toteuttaminen kävijälle mahdollisimman helpoksi.

Suunnitelmissa huomioidaan niin desktop- kuin mobiiliversiotkin sivustosta ja saat näistä molemmat suunnitelman nähtäväksi.

Verkkosivut suunnitellaan prototyypiksi, joka toimii jo melko pitkälti valmiin tuotoksen tavoin. Pääset selaamaan sivuston prototyyppiä verkkoselaimellasi ja navigoimaan linkeistä normaalisti. Näin saat mahdollisimman selkeän kuvan, miltä sivusto tulisi näyttämään ja tuntumaan sen valmistuttua.

Vaihe 4: Verkkosivujen toteutus (3-10 viikkoa)

Räätälöityjen suunnitelmien toteutus sujuvaksi ja helppokäyttöiseksi verkkosivustoksi ei onnistu ihan aloittelevalta junior-tason kehittäjältä. Loistavatkin suunnitelmat on helppo ryssiä toteutusvaiheessa, jos koodarilla ei ole homma hanskassa.

WordPress on osalla ihmisistä hieman huonossa maineessa. Yleensä tämä johtuu joidenkin WP-pajojen käyttämistä helpoista ja halvoista ratkaisuista, kuten kaikille-jotain-valmisteemoista, hankalista sisällönrakennustyökaluista tai kymmeniin kolmannen osapuolen lisäosiin nojaavasta tekniikasta. Meillä tällaisia kyseenalaisia ratkaisuja ei käytetä. Oikein rakennettuna WordPress verkkosivusto on helppokäyttöinen, nopea, pitkäikäinen ja vaivattomasti jatkokehitettävä paketti.

Rakennamme sivustosi itse kehittämämme WordPress-aloitusteeman päälle. Riisuttu aloitusteema toimii lähtöpisteenä toteutukselle. Teemassa ei ole mitään ylimääräistä, joten latausajat pysyvät kurissa ja siitä on helppo lähteä sorvaamaan sivustoa suunnitelmien mukaiseksi.

Sivusto toteutetaan testiosoitteeseen, josta pääset sitä itsekin kokeilemaan ennen lopulliseen osoitteeseen julkaisua. Pääset jälleen tekemään muutosehdotuksia sivustolle ja vaikuttamaan lopputulokseen.

Emme kuitenkaan kyselemättä toteuta kaikkia villeimpiä pyyntöjäsi. Asiantuntijana ja kumppaninasi meidän tehtävä on toteuttaa tavoitteitasi auttavat verkkosivut. Jos jokin pyyntösi vaikkapa heikentäisi mielestämme sivuston käyttökokemusta, niin saat tästä palautteen ja perustelut.

Kehittäjämme toteuttaa ja testaa verkkosivusi kaikilla tämän päivän standardeilla ja mausteilla:

• Responsiivinen toteutus: verkkosivut mukautuvat kaikkiin eri laitteisiin.
• Muokkaus tehdään helpoksi: sivuston sisällön muokkaus tehdään sinulle helpoksi erilaisten sisältökenttien, -lohkojen ja -tyyppien avulla.
• Hakukoneoptimointi: sivujen tekninen puoli säädetään siten, että sijoitus hakukoneissa on mahdollisimman hyvä.
• Animointi: sivusto maustetaan ja herätetään eloon pienillä animoinneilla, jotka parantavat käyttökokemusta.
• Latausnopeuden optimointi: kuvat ja muut tiedostot optimoidaan pienikokoiseksi sekä huolehditaan välimuistitus ym. asiat, jotta kävijät eivät tuskastu hitaisiin sivuihin.
• Saavutettavuus: huolehdimme että verkkosivut ovat mukavat käyttää kaikille käyttäjille.
• Analytiikka: sivustolle asennetaan Google Analytics -työkalu, josta saat rahanarvoista tietoa kävijöistä ja sivustosi toiminnasta. Analyticsiin asetetaan tavoitteet, joista pääset seuraamaan kuinka hyvin sivusto pärjää sille asetetussa tehtävässään.

Teknisemmille veijareille kehitystyössämme käytettyjä työkaluja ja työtapoja on avattu tässä kirjoituksessa.

Vaihe 5: Viimeistely ja julkaisu (1 päivä)

Sivusto on nyt rakennettu testiosoitteeseen ja kaikki ovat siihen tyytyväisiä. Pidämme sinulle käyttökoulutuksen sivuston muokkaukseen ja sisällönhallintaan, jonka lisäksi saat myös kuvalliset käyttöohjeet.

Kun saamme sinulta vihreää valoa julkaisemiselle, niin siirrämme uutuuttaan kiiltävän sivustosi ihmisten ihasteltavaksi lopulliseen osoitteeseensa. Samalla teemme vielä viimeiset näkymättömämmät viilaukset mm. hakukoneoptimointiin ja latausnopeuksiin.

Aika avata shampanjapullo, projekti on valmis! Vai onko?

Vaihe 6: Ylläpito ja sisällöntuotanto

Vaikka verkkosivusi on nyt netissä, monesti työ on vasta alussa. Usein varsinkin sisältöpainotteinen WordPress sivusto toimii parhaiten silloin, kun sinne julkaistaan säännöllisesti uutta sisältöä esimerkiksi blogikirjoitusten, vinkkien, asiakastarinoiden, tms. kävijöitä kiinnostavan kamppeen muodossa.

Myös sivuston WordPress-päivitykset tulisi hoitaa tasaisin väliajoin, jotta pahat hakkerit eivät pääse yllättämään.

Olemme tukenasi ja turvanasi niin paljon tai vähän kuin tarvitset. Käyttöohjeiden ja koulutuksen lisäksi ohjeistamme tarvittaessa kädestä pitäen. Halutessasi voit pyytää meitä tekemään päivitykset ja mahdolliset muutostyöt puolestasi.

Kuten ehkä laitoit merkille, niin yrityksen verkkosivujen tekeminen ei ole ihan simppeli savotta. Ainakaan silloin, kun halutaan tehdä priimaa ja ajatuksella mietittyä jälkeä.

Jos haluat perussivustoa parempia tuloksia ja nettinäkyvyyttä, niin ota ihmeessä yhteyttä ja pyydä tarjous.

Miksi työtapojen kehittäminen on tärkeää?

1. Webbi ja WordPress kehittyvät niin kovaa tahtia, että paikalleen jämähtäminen tarkoittaisi hitaasti verkkosivupajojen hautuumaalle siirtymistä.
2. Työteho ja kehitystyön nopeus paranee, joka tarkoittaa asiakkaalle nopeampia toimituksia ja järkevämpää hintaa. Omatkin katteet paranevat.
3. Kehitystyö on mukavampaa, kun hommat luistaa ja tylsät työt automatisoidaan. Kehittäjän mielenterveys kohenee.

Työtapojen kehittäminen tulisikin olla meidän koodipajojen prioriteettien kärkikahinoissa. Kehityksen kuuluu kehittyä.

Kehitysympäristöt ja kehityksen kulku Sivututkalla

Moderniin WP kehitykseen tuntuu olevat jo vakiintunut kolmen eri kehitysympäristön käyttäminen:

1. lokaali (dev)
2. näyttöpalvelimen kehitysympäristö (staging)
3. tuotanto (production).

Meilläkin käytetään tätä hyväksi havaittua kehityspolkua. Käytännössä homma menee näin:

1. Kehittäjät työstävät sivustoa lokaalisti omilla laitteillaan
2. Työstettävät tiedostot työnnetään kehittäjille jaettuun GitHub repositorioon, josta tavara kopioidaan automaattisesti näyttöpalvelimelle jokaisen pushin jälkeen.
3. Kun tulee aika julkaista sivusto, niin se kopioidaan näyttöpalvelimelta tuotantoon.

Jos (kun) tuotannossa olevaan sivustoon tarvitsee tehdä uusia toimintoja tai muuta jatkokehitystä, niin ensisijaisesti tuotannosta tehdään kopio lokaaliin. Lokaalista sivusto taas työnnetään stagingiin ja hyväksynnän jälkeen tuotantoon. Pienempien sivustojen kevyet koodimuutokset voi tehdään suoraan tuotantoon, aluksi vain kirjautuneiden WP käyttäjien nähtäville.

Lokaali kehitysympäristö ja projektin aloittaminen

Lokaaliin kehitykseen meillä käytetään Local by Flywheel -työkalua. MAMPiin tai Vagrantiin verrattuna Local:n WP ympäristö on ihanan helppo ja nopea pystyttää.

Ensimmäisellä asennuskerralla luodaan WordPressistä malliasennus. Tämän jälkeen uuden WP-projektin voi pystyttää samoilla asetuksilla ja sisällöllä parin napin klikkauksella. Helppoa ja hauskaa!

Jaettu tietokanta

WordPress yhteisössä kehityksen ikuisuuskysymyksenä tuntuu olevan tietokannan kanssa säätäminen. Mitä tehdä tietokannan kanssa, kun näyttöpalvelimella ja jokaisella kehittäjällä on omat WordPress asennuksensa?

Monet ovat ratkaisseet ongelman manuaalisilla tietokannan import & export härveleillä. Aika kuormittavaa ja virhealtista touhua, jos useampi kehittäjä jumppailee tietokantoja pitkin työpäivää.

Meillä homma on ratkaistu jaetulla tietokannalla. Staging- eli näyttöympäristön tietokanta on jaettu kaikille projektin kehittäjille. Tällöin muutokset tietokantaan näkyvät kehittäjien lokaaliympäristöissä reaaliajassa. Ja kaikki tämä ilman yhtäkään import & export säätöä.

Tämä tarkoittaa, että kehittäjät voivat vaikkapa lisäillä ACF kenttiä sivuille samaan aikaan, kun suunnittelija hakkaa sisältöjä sisään. Melkoista hunajaa!

Suorat yhteydet tietokantaan ovat tuoteturvasyistä estetty, joten homma vaatii pientä palomuurin säätämistä. Tuotannon tietokanta on luonnollisesti erillään kehitys- ja näyttöympäristöistä.

Automatisointi

Yksi kehittäjän monista murheista on usein toistuvien ja tylsien tehtävien jatkuva suorittaminen. Onneksi nykyään useat tällaiset tehtävät voi webbikehityksessä automatisoida ns. Task runnereille.

Meillä Gulp.js task runneri hoitaa mm. tällaiset asiat automaattisesti:

• Sass prosessointi ja muuntaminen CSS-tiedostoiksi
• CSS-prefixien lisääminen vanhempia selaimia varten
• Tiedostojen yhdistäminen ja minifiointi
• Sivuston uudelleenlataus selaimessa tiedoston tallentamisen jälkeen

Kehitystyön nopeuttamisen lisäksi automatisoinnin tavoitteena on säästää kehittäjän mielenterveyttä. Varsinkin manuaalinen sivuston refreshaaminen jokaisen pikku muutoksen jälkeen käy pidemmän päälle raskaaksi, joka saadaan automatisoinnilla fiksattua.

Sass

CSS tyylien kirjoittaminen ei ole kovin monen webbikehittäjän lempipuuhaa. Sass laajennos tekee hommasta kuitenkin mukavampaa jatkamalla CSS:n toiminnallisuutta kaivattuun suuntaan.

Syntactically Awesome Style Sheets:lla hoituvat mm:

• Muuttujien käyttäminen
• Tyylien ”nesting”, eli selektorit voidaan laittaa sisäkkäin, jolloin ei tarvitse kirjoittaa jokaista child-selektoria erikseen
• Tyylitiedostojen jakaminen loogisiin osiin 5000-rivisten CSS-tiedostojen sijaan
• Laskutoimitukset ja muu perus ohjelmointilogiikka

Sass on siis CSS supervoimilla boostattuna. Sass tuntuu olevan ainakin WP kehityksessä melko standardisoitunut härveli ja sitä kautta myös meillä kovalla käytöllä.

Aloitusteema

Meillä ei koskaan tunkata täyteen ”ominaisuuksia” ahdettuja ja jäykkiä valmisteemoja. Jokaiseen WP projektiin käytetään itse kehittämäämme aloitusteemaa, joka toimii lähtöpisteenä sivuston toteutukselle.

Aloitusteemamme pohjautuu suosittuun Underscores startteriin, joka on WordPressinkin taustalla vaikuttavan Automattic-firman kehittämä pohjateema. Underscoresia on muokattu meille sopivaksi ja turboahdettu automatisoinnilla.

Sivututkan aloitusteemassa ei ole mitään ylimääräistä, vaan sen tarkoituksena on toimia parhaana mahdollisena ja minimalistisena lähtöpisteenä erilaisille WP sivustoille. Tällä tavalla koodi on clutter-vapaata ja perusjutut paikallaan.

Kun lähtöpisteessä on työkalut ja WP säädöt valmiiksi paikallaan, niin startteri säästää ainakin 100 tuntia kehitystyötä projektilta nollista lähtemiseen verrattuna.

Aloitusteema on tietysti jatkuvan kehityksen kohteena. Toimintoja viilaillaan ja uusia tekniikoita otetaan käyttöön vanhojen poistuessa. Sivututka Starter 1.0 on tarkoitus laittaa avoimen lähdekoodin periaatteella julkiseksi WordPress yhteisön ihmeteltäväksi ja käytettäväksi tässä tämän vuoden aikana.

Versionhallinta, Git ja GitHub

Käytämme versionhallintaan Gitiä ja repositoriot säilötään GitHubiin. Asiakasprojektit julkaistaan private repositorioon, jonne on pääsy vain Sivututkan tiimillä.

Hyvien käytäntöjen mukaisesti committeja tehdään tiheään ja ne pushataan pienienkin toiminnallisuuksien valmistuttua. Jos projektia työstää useampi kehittäjä, niin jokaisella jantterilla on oma branchinsä.

Uusien toiminnallisuuksien valmistuttua kehittäjät puskevat koodin GitHubin remote repositorioon. Sieltä tiedostot taas työnnetään automaattisesti näyttöpalvelimelle stagingiin, continuous deployment -periaatteen mukaisesti.

Työkalut ja lisäosat

Kehittäjä saa meillä valita itse editorinsa. Itse suosin VS Codea, joka on myös tämän hetken suosituin kapistus. Indenttinä käytetään tabia.

WordPress kehityksessä pyritään lähtökohtaisesti välttämään ylimääräisten lisäosien käyttöä. Yksinkertaiset toiminnallisuudet rakennetaan itse. Moniin tehtäviin löytyy kuitenkin hyväksi todettuja valmiita ratkaisuja, joilla vältetään pyörän uudelleen keksimisen vaiva:

• Polylang: jos kieliä
• WooCommerce: jos verkkokauppa
• Advanced Custom Fields Pro: sisältökenttiin ja modulaarisuuteen, käytössä lähes jokaisessa projektissa
• Yoast SEO: useimmille sivustoille SEO hallintaan
• Gravity Forms: jos lomakkeita
• Mailgun: lomakkeiden viestien välittämiseen
• WP Fastest Cache: välimuistitukseen

Tapauskohtaisesti voidaan harkita myös muita lisäosia, kunhan ne ovat hyvin arvosteltuja, suosittuja ja luotettavan tahon ylläpitämiä.

Nykyisestä poikkeustilanteesta huolimatta meillä on ensimmäinen rekrytointi suunnitteilla. Jos siis WordPress kehitystapamme kolahtaa ja Sivututkalaisuus sytyttää, niin skarppina kaverina voit heittää kysymystä tai vaikkapa raapustaa avoimen hakemuksen jo ennen rekrykampanjan avaamista: info@sivututka.fi. Nyt olisi tilaisuutesi päästä mukaan jo kasvun alkumetreillä!

Kirjoita blogitekstit ja ajankohtaista –artikkelit Wordillä tai vastaavalla tekstinkäsittelyohjelmalla. Jos kirjoitat pitkää ja aikaa vievää tekstiä, niin tähän tarkoitukseen tehty työkalu on paras vaihtoehto. Tämä pätee kaikkiin selainta käyttäviin alustoihin. Jos nettiyhteys katkeaa, niin työsi saattaa kadota. Lisäksi oikeinkirjoituksen tarkistus ja monet muut toiminnot ovat tarkempia Wordissä.

2) Liitä teksti muotoilemattomana WordPress editoriin

Älä liitä tekstiä suoraan WordPressin editoriin Wordistä tai muusta ohjelmasta. Tämä saattaa lisätä ylimääräisiä tageja ja koodia, joka voi olla ristiriidassa sivujen tyylin kanssa tai aiheuttaa omituista muotoilua tekstissä. Käytä aina ”Liitä muotoilemattomana” painiketta WordPressin työkaluriviltä, joka lisää tekstin editoriin täysin ilman muotoilua.

Liittämisen jälkeen lisää tekstiin tarvittavat otsikot, listat, muotoilut ja kuvat WordPressin työkalurivin avulla.

3) Avaa linkit uuteen välilehteen

Sivuston ulkopuoliset linkit tulisi aina avautua uuteen välilehteen selaimessa. Kun lisäät linkkejä tekstiin, niin varmista että niissä on ”Avaa linkki uuteen välilehteen” asetus valittuna. Tämä on tärkeää, jotta kävijät tai mahdolliset asiakkaasi pysyisivät sinun sivullasi. Kun linkit avautuvat uuteen välilehteen, sinun sivustosi pysyy avoinna alkuperäisessä välilehdessä ja käyttäjä palaa sinun sivustollesi linkin katsottuaan.

Tämä toiminto löytyy ”Lisää tai muokkaa linkkiä” napista:

1. Maalaa linkitettävä sana hiirellä, klikkaa ”Lisää tai muokkaa linkkiä” nappia
2. Klikkaa oikean reunan hammasratasnappia
3. Lisää url (linkitettävä nettiosoite)
4. Laita rasti ruutuun ”Avaa linkki uuteen välilehteen”
5. Lopuksi klikkaa ”Lisää linkki” nappia.

4) Kuvakoot

Suuret ja korkealaatuiset kuvat saattavat hidastaa sivujen nopeutta paljonkin ja sitä kautta samalla myös googlen sijoituksia. Todella suurikokoisia ja tarkkoja kuvia harvoin tarvitsee nettisivuilla. Kuvan kokoa ja laatua hieman pienentämällä kuvan tiedostokokoa saadaan todella paljon alemmaksi.

Kuvien kokoa pystytään pienentämään monilla kuvanmuokkausohjelmistoilla, kuten Photoshopilla. Koon pienennykseen ja optimoimiseen löytyy myös WordPress lisäosia, kuten WP Smush or Imsanity.

5) Nimeä kuvatiedostot

Nimeä kuvat ja tiedostot ennen kuin lataat ne WordPressin mediakirjastoon. Eli esimerkiksi nimeä ”DSC0136” kuvatiedostot oletus tiedostonimestä niitä oikeasti kuvaaviin nimiin. Jos kuvassa on auto, niin tiedostonimi voisi olla ”etusivu-banner-auto”.

Tämä auttaa Googlea indeksoimaan kuvat oikein. Kuvat myös löytyvät jatkossa helpommin mm. WordPressin hakutyökalulla.

6) Ylimääräiset asetukset piiloon WordPressin näyttöasetuksilla

WordPressin hallintapaneelista löytyy oikeasta yläkulmasta ”Näyttöasetukset” työkalu. Tämän avulla voit piilottaa ylimääräisiä hallintatyökaluja, jotka ovat ehkä turhaankin näkyvillä. Samoin pystyt myös ottamaan käyttöön työkaluja, jotka ovat piilotettuina.