Kuvahaku ja Core Web Vitals
Kuvien hakukoneoptimointi: löydy myös Google Kuvista
Kuvat ovat useimmilla sivustoilla suurin yksittäinen tiedostomassa ja samalla se osa, joka jää optimoimatta. Kuvien hakukoneoptimointi tekee kaksi asiaa kerralla: sivusto latautuu selvästi nopeammin ja kuvasi alkavat tuoda kävijöitä kuvahausta. Käymme läpi kuvien alt teksti -käytännöt, tiedostonimet, WebP-pakkauksen, mitat ja sivustokartat.
Tarkistuslista
Kuusi kohtaa, jotka ratkaisevat kuvien näkyvyyden
Käy nämä läpi järjestyksessä. Kolme ensimmäistä vaikuttavat näkyvyyteen kuvahaussa, kolme jälkimmäistä latausnopeuteen ja käyttökokemukseen.
Tiedostonimi
Nimeä kuva ennen kuin lataat sen: mittatilauskeittio-turku.webp, ei IMG_4821.jpg. Käytä pieniä kirjaimia ja väliviivoja, jätä ääkköset pois tiedostonimestä. Tämä on hakukoneen ensimmäinen vihje siitä, mitä kuva esittää.
Kuvien alt teksti
Yksi kuvaava lause per kuva, kirjoitettuna ihmiselle. Se palvelee ruudunlukijan käyttäjää ja kertoo samalla Googlelle kuvan sisällön. Koristekuvien alt jätetään tyhjäksi, jotta ruudunlukija ohittaa ne.
Konteksti ympärillä
Google lukee kuvan lähellä olevan tekstin, otsikon ja kuvatekstin. Sijoita kuva sitä käsittelevän kappaleen viereen ja lisää kuvateksti, kun se tuo lukijalle lisätietoa. Irrallinen kuvagalleria ilman tekstiä on kuvahaulle lähes näkymätön.
WebP ja pakkaus
Muunna valokuvat WebP-muotoon ja pudota laatu tasolle, jossa ero ei näy silmällä. Tavoite: alle 200 kilotavua sisältökuvalle. Logot ja ikonit SVG-muodossa, jolloin ne pysyvät terävinä joka näytöllä ja painavat lähes tyhjää.
Mitat ja CLS
Merkitse jokaiselle kuvalle width ja height, niin selain varaa tilan etukäteen eikä sivu hyppää latautuessaan. Näin Cumulative Layout Shift pysyy kurissa. Käytä lazy loadingia kaikille kuville, jotka ovat ensimmäisen näkymän alapuolella.
Sivustokartta ja robots
Varmista, että kuvat ovat mukana XML-sivustokartassa ja ettei robots.txt estä kuvakansiota. Isolla kuvamäärällä oma kuvasivustokartta nopeuttaa löytymistä. Tarkista lopuksi Search Consolesta, että kuvat on oikeasti indeksoitu.
Kuvien alt teksti
Kirjoita kuvaus, älä avainsanalistaa
Alt-teksti on saavutettavuutta ensin ja hakukoneoptimointia vasta toiseksi. Kun kirjoitat sen ruudunlukijan käyttäjälle, se on automaattisesti myös hakukoneelle oikein. Avainsanoilla ahdettu alt-teksti on vanha temppu, jonka Google tunnistaa ja jättää huomiotta.
- Yksi lause, tyypillisesti 5 ja 15 sanan välillä
- Kerro mitä kuvassa tapahtuu, ei mitä haluaisit sen sijoittuvan
- Paikkakunta mukaan vain, jos se todella näkyy kuvassa
- Koristekuville tyhjä alt, jotta ruudunlukija ohittaa ne
- Älä aloita sanoilla ”kuva” tai ”valokuva”, se on jo tiedossa
Huono ja hyvä
Huono
IMG_2043.jpg, alt: ”kotisivut turku seo halpa verkkosivut”
Hyvä
keittioremontti-turku.webp, alt: ”Uusittu keittiö vaaleilla kaapeilla remontin jälkeen”
Huono
banner-final-final2.png, 3,4 megatavua, ei mittoja koodissa
Hyvä
hero-puuseppa.webp, 180 kilotavua, width ja height merkitty
Kuvien optimointi verkkosivuille
Nopein tapa parantaa sivuston latausaikaa
Kun mittaamme uuden asiakkaan sivuston, kuvat selittävät tyypillisesti suurimman osan latausajasta. Optimointi etenee näissä neljässä vaiheessa:
01
Mittaa lähtötilanne
PageSpeed Insights kertoo, mitkä kuvat ovat liian suuria ja mikä niistä on Largest Contentful Paint -elementti. Kirjaa luvut ylös, jotta näet lopuksi mitä työ tuotti.
02
Skaalaa oikeaan kokoon
Kuva näytetään harvoin yli 1600 pikselin levyisenä. Skaalaa alkuperäinen sopivaksi ja tarjoa pienemmät versiot pienille näytöille srcset-määrittelyllä.
03
Muunna ja pakkaa
Valokuvat WebP-muotoon, logot ja ikonit SVG:ksi. Pakkaus siihen pisteeseen, jossa ero alkuperäiseen ei näy tavallisella näytöllä.
04
Lataa fiksusti
Ensimmäisen näkymän kuva latautuu heti ja korkealla prioriteetilla, kaikki muu lazy loadingilla. Mitat koodiin, jotta sivu ei hyppää.
Koko sivuston nopeudesta kerromme sivulla nopeusoptimointi, ja videoiden sekä kuvahaun yhteispelistä sivulla YouTube- ja kuvahaun SEO.
Usein kysyttyä
Kuvahaku optimointi selkokielellä
Mitä kuvien hakukoneoptimointi tarkoittaa?
Kuvien hakukoneoptimointi tarkoittaa sitä, että kuvasi löytyvät Google Kuvista ja tukevat samalla koko sivun sijoitusta tavallisessa haussa. Siihen kuuluu kuusi asiaa: kuvaava tiedostonimi, alt-teksti, oikea tiedostomuoto ja pakkaus, oikeat mitat, kuvan ympärillä oleva teksti ja kuvien mukanaolo sivustokartassa.
Miten kuvien alt teksti kirjoitetaan oikein?
Kuvien alt teksti kuvaa kuvan sisällön yhdellä lauseella niin, että näkövammainen käyttäjä ymmärtää mistä on kyse. Kirjoita siis ”Puuseppä asentaa mittatilauskeittiön kaappeja Turussa” eikä ”keittiö kuva 4 seo turku”. Avainsana saa esiintyä, jos se kuuluu kuvaukseen luontevasti. Koristekuville, kuten taustakuvioille, alt-teksti jätetään tyhjäksi.
Mikä on paras tiedostomuoto verkkosivujen kuville?
WebP on nykyään oletusvalinta: se on tyypillisesti 25 ja 35 prosentin välillä pienempi kuin vastaava JPEG samalla laadulla ja toimii kaikissa nykyselaimissa. Valokuville WebP tai JPEG, logoille ja ikoneille SVG, läpinäkyvyyttä vaativille kuville WebP tai PNG. AVIF pakkaa vielä tiukemmin, mutta WebP riittää lähes kaikkeen.
Kuinka suuri kuvatiedosto saa olla?
Nyrkkisääntö: alle 200 kilotavua tavalliselle sisältökuvalle ja alle 400 kilotavua leveälle hero-kuvalle. Kuvan leveyden pitää vastata sitä, missä koossa se sivulla näytetään, eli 4000 pikselin kameratiedostoa ei ladata sellaisenaan. Kuvien optimointi verkkosivuille on useimmiten se yksittäinen toimenpide, joka parantaa latausaikaa eniten.
Miksi kuvien mitat pitää merkitä koodiin?
Koska ilman width- ja height-arvoja selain ei tiedä, kuinka paljon tilaa kuvalle varataan, ja sivu hyppii latautuessaan. Tämä nakertaa Cumulative Layout Shift -arvoa, joka on yksi Googlen Core Web Vitals -mittareista. Mitat koodiin ja lazy loading kuville, jotka ovat ensimmäisen näkymän alapuolella, niin ongelma poistuu.
Tuoko kuvahaku oikeasti kävijöitä?
Tuo, ja erityisesti visuaalisilla aloilla. Remontit, sisustus, kampaamot, ravintolat, tapahtumat ja rakentaminen saavat Google Kuvista tasaista liikennettä, koska ihmiset etsivät ensin esimerkkejä ja vasta sitten tekijää. Kuvahaku optimointi kannattaa aloittaa referenssikuvista: aidot ennen ja jälkeen -kuvat omista töistä toimivat parhaiten.
Tarvitseeko sivusto oman kuvasivustokartan?
Pieni sivusto ei tarvitse erillistä, kunhan kuvat on merkitty tavalliseen XML-sivustokarttaan. Jos kuvia on satoja, kuten kuvagalleriassa tai tuoteluettelossa, oma kuvasivustokartta auttaa Googlea löytämään ne kaikki. Lisäksi kannattaa varmistaa, ettei robots.txt vahingossa estä kuvakansiota, mikä on yllättävän yleinen virhe.
Katsotaan sivustosi kuvat läpi maksutta.
Lähetä osoitteesi, niin kerromme paljonko kuvat painavat, mitkä alt-tekstit puuttuvat ja kuinka paljon latausaikaa on saatavissa takaisin.
Vastaamme 2 tunnin sisällä