Hakukoneoptimointi. Laadukas Sivusto ja Verkkokauppa.

Kuvien optimointi

Luottoluokitus AAA

Verkkosivuston kuvien hakukoneoptimointi

Kuvat ja grafiikka ovat keskeisellä sijalla nykyaikaisessa verkkosisällössä. Kuvien avulla sivuston sisällöstä voidaan tehdä mielenkiintoisempaa ja havainnollisempaa, jolloin sivuston käyttäjät kokevat sivuston miellyttävämpänä ja kiinnostavampana. Hakukoneoptimoinnissa kuvien merkitys tulee esiin silloin, kun sisällöstä halutaan tehdä monipuolisempaa ja käyttäjien kannalta selkeämpää. On kuitenkin hyvä huomioida, etteivät hakukoneet saa paljoakaan irti yksittäisen kuvatiedoston sisällöstä, ellei kuvan yhteyteen tallenneta riittävästi lisätietoja. Tästä syystä kuvien optimointi kannattaa suorittaa sivuston hakukoneoptimoinnin yhteydessä.

Miksi kuvat tuottavat ongelmia hakukoneille?

Kuvien tuomat ongelmat johtuvat siitä, että hakukoneet on alusta pitäen suunniteltu käymään läpi sivuston tekstisisältöä. Kuvissa esitettävän tiedon koneellinen käsittely vaatisi käytännössä keinotekoisen ”näköaistin”, ja silloinkin valitun kuvan ja alasivun välinen asiayhteys saattaisi jäädä hakukoneelta epäselväksi. Tästä syystä hakukoneet joutuvat turvautumaan erilaisiin apukeinoihin kuvien sisällön tulkinnassa. Hakukoneoptimoinnin yhteydessä tehtävä kuvien optimointi pyrkii siis varmistamaan, että hakukoneet saavat riittävästi tietoa myös sivuston kuvista.

Kuvien optimointi, perusasiat

Sivustolla olevien kuvien optimointi alkaa kuvatiedoston nimeämisestä ja kuvaformaatin valinnasta. Kuvaformaatteina verkkosivuilla käytetään yleisimmin gif, jpg tai png -kuvia, koska kaikki yleisimmät selainohjelmat tukevat näiden formaattien käyttöä. Kuvatiedoston nimeäminen on puolestaan hakukoneita varten tehtävä toimenpide. Tiedostonimestä tulisi nopeasti selvitä kuvan aihe tai kuvassa käsiteltävä asia. Esimerkiksi jos kuvassa on punainen villapaita, voidaan kuvan nimenä käyttää ”villapaita-punainen.jpg”.
Huomaathan, että tiedostossa olevat välilyönnit kannattaa korvata väli- tai alaviivalla. Lisäksi tiedoston nimessä ei kannata käyttää ääkkösiä. Näin toimimalla hakukoneet voivat hyödyntää kuvan nimessä olevaa tietoa.

Jos yksittäisellä alasivulla on useampi kuva samasta aiheesta, tulisi tiedostojen nimet pitää riittävän erilaisina. Älä siis nimeä kuvia ”villapaita1.jpg”, ”villapaita2.jpg” -tyylisesti, vaan keskity kertomaan kuvan sisällöstä; parempia nimiä voisivat olla vaikkapa ”villapaidan-hihan-yksityiskohdat.jpg” ja ”villapaita-lahjapakkauksessa.jpg”.

HTML-koodissa kuvan yhteyteen voidaan tallentaa myös erillinen ALT-teksti (alternative text). ALT-tekstin tehtävänä on näkyä verkkosivuilla silloin kun kuvan lataaminen ei syystä tai toisesta onnistu. Tästä syystä ALT-tekstin tulisi kertoa selkokielisesti sivulla olevasta kuvasta. ALT-tekstin pituus on hyvä pitää 4-7 sanassa. Näin tekstistä saadaan selkeä, lyhyt ja ytimekäs.

Myös kuvan yhteyteen (yleensä kuvan alapuolelle) voidaan lisätä erillinen kuvateksti, jossa kuvan sisällöstä voidaan kertoa esim. yhdellä tai kahdella lauseella.

Pidä kuvakoot pieninä

Suuret kuvat latautuvat hitaasti ja vaikuttavat näin ollen myös sivuston latausaikoihin. Tästä syystä yksittäisen kuvatiedoston koko olisi hyvä pitää alle 100 kilotavun. Yleensä tähän tavoitteeseen päästään, kun sivustolla ei käytetä leveydeltään tai korkeudeltaan tarpeettoman suuria kuvia. Mikäli sivustosi esittää kuvat koossa 300x300 pikseliä, älä tallenna palvelimelle kuvia koossa 1000x1000 pikseliä – tämä toimintatapa ainoastaan nostaa kuvatiedoston kokoa.

Joskus sivuston responsiivisuus vaatii hieman toivottua suuremman kuvakoon käyttöä, mutta näissäkin tapauksissa kuvan tiedostokoko on suositeltavaa optimoida mahdollisimman pieneksi.

Kuvien microdata -merkinnät

Semantiikan avulla hakukoneita voidaan auttaa ymmärtämään kuvia entistä paremmin.  Esimerkiksi ImageObject -merkinnöillä hakukoneita voidaan auttaa tulkitsemaan kuvan ympärille tallennettua tietoa. Nämä niin sanotut jäsennellyt tiedot, voidaan toteuttaa joko micodata, RDFa tai JSON-LD -merkintöinä.

Jos et halua hakukoneiden käsittelevän kuviasi

Joskus osa sivustolla olevista kuvista halutaan pitää hakukoneiden ulottumattomissa. Kuvat voivat olla esimerkiksi suurikokoisia esitteitä tai teknisiä piirustuksia, joille ei haluta näkyvyyttä Googlen kuvahaussa. Tällöin suurikokoiset kuvat voidaan esimerkiksi siirtää yhteen hakemistoon, ja sivuston robots.txt -tiedostoon voidaan asettaa erillinen kielto, joka estää hakukoneita vierailemassa tuossa hakemistossa.