SEO obrázkov: alt texty, formáty a rýchlosť načítania
SEO obrázkov stojí na piatich veciach: výstižný alt text, opisný názov súboru, rozmer zmenšený na ten, v akom sa obrázok reálne zobrazuje, moderný formát so správnou kompresiou a rozmery uvedené v kóde. Prvé dve rozhodujú o tom, či Google obrázku porozumie, zvyšné tri o rýchlosti stránky. Tento návod prechádza všetky, aj s tým, čo k nim uvádza dokumentácia Google.
1. Prečo na obrázkoch záleží
Sú na to dva dôvody a oba sa dajú doložiť dokumentáciou Google.
Rýchlosť. Nekomprimovaná fotografia z mobilu má bežne niekoľko megabajtov a priamo predlžuje načítanie hlavného obsahu, teda metriku LCP. Google v dokumentácii k používateľskému zážitku uvádza, že Core Web Vitals jeho systémy radenia používajú. Obrázky sú pritom časť stránky, s ktorou sa dá najrýchlejšie niečo urobiť bez zásahu do šablóny.
Viditeľnosť. Vyhľadávanie obrázkov je samostatný kanál a Google preň má vlastnú príručku s odporúčaniami (Google Images best practices). Podmienkou je, aby obrázok bol v prvku <img> s atribútom src: obrázky vložené cez CSS Google na tento účel nespracúva.
2. Alt text a názov súboru
Vyhľadávač obrázok „nevidí“ tak ako človek – spolieha sa na to, čo mu o ňom poviete. Slúžia na to dve veci:
- Alt text (atribút
alt) je textový popis obsahu obrázka. Google ho označuje za najdôležitejší zdroj informácií o obrázku a zároveň pripomína, že zlepšuje prístupnosť pre ľudí, ktorí obrázky nevidia. Ak je obrázok použitý ako odkaz, alt text preň slúži ako text odkazu. - Názov súboru:
peter-weidinger-prednaska.webppovie viac nežIMG_20260726.webp. Google odporúča krátke, ale opisné názvy a varuje pred všeobecnými názvami typuimage1.jpg. Slová oddeľujte spojovníkmi, bez diakritiky.
💡 Alt text píšte pre človeka. Predstavte si, že obrázok opisujete niekomu po telefóne, stručne a vecne. Nie „seo optimalizacia seo firma seo kluc“, ale „Graf rastu organickej návštevnosti za šesť mesiacov“. Google k tomu píše priamo, že napchávanie kľúčových slov do atribútu alt zhoršuje zážitok používateľa a môže viesť k tomu, že web bude vyhodnotený ako spam.
Čisto dekoratívne obrázky (ozdobné čiary, pozadia) môžu mať alt prázdny (alt="") – čítačka ich potom preskočí, čo je správne správanie.
3. Formát, kompresia a rozmery
Najväčší skok v rýchlosti prinesie správne pripravený súbor. Tri kroky v tomto poradí:
| Krok | Čo urobiť |
|---|---|
| 1. Rozmer | Zmenšite obrázok na rozmer, v akom sa reálne zobrazuje. Nemá zmysel nahrávať fotku 6000 px širokú, keď sa zobrazí na 800 px. |
| 2. Formát | Použite moderný formát WebP (prípadne AVIF). Google uvádza, že bezstratové WebP sú o 26 % menšie než PNG a stratové o 25 až 34 % menšie než porovnateľné JPEG pri rovnakej kvalite podľa indexu SSIM. |
| 3. Kompresia | Skomprimujte súbor a výsledok si pozrite na mobile aj na veľkej obrazovke. Mieru kompresie znižujte dovtedy, kým je rozdiel oproti originálu neviditeľný, nižšie už nie. |
Google Vyhľadávanie podľa príručky k obrázkom spracúva formáty BMP, GIF, JPEG, PNG, WebP, SVG a AVIF. Prípona súboru by mala zodpovedať skutočnému typu súboru.
Ak máte responzívny web, oplatí sa pripraviť aj viac veľkostí toho istého obrázka a nechať prehliadač vybrať vhodnú podľa zariadenia. Mobil tak nesťahuje verziu určenú pre veľký monitor.
4. Lazy loading a rozmery v kóde
Dve technické drobnosti s veľkým efektom na Core Web Vitals:
- Lazy loading (
loading="lazy"): obrázky mimo viditeľnej časti stránky sa načítajú, až keď sa k nim používateľ posunie. Hlavný obrázok v hornej časti stránky ho mať nemá, spomalilo by to jeho vykreslenie. Pozor aj na to, či obsah načítaný až pri posune uvidí vyhľadávač: Google k tomu má vlastný návod Fix lazy-loaded content a upozorňuje, že obsah, ktorý sa načíta až po interakcii používateľa, sa do indexu nemusí dostať. - Uvedené rozmery (atribúty
widthaheight): prehliadač si vopred rezervuje miesto a obsah pri načítaní nepodskakuje. Uvedenie rozmerov obrázkov je podľa web.dev jedným z hlavných spôsobov, ako znížiť CLS, teda mieru posunov rozloženia.
5. Checklist pre každý obrázok
- Má výstižný alt text (alebo prázdny, ak je čisto dekoratívny)?
- Má zmysluplný názov súboru bez diakritiky?
- Je zmenšený na reálne potrebný rozmer?
- Je v modernom formáte a skomprimovaný?
- Má v kóde uvedené rozmery a (ak nie je hore) lazy loading?
- Súvisí obsahovo s textom, pri ktorom stojí?
Obrázky sú jednou z kapitol on-page práce. Ak riešite aj ostatné, začnite od prehľadu SEO optimalizácia a pokračujte návodom na on-page SEO.
Súvisiace: On-page SEO krok po kroku · Core Web Vitals a rýchlosť webu · Robots.txt a sitemap.xml
Zdroje
- Google Search Central: Google Images best practices, alt text ako najdôležitejší popis obrázka, názvy súborov, podporované formáty a varovanie pred napchávaním kľúčových slov.
- Google Developers: WebP, bezstratové WebP sú o 26 % menšie než PNG, stratové o 25 až 34 % menšie než JPEG pri rovnakej kvalite podľa SSIM.
- Google Search Central: Understanding page experience, Core Web Vitals používajú systémy radenia Google.
- Google Search Central: Fix lazy-loaded content, kedy sa obsah načítaný až pri posune nemusí dostať do indexu.
- web.dev: Optimize Cumulative Layout Shift, obrázky bez uvedených rozmerov ako najčastejšia príčina zlého CLS.
Časté otázky
Čo je alt text a musí ho mať každý obrázok?
Alt text je textový popis obsahu obrázka. Slúži nevidiacim používateľom, zobrazí sa pri nenačítaní obrázka a vyhľadávaču prezradí, čo je na ňom. Obsahové obrázky ho mať majú; čisto dekoratívne môžu mať alt prázdny, aby ich čítačka obrazovky preskočila.
Aký formát obrázkov je pre web najlepší?
Dnes WebP, prípadne AVIF. Google uvádza, že bezstratové WebP sú o 26 % menšie než PNG a stratové o 25 až 34 % menšie než porovnateľné JPEG pri rovnakej kvalite podľa indexu SSIM. Dôležitejšie než samotný formát je však obrázok najprv zmenšiť na rozmer, v akom sa reálne zobrazuje, a až potom komprimovať. Google Vyhľadávanie spracúva BMP, GIF, JPEG, PNG, WebP, SVG aj AVIF.
Pomáha lazy loading SEO?
Áno, nepriamo – zrýchli prvé zobrazenie stránky, čo zlepšuje Core Web Vitals aj zážitok návštevníka. Hlavný obrázok v hornej časti stránky by však lazy loading mať nemal, spomalilo by to jeho vykreslenie.
Mám do alt textu dávať kľúčové slová?
Len ak tam prirodzene patria a obrázok naozaj opisujú. Google v príručke k obrázkom priamo píše, že napchávanie kľúčových slov do atribútu alt zhoršuje zážitok používateľa a môže viesť k tomu, že web bude vyhodnotený ako spam. Píšte alt tak, ako by ste obrázok opísali človeku po telefóne.