Bezplatná návštevnosť pre vás navyše: ako na optimalizáciu obrázkov

Potenciálnych zákazníkov z Googlu dokážete získať aj lepšími pozíciami vo výsledkoch vyhľadávania obrázkov. Mnoho ľudí sa rozhoduje pre kúpu výrobkov práve na základe ich fotiek. Obzvlášť elektronické obchody ocenia dodatočnú návštevnosť, ktorú cez obrázky môžu získať. Ako na to?

Unikátnosť a kvalita

Podobne ako pri textoch, keď pridávate na web fotografie či iné obrázky, myslite na ich unikátnosť. Je lepšie mať dve vysokokvalitné fotky ako množstvo maličkých obrázkov, ktoré sú po zväčšení rozmazané. Je nám jasné, že pri weboch so stovkami produktov ich nemôžete všetky nafotiť samostatne. Aj tu je lepšie sa sústrediť na postupné zlepšovanie kvality fotiek aspoň pri najpredávanejších kategóriách.

Myslite tiež na to, že pokým niekoľko rokov dozadu postačovali rozmery 800 x 600, dnes je vhodné poskytovať (aspoň pre desktop) používateľom fotografie vo veľkosti aj 1600+ pixelov. Pre mobilných používateľov môžete cez responzívny dizajn zobrazovať „váhovo“ menej náročné obrázky (a pre retina obrazovky môžete mať špeciálnu HD verziu). Responzívny dizajn tiež zabezpečí zmenšenie obrázka za behu či zobrazenie vyhovujúcich rozmerov obrázku na veľkosť obrazovky používateľa.

Povinná jazda

Pri nahrávaní obrázkov na web dbajte o nasledujúce základné pravidlá:

• Obrázok (názov súboru) pomenujte zmysluplne – namiesto a3adea87bee493d29f46f79481c6f28d.jpg voľte cerveny-ventilator-zubra-X748.jpg. Jednotlivé kľúčové slová v názve súboru oddeľujte pomlčkou, aby ich Google rozoznal ako samostatné slová. Nezabudnite použiť modelový rad (zubra) či číslo výrobku (X748). Mnoho ľudí hľadá konkrétne výrobky práve takto.
• Obrázku priraďte krátky, ale výstižný alternatívny text (atribút ALT) – tento pomôže nielen ľuďom s postihnutiami zraku, ale aj ozrejmí vyhľadávačom, čo sa na obrázku nachádza. Ak na ňom máte červený ventilátor spomínaný vyššie, použite „Červený ventilátor Zubra X748“.
• Obrázku priraďte dlhší popis (atribút TITLE) – ak máte napr. produkt nafotený z viacerých uhlov alebo detailov, opíšte ich štýlom „Zubra X748 – detail tlačidiel“ alebo „Zubra X748 – pohľad zboku“. Ak nedokážete tvoriť samostatné popisy, vyplňte ho totožným alternatívnym textom.

HTML5 a popisok figcaption

Štandard HTML5 zaviedol niekoľko nových sémantických prvkov, ktoré umožňujú lepšie priradiť význam obsahu. K nim patrí aj element figure (obrázok/schéma) a figcaption (popisok). Pokým doteraz museli vyhľadávače priraďovať význam obrázkom, ktoré boli pre ne nezrozumiteľné, cez kontextovú analýzu okolitého textu a tiež textu v atribútoch ALT a TITLE, dnes získavajú ďalší silný indikátor. Element figcaption podľa definície W3C zastupuje „popisok alebo legendu pre zvyšok obsahu nadradeného prvku figure“.

Využiť ho teda môžete na zobrazenie dodatočného popisu, ktorý je významovo úzko previazaný s obrázkom (ako opozitum dosiaľ voľne stojaceho popisku niekde naokolo). Kód pre obrázky môže potom vyzerať nejako takto:

<figure>
<img src="cerveny-ventilator-zubra-X748.jpg" alt="Červený ventilátor Zubra X748" title="Zubra X748 - detail tlačidiel">
<figcaption>Červený ventilátor X748 od výrobcu Zubra má tri rýchlosti a hlučnosť do 20 dB.</figcaption>
</figure>


Výhodou prvku figcaption je, že doň môžete vkladať aj ďalšie prvky, ako napr. odkazy (a linkovať tak napr. na obrázok s iným detailom produktu).

Sitemap pre obrázky

Od zavedenia štandardu sitemap.xml pre obsah Google podporuje aj iné sitemapy – pomocné súbory obsahujúce zoznam prvkov na stránke. Obrázková sitemap môže obsahovať okrem URL adresy obrázka aj:

• nadpis/názov,
• popis,
• geolokáciu – súradnice,
• licenciu (URL adresu licencie).

Nezabudnite následne obrázkový sitemap odoslať aj do vášho konta Webmaster Tools alebo aspoň do sitemap indexu v robots.txt. Viac o tom, ako správne generovať obrázkovú XML sitemap nájdete na stránkach od Googlu.

EXIF značky

Používa Google EXIF značky (interné metadáta vo fotografiách, ako napr. typ kamery, rýchlosť uzávierky, ale aj geolokácia či autor) ako rankingový faktor? Raz za čas sa niekde objaví v diskusii takáto otázka.

Google začal zobrazovať niektoré EXIF dáta vo výsledkoch v roku 2011, indexoval ich už pravdepodobne predtým (dnes už takéto informácie nezobrazuje). Pred niekoľkými rokmi sme u nás na blogu urobili experiment s EXIF tagmi a uzavreli ho tým, že v roku 2012 EXIF značky nevplývali na pozície obrázkov.

Minulý rok na webe Search Engine Watch rozoberali opäť túto tému aj s vyjadrením Matta Cuttsa z Googlu. Aj keď nebolo potvrdené, že Google (zatiaľ) EXIF značky využíva, je pravdepodobné, že časom dôjde k indexácii aj týchto parametrov. Preto odporúčame na EXIF značky myslieť a raz za čas sa pozrieť na stav ich indexácie. Potenciálne zaujímavé budú najmä tieto:

• DocumentName,
• ImageDescription,
• ostatné zavedené v systéme Windows (XPTitle, XPComment, XPAuthor, XPSubject, XPKeywords).

Pozrieť si tiež môžete všetky značky použité v štandarde EXIF.

Upravujeme obrázky pre rýchlosť

Keďže rýchlosť vplýva na pozície vo výsledkoch vyhľadávania Googlu, odporúčame venovať sa vašim obrázkom na webe aj z tohto pohľadu. Základné odporúčania sú:

• preferujte vektorové formáty (ako napr. SVG),
• pre vektorové formáty ako SVG odstráňte nepotrebné metadáta a komprimujte ich pomocou GZIP metódy,
• používajte vhodné rastrové formáty – pre fotky JPG, pre ilustrácie, schémy a náčrty PNG či GIF,
• experimentujte s vhodným nastavením kvality obrázka,
• odstráňte nepotrebné metadáta (napr. množstvo EXIF značiek technického charakteru generované fotoaparátom),
• poskytujte viaceré verzie obrázkov, napr. pre mobily obrázky s menšou veľkosťou,
• automatizujte – niektoré systémy, ako napr. WordPress, vedia automaticky komprimovať obrázky po ich uploade (odporúčame rozšírenie EWWW Image Optimizer).

Opäť vám môže pomôcť tento checklist optimalizácie obrázkov pre rýchlosť.

Na záver

Niekoľko ďalších odporúčaní je staršieho dáta, ale je dobré si ich pripomenúť:

• Nikdy nevkladajte text do obrázkov, ale s použitím CSS či Javascriptu vložte skutočný text v HTML do obrázkového pozadia.
• Ak odkazujete na obrázok (a platí to aj pre iný obsah), použite vhodný text odkazu, ktorý cieľový obrázok popisuje.

Tento článok vám bude nápomocný pri zlepšovaní pozícií v obrázkovom vyhľadávaní Googlu. Ak potrebujete pomôcť s ďalšími špecifikami alebo nemáte čas zaoberať sa optimalizáciou obrázkov, ozvite sa nám do Pizza SEO.