Näin hakukoneoptimoit kuvasi 10 minuutissa

Reading time 6 min.

Verkkosivujen hakukoneoptimointi on tärkeää sivujen löydettävyyden ja näkyvyyden kannalta. Osana tätä piilevät verkkosivuilla käytetyt kuvat. Kuvat vahvistavat tekstisi viestiä ja tekevät sivuistasi visuaalisesti vaikuttavamman. Monet ymmärtävät kuvien tuoman lisäarvon ja panostavat asianmukaisesti verkkosivuillaan käytettyjen kuvien laatuun. Usein kuviin panostus jää kuitenkin vain visuaalisuuteen, ja kuvien merkitys hakukonenäkyvyydelle unohdetaan kokonaan.

Kun lisäät kuvan verkkosivuillesi, oli kyse sitten blogista tai verkkokaupasta, ota huomioon seuraavat nopeat vinkkimme. Näillä vinkeillä optimoit kuvasi ja takaat niiden hakukonenäkyvyyden 10 minuutissa.

1. Selkokieli ja avainsanat

Kuva luokitellaan hakukoneessa korkeammalla, kun se liitetään asianmukaiseen tekstiin. Hakukoneet etsivät avainsanoja myös kuvien tiedostonimistä, joten käytä kuvan aiheeseen liittyviä avainsanoja kuvien nimeämisessä. Määrittele Google Analytics -työkalua käyttäen, millä sanamuodoilla aiheeseen liittyvät haut tapahtuvat.

Esimerkki: Sinulla on kuva autosta, joka on alkuperäiseltä tiedostonimeltään muotoa DCMAUTO200.jpg. Hakukoneen kannalta olisi parempi, jos nimeäisit kuvan muotoon 2017-Kodiaq-mallinumero-musta.jpg. Tällöin otat huomioon mahdolliset asiakkaat, jotka etsivät mustaa Kodiaq mallinumero 2017 autoa.

2. Optimoi ALT-tekstit viisaasti

Alt-tekstit (alternative text eli vaihtoehtoinen teksti) ovat tekstimuotoinen vastine kuville ja näkyvät silloin, kun selain ei syystä tai toisesta lataa kuvatiedostoja. Riippuen myös selaimen asetuksista, alt-teksti saattaa näkyä, kun asetat hiiren hetkeksi kuvan päälle.

Alt-teksti on tärkeä osa hakukoneoptimointia. Se yhdistää avainsanat ja kuvan toisiinsa. Tunnisteen käyttäminen on erityisesti olennaista, kun sinulla on verkkokauppa ja haluat tuotekuviesi näkyvän hakutuloksissa.

Esimerkki. Olet lisäämässä kohdan 1 kuvaan alt-tunnistetta. Jos sinulla on WordPress käytössä, sinun ei tarvitse kuin lisätä kuvaus “vaihtoehtoinen teksti” -kenttään.

Muussa tapauksessa sinun tulee lisätä kuvaus seuraavaanlaiseen koodinpätkään:

Pieniä huomioita alt-tunnisteeseen liittyen:

Muista kuvailla selkeästi ja ytimekkäästi kuvaa
Verkkokaupan tuotekuvien alt-tunnisteeseen kannattaa lisätä sarjanumero tai malli
Älä käytä alt-tekstiä koristekuvissa

Muista tarkastaa verkkosivujesi sisältöä aika ajoin ja tarkista, että jokaisella blogisi tai verkkokauppasi kuvalla on alt-teksti.

3. Otsikoi kuvasi

Kuvan "titlen" eli otsikon tehtävänä on tarjota lisätietoa sivuston vierailijalle. Tämä teksti ei heti näy sivuston kävijälle, mutta sen saa näkyviin pitämällä hiiren osoitinta kuvan päällä muutaman sekunnin ajan.

Hakukoneita ajatellen ALT-teksti on kuitenkin näistä kahdesta tärkeämpi. Kuvan otsikosta kannattaa tehdä ytimekäs ja lyhyt muutaman sanan mittainen paketti, joka kertoo kuvan tärkeimmän sisällön. Mikäli kuvia on sinulla paljon ja et millään kerkeä kaikille kirjoittaa otsikkoa ja alt-tekstiä molempia, voidaan harkita kuvan otsikon pois jättämistä. Muista kuitenkin, että otsikko tuo kuvalle aina lisäarvoa, vaikka se ei olisikaan vaadittu.

4. Kuvien mitat ja tuotenäkymä

Älä lataa sivuillesi suurinta mahdollista kuvakokoa, jotta sivunopeus ei kärsi. Jos verkkosivusi kuvat latautuvat hitaasti, se ei tuota hyvää käyttäjäkokemusta vaan saatat pian huomata, ettei sivuillasi ole paljoa kävijöitä. Selvitä vähimmäiskoko, jolla kuvasi näyttää tarkalta ja täyttää halutut mitat.

Monissa verkkokaupoissa halutaan näyttää tuotteista monta näkymää. Varmista, että kuvat ovat samankokoisia ja laadultaan sopivia. Suositus on käyttää neliönmallisia kuvia, jotta kuva skaalautuisi automaattisesti esimerkiksi sisällönhallinnan järjestelmissä. Pystykuvia joutuu usein lähtökohtaisesti muokkaamaan enemmän. Monen näkymän kuvissa tulee huomioida erilainen alt-teksti. Näkymien eri kuville tulisi lisätä uniikki tunniste tiedostonimen perään.

Esimerkki: Haluat jokaisen autokuvasi näkyvän hakukonetuloksissa. Tällöin sinun tulisi nimetä kuvien tiedostonimet seuraavasti 2017-Kodiaq-mallinumero-musta-takaosa.jpg ja 2017-Kodiaq-mallinumero-musta-etuistuimet.jpg, jne. Sama periaate pätee alt-teksteihin.

Näin saat lisää näkyvyyttä kuvillesi ja parhaimmassa tapauksessa myös lisää liikennettä.

5. Kuvan koko

Kuten yllä mainittiin, älä käytä suurimpia kuvakokoja sivustollasi. Tutkimusten mukaan sivulla vierailevat odottavat keskimäärin 3 sekuntia (mobiililla 5 sekuntia) sivun latautumista. Isojen kuvien latautuminen saattaa hidastaa sivustoasi merkittävästi. Tunnista kuinka ison kuvan tarvitset. Vältä liian suuria kuvakokoja. Hyvä periaate on pitää kuvakoko alle 100kb.

Joskus sivuston responsiivisuus vaatii suuremman kuvakoon käyttöä, mutta silloinkin kuvan tiedostokoko kannattaa optimoida mahdollisimman pieneksi.

Kuvien optimointiin voit käyttää ilmaisia verkosta löytyviä työkaluja. Hyviä lisenssipohjaisia ohjelmia on useita, näistä ehkä yksi tunnetuimpia Adobe Photoshop. Vastaava hyvä ja ilmainen kuvanmuokkausohjelma on GIMP.

6. Kuvatiedoston muoto

Käytetyimmät tiedostomuodot ovat jpeg- (tai jpg), png-, ja gif-muodot. JPEG-tiedostomuotoja on mahdollista pienentää huomattavasti kuitenkaan laatuun liikaa vaikuttamatta.

GIF-tiedostomuotoa käytetään pääasiallisesti ikonien ja muiden yksinkertaisten kuvien tapauksessa. Käytä gif-muotoa hyvin yksinkertaisten kuvien kanssa.

PNG-muoto tarjoaa vaihtoehdon gif-tyyppiselle kuvalle. Sen lisäksi, että png tukee läpinäkyvyyttä, se myös tukee enemmän värejä kuin gif. Värit eivät myöskään haalistu monien uudelleen tallentumiskertojen jälkeen. PNG:stä on yhä suositumpi tiedostomuoto kaikista kolmesta, vaikka se vaatiikin usein suuremman tiedostokoon jpeg:iin nähden.

Yleisesti ottaen,

Käytä JPEG:iä, kun haluat käyttää valokuvia; esim. tuotekuvia verkkokaupoissa
Älä koskaan käytä GIF:iä, kun tarvitset suuria kuvia
PNG on hyvä vaihtoehto edellisille. Jos mahdollisuutena on käyttää pelkästään tätä tiedostomuotoa, käytä mieluummin PNG-8:a kuin PNG-24 -muotoa. Jälkimmäinen on lähes kolme kertaa isompi kuin PNG-8.

Lähes kaikki kuvankäsittelyohjelmat tallentavat näihin muotoihin.

7. Thumbnails eli pikkukuvat

Verkkokaupoissa usein käytetyt thumbnails-kuvat, eli niin sanotut pikkukuvat, voivat osoittautua ongelmallisiksi. Liian suurina ne haukkaavat nopeasti sivunopeudesta osansa. Lisäksi alt-tekstin liittäminen pikkukuviin ei ole suositeltavaa, jos kuvasta on olemassa aktiivisessa käytöstä suurempi versio.

Varmaankin haluat, että Google indeksoi suuremman ja parempilaatuisen kuvan? Tässä tapauksessa sinun tulee käyttää aivan erilaista alt-tekstiä pienessä kuvassa kuin vastaavassa suuressa kuvassa. Voit myös jättää tekstin pois.

Siinäkö kaikki?

Jos aika ei ole ongelma, voit ottaa pureskeltavaksi myös seuraavat asiat. Nämä saattavat vaatia hieman enemmän perehtymistä, mutta tuovat varmasti lisäarvoa.

Lisää kuvakartta (sitemap)

Jotta hakukoneet löytäisivät optimoidut kuvasi, kannattaa sivustolle luoda erillinen sivukartta kuvillesi. Tämä on erityisen tärkeää, jos käytät sivuillasi JavaScript-koodin pätkiä.

Kuvakartat eivät takaa, että kuvasi indeksoituvat, mutta Googlen Webmasters -työkalua käyttämällä saat hyviä ehdotuksia kuvien optimointia varten.

Lisää kuvakartoista Googlen ohjeista.

Suosi CSS-muotoilua

Itse kuvien sijaan käytä CSS-muotoilun käyttöä niin paljon kuin mahdollista. CSS-tyylit ovat kevyempi vaihtoehto kuville. Jos kuitenkin päädyt valitsemaan kuvat CSS-muotoilun sijaan, muunna ne mieluiten PNG-8 tai GIF -muotoon.

Mitä jos en halua kuvieni näkyvän hakukoneessa?

Sivustolla saattaa olla kuvia, jotka halutaan pitää hakukoneilta piilossa. Tälläisiä voivat olla esimerkiksi suuret esitteet tai tekniset piirustukset. Piilottaaksesi kuvat voidaan ne siirtää esimerkiksi yhteen hakemistoon, ja sivuston robots.txt -tiedostoon voidaan asettaa kuviin liittyvä erillinen kielto. Näin hakukoneet eivät löydä kuviasi.

Ymmärrän, mutta...

Jos aikasi ei riitä, peruasiat tuntuvat vaikeilta tai haluat tietää asioista enemmän, ota meihin rohkeasti yhteyttä. Voit ottaa myös selvää verkkosivusi yleisestä hakukoneystävällisyydestä alla olevalla maksuttomalla testillä.