CSS kuvalla korvaaminen

Yksi tavallisimmista hakukoneoptimointiin liittyvistä kysymyksistä on miten luoda tekstimuotoisia <h1>-otsikoita käyttäen erikoisfontteja.

Asia voidaan ratkaista monella tavalla, esimerkiksi käyttäen sIFR:iä eli Scalable Inman Flash Replacementiä. Tänään kerromme kuinka tehdä sama asia käyttäen CSS-tyylejä.

Haluamamme otsikko näyttää tältä:

Tämä on helposti toteutettavissa seuraavalla html-koodilla:

<h1 id="niceHeadline"><span>Nice headline</span></h1>

CSS-tyylitiedostoon lisätään seuraavat tyylit:

h1#niceHeadline span {
	display:none;
}
h1#niceHeadline {
	width:251px;
	height:41px;
	background: url('images/nice-headline.jpg');
}

Näin otsikko näyttää hakukoneille tavalliselta tekstimuotoiselta <h1>-otsikkotagilta, mutta käyttäjälle samalta kuin yllä olevassa kuvassa. On tärkeää kuitenkin käyttää kuvassa ja <h1>-otsikkotagissa samaa tekstiä, muuten rikotaan Googlen verkkovastaavan ohjeita (Webmaster Guidelines), josta Google saattaa rankaista sivustoa.