Karhulla on asiaa

Kuvien nimeäminen ja vaih­toeh­toi­nen teksti

Katja Heiskanen 3

Otsikoiden, metakuvausten ja tekstisisältöjen hiomisen lisäksi hakukoneoptimoinnin kannalta on tärkeää kiinnittää huomiota myös verkkosivuston kuviin. Googlen kuvahaku on yhä suurempi liikenteen lähde. Miten tarjota sopivaa sisältöä myös kuvahaun puolelle?

Sen sijaan, että antaisi Googlen arvailla, mitä verkkosivuston kuvissa mahdollisesti on kuvattu tai mitä niillä halutaan ilmentää, on parempi itse kertoa se tekstimuodossa.

Kuvatiedoston nimeäminen

Tiedostomuodosta riippumatta kuvan nimeäminen on järkevää jo oman työn helpottamiseksi: jos kuvalla on kuvaileva nimi, ei tarvitse arvailla, mikä samankaltaisista numerosarjoilla nimetyistä kuvista mahtaa olla se, jota nyt etsin. Kuvan nimeämisessä kannattaa pitää mielessä muutama perussääntö.

  1. Nimeä kuva jo ennen kuin siirrät sen verkkosivustolle. Kuvatiedosto on paljon helpompi nimetä omalla tietokoneella kuin Drupalissa tai WordPressissä.
  2. Käytä samaa kieltä kuin verkkosivulla, jonne kuva tulee. Jos kyseessä on suomenkielinen blogikirjoitus, nimen on hyvä olla suomeksi.
  3. Älä käytä ääkkösiä tai välilyöntejä.
  4. Erota sanat väliviivalla.
  5. Kuvaile, mutta älä rönsyile. Kuvan nimen on hyvä olla kohtuullisen ytimekäs, mutta kuitenkin tarpeeksi kuvaileva. Jälleen on syytä miettiä, millaiseen käyttöön kuva tulee. Onko se logo, kategoriasivun pääkuva, tuotekuva vai kenties uutisen kuvituskuva? Jos tuotteesta on useampia kokoja tai värejä, nimeen on syytä liittää myös tämä tieto.
KuvaHuono nimiParempi nimi
Logologo.jpgyrityksen-nimi-logo.jpg
TuotekuvaTuote6789_versio52.jpgtuotteen-nimi-sininen-pakkauskoko.jpg
Kategoriasivun pääkuvakuvapankki_23769.jpgpalvelut-yrityksille.jpg
Uutisen kuvituskuvaIMG_122016-324×396.jpgkeskuksen-avajaiset-toukokuu-2022.jpg

Jos samaa kuvaa haluaa käyttää useammalla sivulla, tulee pitää mielessä, että kuvan nimi ja alt-teksti kulkeutuvat kuvan mukana. Etenkään alt-teksti ei aina välttämättä sovi uuteen yhteyteensä. Monikielisillä sivuilla tämä voi myös aiheuttaa ongelmia. Toisaalta esimerkiksi WordPressissä on mahdollista tehdä kielikohtaiset alt-tekstit kuville.

Kuvan nimeäminen ja alt-teksti

Vaihtoehtoinen eli alt-teksti

Kuvalle voi määritellä vaihtoehtoisen tekstin, joka hyödyttää hakukoneiden lisäksi myös ruudunlukijaa apunaan käyttäviä netin selailijoita. Logiikka on periaatteessa varsin yksinkertainen: jos kuvaa ei syystä tai toisesta näe, vaihtoehtoinen tekstikuvaus kertoo saman informaation.

Alt-tekstin kirjoittaminen on melko suoraviivaista ja helppoa, jos kyseessä on logo, tuotekuva tai valokuva tapahtumasta, josta uutisoidaan. Sen sijaan blogikirjoitusten tai kategoriasivujen kuvituskuville voi olla vaikeampi keksiä kunnollista vaihtoehtoista tekstiä. Kuvaillako konkreettisesti sitä, mitä kuvassa tapahtuu vai sitä, mitä sivulla käsitellään?

Ongelmallisemmaksi vaihtoehtoisen tekstin kirjoittamisen ja käytön tekee se, että aina kuva ei olekaan oleellinen ja välitä tärkeää informaatiota, vaan on lähinnä kiva koriste. Tällaiset koristekuvat tekevät usein sivusta silmäiltävämmän ja visuaalisesti kiinnostavamman, mutta esimerkiksi ruudunlukijalle sellaisen kuvan tekstivastine voi turhaan pidentää sivun lukemista ja oikeaan asiaan pääsemistä.

Koristekuvat pitäisikin verkkosivustolle koodata niin, että ruudunlukija osaa ne ohittaa. Yksi vaihtoehto on jättää alt-teksti tyhjäksi, mutta tällöin menetetään mahdollisuus käyttää sitä hakukoneoptimoinnin apuna. Se on kuitenkin nopea korjaus, jos koodiin ei ole mahdollista tehdä muutoksia.

Millainen sitten on hyvä alt-teksti?

  1. Kuvaile kuvaa tarkasti. Keitä kuvassa on, mitä siinä tapahtuu?
  2. Hyödynnä sivun aihetta. Jos kuva on geneerinen kuvapankkikuva toimistosta tai tietokoneella näpyttelevästä työntekijästä, alt-tekstiin on hyvä lisätä sivun aihetta käsitteleviä avainsanoja ja teemoja. Esimerkiksi ”Nainen kirjoittaa tietokoneella alt-tekstiä kuvalle” tai ”Mies hakukoneoptimoi kuvien alt-tekstejä”.
  3. Pidä kuvaus napakkana, noin 125 merkkiä on hyvä mitta. Pidemmälle kuvailulle sopiva paikka on kuvateksti.
  4. Älä aloita sanalla ”kuva”: avustava teknologia ja hakukoneet kyllä tunnistavat kuvan kuvaksi.
  5. Käytä sivun teemaan sopivia avainsanoja säästeliäästi. Älä tunge väkisin avainsanaa sellaisenaan alt-tekstiin, jos se ei siihen sovi. Jos sivulla on useita kuvia, kaikkien alt-tekstiin ei kannata änkeä avainsanaa.
  6. Oikolue virheiden varalta.
  7. Kaikki kuvat eivät tarvitse alt-tekstiä. Hakukoneoptimoinnin ja saavutettavuuden kannalta informaation kannalta oleellisilla kuvilla tulisi olla vaihtoehtoinen teksti, mutta koristeellisilla kuvilla tai kuvalla, jonka sisältö on tekstissä jo muutenkin selitetty sitä ei tarvitse olla.
  8. Varmista, ettei samalla sivulla ole kahta tai useampaa tismalleen samaa alt-tekstiä. Alt-tekstien tulisi olla uniikkeja.

Tykkäsitkö tästä jutusta?

0
2
1
0
Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.
Jaa juttu somessa
Tällä viikolla näitä luettiin eniten
  1. Terminaalimultiplekseri tmux – ystävä, johon voi luottaa
  2. Karhu Kaizen: Verkkopalvelun jatkuva optimointi datavetoisesti
  3. 9 tärkeintä Google Analytics -mittaria
Viime aikoina eniten reaktioita herättivät
Ota yhteyttä
Tilaa uutiskirje