Näin optimoit sivustosi käytettävyyden

Sivuston käytettävyys ja hakukoneoptimointi

Miksi sivuston käytettävyys tai saavutettavuus vaikuttaa hakukoneoptimointiin? Lue täältä miksi ja miten korjaat asian helposti. Yhä useampi näkövammainen selaa internettiä ja useampi muukin käyttää sivustoilla nytönlukijaa eli ohjelmaa joka lukee ruudussa olevan tekstin sinulle. Mikäli sivustosi ei ole saavutettavissa se vaikuttaa myös sivustosi hakukonesijoituksiin negatiivisesti.

Mitä tarkoitetaan käytettävyydellä eli saavutettavuudella?

Saavutettavuus on aika iso määrite mutta lyhyesti saavutettavuudella eli siis käytettävyydellä tarkoitetaan sitä että sivustolla oleva sisältö on helposti saavutettavissa myös näkövammaisille henkilöille jotka turvautuvat näytönlukija ohjelmistoihin. Sivustolla voi olla myös tekstin ja otsikoiden osalta ongelmia saavutettavuudessa eli teksti on joko liian pientä luettavaksi tai tekstin ja tekstin takana oleva väri on kontrassiltaan heikko eli esimerkiksi värisokea ei pysty lukemaan tekstiä sivutollasi. Saavutettavuudesta on englanniksi opas tällä ja suomeksi täällä. Googlen lighthouse testissä on myös osio saavutettavuudelle johon kannattaa tähdät 100/100 tulos, eli suosittelen korjaamaan käytettävyyteen liittyvät ongelmat sillä verkko kuuluu meille kaikille myös niille jotka eivät välttämättä pysty lukemaan tekstejä ja joutuvat turvautumaan nytönlukijoihin.

Miten korjaan saavutettavuuden eli käytettävyyden?

Sivuston käytettävyys voidaan testata erilaisilla testeillä itse kytän Googlen Lighthousea koska samalla saan tiedot SEO:hon liittyvistä ongelmista googlen lighthouse on Chrome selaimeen ladattava ilmainen lisäosa. Moni sivusto useasti kohtaa ongelmia joko valikon nimeämisessä (mobiili navin nappi), fontti koko on liian pieni tai sivustoa ei voida zoomata (viewport=0) nihin kannattaa jo heti sivuston luonnissa puuttua. Voit myös käyttää maksutonta web accessibility työkalua joka kertoo täyttääkö sivustosi WCAG 2.1 standardin, löydät testin tästä.

Viewport eli siis sivuston suurentaminen märitetään: <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0"> tagilla joka tulee asettaa sivuston jokaisen sivun head osioon. WordPressissä tämä on yleensä määritetty automaattisesti niin että sivustoa voidaan zoomata joissakin teemoissa kuitenkin ei ole mahdollisuutta muuttaa viewport tagia kuin functions.php tiedostossa tai sitten lisäosalla jolla voidaan hallita viewport tagia. Useampi kotisivun tekijä sanoo että sivusto on responsiivinen kun käyttää viewport tagia mutta tämä ei aina pidä paikkaansa vaan osalla viewport tagi on lisätty niin ettei sivustoa voida suurentaa puhelimella sormia käyttämällä.

Seuraava osa hakukoneoptimointi oppaassamme on: Latausnopeus.

Usein kysyttyä sivuston käytettävyydestä

Miten testata onko sivusto saavutettavissa?

Itse käytän sivuston saavutettavuuden mittaamiseksi joko googlen lighthouse ohjelmaa tai sitten webaccessibility.com sivustoa joka kertoo onko sivustosi WGAC 2.1 standardin mukaisesti rakennettu ja miten voit korjata saavutettavuuteen liittyvät ongelmat itse.

Mistä voin tutustua saavutettavuuteen?

Saavutettavuudesta on englanniksi ja myös suomeksi omat sivustonsa, kerromme sivustollamme yleisesti saavutettavuudesta ja myös annamme sinulle linkit yläpuolella mistä voit tutustua tarkemmin saavutettavuuteen ja parantaa oman sivustosi tuloksia.

Miksi saavutettavuus vaikuttaa hakukoneoptimointiin?

Yhä useampi verkon selaaja lukee sivustoja näytönlukija ohjelmilla, usealla selaaja on jonkin sortin näkövamma mikä estää sivuston lukemisen muilla tavoilla. Näkövammaisia varten voimme optimoida sivuston niin että henkilö pystyy selaamaan sivustoa näytönlukija ohjelmiston avulla mahdollisimman helposti.

Miten saan mobiilisuurennuksen sivustolle?

Mobiililaitteita varten voimme määrittää viewport tagin avulla onko sivusto suurennettavissa ja kuinka suuri zoomaus voi olla, tämä on kuitenkin eri asia kuin responsiivinen sivusto. Viewport tagi tulisi olla jokaisen sivun HEAD osiossa ja zoomaus 3-5 väliltä.

Miten rakentaa responsiivinen kotisivu?

Responsiivinen kotisivu rakennetaan yleensä CSS:ää käyttäen eli määritetään erilaiset tyylit mobiililaitteille, voimme myös lajitella sisältö eritavalla mobiilissa kuin tietokoneversiossa. Mobiililaitteissa tekstin tulisi olla helposti luettavissa, elementtien ei tulisi mennä toistensa päälle ja sisältö ei saa ylittää näytön leveyttä, eli sivuston tulisi skaalautua niin mobiiliin kuin tietokoneen ruudulle.