Kuvat ovat olennainen osa verkkosivuston visuaalista ilmettä ja käyttäjäkokemusta. Niiden merkitys ei kuitenkaan rajoitu pelkkään estetiikkaan, vaan oikein optimoidut kuvat parantavat sivuston saavutettavuutta, latausnopeutta ja ennen kaikkea hakukonenäkyvyyttä.
Hakukoneoptimointi ei ole vain koodia, rakenteita ja tekstiä, vaan siihen kuuluvat myös visuaaliset elementit, kuten kuvat. Siksi kuvien hakukoneoptimointi on olennainen kokonaisuus SEO:ta, jonka takia se kannattaa huomioida.
Etenkin verkkokauppojen hakukoneoptimoinnissa kuvien optimointi on kriittinen osa SEO-optimointia, koska lähtökohtaisesti useimmilla verkkokaupan sivuilla löytyy lukuisia tuotekortteja, joissa jokaisessa löytyy myös tuotekuva.
Tässä artikkelissa käymme läpi seitsemän keskeistä asiaa, jotka kannattaa huomioida kuvien optimoinnissa. Artikkelin lopusta löydät myös bonusvinkin kuvien löydettävyyden maksimointiin.
1. Tiedostonimien merkitys
Kuvien tiedostonimet ovat yksi yksinkertaisimmista, mutta usein unohdetuista SEO-keinoista. Hakukoneet lukevat kuvatiedoston nimet, joten kuva nimeltä etusivu-banneri.jpg ei kerro Googlelle mitään verrattuna nimeen tamperelainen-mainostoimisto-tiimi.jpg. Nimeä kuvat aina kuvaavasti, käyttäen haluttuja avainsanoja ja välttäen turhia merkkejä tai välejä (käytä väliviivaa -).
2. Alt-teksti on saavutettavuuden kulmakivi
Alt-teksti eli vaihtoehtoinen teksti kertoo, mitä kuvassa on. Se on elintärkeä ruudunlukijoita käyttäville henkilöille sekä tilanteissa, joissa kuvaa ei pystytä lataamaan. Hakukoneet käyttävät alt-tekstiä ymmärtääkseen kuvan sisältöä. Hyvä alt-teksti on lyhyt, kuvaava ja sisältää tarvittaessa olennaisen avainsanan.
Esimerkkejä erilaatuisista alt-teksteistä:
- Huono alt-teksti: kuva1 tai banneri
- Keskiverto alt-teksti: toimisto
- Hyvä alt-teksti: Hymyilevä tiimi toimistolla – digitoimisto Tampereella
Hyvä alt-teksti tuo lisäarvoa sekä saavutettavuuden että hakukonenäkyvyyden kannalta.
3. Kuvakoot vaikuttavat latausnopeuteen
Liian suuret ja raskaat kuvat hidastavat sivustoja turhaan. Tämä onkin yksin yleisimmistä sivustoja hidastuttavista tekijöistä. Sivuston latausnopeus on suora sijoitustekijä hakukoneissa, joten kuvien kuvakokojen optimointi on sekä SEO- että käyttäjäystävällisyyden kannalta hyvin kriittistä. Kuvien hakukoneoptimointi on siis muutakin kuin avainsanojen sijoittelua.
Tavoitteena on säilyttää riittävä kuvanlaatu mahdollisimman pienellä tiedostokoolla. Sivustolle ei kannata siis ladata suoraan esimerkiksi 5 MB kokoista suurta kuvaa, vaan miettiä sen käyttötarkoitusta ja skaalata tai leikata kuva sen aitoa käyttöä varten pienemmäksi.
4. Oikea tiedostomuoto
Kuvan tiedostomuoto eli kuvaformaatti vaikuttaa sekä kuvan laatuun että tiedostokokoon. Yleisiä valintoja:
- JPEG: useimmiten normaalit valokuvat
- PNG: grafiikat, joissa tarvitaan läpinäkyvyyttä
- SVG: vektorimuotoinen grafiikka, kuten logot ja ikonit – erittäin kevyt ja skaalautuu tarkasti eri kokoihin
- WebP / AVIF: modernit formaatit, jotka yhdistävät hyvän laadun ja pienen koon
Jos sivustosi tukee WebP- tai AVIF-formaatteja, niitä kannattaa suosia perinteisten JPEG- tai PNG-formaattien sijaan, koska ne tuovat yleensä parhaimmat tulokset koko-laatusuhteen puolesta.
5. Responsiivisuus eri laitteille
Responsiiviset kuvat skaalautuvat näytön koon mukaan eivätkä ”katoa näytön taakse” suuren koonsa takia. Näin varmistat, että kuva ei ole turhan suuri mobiililaitteilla tai epätarkka suurilla näytöillä.
HTML:n srcset-attribuutti tai CSS:n media queries -ratkaisut auttavat kuvien responsiivisuuden toteuttamisessa.
Olemme kirjoittaneet verkkosivujen responsiivisuudesta myös laajemman blogikirjoituksen ”Responsiivisuus – mitä, miksi ja miten?”.
6. Lazy loading – nopeutta ilman kompromisseja
Lazy loading tarkoittaa sitä, että kuvat ladataan vasta kun ne tulevat näkyviin selaimessa. Tämä parantaa sivun ensilatauksen nopeutta merkittävästi, kun sivuston ei tarvitse ladata kaikkia kyseisellä sivulla olevia kuvia välittömästi.
Lazy loadingin käyttöönotto onnistuu helposti lisäämällä kuvatägeihin HTML-attribuutin loading=”lazy”. Muuta ei tarvitse!
Huom! Lazy loadingia ei ole tarkoitettu käytettävän sivun ensimmäisen näkymän (above the fold) kuvia varten, koska se voi heikentää käyttökokemusta sekä Googlen mittaamia Core Web Vitals -arvoja. Kaikki alkunäkymän kuvat ja logot voi siis jättää “normaaleiksi” kuviksi ilman lazy loadingia.
7. Kuvan konteksti ja sisällön yhteys
Kuva ei toimi yksinään. Hakukoneet arvioivat sen merkitystä myös kuvaa ympäröivän tekstin, otsikoiden ja kuvatekstien perusteella. Varmista, että kuva tukee sivun aihetta ja että se esiintyy loogisessa yhteydessä muun sisällön kanssa.
Bonus: Kuvien sitemapillä kuvat helpommin Google kuvahakuun
Jos haluat maksimoida kuviesi näkyvyyden Googlen kuvahaussa, voit hyödyntää erillistä kuvien sitemap-tiedostoa. Kuvien sitemap ei ole pakollinen, mutta se auttaa Googlea indeksoimaan sivustosi kuvia tehokkaammin, erityisesti silloin kun kuvat eivät ole suoraan HTML-sisällössä tai ovat ladattavissa JavaScriptin kautta.
Sitemapiin voi lisätä tiedot kuvien sijainnista, ja se voidaan liittää osaksi olemassa olevaa sivustokarttaa tai tehdä omaksi tiedostokseen. Hakukoneet löytävät kuvia muutenkin, mutta kuvien sivukartta antaa niille selkeän listauksen kuvista, mikä voi parantaa niiden esiintymistä Googlen kuvahaussa.
Tämä ei ole kriittisimpiä osa-alueita, mutta se on hyvä lisä niille, jotka haluavat maksimoida kuvien orgaanisen näkyvyyden – erityisesti jos visuaalisella sisällöllä on merkittävä rooli sivuston liikenteen tai liidien kannalta.
Kuvien hakukoneoptimointi ei ole monimutkaista
Kuvien hakukoneoptimointi ei ole monimutkaista, mutta se vaatii huomiota yksityiskohtiin. Lukuisten kuvien optimointi vaatii myös jonkin verran aikaa, mutta siitä on valtavan paljon hyötyä.
Tiedostonimet, alt-tekstit, kevyet ja responsiiviset kuvat sekä kontekstiin sopivuus ovat asioita, joiden huomioiminen parantaa sekä hakukonenäkyvyyttä että käyttäjäkokemusta.
Jos haluat apua kuvien tai koko sivustosi optimoinnissa, autamme mielellämme! Lue hakukoneoptimoinnin palvelustamme lisää.
