Google osaa nykyään lukea paitsi normaalia tekstisisältöä, myös PDF:iä, erimuotoisia rich text sisältöjä ja jopa Flash tiedostoja. Lisäksi Google tutkii mahdollisuuksiaan indeksoida formien takana olevas sisältöä vaikkei tätä löytyisikään sivukartasta. Näistä huolimatta kuvat ovat yhä hakukoneoptimoinnin kannalta ongelmallisia tapauksia. Kaikki tietävät kyllä Googlen katsovan kuvien nimiä, title- ja alt-tekstejä, mutta monilla vaikuttaa menevän sormi suuhun kun suurempaa määrää tekstisisältöä kuvassa pitäisi saada indeksoitumaan tai kuvaotsikko saamaan oikea arvonsa.

Kuvien hakukonenäkyvyyden perustekijät

Kuvan nimi.
Tuskin on kellekään epäselvyyttä siitä, että lintusivuston kuva neitokakadusta kannattaa nimetä asianmukaisesti, jos niihin liittyvillä termeillä haluaa sijoittua hyvin.
ALT-attribuutti
Vaikka jotkut selaimet (tarkoittaen tietysti internet Exploreria) näyttävätkin ALT-tekstit virheellisesti, kuuluu W3C XHTML määritelmien mukaisesti ALT-tekstin olla juuri alternative, eli näkyä vain jos kuvaa ei voida näyttää. Tooltippinä näkyvä teksti kuuluu esiintyä vain title-attribuutin kautta. ALT-teksti saa siis olla jotakin itsestäänselvää ja ilman mitään arvoa kuvan näkeville, esimerkiksi “Harmaa neitokakadu”. Vaikka teksti saa periaatteessa olla pidempikin, kannattaa se pitää alle sadan merkin pituisena. Yleinen virhe on laittaa näihin turhia sanoja kuten “Kuva neitokakadusta”. ALT-tekstin tiedetään jo olevan kuvasta.
TITLE-attribuutti
Toisin kuin ALT-teksti, title teksti palvelee juuri kuvan näkeviä ihmisiä. Tähän kannattaa siis pistää selitys, kuten “Neitokakadun kasvojen keltainen maski ilmestyy vasta ensimmäisen sulkasadon jälkeen”. ALT- ja TITLE-attribuuttien ero on hyvä ymmärtää, koska täten on helpompaa keksiä molempiin erilliset ja omia tarkoituksiaan palvelevat tekstit.
Kuvatekstit
TITLEn ja vastaavien teknisten elementtien lisäksi kannattaa muistaa varsinaiset kuvatekstit. Tämä niin yksinkertainen asia tuntuu puuttuvan niin monilta sivuilta.
Kuvien indeksointi
Kuvat kannattaa lisätä sivukarttaan, että ne indeksoituisivat paremmin ja nopeammin.
Kaikkia kuvia ei kannata indeksoida
Kuvia kannattaa indeksoida vain kun niiden sisältö saattaa oikeasti houkuttaa käyttäjiä tai on tärkeää hakukoneiden kyvyn lukea sivu kannalta. Footerin, headerin tai sivussa olevien nosteiden koristekuviin tämä ei päde, joten näihin ei kannata edes yrittää työntää turhaa avainsanasisältöä (”Hakukoneoptimointi-sivuston-sivupalkin-ulkoasullinen-kuva.jpg” ei tunnu kovin fiksulta). Näiden kuvien kohdalla kannattaa muistaa, että sisällön määrä markupin määrään suhteutettuna merkitsee, joten ulkoasulliset kuvat kannattaa asettaa suoraan CSS-tiedostoissa DIVien taustakuviksi.

Kuvaotsikoiden optimointi

Kuvaotsikot ovat ikäviä, sillä näiden sisältö pitää saada paitsi näkymään hakoneille, myös näkymään varsinaisena otsikkona. Tähän on kuitenkin tapoja, jotka ovat oikein toteutettuna vielä whitehattiä. Esittelen kaksi tapaa, joissa on molemmissa sama perusidea, mutta hieman eri muutokset. Molemmissa tehdään H1-elementti, jonka sisällä on itse teksti, taustana kuvaotsikko ja teksti piilotettu näkyvistä. Tämä on sallittua, sillä tällä tavalla ei huijata hakukonetta tai koiteta ottaa korkeampaa paikkaa kuin ansaitsisi, vaan pelkästään näytetään hakukoneelle sama otsikkosisältö kuin käyttäjille. Lisäksi sokeiden oikolukuohjelmat osaavat lukea näillä metodeilla tehdyt otsikot. Tietysti, jos otsikon sisällöksi pistetään mitään muuta kuin käyttäjille näkyvä otsikko, mennään kielletylle alueelle.

Esittelen nyt kaksi tapaa, joissa lopputulos muistuttaa toisiaan. Suurin ero näissä on se, että jälkimmäisessä metodissa tulee tekstiotsikko käyttäjälle näkyviin jos kuvaa ei voida näyttää. Tässä tavassa kuitenkin on hieman enemmän koodia (ja mm. tyhjä SPAN-elementti otsikon sisällä), joten koodi on vähemmän siistiä ja siinä saattaa olla (hyvin vähän tosin) heikompia puolia hakukoneoptimointi-kannalta.

Kuvaotsikon taustakuva ja text-indent

Ensimmäinen tapa on hyvin yksinkertainen ja näyttää kutakuinkin tältä:

HTML:

<h1 id=”otsikko1″>Otsikkosisältö</h1>

CSS:

#otsikko1 { background: url(’otsikkokuva1.jpg’) no-repeat center; width: ??; height: ??; text-indent: -9999px; }

HUOM: On tärkeää käyttää juuri text-indenttiä sen sijasta, että muuttaisi tekstin pois näkyvistä. Jälkimmäinen tapa poistaa otsikot myös sokeiden ohjelmista ja voidaan helpommin tulkita hakukoneiden huijausyritykseksi.

Span otsikon sisälle

Toisessa tavassa vaaditaan SPAN otsikon sisälle. Tässä määritellään jälleen otsikko kuvan kokoiseksi, mutta kuva määritelläänkin SPANin sisälle ja SPAN taas koko otsikon levyiseksi. Täten SPANin taustakuva peittää tekstisisällön, mutta kun kuvaa ei voida näyttää, ilmestyy tekstisisältö näkyviin.

HTML:

<h1 id=”otsikko2″> <span></span> Otsikkosisältö </h1>

CSS:

#otsikko2 { width: ??; height: ??; position: relative; }

#otsikko2 span { background: url(’otsikkokuva2.jpg’) no-repeat; position: absolute; width: 100%; height: 100%; }

Laajempi sisältö kuvissa hakukoneille

Silloin tällöin tulee vastaan tapauksia, joissa on pakko säilyttää suurempia tekstipätkiä kuvien sisällä, mutta teksi pitäisi silti saada hakukoneiden luettavaksi. Toiste taas kuva oikeasti kertoo enemmän kuin tuhat sanaa ja kuvan sisältö oikeasti tarjoaa hyvin merkittävää tietoa, vaikka se ei sisälläkään tekstiä. Esimerkiksi erilaiset graafit ovat esimerkkejä jälkimmäisestä.

Näitä tapauksia varten on olemassa LONGDESC -attribuutti. Tähän attribuuttiin voi ilmoittaa ulkoisen tiedoston, jossa on niin laaja kuvaus kuvan sisällöstä kuin on tarpeen. Tämä attribuutti on alunperin kehitetty saavutettavuuden parantamiseksi ja on kaikin puolin upea. Longdescin ainoa ongelma on, että se ei toimi.

Käyttäjille ja saavutettavuuteen ongelmia tuottaa heikko tuki attribuutille (ainakin selaimissa. Oletettavasti sokeiden apuohjelmistoissa tilanne on parempi). Tämän voi vielä yhdistää siihen, että LONGDESC pitää määritellä ulkoiseksi tiedostoksi. Tällöin on monia kehyksistä tuttuja ongelmia, kuten pelko siitä, että hakukoneet eivät indeksoi tiedostoa, indeksoivat mutteivat osaa yhdistää sitä kunnolla kuvaan tai indeksoivat täysin omaksi tiedostokseen, jonne hakukoneesta päätyvä käyttäjä ei ole tyytyväinen.

Attribuutti voidaan pelastaa toki, mutta tämä vaatii pientä huijausta. Pahimmista ongelmista päästään eroon jos longdescin sisältö sijoitetaan samaan tiedostoon omaan DIViinsä ja attribuutin arvoksi pistetään ulkoisen tiedoston sijasta sivun sisäinen linkki saman tiedoston oikeaan elementtiin. Tämä elementti sitten voidaan joko piilottaa vanhalla tutulla text-indent: -9999px; tavalla tai pistää sivun alareunaan pikkupräntillä. Tämä ei ole hakukoneiden huijausta jos teksti on sopiva, enkä usko tästä välittömästi rangaistuksia tulevan, mutta periaatteessa näin tekeminen ei ole standardin mukaista ja rikkoo kyllä sääntöä “Älä tee mitään vain hakukoneita varten”. Jonkin verran varovaisuutta kannattaa siis käyttää.

Muuta aiheesta: Juhan kirjoitus kuvalinkeistä.