Verkkokaupan kuvien optimointi hakukoneita varten

Verkkokaupan kuvien optimointi hakukoneita varten tarkoittaa tuotekuvien teknisen laadun, tiedostokoon, alt-tekstien ja metadatan viimeistelyä niin, että hakukoneet ymmärtävät kuvat ja käyttäjät saavat ne nopeasti näkyviin.

• WebP-tiedostomuoto voi olla 25–35 prosenttia pienempi kuin vastaava JPEG-laatu.
• Google PageSpeed Insights on ilmainen työkalu, joka antaa konkreettisia suosituksia kuvien optimointiin.
• Alt-tekstit parantavat sekä hakukonenäkyvyyttä että verkkosivuston saavutettavuutta.

Kun perusasiat alkavat olla kunnossa, verkkokaupan kuvien optimoinnin jatko-ohjeet vievät sinua askel eteenpäin kohti nopeampaa ja hakukoneille mieluisampaa sivustoa.

Miksi kuvien optimointi on tärkeää verkkokaupalle?

Kuvien optimointi parantaa sekä hakukonenäkyvyyttä että käyttäjäkokemusta, mikä johtaa parempaan sijoitukseen ja korkeampaan konversioon.

Tuotekuvat ovat verkkokaupan tärkein myyntivaltti. Hakukoneet eivät kuitenkaan näe kuvia samalla tavalla kuin ihmiset. Ne lukevat alt-tekstejä, tiedostonimiä ja ympäröivää sisältöä. Siksi jokainen kuva on merkittävä huolellisesti.

Hyvin optimoitu kuva latautuu nopeasti. Nopea sivusto parantaa Core Web Vitals -mittareita, jotka vaikuttavat Google-sijoitukseen. Hidas sivusto puolestaan lisää poistumisprosenttia ja vähentää myyntiä. Tämä on erityisen tärkeää suomalaisille verkkokaupoille, joissa mobiiliostaminen on yleistä.

Kuvien optimointi ei ole kertaluonteinen tehtävä. Se on jatkuva prosessi, joka kannattaa integroida osaksi verkkokaupan sisällönhallintaa. Kun lisäät uusia tuotteita, muista myös kuvien laatu ja merkinnät. Näin varmistat, että jokainen uusi sivu saa parhaan mahdollisen lähtökohdan hakukonenäkyvyydelle.

Oikea tiedostomuoto: JPEG, PNG, WebP vai AVIF?

WebP on tällä hetkellä paras valinta useimmille verkkokauppakuville, koska se tarjoaa pienen tiedostokoon ja hyvän laadun.

JPEG sopii valokuville ja tuotekuville, joissa on paljon värejä. PNG taas on hyvä grafiikalle ja läpinäkyvyyttä vaativille kuville. WebP on moderni formaatti, jonka Google on kehittänyt, ja se toimii hyvin sekä valokuville että grafiikalle.

AVIF on uusin formaatti ja se tarjoaa vielä WebP:tä pienemmän tiedostokoon. Toistaiseksi AVIF-tuki ei ole aivan yhtä laaja kuin WebP:n. Monissa järjestelmissä kannattaa käyttää WebP:tä ensisijaisena ja JPEG:iä varalla. Näin varmistat yhteensopivuuden kaikissa selaimissa.

Muista, että tiedostomuoto ei yksinään ratkaise kaikkea. Myös kuvan pikselikoko ja pakkaus vaikuttavat tiedostokokoon merkittävästi. Käytä aina oikeaa kokoa, jota kuvat sijoitetaan sivulla. Suurennettu kuva, joka pienennetään CSS:llä, hidastaa sivua turhaan.

Kuinka pienennät kuvatiedoston koon oikein?

Pienennä kuvatiedoston koko käyttämällä lossless- tai lossy-pakkausta sekä sopivaa pikselikokoa ennen lataamista.

Kuvatiedoston koko kannattaa pienentää heti alkuvaiheessa. Käytä grafiikkaohjelmaa tai online-työkalua, joka pakkaa kuvan. Tavoitteena on pitää laatu hyvänä mutta tiedostokoko pienenä. Alle 100 kilotavun kuvat ovat yleensä hyvä tavoite.

Vältä kuvien lataamista suoraan kamerasta tai puhelimesta sellaisenaan. Useimmat kamerat tuottavat useiden megatavujen tiedostoja. Niiden muokkaaminen web-käyttöön on välttämätöntä. Käytä kuvankäsittelyssä myös oikeaa väriprofiilia, jotta värit näyttävät oikeilta eri laitteilla.

Muista myös hyödyntää selaimen välimuistia. Kun kuvat on kerran ladattu, ne voidaan tallentaa käyttäjän laitteelle. Tämä nopeuttaa seuraavia sivulatauksia. Voit asettaa välimuistin otsikot palvelimella tai käyttää verkkokaupan alustan valmiita asetuksia.

Alt-teksti ja tiedostonimet hakukoneita varten

Kirjoita jokaiselle kuvalle kuvaileva alt-teksti ja käytä tiedostonimessä kuvaavia sanoja, jotta hakukoneet ymmärtävät kuvan sisällön.

Alt-teksti on kuvan tekstimuotoinen kuvaus. Se näkyy, jos kuva ei lataudu, ja hakukoneet lukevat sen. Kirjoita alt-teksti luonnollisesti, mutta sisällytä siihen tarvittaessa myös tuotteen nimi tai avainsana. Vältä ylenmääräistä avainsanojen täyttöä.

Tiedostonimi kannattaa nimetä myös kuvaavasti. Esimerkiksi "punainen-keinonahkalaukku.jpg" on paljon parempi kuin "IMG_4782.jpg". Hakukoneet käyttävät tiedostonimeä ymmärtääkseen kuvan aiheen. Tämä on helppo tapa parantaa kuvan löydettävyyttä.

Muista, että alt-teksti palvelee myös saavutettavuutta. Näkövammaiset käyttäjät käyttävät ruudunlukijaa, joka lukee alt-tekstin ääneen. Hyvä alt-teksti parantaa siis sekä saavutettavuutta että hakukonenäkyvyyttä. Se on win-win-tilanne.

Responsiiviset kuvat ja srcset

Käytä srcset-attribuuttia ja eri kokoisia kuvia, jotta selain lataa oikean koon eri laitteille.

Responsiiviset kuvat tarkoittavat sitä, että selain valitsee käyttäjän näytön koon mukaan sopivan kuvan. Tämä onnistuu srcset-attribuutilla. Voit määritellä useita kuvakokoja, ja selain valitsee sopivimman. Tämä parantaa latausnopeutta erityisesti mobiililaitteilla.

Käytä myös sizes-attribuuttia, joka kertoo selaimelle, kuinka paljon tilaa kuva vie asettelussa. Näin selain osaa valita oikean kuvan jo etukäteen. Tämä vähentää turhaa datan siirtoa ja nopeuttaa sivua merkittävästi.

Muista testata kuvien toimivuus eri laitteilla. Chromen DevTools tarjoaa mahdollisuuden simuloida eri näyttökokoja. Näet helposti, mitkä kuvat latautuvat ja missä koossa. Tämä auttaa varmistamaan, että kuvat toimivat optimaalisesti kaikilla laitteilla.

Tuotekuvien schema-merkintä ja ImageObject

Lisää tuotekuviin schema.org-merkintä, erityisesti ImageObject ja Product-skeema, jotta hakukoneet voivat näyttää rikkaan tuloksen.

Schema-merkintä auttaa hakukoneita ymmärtämään sivun sisältöä tarkemmin. Tuotekuvien kohdalla voit käyttää ImageObject-merkintää. Se kertoo hakukoneelle kuvan URL:n, korkeuden, leveyden ja tekijänoikeudet. Tämä voi parantaa kuvan mahdollisuuksia näkyä Google-kuvahaussa.

Product-skeema yhdistää tuotetiedot ja kuvat toisiinsa. Se voi mahdollistaa rikkaan tuloksen, jossa näkyy tuotekuva, hinta ja saatavuus. Tämä parantaa näkyvyyttä hakutuloksissa ja voi lisätä klikkausprosenttia. Google suosii sivustoja, joissa on jäsennelty data.

Voit toteuttaa schema-merkinnän JSON-LD-muodossa. Se on Googlen suosittelema tapa. Useimmat verkkokauppa-alustat, kuten Shopify ja WooCommerce, tarjoavat lisäosia tähän. Voit myös teettää sen ammattilaisella, jos haluat varmistaa oikeellisuuden.

Kuvien nimeäminen ja kansiorakenne

Järjestä kuvat selkeään kansiorakenteeseen ja käytä kuvaavia tiedostonimiä parantaaksesi hakukoneiden indeksointia.

Kuvien kansiorakenne kannattaa suunnitella huolella. Selkeä rakenne helpottaa sekä kehittäjiä että hakukoneita. Esimerkiksi "/tuotteet/laukut/punainen-laukku.jpg" kertoo jo polussa, mistä on kyse. Tämä auttaa hakukoneita ymmärtämään sivuston hierarkiaa.

Vältä yleisiä nimiä, kuten "image1.jpg" tai "kuva.jpg". Käytä aina kuvaavaa nimeä, joka sisältää tuotteen nimen ja mahdollisesti värin tai mallin. Tämä on yksinkertainen tapa parantaa kuvan indeksointia. Se myös auttaa käyttäjiä tunnistamaan tiedoston, jos he tallentavat sen.

Muista myös, että kuvien URL-osoitteet pysyvät samoina, jos mahdollista. Muuttuvat URL-osoitteet voivat rikkoa vanhoja linkkejä ja heikentää indeksointia. Jos teet suuria muutoksia, käytä 301-uudelleenohjauksia vanhoista osoitteista uusiin.

Latausnopeuden mittaaminen ja seuranta

Mittaa kuvien latausnopeutta säännöllisesti työkaluilla, kuten Google PageSpeed Insights, ja optimoi kuvia tulosten perusteella.

Kuvien optimointi ei lopu siihen, kun kuvat on ladattu. Sinun on seurattava niiden suorituskykyä. Google PageSpeed Insights antaa selkeän analyysin sivun nopeudesta. Se kertoo myös, mitkä kuvat hidastavat sivua ja miten niitä voi optimoida.

Käytä myös Google Search Consolen raportteja. Sieltä näet, miten sivustosi toimii hakutuloksissa. Voit löytää sivuja, joilla on ongelmia kuvien indeksoinnissa. Tämä auttaa priorisoimaan korjaustoimenpiteitä.

Seuranta kannattaa ajoittaa säännöllisesti, esimerkiksi kerran kuukaudessa. Näin varmistat, että sivusto pysyy nopeana ja hakukoneystävällisenä. Muista myös päivittää vanhat kuvat, kun ne ovat menneet vanhaksi tai kun tuotetiedot muuttuvat.

Jos haluat, että kuvat ja sivuston nopeus pysyvät kunnossa ilman jatkuvaa säätämistä, ota yhteyttä asiantuntijoihimme.