Persoonat edustavat tapoja, joilla ihmiset tekevät ostoksia. Tämä artikkeli esittelee neljä persoonaa, joilla pääsee jo aloittamaan myyntisivujen konversio-optimoinnin.

Neljä perustavaa ostajan persoonaa

Bryan ja Jeffrey Eisenberg ovat esittäneet 4 peruspersoonaa, jotka jaetaan päätöksenteon järki-/tunneperäisyyden ja sen nopeuden mukaan:

	Järki	Tunne
Nopea	kilpailullinen	spontaani
Hidas	järjestelmällinen	humanistinen

Kilpailullinen (competitive)

Kilpailullinen ostaja tekee ostopäätöksen nopeasti mutta järkiperustein.

Hän on vaativa ja kriittinen asiakas, joka haluaa tietää heti aluksi hyödyt sekä edut kilpailijoihin verrattuna. Hän haluaa nämä tiedot lyhyesti ja valmiiksi pureskeltuina. Miksi hän ostaisi juuri teiltä?

Kilpailullinen haluaa ostaa myyjältä, joka vaikuttaa luotettavalta ja jolla on “homma hanskassa”. Perustellusti paras vetoaa kilpailulliseen.

Näin myyt kilpailulliselle:

• Listaa tuotteen hyödyt tiiviisti heti myyntisivun alussa.
• Esitä näkyvästi uniikki myyntiargumentti (unique value proposition).
• Kerro miten tuotteesi on parempi kuin kilpailijoiden tuotteet.
• Siteeraa vertailuja, joiden mukaan tuotteesi on paras (jossakin).
• Korosta hyötyjä joka käänteessä: esitä ominaisuudetkin hyötyinä.
• Luo uskottava kuva yrityksestäsi designilla, referensseillä yms.

Järjestelmällinen (methodical)

Järjestelmällinen ostaja valitsee tuotteen, joka vaikuttaa ominaisuuksiltaan sopivimmalta.

Nämä ostajat suhtautuvat skeptisesti myyntiargumentteihin. Niiden sijaan heitä kiinnostavat speksit, todisteet ja “pieni printti”. He ovat valmiita käyttämään paljon aikaa tuotteiden tutkimiseen ja vertailuun.

Myyjän kanssa kommunikointi on järjestelmälliselle usein pelkkä transaktio, jossa raha vaihdetaan tuotteeseen. Kaiken muun he selvittävät itsenäisesti saatavilla olevan tiedon avulla. Siinä he käyttävät ahkerasti myös kolmannen osapuolen sivustoja.

Näin saat järjestelmällisen ostamaan:

• Listaa kaikki vähänkin olennaiset ominaisuudet.
• Korosta kilpailijoihin nähden ylivoimaisia ominaisuuksia.
• Vertaile eri mallien ominaisuuksia taulukossa.
• Selitä palveluprosessi (tai miten tuote toimii).
• Linkitä puolueettomiin lähteisiin, jotka kertovat tuotteesi laadusta.
• Älä pihtaa tietoa: järjestelmällinen ei ota yhteyttä kysyäkseen.

Spontaani (spontaneus)

Spontaani persoona on kärsimätön impulssiostaja, joka hakee elämyksiä ja elämänlaatua – mahdollisimman helposti.

Spontaanit ostajat ovat toiminnallisia. He eivät jaksa lukea sivujen tekstejä kunnolla, vaan he silmäilevät nopeasti vastauksia kysymyksiinsä.

Spontaaneja varten kannattaa aina esittää jotakin, jota he voivat konkreettisesti tehdä. Tällaista toimintaa voi olla esimerkiksi linkkien klikkaaminen tai tuotteen kustomointi mieleiseksi optioita valitsemalla.

Näin saat spontaanin toimimaan:

• Käytä selkeitä ja näkyviä toimintakehotteita – jo sivun alussa.
• Tee ostoprosessi mahdollisimman helpoksi ja karsi siitä kaikki turha.
• Luo kuvilla ja videoilla mielikuvia siitä fiiliksestä, jonka tuote tuo.
• Painota nopeaa toimitusta ja palvelua.
• Tarjoa “Auta minua valitsemaan” -toiminto.
• Kokeile rahat takaisin -takuita ja määräaikaisia tarjouksia.

Humanistinen (humanistic)

Humanistisia ostajia kiinnostavat tuotteen jo ostaneet asiakkaat ja näiden kokemukset tuotteesta.

Humanisti on kärsivällinen, kuten järjestelmällinen, ja häntäkin etovat hypetys ja markkinointikliseet.

Hän haluaa tietää myyjäyrityksen arvoista ja henkilökunnasta. Keitä olette ja voiko teihin luottaa?

Humanistiset käyttäjät usein ostavat muiden puolesta tai suosittelevat näille tuotteita.

Näin saat humanistisesta asiakkaasi:

• Siteeraa testimoniaaleja tyytyväisiltä asiakkailta.
• Kerro asiakkaiden määrä ja millaisia asiakkaat ovat.
• Salli julkinen tuotearviointi (verkkokaupassa).
• Kerro tarina siitä miten tuote tai yritys sai alkunsa.
• Laadi kunnollinen “tietoa meistä” -sivu.
• Esittele työntekijöitäsi sivustolla.

Persoonat ovat kuvitteellisia henkilöitä,
jotka edustavat ostajia

Persoonat ovat fiktiivisiä “henkilöitä”, jotka edustavat erilaisia tapoja käyttää sivustoa ja ostaa. Niitä ei pidä sekoittaa yleisiin stereotyyppeihin ihmisistä.

Mieti persoonat kävijöidesi perusteella

Ostoprosessit ovat erilaisia eri verkkopalveluissa eivätkä ne typisty 4 peruspersoonaan.  Persoonat, normaalisti 2-7 sellaista, kannattaakin miettiä oman sivuston ja sen kävijöiden pohjalta.

Käyttäjäkyselyt, asiakaspalautteet, demografinen data ja kävijätilastot kannattaa huomioida persoonien kehittelyssä. Lähtökohtana on syytä pitää todelliset sivuston kävijät ja asiakkaat – eivät sellaiset joita toivottaisiin.

Mieti esimerkiksi seuraavia kysymyksiä, kun luonnostelet persoonia:

• hintatietoisuus
• kiireisyys
• palvelun tarve
• halu tehdä vaikutus pomoon/puolisoon/työtovereihin
• alan tuntemus
• uskollisuus merkeille, tuotteille ja yrityksille
• mukavuudenhaluisuus
• nettitaidot
• mieluisin yhteydenottotapa (lomake/puhelin/sähköposti/myymälä)
• aiempi käyttökokemus
• tuotteen käyttötarkoitus
• turhautumisen aiheet.

Persoona on käytännössä 1-2 sivun (A4) tarinamainen kuvaus, jossa esitellään kuvitteellinen henkilö: missä hän on töissä, mitä hän tekee päivisin, mitä hän tavoittelee jne. Persoona on onnistunut, jos kuvaus tuo mieleen konkreettisia asiakkaita niille, jotka toimivat asiakasrajapinnassa (myyjät, asiakaspalvelijat yms.).

Peukalosääntöjä persoonien huomiointiin

Sama myyntisivu voi huomioida 4 peruspersoonaa näin:

• Tiivistä hyödyt alussa kilpailullisille.
• Kerro tarkat speksit sivun lopussa tai linkitettynä omalla sivullaan järjestelmällisiä varten.
• Anna erottuva toimintamahdollisuus ja -kehote sivun yläosassa spontaaneille. Käytä 3d-nappulaa, jossa lukee “Pyydä tarjous”, “Kokeile heti”, “Tilaa näyte” tms.
• Esitä testimoniaaleja ja linkitä tarinoihin esimerkiksi oikeassa sivupalkissa humanistisia varten. Myös “Yli 100 000 tyytyväistä käyttäjää” tms. toimii paremman puutteessa.

Tässä on yksi mahdollinen tapa laatia myynti- tai laskeutumissivu, jotta se tehoaisi eri persooniin:

Lisää aiheesta

• An introduction to personas and how to create them
• Get In Your Customers’ Heads: Creating Great Personas
• Making Personas More Powerful: Details to Drive Strategic and Tactical Design
• Dishing Out What the Customer Really Wants
• Cooperin persoona-aiheiset artikkelit (Alan Cooper loi persoona-käsitteen).

Tämä opas esittelee hakukoneoptimoinnin keskeisimmät menetelmät sekä yleisimmät virheet, jotka heikentävät hakukonenäkyvyyttä.

Oppaan sisällys

Klikkaa alta linkkiä, niin siirryt vastaavaan kohtaan tällä sivulla:

• Mitä hakukoneoptimointi on?
• Tavoiteltavat hakukonesijoitukset
• Avainsanatutkimus: millä hakusanoilla halutaan sijoittua?
• Sivun sisäinen hakukoneoptimointi
  • Title-elementti
  • Meta-description
  • Otsikot
  • Leipäteksti
  • Kuvien alt-attribuutit
  • Lihavointi – silmäilyn avuksi
    
  • Meta-keywords-tagi – jäänne mennneisyydestä
• Sivuston ominaisuudet
  • Sivuston ikä
  • Sivuston aihepiiri
• Domain ja URI
  • Avainsana domain-nimessä
  • Avainsana URI:ssa
  • Parametrit URI:ssa
• Serveri ja tietoliikenneyhteys
  • Palvelimen sijainti
  • Uptime eli toimintavarmuus
• Linkit muilta sivustoilta
  • Sivulle osoittavien linkkien ankkuriteksti
  • Linkin lähellä oleva teksti
  • Linkittävän sivun linkkisuosio
  • Linkittävän sivun teema
  • Koko sivustoon kohdistuvat linkit
  • Luonnollinen linkkiprofiili
• Sivuston sisäiset linkit
  • Sivuston sisäinen linkkisuosio
  • Linkkisuosion kanavointi
• Kävijöitä aktivoiva hakukoneoptimointi
  • Bounce-rate eli välitön poistumisprosentti
  • CTR eli hakutulosten napsautusten prosentti
  • Hakutulosten personointi
• Tyypillisiä ongelmia hakukoneiden kanssa
  • Sama title-teksti joka sivulla
  • Sama URI joka sivulla: kehykset, Flash ja AJAX
  • Flash- tai kuvilla esitetty teksti
  • Piiloteksti ja piilotetut linkit
  • Tuplasisältö
  • Liian samankaltaiset sivut
  • Epäolennaiset sivut hakukoneiden indekseissä
  • Huonoon ympäristöön linkittäminen
  • Sisällön jakaminen useille verkkotunnuksille ja alidomaineille
  • Muuttuvat ja vanhenevat URI:t
  • Monta URI:a samalle sivulle (canonicalization problems)
  • Liian paljon asioita samalla sivulla
  • Vääränlaiset uudelleenohjaukset
• Tämän oppaan käyttöohje

Mitä hakukoneoptimointi on?

Hakukoneoptimointi on suomennos sanoista search engine optimization (SEO). Käytännössä se tarkoittaa

1. web-sivujen sijoitusten nostamista hakukoneiden hakutuloksissa
2. hakutulosten houkuttelevuuden lisäämistä, jolloin useampi hakija klikkaa niitä.

Hakukonesijoituksia parannetaan siten, että valitut sivut löytyvät halutuilla hakusanoilla, joiden arvioidaan tuovan arvokkaita kävijöitä.

Lisäksi hakukoneoptimointi tekee koko sivuston systemaattisesti hakukoneystävälliseksi, jolloin sen sivut sijoittuvat paremmin myös odottamattomilla hakusanojen yhdistelmillä eli ns. pitkän hännän hakulauseilla.

Suurin osa hakukoneoptimoinnista on käytännössä Googlea varten optimointia, koska Google on länsimaissa ylivoimaisesti suosituin ja toistaiseksi kehittynein hakukone. Tämä näkyy vahvasti tässäkin oppaassa. Onneksi muutkin nykyaikaiset hakukoneet arvostavat suurin piirtein samoja asioita.

Tavoiteltavat hakukonesijoitukset

Hakutulosten sijat 1.-3. keräävät suurimman osan hakijoiden klikkauksista. Näitä sijoituksia voi kutsua erinomaisiksi.

Sijat 4.-6. ovat hyviä ja sijat 7.-10. tyydyttäviä. Tämän huonompia sijoituksia ei hakukoneoptimoinnilla kannata tavoitella, sillä vain pieni osa hakijoista jatkaa tulosten selaamista toisella hakutulossivulla (sijat 11.-20.).

Avainsanatutkimus: millä hakusanoilla halutaan sijoittua?

Oikeiden avainsanojen selvittäminen kuuluu yleensä hakukoneoptimoinnin ensimmäisiin toimiin.

Avainsanat ovat sellaisia tärkeitä hakusanoja, joilla pyritään saamaan sivuston omistajan päämääriä palvelevia kävijöitä hakukoneista.

Sivuston omistajan ja siten myös hakukoneoptimoinnin päämääriä voivat olla esimerkiksi

• uusien asiakkaiden hankkiminen
• verkkokaupan myynnin lisääminen
• tärkeän tiedon levittäminen
• vahvempi brändi
• mainostulojen kasvattaminen.

Päämäärät sanelevat sen, millaisia ovat hyvät avainsanat. Aina nämä eivät liity täysin kiinteästi sivuston pääaiheeseen: esimerkiksi jonkun liikuntalajin tunteja kauppaavan sivuston kannattaa tulla löydetyksi, kun hakukoneella haetaan hoitokeinoja vaivaan, johon kyseinen laji auttaa.

Hyvät avainsanat eivät tähtää vain kävijöiden määrän kasvattamiseen: ne voivat kohdistaa sivut kiinnostuneemmille tai ostohaluisemmille kävijöille, joita on vähemmän kuin massaliikennettä. Tarkka kohdistus on olennaista erityisesti b2b-yrityksille, joille heikot liidit ovat silkkaa ajanhukkaa.

Ilmaiset avainsanatyökalut -artikkelista löydät työkaluja avainsanatutkimukseen.

Sivun sisäinen hakukoneoptimointi

Avainsanojen sijoittelu web-sivun HTML-elementteihin on kaikkein perinteisintä hakukoneoptimointia, englanniksi on-page SEO.

Title-elementti

Title-elementti (tai “title-tagi”) on tärkeimpiä sivun sisäisiä tekijöitä hakukoneoptimoinnissa.

Sen sisältämä teksti esiintyy hakutuloksissa klikattavana linkkinä ja se näkyy myös yläpalkissa useimmissa nettiselaimissa.

Tämän sivun title-tagi näkyy XHTML-lähdekoodissa tällaisena:

<title>Hakukoneoptimointi lyhyesti | Nettibisnes.Info</title>

Tagin sisällön suhteen pätevät seuraavat suositukset:

• Järjestä joka sivulle yksilöllinen title-teksti.
• Sijoita titleen 1-3 keskeistä avainsanaa, joilla sivun halutaan löytyvän.
• Ujuta avainsana(t) osaksi luontevaa ilmausta: hyvä title-teksti ei koostu listatuista avainsanoista.
• Laita tärkein avainsana alkuun, niin se tulee huomatuksi hakutuloksia silmäiltäessä ja hakutulos vaikuttaa olennaisemmalta.
• Pidä teksti ytimekkäänä, jotta se näkyy hakutuloksissa kokonaan ja houkuttelee klikkaamaan itseään. Google näyttää tekstistä 65-70 ensimmäistä merkkiä (välilyönnit mukaanluettuna).
• Sijoita sivuston/yrityksen nimi tekstin loppuun, pysty- tai ajatusviivalla erotettuna. Jos sivustolla on kuitenkin erityisen vahva brändi tai sellaista pyritään rakentamaan, sijoita nimi title-tagin alkuun.
• Käytä joskus toimintakehotetta vihjaamaan, mitä sivulla voi tehdä: “tilaa”, “kokeile”, “hanki”, “lähetä”, “katso” tms.
• Sisällytä avainsana välillä kahdessa taivutusmuodossa. Google tunnistaa avainsanan taivutusmuodon ja näyttää senkin lihavoituna, mikä kasvattaa relevanssia hakijan silmissä.

Meta-description

Description-meta-tagin sisältö voi näkyä hakutuloksessa linkin alla olevana kuvauksena. Google ratkaisee joka hakulauseelle erikseen, näytetäänkö tuloksissa meta-description vai otteita sivun tekstistä (tai joku näiden yhdistelmä).

Hakutuloksessa näkyvä meta-description tuotetaan sivun XHTML-lähdekoodissa näin:

<meta name="description" content="Ilmainen opas hakukoneoptimointiin: tiedätkö nämä 25 taktiikkaa tai teetkö nämä 13 yleistä virhettä, jotka hakukoneoptimointi korjaa? Lue heti ja opi!" />

Sivukohtainen description kannattaa usein kirjoittaa, koska sen avulla voidaan kontrolloida hakutuloksissa näkyvää tekstiä.

Houkutteleva description-teksti hakutuloksessa saa hakijan klikkaamaan tulosta todennäköisemmin. Tekstillä voi myös vaikuttaa mielikuviin sivulla myytävästä tuotteesta tai siellä olevan sisällön kiinnostavuudesta.

Meta-description-tekstissä kannattaa pyrkiä seuraavaan:

• Pidä pituus korkeintaan 156 merkissä: silloin description mahtuu kokonaan Googlen hakutulokseen.
• Sisällytä tekstiin tärkeitä avainsanoja, joilla haettaessa kuvauksen halutaan näkyvän. Hakusanat näkyvät näytettävässä kuvauksessa lihavoituna.
• Anna informatiivisia vinkkejä sisällöstä, jotta hakutulos saisi hakijan “vainuamaan” kiinnostavaa informaatiota. Vältä yleisluontoista jaaritusta.
• Kirjoita luontevasti, jotta hakutulosta olisi houkuttelevaa klikata. Älä listaa avainsanoja.

Jos sivulla on paljon tekstiä ja useimmat kävijät saapuvat sekalaisilla hakusanojen yhdistelmillä (eli pitkän hännän hakusanoilla), meta-description kannattaa jättää pois: silloin hakukoneen itse valitsemat otteet toimivat todennäköisesti paremmin.

Otsikot

Käytä teksteissä avainsanoja sisältäviä pää- ja väliotsikoita, jotka myös herättävät ja ylläpitävät lukijan mielenkiintoa. Pääotsikko on hyvän suunnittelutavan mukaisesti syytä sijoittaa h1-elementtiin ja alaotsikot järjestelmällisesti h2, …, h6 -elementteihin.

Sivun otsikko näyttäisi siis (X)HTML-lähdekoodissa tältä:

<h1>Hakukoneoptimointi lyhyesti</h1>

Hakukoneoptimoinnin kannalta tärkeintä on kuitenkin otsikoiden sijainti ja muotoilu – ei lähdekoodissa oleva elementti. Kehittyneet hakukoneet osaavat näet lukea CSS-tyylimäärityksiä ja päättelevät niiden perusteella, mitkä ovat tärkeitä otsikoita, ja antavat arvoa niissä oleville hakusanoille.

Sijoita tärkeä avainsana otsikon alkuun. Kävijät silmäilevät sivua siten että tekstin vasen laita saa eniten huomiota. Otsikot jotka paljastavat tekstin sisältöä jo ensimmäisessä sanassa ovat tämän vuoksi tehokkaita kiinnostuksen herättäjiä.

Avainsanan sijasta otsikon alussa voi käyttää myös “voimasanoja” (power words) kuten “salainen”, “järkyttävä”, “perusteellinen”, “tieteellinen” ja “ilmainen”. Nämä herättävät ihmisissä tunteita tai uteliaisuutta, mikä voi johtaa lukemiseen ja linkittämiseen.

Leipäteksti

Sivulla oleva teksti on title-elementin ohella tärkeimpiä sivun sisäisiä tekijöitä hakukoneoptimoinnissa. Noudata sen suhteen seuraavia periaatteita:

• Toteuta normaali teksti HTML-kuvauskielen p-elementeillä mutta myös täplitetyillä ja numeroiduilla listoilla (eli ul- ja ol-elementeillä) silloin kun asioita voidaan esittää luettelomuodossa. Listojen käyttö helpottaa silmäilyä ja lukemista tietokoneen näytöltä.
• Avainsanoja kannattaa käyttää kohtuudella koko tekstin matkalla alusta loppuun, mutta erityisesti aivan tekstin alussa.
• Laita avainsanat ainakin välillä lauseiden ja tagien sisällön alkuun. Näin varaudut siihen mahdollisuuteen, että hakukone soveltaa tilastollisia säännönmukaisuuksia tulkitessaan sanojen olennaisuutta.
• Avainsanatiheys kannattaa pitää alle 5 prosentissa (kaikista sanoista), sillä muuten Google voi rangaista sivua ylioptimoinnista. 5 % on ylimalkainen nyrkkisääntö eikä se perustu tutkimukseen. Jotakin on kuitenkin mennyt hakukoneoptimoinnissa pieleen, jos avainsanojen esiintymistiheyttä joudutaan varmuuden varalta laskemaan.
• Pitkissä teksteissä on syytä käyttää myös tärkeimpien avainsanojen synonyymejä ja vaihtoehtoisia tapoja ilmaista asiat. Tästä hyötyvät sekä tyyli että löydettävyys: liika toisto on rumaa ja lisää ylioptimoinnin riskiä eivätkä kaikki hakukoneen käyttäjät osaa hakea yleisimmillä sanoilla.

Kuvien alt-attribuutit

Alt-attribuuttien tarkoitus on kuvien sisältämän tekstin tai muun informaation sanallinen ilmaisu. Niistä on hyötyä esimerkiksi piste- tai ääniselaimia käyttäville sokeille sekä tilanteissa, joissa kuvat jäävät jostain syystä latautumatta.

Käytä alt-attribuuttia jos kuva toimii linkkinä esim. navigaatiossa. Siinä se vastaa normaalissa tekstilinkissä olevaa tekstiä eli ankkuritekstiä, joka kuvaa kohdesivua ja siten nostaa sen hakukonesijoituksia ankkuritekstin sanoilla. Silloin alt-attribuuttia ei tosin tarvita jos kuva esitetään tekstin päällä jollakin CSS image replacement -tekniikalla.

Alt-attribuuttien kanssa kannattaa olla varovainen: vaikka avainsana alt-tekstissä parantaisikin sijoitusta, kilpailija voisi ilmiantaa sivun harhautusyrityksestä Googlelle mikäli alt-attribuutti ei vastaisi kuvan todellista informaatiosisältöä.

Hakukoneoptimoinnissa alt-attribuutit soveltuvat erityisesti kuvahakua varten optimointiin. Google-kuvahaku ja muiden hakukoneiden kuvahaut voivat tuoda merkittävästi kävijöitä, jos kuvia on sivuilla paljon ja ne ovat ihmisiä kiinnostavista aiheista. Tämän vuoksi alt-tekstit kannattaa tehdä kuvaaviksi.

Myös perus-Googlessa esimerkiksi haku seo picture saattaa näyttää hakutulosten kärjessä otteita Google Kuvahaun tuloksista. Ilmiössä on kyse Googlen Universal Search -järjestelmästä, joka laittaa normaalien hakutulosten joukkoon silloin tällöin esimerkiksi kartta-, video- ja kuvahaun tuloksia.

Suomeksi vastaava hakulause (hakukoneoptimointi kuva) ei näytä kuvia, ja muutenkin kuvatuloksia näytetään suomenkielisillä sanoilla harvemmin verrattuna englanninkielisiin. Kuvatulosten näyttäminen voi myös vaihdella: se haku, joka eilen palautti kuvia hakutulossivulla, voi tänään näyttää pelkkiä normaaleja tekstituloksia.

Googlen Universal Search on näyttänyt normaalien Google-hakutulosten kärjessä 3 kuvahaun tulosta esimerkiksi hakusanalla “lehmä”:

Lihavointi – silmäilyn avuksi

Lihavointeja kannattaa käyttää lähinnä silmäiltävyyden parantamiseen. Strong- tai b-elementti ei ole näet erityisen tehokas optimoinnin väline.

Avainsanojen sekalainen lihavoiminen tekisi tekstin sekavan ja amatöörimäisen näköiseksi, minkä vuoksi sitä kannattaa välttää. On toki pikku plussaa, jos lihavointien sisälle eksyy avainsanoja mutta tämän tekijän murehtimiseen ei kannata käyttää aikaa.

Meta-keywords-tagi – jäänne menneisyydestä

Älä käytä meta-keywords-tagia suomenkielisten sivujen optimoinnissa. Kehittyneet hakukoneet eivät näet anna sille enää arvoa, koska elementtiä on käytetty hakukoneoptimoinnin alkuajoista asti spämmäämiseen tunkemalla se täyteen avainsanoja.

Poikkeus on Yahoo, jolla on käyttäjiä englanninkielisessä maailmassa (ennen kuin sen hakumoottori korvataan Bingillä). Yahoossa keywords-tagin merkitys on niin vähäinen, että siihen kannataa syöttää korkeintaan avainsanoja, joilla ei ole kilpailua hakutuloksissa ja joita ei esiinny edes sivun tekstissä.

XHTML-lähdekoodissa sivun keywords-tagi näyttää esimerkiksi tältä:

<meta name="keywords" content="flash, hakukoneoptimointi opas, hakukone optimointi, google, seo, title, description, keywords" />

Sivuston ominaisuudet

Hakukoneet tunnistavat samalla verkkotunnuksella olevat toisiinsa linkittävät sivut samaksi sivustoksi. Sivuston yhteismääreet ja sen yhteisesti nauttima linkkisuosio vaikuttavat kaikkien yksittäisten sivujen sijoituksiin.

Sivuston ikä

Google arvostaa vanhoja sivustoja. Arvostus voi tosin nollautua, jos sivustoon tai sen verkkotunnuksen omistajatietoihin kohdistuu merkittäviä muutoksia.

Vanha sivusto voi kuitenkin olla erinomainen ostos, jos sen amatööri-webmaster on väsynyt sitä ylläpitämään eikä ymmärrä sivuston arvoa hakukoneoptimoinnin kannalta.

Vanhojen sivustojen uusiokäytössä verkkotunnuksen whois- eli omistajatiedot kannattaa päivittää vähitellen ja ajan kuluessa, jotta hakukoneiden luottamus sivustoon ei nollautuisi. Jos mahdollista, hidas muutostahti kannattaa ulottaa myös sivuston vanhaan sisältöön.

Sivuston aihepiiri

Sivu sijoittuu paremmin hakusanalla jos koko sivuston aihepiiri liittyy hakusanaan.

Suomenkielisten sivustojen suhteen voidaan turvallisesti olettaa, että jos hakusana tai sen jokin taivutusmuoto esiintyy usein sivuston muillakin sivuilla, sivulla on silloin paremmat mahdollisuudet.

Sivuston aihepiirin sanoja voi tutkia käyttämällä Googlen Verkkovastaavan työkaluja (Webmaster Tools): Tilastot > Mitä Googlebot näkee > [Avainsanat].

Domain ja URI

Verkkotunnus eli domain ja verkko-osoite eli URI näkyvät käyttäjälle paitsi selaimen osoitepalkissa niin myös hakukoneiden hakutuloksissa, jossa niissä esiintyvät hakusanat lihavoidaan. Hakukoneoptimoinnille on merkitystä myös sillä, että näitä osoitteita (ja siten niissä olevia avainsanoja) käytetään joskus linkkiteksteinä sivuihin linkitettäessä.

Avainsana domain-nimessä

Jos hakusana sijaitsee sivun emosivuston verkkotunnuksessa, sivun sijoitus hakutuloksissa paranee. Erityisesti paranee etusivun sijoitus, varsinkin jos se on muutenkin optimoitu hakusanan suhteen. Tähän vaikuttaa myös se, että hakusana esiintyy tällöin todennäköisesti myös monien sivustoon osoittavien linkkien ankkuritekstissä.

Verkkotunnuksen perusosan täysi vastaavuus on tehokkainta. Domain-nimi www.optimointi.com on siis tehokkaampi haettaessa sanalla “optimointi” kuin verkkotunnus www.hakukone-optimointi.com (kun muita seikkoja ei huomioida).

Google tunnistaa sanan “optimointi” myös vaikkapa domaineista www.hakukoneoptimointi.fi ja www.optimointia.com. Näistä jälkimmäinen olisi tehokkaampi koska sen perusosa on Googlen tunnistama taivutusmuoto.

Avainsana URI:ssa

URI (universal resource identifier) eli kansanomaisemmin URL (universal resource locator) tarkoittaa tarkkaa verkko-osoitetta kuten http://nettibisnes.info/hakukoneoptimointi/. Sanan “hakukoneoptimointi” esiintyminen URI:ssa on tekijä, joka todennäköisesti parantaa tämän sivun sijoittumista joissakin hakukoneissa kyseisellä hakusanalla.

Vaikka verkko-osoitteessa oleva avainsana ei olisikaan erityisen tehokas kikka hakutuloksissa nousemiseen, se auttaa tekemään tuloksen olennaisemman näköiseksi, koska osoitteessa oleva hakusana näkyy hakutuloksissa lihavoituna. Lisäksi on mahdollista että sivuun linkitetään käyttämällä URI:a ankkuritekstinä, jolloin siinä olevat avainsanat vaikuttavat positiivisesti myös linkityksen kautta.

Parametrit URI:ssa

Jos URI:ssa on yli 2-3 yhtäsuuruusmerkkiä (“=”), Google voi antaa sivulle miinuspisteitä. Tällaiset sivut ovat nimittäin usein käyttäjän syöttämistä parametreista generoituja dynaamisia sivuja, joita voisi olla potentiaalisesti lukemattomia.

Serveri ja tietoliikenneyhteys

Sivuston palvelin vaikuttaa hakukoneoptimointiin ennen kaikkea kahdella tavalla: maantieteellisellä sijainnillaan ja luotettavuudellaan. Myös serverin käyttämä Internet-yhteys voi heikentää hakutuloksia, jos se ei ole tarpeeksi luotettava.

Palvelimen sijainti

Hakukoneet huomioivat valtion, jossa palvelin sijaitsee. Tätä sijaintia ne vertaavat siihen, missä hakija sijaitsee (tämän IP-osoitteen perusteella).

Jos domainissa on maapääte, kuten .fi tai .se, Google jättää palvelimen sijainnin huomiotta.

Kansainvälisten verkkotunnusten (.com, .net jne.) osalta sivuston maantieteellisen kohderyhmän voi tarvittaessa ilmoittaa Googlelle Verkkovastaavan työkaluissa (Asetukset > Maantieteellinen sijainti). Kun kyseessä ovat suomenkieliset sivut, Google ei kuitenkaan painota palvelimen sijaintia ratkaisevasti.

Microsoftin Bing-hakukone (eli entinen Live Search ja MSN-portaalin hakukone) painottaa serverin sijaintia enemmän.

Siksi on turvallisinta sijoittaa sivusto palvelimelle, joka sijaitsee samassa maassa kuin sivuston pääasiallinen kohderyhmä.

Uptime eli toimintavarmuus

Hakukoneet voivat laskea sivujen sijoituksia, jos sivusto on usein tai pitkän aikaa toimimaton – esimerkiksi ylikuormitetun palvelimen tai epäluotettavan tietoliikenneyhteyden vuoksi.

Ei ole hakukoneiden etujen mukaista, että kärkipään hakutulokset johtavat sivuille jotka eivät avaudu. Tämä kannattaa huomioida, jos sivusto on hyvin halvassa web-hotellissa tai sen palvelin on oman kodin laajakaistassa.

Googlen algoritmi voi antaa miinuspisteitä myös sivujen liian pitkästä latausajasta. Latausviive voi johtua paitsi vähäisistä palvelin- tai tietoliikenneresursseista niin myös puutteellisesta suorituskyvyn optimoinnista.

Aseta palvelin tarjoamaan 503-statuskoodi, jos sivustoa huolletaan tai päivitetään. Koodi 503 (service unavailable) kertoo hakukoneelle, että poissaolo on väliaikaista ja botti voi palata uudestaan parempana ajankohtana. Se estää myös virhesivujen indeksoinnin.

Linkit muilta sivustoilta

Sivustoon osoittavat linkit ovat olleet tärkeitä hakukoneoptimoinnissa siitä lähtien, kun Google otti käyttöön ensimmäisen version PageRank-algoritmistaan vuonna 1998.

Linkkejä voidaan hankkia

• ilmoittamalla sivusto ilmaisiin ja maksullisiin linkkihakemistoihin
• luomalla omille sivuille linkkipyydys eli sisältöä joka saa ihmisiä linkittämään siihen
• antamalla bloggaajille ilmaisia näytteitä tuotteista tai palveluista
• markkinoimalla omien sivujen sisältöä netissä ja sen ulkopuolella
• linkittämällä sivuille muilta omilta sivustoilta
• ostamalla linkkejä muiden sivustojen omistajilta (Google ei arvosta ostetuiksi havaitsemiaan linkkejä)
• kommentoimalla blogeissa, jotka eivät käytä nofollow-attribuuttia kommentoijien linkeissä
• laittomin keinoin murtautumalla muiden sivustoille (onhan tietoturvasi kunnossa?).

Sivulle osoittavien linkkien ankkuriteksti

Kun sivulle osoittaa linkki, hakukoneet päättelevät linkissä olevan tekstin eli ns. ankkuritekstin kuvaavan kohdesivua. Jos siis tähän oppaaseen linkitetään muilta sivustoilta otsikon mukaisesti sanoilla “Hakukoneoptimointi lyhyesti”, hakukoneet tulkitsevat että tämä sivu käsittelee hakukoneoptimointia ja sen sijoitus hakusanalla “hakukoneoptimointi” (ja Googlessa myös taivutusmuodoilla) tulisi olla tämän vuoksi parempi.

Jos suurella osalla sivuun osoittavista linkeistä on sama ankkuriteksti, Google saattaa epäillä, että nämä linkit on ostettu tai tehty automaattisesti, ja vähentää siksi niiden painoarvoa. Tämä on syytä muistaa, jos linkkejä ostetaan tai sivustoja ilmoitetaan linkkihakemistoihin: muuten Google voisi vähentää arvoa myös luonnollisesti kertyneiltä linkeiltä, joilla on sama ankkuriteksti.

Ankkuritekstiin voi vaikuttaa sivun pääotsikolla: monesti ihmiset käyttävät sitä tai sen jonkinlaista väännöstä ankkuritekstissä kun he linkittävät sivuun.

Linkin lähellä oleva teksti

Lähellä linkkiä oleva teksti voi vaikuttaa samoin kuin ankkuriteksti, jos tuo teksti sijaitsee samassa HTML-elementissä ja tarpeeksi lähellä linkkiä.

Kuvitellaan että joku linkittää erääseen tämän blogin kirjoitukseen näin: “Opiskele WordPress-blogin hakukoneoptimointia täältä.” Ankkuriteksti “täältä” ei ole erityisen kuvaava, mutta Google päättelee vieressä olevan tekstin perusteella, että linkin kohdesivu voisi liittyä myös sanoihin “WordPress”, “blogi” ja “hakukoneoptimointi”.

Linkittävän sivun linkkisuosio

Sivuun toiselta sivustolta osoittava linkki tuottaa tälle annoksen linkkisuosiota, joka nostaa kohdesivua hakutuloksissa. Mitä enemmän linkittävällä sivulla itsellään on tätä suosiota, sitä enemmän se voi sitä myös lahjoittaa (menettämättä sitä kuitenkaan itse).

Linkkejä ei kannata vaivautua hankkimaan hakemistoista, joiden ainoa tarkoitus on linkkien lisääminen laadusta välittämättä. Näillä ei ole itsellään tarpeeksi arvostusta hakukoneissa, jotta niistä tulevilla linkeillä olisi juurikaan merkitystä.

Linkkisuosion määrää lisäävät ainakin

• linkittävään sivuun osoittavien linkkien määrä, laatu ja aiheenmukaisuus
• linkittävän sivun ikä: mitä vanhempi, sitä parempi
• linkittävän sivun nauttima luottamus, Googlen TrustRank.

Linkkisuosion välittyminen voidaan estää lisäämällä linkkiin rel=”nofollow”-attribuutti, joka kertoo hakukoneille ettei linkille kannata antaa arvoa. Toinen tapa on ohjata linkit esimerkiksi PHP:llä /out/-kansion kautta, joka kielletään hakukoneiden boteilta robots.txt-tiedostossa.

Linkittävän sivun teema

Parhaat linkit tulevat sivuilta, jotka käsittelevät samaa aihetta kuin kohdesivu. Käytännössä tämä tarkoittaa, että linkittävällä sivulla on saman aihealueen sanastoa kuin kohdesivulla. Englanninkielisillä sivuilla teemat rekisteröityvät Googleen paremmin; suomen kielellä synonyymien ja aiheeseen kuuluvien sanojen tunnistus ei vielä toimi yhtä hyvin.

Älä markkinoi sivujasi liian yleismaailmallisilla foorumeilla, vaan pyri löytämään verkkoyhteisöjä ja blogeja jotka käsittelevät sivustosi aiheita: näiltä kannattaa tavoitella linkkejä.

Koko sivustoon kohdistuvat linkit

Kaikki sivuihin osoittavat linkit vahvistavat myös muita sivuston sivuja. Ulkopuolelta tuleva linkkisuosio valuu eteenpäin sivuston sisällä sen linkkejä seuraten. Tämä sivuston yhteisesti nauttima linkkisuosio ja luottamus vaikuttaa paljon yksittäisten sivujen hakutuloksiin.

Huomioi seuraavat tekijät:

• Mahdollista linkkisuosion eteneminen sivustolla kattavalla navigaatiolla ja/tai sivukartalla.
• Älä tee sivustosta liian “syvää”, vaan mieluummin “leveä” jottei linkkisuosio “laimennu” liikaa matkallaan: sivulta toiselle navigoiminen ei saa viedä liian monta klikkausta.
• Älä jaa sisältöä alidomaineihin tai erillisiin verkkotunnuksiin, vaan pidä kaikki sisältö saman domainin kansioissa.

Luonnollinen linkkiprofiili

Google arvostaa linkkejä, jotka kertovat luonnollisesta suosiosta ja sen lisääntymisestä. Näin se pyrkii erottamaan ostetut ja itse järjestetyt sekä automaattisesti generoidut spämmilinkit ihmisyksilöiden harkinnasta kumpuavista linkeistä.

Parhaimmillaan linkit ilmaantuvat sivustolle suurin piirtein tasaisesti: yhtäkkiä ilmaantuva suuri määrä linkkejä ja sen jälkeinen hiljaisuus ei ole hyvä asia hakukoneoptimoinnin kannalta. Parasta onkin linkkien määrän tasainen, hiukan kiihtyväkin nousu. Pikku piikit kehityksessä eivät kuitenkaan yleensä haittaa.

Ei näytä hyvältä, jos ulkoa tulevat linkit kohdistuvat kokonaan tai lähes yksinomaan etusivulle. Tämä kertoo Googlelle, ettei sivuston alasivuilla ole kiinnostavaa sisältöä, johon ihmiset vaivautuisivat linkittämään.

Sivuston sisäiset linkit

Sisäisten linkkien optimointi on pitkään ollut aliarvioitu osa hakukoneoptimointia. Webmaster voi vaikuttaa sivuston linkkirakenteella merkittävästi siihen, mitkä yksittäiset sivut menestyvät hakutuloksissa parhaiten niille valituilla avainsanoilla.

Sivuston sisäinen linkkisuosio

Mitä enemmän linkkejä muilta sivuston sivuilta, sitä paremmin sivu sijoittuu hakutuloksissa. Sivuston sisäisten linkkien tehokkuuteen vaikuttaa

• linkkien sijainti: pelkästään valikoissa olevilla linkeillä on rajallisempi vaikutus kuin leipätekstin seassa olevilla.
• linkittävän sivun aihe: samaa aihetta käsitteleviä sivuja kannattaa linkittää toisiinsa.
• linkittävän sivun linkkisuosio: mitä enemmän ulkoisia linkkejä sivuun osoittaa, sitä vaikutusvaltaisempi se on.
• linkittävän sivun ikä: vanhempi on parempi.
• linkin ikä: vanhemmat ovat arvokkaampia.

Linkkisuosion kanavointi

Linkkisuosiota kannattaa kanavoida enemmän tärkeille sivuille joita halutaan nostaa hakutuloksissa. Tämä voidaan tehdä seuraavilla keinoilla:

• Annetaan epäolennaisille sivuille pienempi osuus linkkisuosiota linkittämällä niihin vähemmän tai keskittämällä enemmän sisältöä samalle sivulle: näin koko sivuston jakamaa linkkisuosiota riittää enemmän tärkeille sivuille.
• Linkitetään tärkeimpiin sivuihin muilta aiheeseen liittyviltä sivuilta käyttäen avainsanoja ankkuritekstissä.
• Annetaan tärkeimmälle sisällölle keskeisempi asema sivuston navigaatiossa, erityisesti etusivulla olevia linkkejä.
• Vähennetään klikkausten määrää, joka vaaditaan tärkeään sisältöön navigoimiseen miltä tahansa sivulta. Käytetään tähän esimerkiksi valikoivaa sivukarttaa eli tärkeille sivuille osoittavien linkkien listaa.
• Pysyvästi uudelleenohjataan samasta aiheesta olevia turhiksi käyneitä tai toisella domainilla sijaitsevia sivuja tärkeille sivuille (301 redirect).

Kävijöitä aktivoiva hakukoneoptimointi

Google ja muut kehittyneet hakukoneet kiinnittävät yhä enemmän huomiota netin käyttäjien toimintaan.

Näin hakukoneet pyrkivät määrittämään, mitkä sivut oikeasti kiinnostavat hakijoita ja ansaitsevat siten hyvän paikan hakutuloksissa. Siksi hakukoneoptimointi on suunnattava myös hakukoneen käyttäjille – ei vain roboteille ja algoritmeille.

Google pystyy saamaan sivujen suosiosta ja vierailijoista tietoa ainakin AdSense-mainosten, Google Analytics -kävijäseurannan, omistamansa Feedburner-palvelun RSS-tilausten, Google Bookmarks -kirjanmerkkien, Google Toolbar -työkalurivin, Google Buzz -statuspäivitysten, Google-syötteenlukijan toimintojen sekä omille hakusivuilleen palaamisten perusteella.

Google tarkkailee Twitter-mikroblogipalvelua ja muita sosiaalisen median palveluita nähdäkseen, mitä niiden käyttäjät suosittelevat toisilleen. Tämä on paljain silmin nähtävissä, kun Google integroi Twitter-viestejä normaaleihin hakutuloksiin.

Hakukoneiden suorittama käyttäjätiedon kerääminen on pitkälti hämärän peitossa ulkopuolisille ja sen merkitystä rajoittaa tarve suojautua manipulaatiolta, kuten tuhansilta klikkaamaan palkatuilta intialaisilta. Siksi tämän osion keinot on syytä ymmärtää terveen paranoidisina.

Bounce-rate eli välitön poistumisprosentti

Kasvattamalla kävijäkohtaisia sivujen latausmääriä ja sivustolla vietettyä aikaa sivusto voidaan saada hieman arvokkaammaksi Googlen silmissä.

On arvailtu, että Google käyttää tämän havainnointiin Google Analytics -kävijäseurantaa ja muita selaajalla tai sivustolla käytössä olevia Googlen palveluita. Hakukone huomaa myös sen, jos hakutulosten selailua jatketaan pian uudestaan.

On siis hakukoneoptimoinnin kannalta parempi etteivät kävijät suoraan poistu sisääntulosivulta vaan tutkivat sivustoa lisää, eli välitön poistumisprosentti (bounce-rate) ei ole liian suuri. Tosin myös sivuston heikko käytettävyys voi johtaa tähän tulokseen, joten minään itsearvona isoa latausmäärää ei kannata tavoitella.

Kävijöille kannattaa esittää sivuston sisäisiä linkkejä, joista he voisivat kiinnostua. Hyödyllisiä ovat esimerkiksi “luetuimmat”-, “parhaimmat”- ja “lisää aiheesta” -linkkilistat sivuston muihin sivuihin. Tärkeitä ovat myös sivuston informaatioarkkitehtuuri (information architecture, IA) yleensä ja käytössä olevat navigaatioratkaisut.

CTR eli hakutulosten napsautusten prosentti

Google päättelee sivun kiinnostavuudesta myös sen perusteella, kuinka iso osa hakijoista napsauttaa sivulle osoittavaa hakutulosta.

Tämänkin takia meta-description-tagi, sivulla olevan tekstin konkreettinen houkuttelevuus ja verkko-osoitteessa olevat avainsanat ovat tärkeitä: niissä olevia hakusanoja näytetään hakutuloksissa lihavoituna, mikä lisää tulosten kiinnostavuutta.

Myös sivuston vahva brändi nostaa CTR-lukua, kun sivuston nimi esiintyy title-tagissa. Kävijät näet suosivat aikaisemmin hyväksi havaitsemiaan sivustoja.

Hakutulosten personointi

Google mukauttaa hakutuloksia selainkohtaisen hakuhistorian perusteella. Se tekee niin myös niille käyttäjille, jotka eivät ole kirjautuneet omalle Google-tililleen (joulukuusta 2009 lähtien).

Personointi toimii siten, että Google nostaa hakutuloksissa niitä sivustoja, joita käyttäjä on aiemmin klikannut muita ahkerammin saman aihepiirin hakutermeillä.

Hakukoneoptimointi voi huomioida personoinnin lähinnä sisällön suunnittelussa ja -tuotannossa.

Avainsanatutkimuksen pohjalta voidaan julkaista yleisesti mielenkiintoisia sivuja. Jos nämä sivut houkuttelevat Googlesta uteliaita kävijöitä, sivusto sijoittuu hakutuloksissa paremmin myös silloin, kun samat kävijät tekevät kaupallisempia hakuja samasta aihepiiristä.

Esimerkiksi golf-tuotteita myyvä verkkokauppa voi julkaista sivustollaan golfiin liittyviä kiinnostavia artikkeleita. Jos nämä jutut keräävät tehokaasti klikkejä Google-hauista, kaupan tuotesivut sijoittuvat samoille hakijoille paremmin, kun nämä googlaavat golf-tarvikkeita ostoaikeissa.

Personoitu haku voidaan huomioida myös mainonnassa: mainokset voivat kehottaa googlaamaan hakusanoilla, joilla mainostaja on ykkösenä Googlessa. Tällöin on tosin syytä varmistaa, että kilpailijat eivät voi harrastaa AdWords-mainontaa samalla hakusanalla tavaramerkin vuoksi ja että pahin kilpailija ei ole maksuttomissakaan tuloksissa heti kakkosena.

Tyypillisiä ongelmia hakukoneiden kanssa

Monesti hakukoneoptimoinnin tarve kumpuaa sivuston suunnittelussa tai toteutuksessa tehdyistä virheistä. Tässä esitellään tyypillisimpiä ongelmia.

Sama title-teksti joka sivulla

Title-teksti on arvokas mahdollisuus kertoa hakukoneille sivun pääasiallisesta aiheesta. Tämä ei toimi jos se on joka sivulla sama: koko tagin suuri hyöty menetetään.

Epäkuvaavat hakutulokset eivät myöskään näytä houkuttelevilta hakukoneen käyttäjille. Esimerkiksi Apu-lehden Apureportteri-jutut menettävät luultavasti valtavasti kävijöitä tämän virheen vuoksi: jokaisen jutun hakutuloksen linkissä lukee vain “Apu”, mistä on vähän apua hakijalle.

Sama URI joka sivulla: kehykset, Flash ja AJAX

Jos verkko-osoite on sama sivuston jokaisella sivulla, hakukoneet eivät voi indeksoida sivustoa, alasivuille ei voi linkittää ja kävijät eivät pysty lisäämään niitä kirjanmerkkeihin.

Tämä on yksi pahimpia virheitä web-suunnittelussa.

Ongelman aiheuttaa yleensä Flash, kehykset (frames) tai AJAX. Näistä tekniikoista kehykset edustavat täysin vanhentunutta web-suunnittelua. Koko sivuston toteuttaminen samana Flash-esityksenä on puolestaan vieläkin valitettavan yleistä ja tarpeetonta. AJAX edustaa uudenaikaisempaa tekniikkaa, mutta senkin liikakäytöstä kärsii sekä hakukoneoptimointi että käytettävyys.

Flash-sivustoilla ongelmaa yritetään joskus paikata erillisellä HTML-versiolla, joka näkyy hakuroboteille ja niille kävijöille, joilla Flash ei ole toiminnassa. Tämä voi auttaa alasivujen HTML-versioita indeksoitumaan, mutta käyttäjien enemmistöä se ei auta linkittämään eikä kirjanmerkkaamaan, koska nämä näkevät Flash-version.

Erillinen HTML-versio ei ole hyvä ratkaisu, koska sillä saadaan hyödynnettyä vain etusivuun kohdistuva linkkisuosio. Etusivulle linkittäminen ei myöskään houkuttele bloggaajia ja muita potentiaalisia linkkivoiman levittäjiä vaan nämä haluavat linkittää suoraan kommentoimalleen sivulle ja jättävät linkittämättä jos se ei onnistu.

SWFAddressilla muodostettavat sivukohtaiset “risuaita-URI:t” eivät tee tilannetta yhtään paremmaksi, sillä sellaisiin #-osoitteisiin kohdistuvat linkit menevät nekin hakukoneiden näkökulmasta vain etusivulle, mikä tekee sivuston linkkiprofiilista heikkolaatuisen.

Flash- tai kuvilla esitetty teksti

Hakukoneet indeksoivat tekstiä, eivätkä ne vielä toistaiseksi “skannaa” sitä kuvatiedostojen sisältä.

Google pystyy tosin indeksoimaan tekstiä, joka on koodattu Flash-tiedostoon tekstinä, mutta koko-Flash-sivustot ovat silti muita huonommassa asemassa hakukoneoptimoinnissa, paljolti myös siksi että niillä on yleensä sama URI joka sivulla.

Esitä teksti HTML-elementtejä käyttämällä, älä kuvissa tai Flash-sisältönä. Hakukoneet sallivat kuitenkin tekniikan, jossa täsmälleen sama teksti esitetään sivulla sekä Flashina/kuvana että sen alla “piilossa” HTML-elementeissä.

Piiloteksti ja piilotetut linkit

Käyttäjille näkymätön lista avainsanoja eli piiloteksti on vanhimpia tapoja harhauttaa hakukoneita. Kehittyneet hakukoneet huomaavat piilotekstin lukemalla CSS-tyylimäärityksiä, jopa erillisestä tyylitiedostosta. Ne voivat rangaista piilotekstiä käyttävää sivua tai sivustoa pudottamalla sitä tuloksissa tai poistamalla sen kokonaan indeksistään. Ongelmallista on myös teksti jonka väri on lähes sama kuin taustaväri.

Yhtä lailla ongelmallisia ovat piilotetut linkit eli linkit jotka on esitetty piilotekstinä tai joita ei ole muotoiltu siten että käyttäjä pystyy näkemään niiden olevan linkkejä. Google tulkitsee tämänkin harhauttamiseksi.

Piiloteksti ei ole ongelma, jos täsmälleen sama teksti näytetään käyttäjille samalla sivulla myös kuvina. Tällainen CSS image replacement on yleinen käytäntö kun otsikoista tai valikoista halutaan tehdä näyttävämpiä, mutta silti säilyttää niiden hakukoneystävällisyys ja saavutettavuus.

Tuplasisältö

Tuplasisältö (duplicate content) tarkoittaa

1. useammalla sivuston sivulla olevaa täsmälleen samaa sisältöä tai
2. eri sivustoilla olevaa samaa sisältöä.

Sivuston sisäinen tuplasisältö voi johtaa siihen, ettei hakukone välttämättä näytä tuloksissaan tarkoitettua versiota tai tuo versio voi painua supplemental index:iin eli vähempiarvoisiin lisätuloksiin. Lisäksi turhat tuplasisältöä sisältävät sivut voivat syödä arvokasta linkkisuosiota tärkeämpien sivujen kustannuksella.

Tuplasisältöä sisältävät sivut kannattaa tapauksen mukaan joko

1. pysyvästi ohjata uudelleen tärkeämmille sivuille (ns. 301-uudelleenohjaus) tai
2. varustaa rel=”canonical” -tagilla, jossa määritetään “oikea” URI-versio, tai
3. marginalisoida muuttamalla niille osoittavien linkkien kohdeosoitteet. Jos sivuja ei haluta lainkaan hakutuloksiin, ne voidaan lisäksi varustaa “noindex”-arvoisella meta-robots-tagilla.

Sivuston navigaatioon ja CMS:n eli julkaisujärjestelmän toimintaan tulisi kiinnittää alusta pitäen huomiota, jotta tuplasisältöä ei pääsisi syntymään ja indeksoitumaan hakukoneisiin.

Eri sivustoilla oleva tuplasisältö voidaan pahimmassa tapauksessa tulkita sisällön varastamiseksi mistä seuraa pudotus tai poistaminen hakutuloksista. Näin ei välttämättä käy vaan linkkisuosion, iän ja muiden tekijöiden perusteella vahvin sivu yksinkertaisesti sijoittuu hakukoneissa muita paremmin.

Älä kopioi tekstiä suoraan muualta netistä vaikka saisitkin (esim. Wikipediasta). Jos taas sinun sisältöäsi varastetaan, ota yhteyttä vohkivan sivuston webmasteriin, ja jos se ei auta, ilmoita varkaus hakukoneille ja varkaan web-hotellin tarjoajalle. Jos tekijä on suomalainen, saatat haluta tehdä asiasta julkisen tai viedä jutun oikeuteen, jos kyseessä on tekijänoikeusloukkaus. Yleensä varkaat säikähtävät viimeistään kun heidän sivunsa tippuvat hakukoneista.

Liian samankaltaiset sivut

Toisiaan paljon muistuttavat sivut ovat ongelmallisia, koska hakukoneet voivat tulkita ne tuplasisällöksi. Ongelmaan voivat auttaa ensiapuna yksilölliset meta-description- ja title -tagit. Jos yksilöllinen sisältö sijoittuu sivun lähdekoodissa hyvin myöhään, saattaa sen nostaminen ylemmäs auttaa.

Toinen ongelma samankaltaisissa sivuissa on se, että ne kilpailevat hakutuloksissa samoilla hakusanoilla. Tähän auttaa se, että tärkeimmille sivuille linkitetään vähemmän tärkeiltä käyttäen tavoiteltuja hakusanoja ankkuritekstissä.

Epäolennaiset sivut hakukoneiden indeksissä

Kaikki sisältö ei ole arvokasta hakukoneita ajatellen: esimerkiksi sivuston sisäisen haun hakutulossivut on hyvä sulkea hakukoneiden indekseistä robots.txt-tiedostolla, jotta hakijoita ei kiusata ja omaa brändiä heikennetä roskatuloksilla.

Huonoon ympäristöön linkittäminen

Linkit huonolaatuisille sivuille tai hakukoneita harhauttaville sivustoille laskevat linkittävän sivun luottamusta ainakin Googlen algoritmissa.

Jollei tiedä mitä tekee, kannattaa pääsääntöisesti välttää linkittämistä sivuille jotka kauppaavat aikuisviihdettä, impotenssilääkkeitä, videopokeria tai muuten spämmääjien suosiossa olevia aiheita. Yksittäinen huono linkki muiden joukossa tuskin johtaa rangaistukseen, laajamittaisempi taipumus kylläkin.

Jos huonoon ympäristöön kuitenkin haluaa linkittää, nämä linkit on parasta varustaa rel=”nofollow” -attribuuteilla. Eli tähän tyyliin:

<a rel=”nofollow” href=”http://www.spam-sivusto.com”>Spämmiä, hyi hyi!</a>

Toinen vaihtoehto on kierrättää linkit erityisen uudelleenohjausskriptin kautta ja sitten kieltää hakukoneilta tuon skriptin käsittely robots.txt-tiedoston avulla.

Eli tässä tapauksessa linkki olisi muotoa:
<a href="http://www.sivusto.fi/redirect.php?a=mainoskumppani">Osta tuote tämän linkin kautta niin minä saan komission!</a>
… jossa varsinainen siirtyminen toiselle sivustolle sisältyisi redirect.php-skriptiin (“mainoskumppani”-parametrin avulla).

Ja robots.txt:ssä olisi vähintään tämä:

User-agent: *
Disallow: /redirect.php

Sisällön jakaminen useille verkkotunnuksille ja alidomaineille

Tyypillisiä yritysten virheitä ovat sivuston blogin laittaminen erilliseen alidomaidiin (blogi.sivusto.com) ja sivuston uusien osien laittaminen omalle verkkotunnukselle (usein brändäystä ja mainontaa varten). Kun näin tehdään, hakukoneet eivät hahmota osia samaksi sivustoksi, jolloin ne ovat yhdessä heikompia kuin mitä ne olisivat samassa domainissa. Linkkisuosio siirtyy sivustolta toiselle heikompana kuin sivuston sisällä.

Laita blogi hakemistoon (www.sivusto.fi/blogi/), samoin sivuston uusi verkkopalvelu. Siis www.taloussanomat.fi/omasana/ eikä www.omasana.fi. Tähän liittyvät virheet voidaan korjata 301-ohjauksilla.

Muuttuvat ja vanhenevat URI:t

Sivujen siirtäminen uusiin verkko-osoitteisiin on ongelma silloin, jos vanhoista osoitteista ei tehdä pysyviä uudelleenohjauksia uusiin. Tällöin sivuille osoittavat linkit ja käyttäjien kirjanmerkit lakkaavat toimimasta.

Osoiterakenne kannattaa miettiä jo sivustoa suunniteltaessa kunnolla ja yhtenäisen logiikan mukaiseksi. Tavoitteena kannattaa pitää, että osoitteita ei tarvitse tulevaisuudessa muuttaa paitsi siinä tapauksessa jos ne joskus ohjataan uudelle domainille.

Poikkeuksen muodostavat huutokauppalistausten ja muiden sisällöltään vanhentuvien sivujen URI:t. Nämä kannattaa ohjata parhaiten hakukoneen käyttäjää palvelevalle sivulle, esimerkiksi saman kategorian tuotteita listaavalle sivulle.

Monta URI:a samalle sivulle (canonicalization problems)

Jos sama sivu löytyy osoitteista www.yritys.fi, yritys.fi, ja www.yritys.fi/index.php, ulkopuolelta tulevat ja sivuston sisäiset linkit voivat jakautua näihin osoitteisiin. Tällöin niiden tuoma linkkisuosio voi hajaantua eikä siitä saada kaikkea irti. Koko sivuston linkkisuosiota voi myös tuhlautua näin tuplasisältöön.

Periaatteessa yritys.fi ja www.yritys.fi ovat eri sivustoja: jälkimmäinen on edellisen alidomain. Näissä voisi siis olla täysin eri sisällöt.

Asia ei ole niin ongelmallinen jos näiden kahden URI:n sisältö on hakukoneille täysin identtistä ja muuttuu hyvin harvoin (ei siis esimerkiksi kiertäviä bannereita tms. pikkumuutoksia). Tällöin kehittyneet hakukoneet järkeilevät että eri osoitteissa olevat sivut ovat samoja.

Säädä 301-uudelleenohjaukset siten, että sivu näytetään vain yhdessä URI:ssa, esim. www.sivusto.fi, ja muut “toimivat” osoitteet ohjataan siihen. Lisäksi Googlen Verkkovastaavan työkaluissa kannattaa valita halutaanko URI:en näkyvän www-alkuisina vai ilman sitä: Asetukset > Haluttu verkkotunnus.

Liian paljon asioita samalla sivulla

Jos yhdelle sivulle on mahdutettu monta eri asiaa, hakukoneen on vaikea pitää mitään niistä erityisen tärkeänä.

Hakukoneoptimointi helpottuu, kun kullekin optimoitavalla avainsanakokonaisuudelle on oma sivunsa. Siten hakukoneille voi painottaa keskeisiä avainsanoja esimerkiksi pääotsikon ja title-elementissä olevan tekstin avulla.

Liiallisuuksiin ei kuitenkaan kannata mennä: jos jokaisen yksityiskohdan esittää omalla sivullaan, kullekin riittää vain vähän koko sivuston jakamaa linkkivoimaa. Erillisiä sivuja kannattaa tehdä sen perusteella, kuinka tärkeitä avainsanakokonaisuudet ovat liiketoiminnalle tai sivuston tarkoitukselle.

Vääränlaiset uudelleenohjaukset

Muilta sivustoilta saatu linkkisuosio ei paranna hakukonenäkyvyyttä, jos linkin kohde-URI välittömästi ohjataan toiseen osoitteeseen jollakin seuraavista tavoista:

• 302-uudelleenohjaus
• JavaScript-uudelleenohjaus
• meta-refresh-uudelleenohjaus (ks. poikkeus)

Nämä ohjaustekniikat eivät välitä hakukoneiden tunnistamaa linkkivoimaa ohjauksen kohdesivulle vaan heittävät sen hukkaan.

Toteuta ohjaukset 301-uudelleenohjauksina, jos niitä ei voida välttää. Jos siis tuhannet linkit osoittavat URI:iin kuten www.sivusto.com ja se ohjaa osoitteeseen  www.sivusto.com/etusivu tms., niistä hyödytään hakukoneoptimoinnissa vain jos ohjauskoodi on 301 (Moved Permanently).

Oman sivuston uudelleenohjaukset voi tarkistaa ja esimerkiksi haitalliset 302-ohjaukset huomata Firefox-selaimen Live HTTP Headers -lisäosalla.

Tämän oppaan käyttöohje

Hakukoneoptimointi on luonteeltaan spekulatiivista: muut kuin hakukoneiden työntekijät eivät voi tietää algoritmien toimintaperiaatteita vaan niitä arvaillaan patenttihakemusten, kokemusten ja kokeilujen perusteella.

Tämän oppaan neuvoihin ei kannata suhtautua kuin kiveen kirjoitettuun totuuteen. Oikeaankin osuneet arvaukset saattavat näet nopeasti vanhentua, jos Google muuttaa algoritmiaan.

Älä ylioptimoi! Google voi antaa sivulle rangaistuksen pudottamalla sen hakukonesijoituksia, jos hakukoneen algoritmi huomaa, että sivua on liian voimakkaasti hakukoneoptimoitu.

Sovella tämän oppaan ohjeita ja vinkkejä harkiten ja kohtuudella. Jos tunnet olosi epävarmaksi, opiskele lisää , harjoittele optimointia vähemmän tärkeillä sivustoilla tai ulkoista hakukoneoptimointi asiantuntijan huoleksi.

Optimoinnin tulosten näkyminen saattaa viedä jopa muutaman kuukauden, riippuen siitä kuinka usein hakukoneiden botit vierailevat sivuilla. Toimenpiteiden tulokset voivat tämänkin jälkeen parantua “itsekseen”, koska esimerkiksi sivuston, sivun ja linkkien iät ovat Googlen suosimia kriteereitä.

Tätä opasta päivitetään. Kirjoitustyöni menisi paljolti hukkaan, jos antaisin tämän tekeleen vain jäädä lojumaan ja vanhentumaan. Tähän oppaaseen tehdään lisäyksiä ja korjauksia, kun siihen palautteen, lisääntyneen luulon ja hakukoneiden kehityksen perusteella tulee aihetta.

Opas on päivitetty 10.6.2010. Ensimmäinen versio julkaistiin 12.9.2007. Oppaan on kirjoittanut ja sitä ylläpitää Arttu Raittila (Twitterissä @Arttu).

8 syytä miksi esteettömyys on hyvää bisnestä

Saavutettavuus mielletään usein hyvää hyvyyttä tehtäväksi vammaisten palvelemiseksi. Esteettömyys koskee kuitenkin samalla paljon laajempia ihmisjoukkoja, minkä vuoksi sen huomioiminen on myös liiketoiminnallisesti perusteltua.

Seuraavat 8 syytä valoittavat miksi yrityksen kannattaa kallistaa korvaansa saavutettavuudelle kun se on ostamassa web-suunnittelua kotisivuilleen tai esimerkiksi verkkokaupalle.

1. Saavutettavuus tuo enemmän asiakkaita. Iäkkäät, keski-ikäiset, kännykällä nettiä selaavat, heikkolukutaitoiset, sokeat, värisokeat, lukihäiriöiset, PDA-, Linux- ja vanhojen selainten käyttäjät sekä muut saavutettavuutta tarvitsevat ryhmät muodostavat yhdessä merkittävän joukon potentiaalisia asiakkaita. On selvä kilpailuetu jos yrityksen web-sivut toimivat moitteetta myös näillä käyttäjillä.

2. Saavutettavuus on halpaa. Saavutettavuudesta puhuva web-suunnittelija ei pyri lypsämään prospektilta ylimääräistä rahaa, vaan esteettömyyden toteuttaminen kuuluu olennaisena osana hänen työtapoihinsa.

3. Saavutettavat sivut ovat luonnostaan hakukoneystävällisiä. Monet esteettömän web-suunnittelun ratkaisut auttavat sivuja sijoittumaan hyvin Googlessa ja muissa hakukoneissa ja tuovat niiden kautta lisää asiakkaita.

4. Saavutettavuus lisää käytettävyyttä. Monet saavutettavuutta lisäävät ratkaisut tekevät sivut helpommin käytettäviksi myös niille jotka eivät kuulu mihinkään erikoisryhmään. Esimerkiksi tärkeiden sanojen sijoittaminen navigaatiolinkkien ja muiden tekstinosien alkuun helpottaa ääniselaimia käyttävien sokeiden lisäksi myös aivan tavallisten käyttäjien silmäilyä.

5. Saavutettavuus on moraalisesti hyvä asia ja saa yrityksen näyttämään hyvältä. Sokeiden, iäkkäiden, kännykällä selaavien, PDA- ja Linux-käyttäjien sekä muiden erityisryhmien elämä on huomattavasti parempaa mitä useampi sivusto on heille saavutettava. Moraalisesti kestävä toiminta netissä saa koko yrityksen näyttämään hyvältä.

6. Saavutettava design tuo arvostusta kokeneilta netin käyttäjiltä. Nämä hallitsevat suurta osaa Internetistä ja vaikuttavat linkittämällä siihen, mitkä sivut nousevat kärkeen Googlen hakutuloksissa. Jos yritys antaa mainostoimiston tehdä visuaalisesti upeat mutta saavutettavuudeltaan karmeat flash-sivut, se saa osakseen väheksyntää ja halveksuntaa Internetin tehokäyttäjien piirissä, tai vähintään he pitävät yritystä netin suhteen vihjeettömänä.

7. Saavutettavuudesta tunnistaa pätevän web-suunnittelijan. Asiansa osaava web-suunnittelija seuraa tiiviisti alansa kehitystä, tuntee esteettömyyttä tukevat web-standardit eikä pyri kusettamaan asiakasta vain ulkoisesti näyttävillä sivuilla, jotka ovat silkkoa sisältä ja käytettävyydeltään kammottavia. “Entä saavutettavuus?” on itse asiassa sopiva kysymys suunnittelijan pätevyyden testaamiseen: jos suunnittelija antaa ymmärtää että kyseessä on työläs ja merkittävästi hintaa nostava lisä uusien sivujen suunnittelussa, hänen osaamisensa ei ole ajan tasalla.

8. Esteetön suunnittelu suojelee oikeusjutuilta ja huonolta maineelta. Suomessa laki ei vielä kiellä esteettömyyden laiminlyövää suunnittelua (paitsi julkisten palvelujen osalta Vammaispalvelulaki). Yhdysvalloissa ja Iso-Britanniassa tällaisia lakeja kuitenkin on olemassa, ja Suomeenkin sellainen todennäköisesti joskus tulee. Suunnittelemalla sivut esteettömiksi jo nyt vältytään mahdollisilta kalliilta korjaustöiltä, oikeusjutuilta tai huonolta maineelta tulevaisuudessa, jolloin laki ja yleinen tapa saattavat vaatia saavutettavuutta.

Milloin saavutettavuutta ei tarvita?

Joillakin aloilla web-sivujen saavutettavuus ei ole niin tärkeää. Tällaisia ovat esimerkiksi bändit ja suuret brändit, joiden tuotteiden ominaisuuksista ihmiset eivät yleensä ole kiinnostuneita. Jos sivuston poitti on lähinnä brändäys eikä niinkään tiedonvälitys tai hyödylliset toiminnot, saavutettavuus on vähemmän olennaista.

Brändin rakentaminen ymmärretään kuitenkin usein liian keskeiseksi. Tällöin tuloksena voi olla ärsyttäviä flash-animaatioita silloin kun netin käyttäjä oikeasti haluaa vain nopeasti jotakin perustietoa.

Esimerkiksi sopii Sony Ericsson -sivusto, joka oli toteutettu flashilla, kun yritin taannoin käyttää sitä uutta puhelinta etsiessäni. Flash-toteutus oli selvä virhe, sillä kännykät ovat kuitenkin sellainen tuoteryhmä, josta ihmiset haluavat myös tietoa eivätkä vain mainosgrafiikoita. Tieto puhelimesta oli ahdettu säälittävään pikku laatikkoon, jota joutui selaamaan vierityspalkilla.

En löytänyt kännykästä etsimääni tietoa, ja muutenkin lopputulos oli turhauttava kokemus, jolta olisi vältytty, jos sivusto olisi suunniteltu saavutettavuuden ja käytettävyyden periaatteita kunnioittaen. Luultavasti osa negatiivisista tunteista siirtyi koskemaan myös Sony Ericssonin puhelimia.

Jos sivusto esittelee esimerkiksi valokuvia tai graafista suunnittelua, on selvää ettei se kiinnosta ainakaan sokeita. Tässäkään blogissa ei ole huomioitu täysin saavutettavuutta, koska olen aikaisemmin järkeillyt, että lukijakunta on lähinnä hyvin näkeviä webmastereita, markkinoijia, suunnittelijoita ja yrittäjiä. Toisaalta juuri tämä kirjoitus voisi aiheensa johdosta hyvinkin kiinnostaa jotakuta näkövammaista tai muuten esteettömästä suunnittelusta hyötyvää, joten taisin (taas) päätyä siihen “suutarin lapset” -osastoon.

Miten markkinoida esteetöntä suunnittelua?

Eettisyys on minunkin mielestäni se tärkein peruste suunnitella saavutettavia web-sivuja. Yritysten liiketoimintaa ei kuitenkaan usein ohjaa moraali vaan voitontavoittelu. Siksi saavutettavuutta kannattaa markkinoida ovelammin kuin moraaliin vetoamalla.

Esteettömyys on seurausta hyvien web-standardien noudattamisesta. Näillä web-standardeilla on muitakin edullisia vaikutuksia kuin vammaisille saavutettava design. Siksi esteettömyyttä ei ehkä kannata nostaa markkinoinnin keskiöön vaan sitä voi esitellä yhtenä etuna web-standardien ja ajantasaisten työtapojen noudattamisesta.

Yksi web-standardien huomattava etu on hakukoneystävällisyys. Vaikka sivustolle joskus myöhemmin ostettaisiinkin myös erillistä hakukoneoptimointia, sekin tulee halvemmaksi jos sivujen lähdekoodia ei tarvitse uudistaa koska se on jo valmiiksi standardien mukaista. Ilmaiset asiakkaat hakukoneista kiinnostavat varmasti nuivempiakin web-suunnittelun tilaajia.

Lisää saavutettavuudesta ja sen myymisestä

Saavutettava.fi julkaisee silloin tällöin artikkeleita, uutisia ja mietteitä web-standardeista ja saavutettavuudesta.

Emil Virkki kirjoittaa esteettömän web-suunnitelun tuotteistamisen ja myynnin vaikeudesta.

Samainen Emil Virkki esittää yrityksensä sivuilla esteettömien web-sivujen hyötyjä ja tilastoja joidenkin erityisryhmien määristä Suomessa.

Lower-Literacy Users. Tässä on Jakob Nielsenin artikkeli joka oikeasti kannattaa lukea: heikkolukutaitoiset eivät ole suoranaisesti vammaisia mutta kuitenkin suuri ryhmä joka hyötyy saavutettavista ja käytettävistä web-sivuista.

Paul Boag opastaa ajattelemaan kuin asiakas. Suositeltavaa luettavaa asiakkaisiin tuskastuneille web-suunnittelijoille.

Saavutettavan suunnittelun osaajia

Suomestakin löytyy suunnittelijoita jotka kantavat saavutettavuuden ja web-standardien lyhtyä, esimerkiksi nämä kaksi:

Inventive Design. Yrittäjä Lasse Larvanko on kirjoittanut saavutettavuudesta myös sivuillaan olevassa yritysblogissa.

Rauha 2 Webdesign. Yrittäjä Emil Virkki on erikoistunut esteettömien sivustojen toteutukseen, saavutettavuutta koskevaan konsultointiin ja asiantuntija-arvioihin.

1. Global white space reset

Eri selaimet antavat XHTML- ja HTML-elementeille oletuksina erilaisia padding- ja margin-arvoja. Tästä syystä monet web-suunnittelijat ovat tottuneet nollaamaan näiden arvot usealle elementille erikseen, mikä lisää koodin määrää. Asian voi kuitenkin hoitaa kerralla kuntoon Global white space reset -nimisellä CSS-tempulla aivan CSS-tiedoston alussa. Näin:

* {
padding: 0;
margin: 0;
}


2. Letter-spacing

Tekstiä voi korostaa tai tehdä helpommin luettavaksi kasvattamalla kirjainten etäisyyttä toisistaan. Tätä voi käyttää myös linkkien tai lihavointien tyylikeinona. Vastaavaa korostuskeinoa näkee joskus vanhoissa kirjoissa.

strong {
letter-spacing: 0.1em;
}

Tällaiselta se näyttää: strong-elementti (lihavointi), jonka kirjainten väliksi on asetettu 0.1em.

3. White-space: pre

Huvittaisiko joskus saada tilaefekti pelkillä välilyönneillä ilman mittojen CSS-säätämistä? Tämä onnistuu asettamalla elementille “white-space: pre” -ominaisuus. Se kertoo selaimelle että kaikki välilyönnit on näytettävä.

p.vapaa_muotoilu {
white-space: pre;
}

Välilyönnit ja white-space:pre sallivat vapaat muotoilut

aivan kuten runoudessa

4. Monospace-fontti + white-space: pre = taulukko

Haluatko saada taulukkomaisen vaikutelman minimaalisella koodilla? CSS-määritys “white-space: pre” yhdistettynä välilyönteihin ja tasalevyiseen eli monospace-fonttiin tuottaa pienen taulukon ilman turhaa HTML-koodia. Yksi hyvä monospace-fontti on esimerkiksi Courier New.

p.taulukko {
font-family: "Courier New", monospace;
white-space: pre;
}

Kielitaito:

englanti: erinomainen

ruotsi: tyydyttävä

saksa: tyydyttävä

5. Word-spacing

CSS:n word-spacing -ominaisuutta voi käyttää sanojen välisen tilan kasvattamiseen tai vähentämiseen. Joillakin fonteilla ja ulkoasuilla kasvattaminen saattaa parantaa luettavuutta, usein siitä ei ole mitään hyötyä. Vähentämistä voi kuitenkin käyttää hakukoneoptimointiin…

Google ei pysty tunnistamaan suomenkielisten yhdyssanojen osasanoja. Jos luovuus tai aika ei riitä tämän ongelman kiertämiseen hakukoneoptimoinnissa, asia voidaan ratkaista naamioimalla CSS-tyylisäännöllä kaksi tai useampi erillistä sanaa yhdyssanaksi. Word-spacing -arvon tulee tällöin olla negatiivinen, esimerkiksi näin:

span.yhteen {
word-spacing: -0.3em;
}

Ja HTML:

<p>Tämän blogin aiheita on mm. <span class="yhteen">hakukone optimointi tekniikat</span>.</p>

Tältä se näyttää:
Tämän blogin aiheita on mm. hakukone optimointi tekniikat.

Onko tämän vinkin soveltaminen hakukoneiden spämmäämistä? Uskallan väittää, että hakutulokset muuttuisivat monelle suomalaiselle huonommiksi, jos web-sivut eivät edes vahingossa huomioisi yhdyssanavirheitä (tai “osiinsa analysoituja tapoja käsitteellistää asioita” jos haluaa olla ymmärtäväinen) . Esimerkkikin (hakukone optimointi tekniikat) on poimittu tämän blogin Google Analytics -tilastoista eli joku on suorittanut noilla sanoilla Google-haun.

Mielestäni ihmisten todelliseen kielenkäyttöön perustuva hakukoneoptimointi ei ole eettisesti ongelmallista (enkä nyt tarkoita satunnaisia kirjoitusvirheitä varten optimointia). Ääniselaimia tai pistenäyttöjä käyttävät sokeat ja tekstiselainten käyttäjät tosin huomaavat piilotetut yhdyssanavirheet, joten esimerkiksi julkisen sektorin sivuilla tätä CSS-kikkaa ei kannata käyttää vaikka se ei sivujen käytettävyyttä varsinaisesti tuhoakaan.

6. Position: absolute

Joskus sivuille pitää sisällyttää esimerkiksi Javascript-elemettejä, jotka hidastavat sivun latautumista. Tämän haittavaikutus varsinaisen tekstisisällön käytettävyydelle voidaan kiertää laittamalla elementit HTML-koodin loppuun ja pakottamalla niiden paikka sivulla CSS-tiedostossa.

Sivun ylälaidassa oleva AdSense-mainos voi latautua latautua vasta viimeiseksi, kun sen sisältävälle div-elementille on määritetty “position: absolute” -ominaisuus. Tämän div-elementin paikka voidaan sitten asettaa top-, left-, right- ja bottom-ominaisuuksien avulla. Usein riittää vain top- ja left-ominaisuuksien käyttö – erityisesti kiinteän leveyden eli fixed width -leiskoissa.

div#ylin_mainos {
position: absolute;
top: 0;
left: 20em;
}

7. Useita luokkia samassa class-attribuutissa

CSS sallii useamman kuin yhden luokan (class) käytön samalle HTML-elementille, mikä vähentää ylimääräistä koodia. Eri luokat erotetaan toisistaan välilyönneillä:

<p class="kuvateksti oikealla">A List Apart on valinnut ison rivivälin, mikä helpottaa lukemista.</p>

Jos luokkien “kuvateksti” ja “oikealla” määritykset ovat keskenään ristiriidassa, käytettävä tyyli määräytyy CSS:n cascade-prosessin mukaisesti.

Vinkki: luokkia voi käyttää tyylin määrittämisen lisäksi XHTML- ja HTML-elementtien käsittelyyn Javascriptillä.

8. Mozilla-spesifit määritykset

Haluatko suosia Firefoxin käyttäjiä makeammalla ulkoasulla? Tämä onnistuu Mozillan omilla CSS-määrityksillä, jotka eivät toimi muissa selaimissa. Esimerkiksi pyöreät kulmat saa tähän tyyliin:

div#main {
-moz-border-radius: 18px;
}

9. Riittävä riviväli

Monet ammattimaisetkin web-suunnittelua tarjoavat yritykset sortuvat tähän: tekstirivien välissä ei ole tarpeeksi tilaa, jolloin teksti näyttää luotaantyöntävän monotoniselta blokilta. Tässä ei niin esimerkillinen näyte A4 Median blogista:

Riviväliä voi säätää suuremmaksi line-height -ominaisuudella, joka tarkalleen ottaen asettaa rivin korkeuden. Usein tämä toimenpide kannattaa yhdistää pienehköön fonttikokoon parhaimman luettavuuden aikaansaamiseksi. Tässä esimerkki A List Apart -sivustolta, miten iso riviväli parantaa luettavuutta:

Rivin korkeus poikkeaa muista CSS-määrityksistä siinä, ettei mittayksikköä tarvitse välttämättä käyttää vaan arvoksi voi laittaa kerroinluvun:

p, li {
line-height: 1.5;
}

10. Avatun sivun valikkolinkin korostaminen

CMS:t eli sisällönhallintajärjestelmät ovat totuttaneet meidät siihen, että valikon kulloinkin avattuun sivuun johtavat linkit eivät aina poikkea muista ja että ne ovat ylipäätään toimivia linkkejä. Tämä on käytettävyyden kannalta hieman ongelmallista, jos linkkiä ei tarvita esimerkiksi sivuston sisällön päivittämiseen (refresh).

Mainostoimisto Mediakolmio on huomioinut käytettävyyden sivustonsa suunnittelussa:

Sivuun itseensä viittaava linkki kannattaa siis muokata valikossa erinäköiseksi. Tämä tapahtuu yksinkertaisimmillaan laittamalla avoimen sivun a-elementille esimerkiksi attribuutti id=”nykyinen” ja tyylittelemällä tämä linkki muista valikon linkeistä poikkeavalla CSS-määrityksellä. Jos linkin haluaa muuttaa lisäksi toimimattomaksi, href-attribuutti voidaan jättää a-elementistä kokonaan pois.

Manuaalinen nimeäminen jokaiselle sivulle erikseen on kuitenkin työlästä, joten asiassa voi hyödyntää joka sivulle yksillöllisesti nimettyjä body-tageja: <body id=”palvelut”>, <body id=”tuotteet”> jne. Valikossa oleville linkeille annetaan sen jälkeen class-attribuutit:

<ul>
<li><a href="index.html" class="etusivu">Etusivu</a></li>
<li><a href="palvelut.html" class="palvelut">Palvelut</a></li>
<li><a href="tuotteet.html" class="tuotteet">Tuotteet</a></li>
<li><a href="yhteystiedot.html" class="yhteystiedot">Yhteystiedot</a></li>
</ul>

CSS näyttää tällaiselta:

#etusivu .etusivu, #palvelut .palvelut, #tuotteet .tuotteet, #yhteystiedot .yhteystiedot {
laita tähän miltä haluat korostetun linkin näyttävän
}

Vaihtoehtoisesti linkin muotoilun voi myös automatisoida PHP:llä tai muulla web-ohjelmointiin käytettävällä kielellä. Tästä ei ole haittaa latautumisnopeudelle, jos cache- eli välimuistiin liittyvät asetukset ovat kunnossa.

Joissakin näkövammaisuuden muodoissa on nimittäin helpointa lukea valkoista tekstiä mustalta pohjalta. Usein mustissa designeissa esiintyy kuitenkin kaksi käytettävyys- ja saavutettavuus-ongelmaa:

1. Käytetään vain hiukan vaaleahkoa tekstin väriä, jolloin kontrasti ei ole riittävä.
2. Fontti on liian laiha: normaalin paksuiset kirjaimet “hukkuvat” helposti mustaan taustaväriin, toisin kuin valkoiseen.

Pieni kontrasti tekee lukemisesta tuskaa

Seuraava ruudunkaappaus on saksalaiselta sivustolta, jonka smashing magazine nosti esimerkilliseksi “web 2.0 -designin” edustajaksi taannoisessa artikkelissaan:

Joillakin monitoreilla ylläoleva teksti on lukukelvotonta pienen kontrastin vuoksi.

Web-suunnittelija saattaa unohtaa, että eri näyttölaitteet tuottavat erilaisen kontrastin ja värimaailman.

Joiltakin CRT-monitoreilta katsottuna monet mustan taustavärin sivut ovat lukukelvottomia ilman fonttikoon roimaa suurennusta. Käyttäjä ei välttämättä jaksa käyttää aikaa tekstin suurentamiseen vaan yksinkertaisesti poistuu ja siirtyy sivuille, joita hän voi lukea suoraan ja helposti.

Paras tekstin väri mustalla taustalla onkin hyvin vaalea –  ei kuitenkaan täysin valkoinen koska se voi aiheuttaa päänsärkyä joillekin lukijoille. Jos haluaa tyylikkyyssyistä käyttää pienempää kontrastia, voi käyttäjälle tarjota vaihtoehtoisen korkean kontrastin tilan, esimerkiksi hieman tämäntapaisen systeemin (Large-Type/Hi-contrast -linkki oikealla ylhäällä).

Lihavointi ja normaali teksti eivät ole ainoat vaihtoehdot

CSS:n font-weight-määrityksellä voidaan korjata liian ohut fontti luettavammaksi. Font-weight-arvo 400 vastaa normaalia tekstiä, 700 lihavoitua (sama vaikutus kuin HTML-elementillä <b> tai <strong>). Nämä eivät ole kuitenkaan ainoat vaihtoehdot: välissä ovat arvot 500 ja 600.

Tämän tekstin font-weight on 400 eli normaali.

Tämän tekstin font-weight on 500.

Tämän tekstin font-weight on 600.

Tämän tekstin font-weight on 700 eli lihavoitu.

Tämän tekstin font-weight on 900 eli virallisesti suurin.

Väliarvojen 500 ja 600 käyttäytyminen riippuu käytettävästä selaimesta, fontista ja fontin koosta. Joskus väliarvot tuottavat jopa paksumpaa tai leveämpää tekstiä kuin 700:n ja 900:n font-weightin fontit! Jos siis haluaa käyttää jotakin normaalin ja lihavoidun välissä olevaa fontin paksuutta, on vaikutukset syytä tutkia huolellisesti eri selaimilla ja tyylitiedostossa käytettävän font-familyn jäsenillä.

Myös sanojen ja kirjainten välejä voidaan säätää

CSS tarjoaa pari muutakin keinoa tekstin helppolukuisuuden lisäämiseen: sanojen välistä tilaa voidaan kasvattaa word-spacing-ominaisuudella, ja kirjainten väliseen tilaan tepsii letter-spacing.

Tässä tekstissä letter-spacing on 0.08em ja word-spacing 0.12em. Font-weight on 700. Rivin korkeus eli CSS:n line-height on 1.7 (kerroin). Pienikin teksti mustalla taustavärillä saadaan helpommin luettavaksi käyttämällä CSS:n tarjoamia mahdollisuuksia.