Verkkosivujen kuvia mietitään helposti vain ulkoasun kannalta. Valitaan hyvä kuva, asetellaan se sivulle ja jatketaan seuraavaan kohtaan. Kuvilla on kuitenkin paljon muitakin tehtäviä kuin tehdä sivustosta hyvännäköinen.
Liian suuret kuvat voivat hidastaa sivustoa, puuttuvat alt-tekstit heikentävät saavutettavuutta ja IMG_3827.jpg-tyyppinen tiedostonimi ei kerro kuvan sisällöstä mitään. Hyvin hakukoneoptimoitu kuva puolestaan tukee sivun sisältöä, käyttökokemusta ja hakukonenäkyvyyttä. Visuaalisilla aloilla sillä voi olla erityisen suuri merkitys myös kuvahaussa löytymiseen.
SEO-maraton osa 9/20. Tässä 20 viikon sarjassa rakennat verkkosivujesi hakukonenäkyvyyttä askel kerrallaan. Tällä viikolla käymme läpi verkkosivujen kuvat: miten ne nimetään, mitä alt-tekstiin kirjoitetaan, kuinka suuria kuvia sivuille kannattaa ladata ja mitä tekemistä tällä kaikella on SEO:n kanssa.
Klikkaa tästä suoraan viikon tehtävään.
Kuvakin on verkkosivujen sisältöä
Kuva ei ole hakukoneelle aivan samanlainen kuin ihmiselle. Me voimme vilkaista kuvaa ja ymmärtää hetkessä, että siinä on esimerkiksi hääpari Suomenlinnassa, yrittäjä työskentelemässä asiakkaansa kanssa tai valmis sisustussuunnitteluprojekti.
Hakukoneet pystyvät nykyään tulkitsemaan kuvia huomattavasti aiempaa paremmin, mutta ne käyttävät edelleen myös kuvan ympärillä olevaa tietoa ymmärtääkseen sen merkitystä. Google kertoo hyödyntävänsä esimerkiksi alt-tekstiä, kuvatekstejä, tiedostonimeä ja sivun muuta sisältöä kuvan aiheen ymmärtämisessä.
Siksi kuvien optimoinnissa ei ole kyse avainsanojen piilottamisesta kuvatiedostoihin. Tarkoitus on tehdä kuvista teknisesti toimivia ja antaa niille riittävästi kontekstia.
Sama selkeys on hyödyllistä myös tekoälypohjaisissa hauissa. Kuvan merkitys ei muodostu yhdestä alt-tekstistä, vaan siitä kokonaisuudesta, jossa kuva esiintyy.
Alt-teksti kertoo, mitä kuvassa on
Alt-teksti eli vaihtoehtoinen teksti on lyhyt kuvaus kuvan olennaisesta sisällöstä tai tarkoituksesta. Sen tärkein tehtävä liittyy saavutettavuuteen: jos ihminen käyttää ruudunlukijaa eikä näe kuvaa, alt-teksti välittää hänelle kuvan olennaisen tiedon.
Alt-tekstillä on samalla merkitystä hakukoneoptimoinnissa. Google käyttää sitä yhtenä tietolähteenä kuvan sisällön ymmärtämiseen, joten se tukee myös kuvien löytymistä Google Kuvahausta.
Hyvän alt-tekstin kirjoittamisessa kannattaa miettiä hyvin yksinkertaista asiaa: mitä tästä kuvasta pitäisi tietää, jos sitä ei näkisi?
Esimerkiksi hääkuvaajan sivulla:
Hyvä alt-teksti kertoo oikeasti, mitä kuvassa näkyy. Jos kuvassa näkyvä asia liittyy luontevasti sivun avainsanaan, sen saa tietenkin sanoa. Avainsanaa ei kuitenkaan tarvitse mahduttaa jokaiseen kuvaan vain SEO:n vuoksi.
Kuinka pitkä alt-tekstin pitäisi olla?
Alt-tekstille ei ole yhtä SEO:n määräämää ihannepituutta. Siksi en lähtisi laskemaan merkkejä samalla tavalla kuin esimerkiksi meta titlen kohdalla.
Useimmiten muutama sana tai yksi napakka virke riittää. Jos kuva välittää enemmän olennaista tietoa, myös kuvaus voi olla hieman pidempi. Tavoitteena on kuvata kuvan tarkoitus mahdollisimman selkeästi ilman turhaa selostamista.
Myös ympäröivä teksti vaikuttaa. Jos kuvan vieressä lukee jo kuvassa olevan henkilön nimi ja titteli, kaikkea samaa tietoa ei tarvitse välttämättä toistaa alt-tekstissä.
Alt-tekstiä kannattaa siis kirjoittaa ensisijaisesti ihmiselle, joka ei näe kuvaa. Kun kuvaus on oikeasti hyödyllinen ja vastaa kuvaa, se toimii yleensä hyvin myös hakukoneen näkökulmasta.
Kaikki kuvat eivät tarvitse kuvailevaa alt-tekstiä
Jos kuva on sivulla vain koristeena eikä tuo sisältöön mitään olennaista tietoa, sille ei tarvitse keksiä väkisin kuvailevaa alt-tekstiä. Saavutettavuuden kannalta koristekuvan alt-attribuutti jätetään tyhjäksi, jolloin ruudunlukija voi ohittaa kuvan.
Ajatellaan esimerkiksi osiota, jossa on otsikko “Yritysvalmennus yrittäjälle” ja sen taustalla abstrakti värikuvio. Ruudunlukijaa käyttävän ihmisen ei tarvitse kuulla kesken sisällön "vaaleanpunainen abstrakti aaltokuvio". Se ei auta häntä ymmärtämään sivua yhtään paremmin.
Samaa kuvaa voidaan kuitenkin käyttää eri yhteyksissä eri tarkoitukseen. Siksi alt-tekstiä ei kannata ajatella vain kuvan yleisenä nimenä. Mieti, mikä tehtävä kuvalla on juuri sillä sivulla, jolla sitä käytetään.
Kuvatiedosto kannattaa nimetä ennen lataamista
Tämä on pieni asia, joka unohtuu todella helposti. Kamerasta tai puhelimesta tuleva kuva saattaa olla nimeltään esimerkiksi:
IMG_3827.jpg
Ennen verkkosivuille lataamista tiedoston voi nimetä kuvaavammin:
haakuvaus-suomenlinna.jpg
Google suosittelee lyhyitä ja kuvaavia kuvatiedostojen nimiä. Tiedostonimi voi antaa hakukoneelle tietoa kuvan aiheesta, mutta sen merkitystä ei kannata myöskään paisutella. Se on yksi pieni osa kuvan optimointia, ei mikään salainen SEO-keino.
Nimeä kuva niin, että tiedostonimestä ymmärtää, mitä siinä on. Käytä pieniä kirjaimia, jätä ääkköset pois ja erottele sanat väliviivoilla.
Kuvan lataaminen suoraan kamerasta verkkosivuille ei yleensä ole hyvä idea
Tämä on yksi yleisimmistä kuvaongelmista, joita verkkosivuilla tulee vastaan. Sivulle on ladattu suoraan kamerasta tai kuvaajalta saatu usean megatavun tiedosto, vaikka kuva näkyy verkkosivulla suhteellisen pienenä.
Suuri kuva tarkoittaa enemmän ladattavaa. Jos sivulla on useita raskaita kuvia, niiden vaikutus alkaa helposti näkyä latausajassa.
Sivuston nopeus on tärkeää ennen kaikkea käyttäjälle. Jos potentiaalinen asiakas joutuu odottelemaan kuvien ilmestymistä tai sivu hyppii latautuessaan, kokemus ei ole kovin hyvä.
Google huomioi sivukokemukseen liittyviä tekijöitä myös hakutulosten järjestämisessä, vaikka nopeutta ei pidäkään ajatella yksittäisenä SEO-nappina, jonka painaminen nostaa sivun automaattisesti ylemmäs.
Kuvat ovat usein yksi helpoimmista paikoista keventää sivustoa.
Minkä kokoinen kuva verkkosivuille sitten kannattaa ladata?
Hyvä nyrkkisääntö on pyrkiä pitämään verkkosivujen kuvat alle 500 kilotavun kokoisina. Tämä ei kuitenkaan ole mikään ehdoton raja, sillä sopiva tiedostokoko riippuu kuvan käyttötarkoituksesta.
Esimerkiksi:
Pienet sisältökuvat: mielellään alle 200 kt.
Isommat sisältökuvat: pyri pysymään alle 300–500 kt.
Hero-kuvat eli sivun yläosan suuret pääkuvat: voivat olla yli 500 kt, jos kuvan laatu ja käyttötarkoitus sitä vaativat.
Nämä ovat suuntaa antavia tavoitteita. Kuvan pikselimitat, yksityiskohtaisuus ja verkkosivualustan oma kuvankäsittely vaikuttavat siihen, millainen tiedostokoko on järkevä.
Itse käytän kuvien pienentämiseen joko ilmaista verkosta löytyvää kuvanpakkaustyökalua tai Photoshopia, jos kuva on muutenkin käsittelyssä. Usein tiedostokokoa saa pienennettyä huomattavasti ilman, että kuvan laadussa huomaa eroa.
JPEG, PNG, WebP vai AVIF?
Kuvaformaateista saa halutessaan hyvin teknisen aiheen, mutta tavallisella pienyrityksen verkkosivustolla en käyttäisi tähän valtavasti aikaa.
Perusidea on tämä:
JPEG toimii hyvin tavallisissa valokuvissa.
PNG sopii esimerkiksi grafiikkaan ja kuviin, joissa tarvitaan läpinäkyvyyttä.
WebP ja AVIF ovat uudempia formaatteja, joilla voidaan usein saavuttaa hyvä kuvanlaatu pienemmällä tiedostokoolla.
Modernit verkkosivualustat ja selaimet hoitavat nykyään osan tästä työstä automaattisesti. Siksi formaatti ei yleensä ole ensimmäinen asia, jonka tarkistaisin pienyrittäjän sivustolta.
Jos sivuilla on 5 Mt:n kuvia, IMG_4728.jpg-tiedostonimiä ja alt-tekstit puuttuvat kokonaan, aloita niistä. JPEG:n ja WebP:n vertailuun voi palata myöhemmin.
Jos käytät Squarespacea, osa kuvien optimoinnista hoituu automaattisesti
Squarespace tekee ladatuista kuvista automaattisesti useita eri kokoja ja käyttää niitä eri näyttötilanteissa. Se myös toimittaa tuetuissa tilanteissa kuvia modernissa WebP-muodossa, joten jokaista JPEG-kuvaa ei tarvitse itse alkaa muuntaa WebP:ksi ennen lataamista.
Se ei kuitenkaan tarkoita, että Squarespace hoitaisi kaiken puolestasi. Liian suuria alkuperäiskuvia kannattaa edelleen välttää, ja kuvan alt-teksti sekä tiedoston nimeäminen jäävät sinun mietittäväksesi.
Squarespace suosittelee tällä hetkellä pitämään kuvat mahdollisuuksien mukaan alle 500 kilotavun kokoisina. Tätäkään en käyttäisi ehdottomana sääntönä. Suuri hero-kuva voi vaatia enemmän, ja olennaisempaa on löytää järkevä tasapaino kuvan laadun ja tiedostokoon välillä.
Kuvahaku voi olla visuaalisille yrittäjille merkittävä tapa löytyä
Jos olet hääkuvaaja, sisustussuunnittelija, kampaaja, floristi tai työskentelet jollain muulla vahvasti visuaalisella alalla, asiakkaasi saattavat etsiä palveluita ja inspiraatiota myös kuvahaun kautta.
Silloin kuvien optimointiin kannattaa suhtautua erityisen huolellisesti. Kuvaava tiedostonimi, hyvä alt-teksti, laadukas alkuperäinen kuva ja kuvan ympärillä oleva relevantti sisältö auttavat hakukonetta ymmärtämään, mitä kuva esittää ja mihin aiheeseen se liittyy.
Mutta kuvien optimointi ei kuulu vain visuaalisille aloille.
Jos olet esimerkiksi konsultti, asiakkaasi eivät välttämättä etsi sinua kuvahausta. Kevyet kuvat parantavat silti sivun käyttökokemusta, alt-tekstit saavutettavuutta ja hyvin valitut kuvat voivat auttaa ymmärtämään palveluasi sekä rakentamaan luottamusta.
Kuvien optimointi on siis muutakin kuin kuvahaussa näkymistä.
Yleisimmät kuvien optimoinnin virheet
Kun käyn yrittäjien verkkosivuja läpi, samat asiat toistuvat melko usein. Jos haluat tehdä nopean tarkistuksen omille sivuillesi, aloita näistä:
kuvat on ladattu suoraan kamerasta tai kuvaajalta useiden megatavujen kokoisina
tiedostonimet ovat muotoa IMG_3827.jpg
olennaisilta kuvilta puuttuvat alt-tekstit
alt-teksteihin on tungettu avainsanoja sen sijaan, että niissä kuvattaisiin kuvaa
jokaiselle koristekuvalle on kirjoitettu väkisin alt-teksti
kuvat eivät oikeastaan tue sivun sisältöä tai kerro yrityksestä mitään
suuri määrä raskaita kuvia hidastaa sivun käyttämistä
Helppo tapa aloittaa on Google PageSpeed Insights. Syötä sinne esimerkiksi etusivusi osoite ja tarkista, nostaako raportti kuviin liittyviä ongelmia esiin. Se voi kertoa esimerkiksi, jos kuvia toimitetaan tarpeettoman suurina tai niiden pakkaamisessa olisi parannettavaa.
Kaikkia kuvia ei tarvitse käydä heti läpi koko sivustolta. Aloita sivuista, joilla on eniten merkitystä liiketoiminnallesi.
Kuvien optimointi tiivistettynä askel askeleelta:
Mitä tapahtuu seuraavaksi SEO-maratonilla?
Nyt olemme käyneet läpi sivujen sisällön lisäksi myös yhden helposti unohtuvan osan: kuvat.
Kun kuvat on nimetty järkevästi, olennaisilla kuvilla on hyvät alt-tekstit ja tiedostokoot ovat hallinnassa, ne tukevat sivustoa sen sijaan, että hidastaisivat sitä tai jäisivät hakukoneelle irrallisiksi elementeiksi.
Seuraavissa SEO-maratonin osissa jatkamme sivuston eri osien yhdistämistä toimivaksi kokonaisuudeksi.
Viikon tehtävä: katso etusivuasi uuden asiakkaan silmin
Koko kuvakirjastoa ei tarvitse käydä kerralla läpi. Avaa tällä viikolla etusivusi ja tärkein palvelusivusi ja tarkista niiden kuvat yksi kerrallaan.
Katso tiedostonimet. Löytyykö joukosta IMG_3827.jpg-tyyppisiä nimiä? Nimeä uudet kuvat kuvaavasti ennen lataamista.
Tarkista alt-tekstit. Onko olennaisilla kuvilla kuvaava alt-teksti? Poista samalla väkisin lisätyt avainsanalistat ja jätä puhtaasti koristeelliset kuvat ruudunlukijan ohitettaviksi.
Tarkista kuvien koko. Jos olet ladannut sivulle useiden megatavujen alkuperäiskuvia, selvitä voisitko pienentää ja pakata ne.
Aja sivu PageSpeed Insightsin läpi. Katso, nostaako työkalu esiin kuviin liittyviä ongelmia.
Katso kuvia myös asiakkaan silmin. Auttaako kuva ymmärtämään palveluasi, tutustumaan sinuun tai näkemään työsi jälkeä? Jos ei, mieti tarvitseeko kuvaa sivulla lainkaan.
Kuvien optimoinnissa ei tarvitse tavoitella teknistä täydellisyyttä. Tärkeintä on ymmärtää, että kuvatkin ovat osa verkkosivujesi sisältöä. Kun ne palvelevat asiakasta, latautuvat järkevästi ja hakukone pystyy ymmärtämään niiden merkityksen, ne tekevät juuri sitä työtä, jota verkkosivujen kuvien kuuluukin tehdä.
Haluatko apua verkkosivujesi SEOon?
Hakukoneoptimointi koostuu monesta tällaisesta palasesta. Yksittäinen alt-teksti tai pakattu kuva ei ratkaise verkkosivuston näkyvyyttä, mutta kun sivuston rakenne, sisältö, kuvat ja tekninen toteutus tukevat toisiaan, kokonaisuudesta tulee huomattavasti vahvempi.
SEO Startissa käymme verkkosivusi läpi kokonaisuutena ja selvitämme, mitkä asiat tällä hetkellä tukevat löydettävyyttä ja missä on vielä parannettavaa. Saat selkeän suunnitelman siitä, mitä kannattaa tehdä ja missä järjestyksessä.
Jos haluat tietää, missä kunnossa verkkosivustosi on tällä hetkellä, varaa maksuton kartoitus. Katsotaan yhdessä, mistä näkyvyyttä kannattaa lähteä kehittämään seuraavaksi.
Haluatko varmistaa, että saat SEOlla tuloksia?
Jos haluat sivustosi SEOn kuntoon, autan mielelläni.
Varaa kanssani lyhyt (30 min) tapaaminen, ja keskustellaan yhdessä, miten voisin auttaa sinua saavuttamaan tavoitteesi.
Jos et löydä sopivaa aikaa, laita viestiä ella@luovasto.fi ja katsotaan kalenterista tilaa keskustelulle.
