Ako vytvoriť kvalitné SEO nadpisy s obrázkami

Častokrát sa stretávame s problémom, keď je potrebné na stránke použiť nadpisy, ktorých font zrovna nie je v štandardnom repertoári, resp. málo kto ho má v systéme nainštalovaný, tým pádom sa nedá prakticky použiť.

V ľavo neštandardný font nadpisu, v pravo štandardný

Existuje viac spôsobov, ako tento problém vyriešiť.

1. Obrázok s atribútom alt

Prvý spôsob je vyrezať text v grafickom editore, uložiť obrázok a použiť
<h1><img src=“obrazok.gif“ alt=“Text nadpisu“ /></h1>

Atribút alt je v tomto prípade kľúčový a treba ho vyplniť textom nadpisu (ktorý je taktiež na obrázku). Google indexovať nadpis bude.

2. Prekrytie textu obrázkom pomocou span

Ďalším riešením, ktoré sa ponúka, je prekrytie textu obrázkom. Použitie je jednoduché, vysvetlíme si ho na príklade:
<h1>Text nadpisu<span></span></h1>

V CSS potom nadefinujeme:
h1 {
position:relative; overflow:hidden; width:200px; height:50px; line-height:50px;
}
h1 span {
position:absolute; top:0; left:0; width:100%; height:100%; background:url(obrazok.gif);
}

Týmto dosianeme požadovaného efektu, span bude vrámci h1 absolútne poziciovaný a roztiahnutý na jeho rozmery (resp. na rozmery obrázku s nadpisom). Teda nadpis h1 obsahuje text dôležitý pre SEO a span v ňom obsahuje obrázok s efektným nadpisom dôležitý pre design. Mínusom je nesémantickosť prázdneho span tagu.

3. Kombinácia 1. a 2. metódy

Prvý a druhý spôsob môžeme efektívne skombinovať, keď nám v kóde bude namiesto span figurovať <img src=“obrazok.gif“ alt=“Text nadpisu“ />. Samozrejme zameníme aj CSS deklaráciu, takže vznikne:
h1 img {
position:absolute; top:0; left:0; width:100%; height:100%;
}

4. sIFR – text generovaný pomocou javascriptu a flashu

sIFR je zaujímavé riešenie kombinujúce javacsript a flash. Použiteľnosť sa stáva nevyhnutnou v prípade, že potrebujete na vašich stránkach generovať kvantum nadpisov a nechce sa vám pre každý vytvárať obrázok. Funguje to jednoducho, použijete javascriptový súbor sIFRu, stiahnete (alebo vytvoríte) flash swf súbor s fontom a nadefinujete, pre aké nadpisy ho má sIFR použiť. Na stránkach projektu sa dozviete podrobnosti o použití danej metódy, ako aj názorné príklady.

Nevýhodu vidím v tom, že JavaScript nie je štandardne povolený, v prehliadačoch môže byť vypnutý (rôzne bezpečnostné nástroje a utility ho často vypínajú), tak isto ako aj flash. Osobne mám zapnutý FlashBlock, to však neznamená, že sa vaše nadpisy nezobrazia. Ak máte javascript a flash vypnutý, zobrazí sa váš nadpis so štandardným fontom. Mínusom tohoto riešenia je aj fakt, že ak máte zložitejší web, s viacerými sIFR nadpismi, alebo textami všeobecne, tak vám ich načítava ako posledné.

Určite existujú aj iné riešenia, ale osobne ma oslovili hlavne tieto 4 spomenuté. Google potrebuje text, potrebuje content, pri odlaďovaní vašich webov vypínajte CSS a obrázky, prezerajte či máte dobre štruktúrovaný web a správne použité nadpisy rôznych úrovní a pri obrázkoch používate alt, prípadne prekrývajte text obrázkami. Snaha bude určite odmenená.