Kuvien alt-tekstit ja tiedostonimet: käytännön opas kuvien hakukoneoptimointiin

Alt-tekstillä, tiedostonimellä ja kuvatekstillä on eri tehtävät

Kuvaa lisätessäsi saatat nähdä useita kenttiä, jotka näyttävät pyytävän samoja tietoja. Niillä on kuitenkin eri tehtävät. Tiedostonimi yksilöi tiedoston, alt-teksti selittää kuvan ihmiselle, joka ei näe sitä, ja kuvateksti näkyy kuvan vieressä kaikille lukijoille.

Alt-teksti tallennetaan verkkosivulle yleensä alt-attribuuttiin. Se ei ole JPG- tai PNG-tiedoston sisällä. Ruudunlukija eli ohjelma, joka lukee sivun sisältöä ääneen tai esittää sen pistekirjoituksena, voi käyttää kuvausta kuvan selittämiseen. Katso MDN:n alt-attribuutin ohje.

Sama valokuva voi tarvita eri alt-tekstin eri paikoissa. Tuotesivulla kahva ja pintakäsittely voivat olla olennaisia. Heijastavien pintojen kuvaamista käsittelevässä artikkelissa tärkeää voi olla lasitteesta heijastuva valo. Kuvaile sitä, mikä kyseisen sivun lukijalle on hyödyllistä.

Päätä, mitä lukija tarvitsee kuvasta

Mieti ennen kirjoittamista, mitä lukijalta jäisi saamatta ilman kuvaa. Näkyykö siinä tuotteen yksityiskohta, ohjeen vaihe, tärkeää tekstiä tai linkin ainoa merkintä? Vai tekeekö se vain sivusta kauniimman? Valintaa kuvan tehtävän mukaan helpottaa W3C:n alt-tekstin päätöspuu.

• Tietoa välittävä kuva: kuvaile lukijan tarvitsema yksityiskohta.
• Linkki tai painike ilman muuta tekstiä: kerro kohde tai toiminto.
• Koristekuva: jätä alt-teksti tyhjäksi, jos kuva ei lisää tarpeellista tietoa eikä toimi linkkinä tai käyttöliittymän toimintona.
• Kaavio tai yksityiskohtainen diagrammi: kerro lyhyesti, mitä se esittää, ja anna tarkemmat tiedot läheisessä tekstissä tai taulukossa.

Ajattele kuvaa pöydällä olevasta mukista. Mukin myyntisivulla sen muoto ja ulkoasu ovat hyödyllisiä tietoja. Uutiskirjeen tilauslomakkeen taustalla sama kuva voi olla pelkkä koriste. Ratkaisevaa on, miksi lisäsit kuvan siihen.

Kirjoita hyödyllinen kuvaus selkeällä kielellä

Aloita kohteesta ja lisää lukijalle tarpeellinen yksityiskohta. Repun sivukuvassa voi esimerkiksi näkyä verkkotaskussa oleva vesipullo. Tuotesivulla tämä kertoo enemmän kuin luettelo kaikista kuvan väreistä.

Pidä kuvaus olennaisessa. Taustaa, kuvakulmaa ja valaistusta ei tarvitse eritellä, elleivät ne auta kuvan ymmärtämisessä. Hyödyllisen tiedon kuvaamista ilman jokaisen yksityiskohdan luettelointia käsittelee W3C:n tietoa välittävien kuvien ohje.

Nämä ovat esimerkkikuvauksia, eivät tämän artikkelin kuvien kuvauksia. Tarkista omasta kuvastasi, että kaikki mainittu näkyy siinä. Älä keksi materiaalia, mallinimeä, sijaintia tai ominaisuutta vain tehdäksesi kuvauksesta täydellisemmän. Ruskeasta tuolista otettu kuva ei yksin todista, että se on nahkaa.

Lue kuvaus yhdessä kuvaa edeltävän ja seuraavan lauseen kanssa. Lisääkö se hyödyllistä tietoa vai toistaako se turhaan samaa? Sovita se koko sivun sisältöön. Jos kuvateksti kertoo jo kaiken kuvan välittämän tiedon, harkitse erillisen kuvauksen tarvetta. Säilytä alt-tekstissä hyödylliset yksityiskohdat, joita kuvateksti ei kata.

Jätä koristekuvien alt-teksti tyhjäksi

Otsikon vieressä oleva koriste tai taustakuvitus voi olla vain ulkoasua varten. Jos se ei lisää tarpeellista tietoa, anna sille tyhjä alt-attribuutti: alt="". Ruudunlukija voi silloin ohittaa kuvan. Älä jätä attribuuttia kokonaan pois, sillä jotkin ruudunlukijat saattavat lukea tiedostonimen. Katso W3C:n koristekuvien ohje.

<img src="/images/keltainen-koriste.svg" alt="">

Älä kirjoita kuvaukseksi ”koristekuva”. Se lisää luettavaa kertomatta mitään hyödyllistä. Tyhjä alt-teksti tarkoittaa, ettei kuvausta ilmoiteta lainkaan.

Ole tarkkana näennäisesti koristeellisten kuvien kanssa, jos tärkeä tieto esiintyy vain niissä. Alennuksen ja sen päättymispäivän sisältävä banneri ei ole pelkkä koriste, jos tiedot puuttuvat sivun tekstistä. Kirjoita tarjous normaaliksi tekstiksi tai sisällytä viesti alt-tekstiin. Myös virhekuvake tarvitsee kirjallisen selityksen, jos se on sivun ainoa ilmoitus ongelmasta.

Kuvaile pelkän kuvan sisältävän linkin tai painikkeen tehtävä

Jos kuva on linkin ainoa sisältö, alt-tekstin pitää kertoa, minne linkki vie. Kuvapainikkeen tekstin pitää kertoa toiminto. Hakupainikkeessa ”Hae” kertoo, mitä tapahtuu; ”Suurennuslasi” kuvailee vain muodon. Näitä tapauksia käsittelee W3C:n toiminnallisten kuvien ohje.

Oletetaan, että kaupan logo on etusivulle vievän linkin ainoa sisältö. ”North Shore -kaupan etusivu” antaa linkille ymmärrettävän nimen. Logon aaltomuodon yksityiskohtainen kuvaus ei kerro, minne linkki vie.

Jos samassa linkissä on jo selkeä näkyvä teksti, viereisen kuvan alt-teksti voidaan usein jättää tyhjäksi toiston välttämiseksi. Tämä riippuu siitä, välittääkö kuva jotain olennaista tekstin lisäksi. Tarkista kuva ja linkkiteksti yhdessä.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="North Shore -kaupan etusivu">
</a>

Mieti tuotekuvagalleriassa, mitä pikkukuvan valitseminen tekee. ”Näytä repun sivutasku” voi olla hyödyllisempi kuin tuotteen nimen toistaminen jokaisessa pikkukuvassa. Galleriassa voi olla erilliset kentät painikkeiden nimille ja kuvien kuvauksille. Tarkista, että jokaisella toiminnolla on selkeä nimi julkaistussa galleriassa.

Käsittele kaaviot, kuvakaappaukset ja kuvien sisältämä teksti

Kaaviossa voi olla liikaa tietoa yhteen lyhyeen kuvaukseen. Kerro lyhyesti, mitä se esittää, ja lisää tärkeimmät tulokset ja arvot läheiseen tekstiin tai taulukkoon, jota voi lukea näkemättä kaaviota. Vaihtoehtoja käsittelee W3C:n monimutkaisten kuvien ohje.

Ajattele kaaviota, jossa verrataan saman valokuvan kolmen vientiversion tiedostokokoja. Alt-teksti voi kertoa, että kyse on tiedostokokojen vertailusta, ja taulukko näyttää kunkin muodon ja koon. Tuloksen pitää olla ymmärrettävissä ilman pylväiden korkeuksien tulkintaa. Käytä todellisia mittauksia ja kerro, että tulokset koskevat juuri tätä valokuvaa.

Ohjeen kuvakaappauksessa kuvaile asetusta tai vaihetta, jota kuva selittää. Laatuasetuksen sijainnin kertova lause voi auttaa, mutta kirjoita varsinainen ohje myös sivun tekstiksi. Jos vaihe vaatii useiden merkintöjen lukemista, lisää ne ohjeeseen. Älä piilota pitkää toimenpidesarjaa alt-tekstiin.

Jos kuva sisältää tärkeän lyhyen tekstin, jota ei ole muualla, sisällytä sanat alt-tekstiin. Lisää pidemmät tekstit suoraan sivulle. Otsikoiden ja painikkeiden toimivuutta sivun sisältönä kuvan sijaan selittää Canva-viennin opas.

Valitse lyhyet ja kuvaavat tiedostonimet

Google suosittelee lyhyitä kuvaavia tiedostonimiä ja kertoo niiden antavan pienen vihjeen kuvan aiheesta. Kuvien ymmärtämiseen käytetään myös alt-tekstiä ja ympäröivää sivua. Tämä ei ole syy täyttää tiedostonimeä hakulauseilla. Katso Googlen kuvien hakukoneoptimoinnin ohje.

Nimeä ensin kohde ja lisää hyödyllinen yksityiskohta tai kuvakulma. Tuotekuvagalleriassa vihrea-reppu-sivutasku.webp on helpompi tunnistaa kuin IMG_4821.webp. Tuotetunnuksen voi lisätä, jos se auttaa erottamaan samankaltaiset tuotteet. Älä lisää vuotta, ellei se oikeasti yksilöi kuvaa.

Helppo nimeämistapa on pienet kirjaimet ja sanojen väliset yhdysmerkit. Se auttaa järjestämään tiedostot, mutta ei takaa parempia hakusijoituksia. Pidä tiedostopääte oikeana: päätteen .png vaihtaminen päätteeksi .jpg ei muunna kuvaa. Käytä muunnostyökalua, jos tarvitset toisen kuvamuodon.

Nimeä tiedostot mahdollisuuksien mukaan ennen lataamista sivustolle. Jos julkaistun kuvan uusi nimi muuttaa verkko-osoitteen, vanhaa osoitetta käyttävät sivut voivat menettää kuvan. Päivitä nämä sivut ja ohjaa tarvittaessa vanha osoite uuteen. Älä nimeä toimivaa kuvakirjastoa uudelleen vain hakusanojen lisäämiseksi.

Lisää kuvaus sivulla olevaan kuvaan

Etsi sivustoeditorista kenttä nimeltä vaihtoehtoinen teksti tai alt-teksti. Tallenna kuvaus ja tarkista julkaistu sivu. Mediakirjaston otsikon, kuvatekstin tai tiedostonimen muuttaminen ei välttämättä muuta sivulla olevaa alt-tekstiä. Editorit ja sivupohjat käsittelevät kenttiä eri tavoin.

HTML:ää ei tarvitse kirjoittaa, jos editorissa on sopiva kenttä. Suoraan sivun koodia muokkaavalle yksinkertainen tietoa välittävä kuva näyttää tältä:

<img src="/images/vihrea-reppu-sivutasku.webp"
     alt="Vihreä reppu, jonka sivun verkkotaskussa on vesipullo">

Tarkista varsinainen sivu tallentamisen jälkeen. Tietokoneen selaimessa voit tarkastella kuvaelementtiä ja etsiä sen alt-arvon. Saavutettavuustarkistin voi löytää puuttuvat alt-attribuutit, mutta se ei luotettavasti arvioi kuvauksen hyödyllisyyttä. Lue kuvaus itse sivun sisällön yhteydessä.

Jos sivustolla on useita kieliä, kirjoita kuvaus kyseisen sivun kielellä. Käännä merkitys luontevasti sen sijaan, että siirtäisit englanninkielisen hakusanalistan sellaisenaan. Sama kuvatiedosto voi saada eri alt-tekstin jokaisella sivulla, koska kuvaus tallennetaan sivukohtaisesti.

Esimerkki: lisää tuotekuvaan hyödyllinen kuvaus

Oletetaan, että lisäät vihreän repun tuotesivulle sivutaskun kuvan. Tarkoitus on näyttää vesipullon sopivuus taskuun, ei toistaa tuotteen kaikkia ominaisuuksia.

1. Valitse hyödyllinen kuvakulma. Käytä kuvaa, jossa pullo ja tasku näkyvät selvästi. Älä kuvaile piilossa olevaa yksityiskohtaa.
2. Valmistele tiedosto. Rajaa tarpeeton tila ja valitse mitat, joilla tasku erottuu galleriassa. Koko työnkulun ohjeet löydät tuotekuvien oppaasta.
3. Nimeä lopullinen tiedosto. Käytä esimerkiksi nimeä vihrea-reppu-sivutasku.jpg ja todellista tallennusmuotoa vastaavaa päätettä.
4. Lisää sivulle sopiva alt-teksti. Kuvaile verkkotaskussa oleva pullo. Hinnat, toimituslupaukset ja aiheeseen kuulumattomat hakulauseet kuuluvat sivun muuhun sisältöön.
5. Tarkista julkaistu galleria. Varmista, että kuvalla on kirjoittamasi kuvaus ja gallerian toiminnoilla selkeät nimet. Tarkista sekä puhelimella että tietokoneella.

Tämä työnkulku erottaa kuvatiedoston valmistelun alt-tekstin kirjoittamisesta. Molemmat ovat tärkeitä, mutta ratkaisevat eri ongelmat. Käytä samaa tapaa ohjeen kuvakaappaukseen tai kaavioon ja muokkaa kuvaus esitettävän tiedon mukaan.

Vältä näitä tavallisia virheitä

• Hakulauseiden toistaminen. ”Reppu paras reppu halpa reppu retkireppu” ei kuvaile taskua eikä auta ymmärtämään valokuvaa.
• Tiedostonimen käyttäminen kuvauksena. Nimi auttaa löytämään tiedoston, mutta ei välttämättä kerro lukijan tarvitsemia tietoja kuvasta.
• Sama teksti jokaiselle galleriakuvalle. Kuvaile eri näkymät, jos ne välittävät erilaista tietoa.
• Yksityiskohtien arvaaminen. Varmista materiaalit, merkinnät ja ominaisuudet sen sijaan, että päättelisit ne pelkän ulkonäön perusteella.
• Pitkät kuvaukset koristekuville. Ylimääräinen luettava voi vaikeuttaa olennaisen sisällön seuraamista.
• Vain mediakirjaston tarkistaminen. Sivupohja ei välttämättä käytä muokkaamaasi kenttää. Tarkista julkaistu kuva.

Usein kysytyt kysymykset

Kuinka pitkä alt-tekstin pitäisi olla?

Pidä se mahdollisimman lyhyenä jättämättä hyödyllistä tietoa pois. Tavallinen valokuva voi tarvita vain yhden lyhyen lauseen. Mikään yksittäinen merkkiraja ei tee kuvauksesta hyödyllistä. Lisää kaavioiden pitkät selitykset sivun normaaliin tekstiin.

Tarvitseeko jokainen kuva kuvaavan alt-tekstin?

Ei. Kuvaile kuva, jos se välittää tarpeellista tietoa. Jätä koristekuvan alt-teksti tyhjäksi. Jos kuva on linkin tai painikkeen ainoa merkintä, kerro kohde tai toiminto.

Voinko käyttää tekoälyä kuvausten luonnosteluun?

Voit käyttää luonnosta lähtökohtana, mutta vertaa sitä oikeaan kuvaan ja sivuun. Poista arvaukset, tarpeettomat yksityiskohdat ja toistuvat hakusanat. Tuotettu kuvaus voi kuulostaa varmalta, vaikka se kuvailee ominaisuutta, jota kuvassa ei näy.

Poistaako kuvan pakkaaminen alt-tekstin?

Alt-teksti on verkkosivulla, ei kuvatiedostossa. Paikallisen JPG:n tai PNG:n pakkaaminen ei muokkaa sivua. Kuvan korvaaminen editorissa voi kuitenkin muuttaa tai tyhjentää kenttiä. Tarkista siksi julkaistu kuvaus vaihdon jälkeen.

Takaavatko paremmat tiedostonimet enemmän hakuliikennettä?

Ei. Selkeät nimet ja hyödylliset kuvaukset tukevat hyvin valmisteltua sivua, mutta eivät takaa indeksointia, sijoituksia tai klikkauksia. Googlen ohje käsittelee myös kuvia ympäröivää tekstiä, kuvien löytymistä hakuroboteille ja sivun latausnopeutta. Tätä erillistä osa-aluetta käsittelee kuvien suorituskykyopas.

Tiivistä tekoälylläChatGPT (avautuu uuteen välilehteen)Grok (avautuu uuteen välilehteen)Google (avautuu uuteen välilehteen)Perplexity (avautuu uuteen välilehteen)Claude (avautuu uuteen välilehteen)