Kuvien hakukoneoptimointi: kuinka optimoida kuvat hakukoneille ja käyttäjille

Kuvien hakukoneoptimointi on SEO-työn vaihe, jossa verkkosivustosi kuvia optimoidaan kahdesta syystä: jotta sivusto latautuu nopeammin ja jotta kuvatiedostot voivat saada paremman sijoituksen Googlen kuvahaun hakutuloksissa. Näin sivustollesi voi ohjautua liikennettä myös kuvien kautta.

Yleisimpiä keinoja kuvien hakukoneoptimointiin ovat:

• kuvakoon muuttaminen ja pakkaaminen
• kuvaavien tiedostonimien kirjoittaminen
• vaihtoehtoisen tekstin (alt-teksti) lisääminen kuviin.

Kuvien SEO-optimointi on hyödyllistä, koska se helpottaa Googlen kaltaisia hakukoneita löytämään ja ymmärtämään kuvien sisällön. Tämä tarkoittaa, että hakukoneet näyttävät todennäköisemmin kuvasi (ja sivut, joilla ne ovat) relevanttien hakukyselyjen yhteydessä.

Optimoidut kuvat latautuvat myös nopeammin. Samalla ne auttavat käyttäjiä saamaan tarvitsemansa tiedot. Nämä molemmat ovat asioita, joita Google arvostaa hakutuloksia järjestäessään.

Yksi kuvien hakukoneoptimoinnin tärkeimmistä eduista on, että se auttaa kuvien näkymistä erilaisissa SERP-tuloksissa. SERPit eli hakutulokset puolestaan tuovat, arvatenkin, kävijöitä sivustollesi.

Monet käyttäjät hyödyntävät suoraan Googlen kuvahakua. Jos kuvallesi ei esimerkiksi ole määritetty avainsanan sisältävää alt-nimeä, kuva ei voi nousta kuvahaun tuloksiiin.

Yksi kuvien hakukoneoptimoinnin tärkeimmistä eduista on, että se auttaa kuvien näkymistä erilaisissa SERP-tuloksissa. SERPit eli hakutulokset puolestaan tuovat, arvatenkin, kävijöitä sivustollesi.

Monet käyttäjät hyödyntävät suoraan Googlen kuvahakua. Jos kuvallesi ei esimerkiksi ole määritetty avainsanan sisältävää alt-nimeä, kuva ei voi nousta kuvahaun tuloksiiin.

SEO-kuvien optimoinnin ensimmäinen vaihe on valita tai luoda kuva, joka tukee sisältöä, johon sen upotat.

Kuvatyyppejä on erilaisia:

• valokuvat voivat esitellä tuotteita mutta myös jakaa tekstiä osiin
• kaaviot ja graafit voivat selventää monimutkaisempaa dataa
• kuvakaappaukset tarjoavat selkeitä ohjeita ja esimerkkejä.

Yritä luoda omia kuvia sen sijaan, että käyttäisit kuvapankkien kuvia. Näin tarjoat käyttäjille ainutlaatuista arvoa ja annat Googlelle enemmän syitä sijoittaa sivustosi korkealle (koska moni muukin voi yrittää optimoida samoja kuvapankkikuvia).

Jos käytät muiden ottamia tai tekemiä kuvia, varmista, että sinulla on niihin tarvittavat käyttöoikeudet. Muuten saatat rikkoa tekijänoikeuslakia.

SVG on yleensä paras valinta ikoneille ja logoille, sillä SVG-tiedostojen kokoa voidaan muuttaa ilman laadun heikkenemistä JavaScriptin tai CSS:n avulla.

WebP on yksi parhaista muodoista muille kuvatyypeille, sillä tämä kuvatyyppi käyttää häviöllistä ja häviötöntä pakkausta ja on siten nopeasti latautuva.

Parhaat vaihtoehdot kuvatiedostojen muodolle ovat:

• WebP tai JPEG tavallisille kuville
• PNG läpinäkyville kuville,joissa on tekstiä tai paljon yksityiskohtia
• GIF yksinkertaisille animaatioille.

Google käyttää kuvatiedostojen nimiä ymmärtääkseen paremmin, mitä kuvat esittävät. Siksi on suositeltavaa antaa kuvalle kuvaava (mutta tiivis) tiedostonimi.

Esimerkiksi:

• Hyvä: vedenpitavat-vaelluskengat-tatra.webp
• Huono: mustat-vaelluskengat-siniset-nauhat-kuva-edesta-ilman-taustaa-29495.jpg
• Huono: IMG493282.jpg
• Huono: fjfonsdigadg.kpg

Vaihtoehtoinen teksti eli kuvan alt-nimi on kuvan kirjallinen kuvaus, joka tallennetaan verkkosivun koodiin, kuvatunnisteen alt-attribuuttiin.

Koodissa se näyttää tältä:

< img src ="tiedoston-nimi.jpg" alt="ALT-teksti tulee tähän">

Alt-tekstiä käytetään pääasiassa esteettömyyden vuoksi: näytönlukuohjelmat voivat lukea kuvauksen ääneen, jotta näkärajoitteiset käyttäjät tietävät, mitä kuva esittää. Nimi tulee esiin myös silloin, kun kuva ei lataudu oikein.

Alt-teksti on kuitenkin hyödyllinen myös kuvien hakukoneoptimoinnissa, sillä hakukoneet käyttävät alt-tekstiä ymmärtääkseen paremmin, mitä kuva esittää.

Tässä parhaita käytäntöjä alt-tekstin kirjoittamiseen:

• Alt-teksti kirjoitetaan “oikeille” kuville, eli niitä ei lisätä kuvituskuville.
• Kuvaile alt-nimessä kuvan aiheen kannalta tärkeitä asioita: jos esimerkiksi käytät samaa kaaviota eri asioiden havainnollistamiseen, käytä eri vaihtoehtoisia tekstejä kussakin tapauksessa, jotta selität asian selkeästi.
• Pitäydy 125 merkin pituudessa, sillä jotkin kuvanlukuohjelmat lopettavat alt-tekstin lukemisen tässä kohtaa.
• Jos kuvasta on sanottavana jotain sellaista, mitä kaikkien lukijoiden on tiedettävä, laita kuvaus tekstisisältöön tai kuvan kuvatekstiin, älä alt-tekstiin. Näin se on kaikkien saatavilla.

Kuvakoon pienentäminen auttaa lyhentämään latausaikaa. Oikein toteuttuna pienentäminen ei myöskään vaikuta kuvien laatuun.

Kuvan enimmäiskoko riippuu aina käyttämästäsi teemasta eli siitä, millaisia sisältöelementtejä sivustolla on: herokuva, tuotekuva, kuvituskuva ja niin edelleen.

Tarkista ensimmäisenä, mikä on näiden kuvamoduulien enimmäisleveys: jos kuvalle varattu tila on 800 pikseliä, myös kuvan tulisi olla tämän kokoinen. Näin sivusto ei joudu lennosta pienentämään (shrink) kuvan kokoa.

Mikäli sinulla on verkkokauppa, jossa tuotekuvia voi zoomata, varmista, että zoomattavan kuvan koko ei pikselöidy eli “puuroudu”.

Monille julkaisualustoille on olemassa erilaisia kuvan optimointityökaluja, joiden avulla voit luoda eri kokoisia tiedostoja automaattisesti. Yksi tällainen on Resize Image After Upload.

Responsiivinen kuvan skaalaus tarkoittaa, että verkkosivuston kuvat mukautuvat automaattisesti käyttäjän päätelaitteen (puhelin, tabletti, pöytäkone) koon mukaan. Responsiivinen skaalaus auttaa sivuston latausajan minimoimisessa, sillä automatisoitu kuvakoko varmistaa, etteivät ne ole koskaan liian suuria. Kuvat tehdään responsiivisiksi CSS:n avulla.

Viivästetyssä latauksessa hyödynnetään loading="lazy" -attribuuttia.

< img src= "image-file-example.jpg" loading=”lazy” alt="Alt-teksti tulee tähän."

Tee tämä vain kuville, jotka näkyvät jokaisella laitteella sivun yläosan alapuolella. Muuten sivusi hidastuu sen sijaan, että nopeutuisi.

Kuvasivukartta on erityisesti kuville tarkoitettu XML-sivukartta. Tämä sitemap sisältää luettelon kuvista, jotka haluat hakukoneiden indeksoivan eli tallentavan Googlen hakutuloksiin.

Kuvasivukartan luominen auttaa varmistamaan, että hakubotit huomioivat tärkeimmät kuvat, kun ne tutkivat sisältöjäsi.

Google suosittelee, että rakennat kuvasivukarttasi seuraavasti:

< ?xml version="1.0" encoding="UTF-8"?>
< urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
< url>
< loc>[URL for a webpage on your website]
< image:image>
< image:loc>[URL for an image on this webpage]
< /image:image>
< image:loc>[URL for another image on this webpage]
< /image:image>
< /url>
< url>
< loc>[URL for another webpage on your website]
< image:image>
< image:loc>[URL for an image on this webpage]
< /image:image>
< /url>
< /urlset>

Selaimen välimuisti eli cache tarkoittaa sitä, että kävijän selain tallentaa tietyt tiedostot (kuten kuvat) tietyksi ajaksi.

Kun esimerkiksi logon välimuisti on asetettu esimerkiksi 365 päivän pituiseksi, se latautuu nopeammin, kun käyttäjä siirtyy sisällöstä toiseen tai kun hän vierailee sivustollasi uudestaan saman vuoden aikana.

Jos logo ei ole välimuistissa, selaimen on ladattava logo joka kerta, kun hän saapuu sivustolle tai navigoi sen sisällä. Tämä tietenkin hidastaa sivustoa, koska jokainen lataus vaatii kaistaa ja lisää siten käsiteltävien pyyntöjen määrää palvelimella.

Esimerkiksi selaimeen asennettava Google Lighthouse auttaa tunnistamaan kuvien välimuistin ajan.

Strukturoidun datan eli schema markupin avulla voit nostaa hakutulossivun SERP-tuloksiin kuvia. Näitä ovat muun muassa artikkeli- ja tuotekuvat.

Schemat auttavat siis “rikastamaan” hakutuloksia, kuten alla olevassa kuvassa:

Voit käyttää skeemaa määrittämään kuvia artikkeleille, tapahtumille, organisaatioille ja muille tärkeille aiheille. Schemoissa on myös oma dedikoitu ImageObject-skeema, jonka avulla voit antaa lisätietoja kuvasta (esim. tekijän nimi ja linkki kuvan lisenssiin).

Open Graph -metatunnisteella saat kuvat näkymään eri alustoilla, kuten sosiaalisen median palveluissa.

Jokaisella sisältösivulla on neljä pakollista ominaisuutta:

• og:title määrittää esikatselussa näkyvän otsikon
• og: type määrittää objektin tyypin (esim. ”artikkeli”)
• og:image määrittää esikatselussa näkyvän kuvan URL-osoitteen
• og:url määrittää sivun URL-osoitteen.

Voit myös lisätä monia muita erilaisia tageja.

Näillä vinkeillä voit aloittaa sivustollasi olevien kuvien optimoinnin, joka on yksi hakukoneoptimoinnin monista toimenpiteistä.