Obrázky jsou na většině webů druhý největší zdroj technických SEO problémů hned po meta tazích. Přitom jejich kontrola patří k těm snazším věcem, které se dají na webu rychle napravit. Kontrola obrázků SEOtest.online projde obrázky na stránce automaticky a vrátí přehled čtyř oblastí, které mají přímý dopad na rychlost webu, pozice ve vyhledávání i přístupnost pro uživatele se zrakovým omezením.
Proč obrázky tvoří tak velkou část technických problémů?
I když web vypadá na první pohled v pořádku, může být každý obrázek bez alt textu pro Google neviditelný, každý obrázek bez zadaných rozměrů narušovat stabilitu layoutu při načítání a každý obrázek ve starém formátu zatěžovat stránku víc, než je nutné.
Na běžném webu nebo e-shopu se takové problémy násobí desítkami nebo stovkami obrázků a jejich dopad na výkon stránky roste proporcionálně. SEOtest.online analýzu spustíte zadáním URL a výsledky máte za několik sekund bez registrace a bez instalace čehokoliv.
Alt text – co Google a čtečky obrazovky potřebují vědět
První a nejdůležitější kontrola se týká alt textu. Každý obrázek na webu by měl mít vyplněný atribut alt, tedy krátký textový popis toho, co obrázek zobrazuje. SEOtest.online zkontroluje všechny obrázky na stránce a zobrazí, jaký podíl z nich alt text má. Cíl je sto procent.
Alt text primárně vznikl pro uživatele se zrakovým postižením, kteří web procházejí pomocí čteček obrazovky. Čtečka přečte alt text nahlas a uživatel se dozví, co je na obrázku. Pokud alt text chybí, čtečka přečte název souboru nebo celý element přeskočí. Ani jedna varianta není dobrá.
Pro Google alt text funguje jako významový signál. Vyhledávač obrázky skutečně vidět neumí, ale přečte alt text a na jeho základě pochopí, co obrázek zobrazuje. Obrázek bez alt textu je pro Google anonymní a přichází o potenciál z vyhledávání obrázků.
Při psaní alt textu popisujte konkrétně a přirozeně. Ne „obrázek“, ale „červené dámské tenisky Nike Air Max na bílém pozadí“. Dekorativní grafiku, oddělovače a ikony bez obsahu nechte záměrně prázdné zápisem alt=““. Tím čtečce říkáte, že jde o vizuální prvek bez informační hodnoty, a ta ho přeskočí.
Rozměry obrázků a skákající layout
Druhá kontrola se zaměřuje na to, zda mají obrázky v HTML kódu zadané atributy width a height. Jde o číselné hodnoty šířky a výšky obrázku přímo v HTML tagu. SEOtest.online ověří, zda tyto hodnoty přítomné jsou, a upozorní na obrázky, kde chybí.
To je důležité, protože prohlížeč při načítání stránky nejprve zpracuje HTML kód a pak teprve stahuje obrázky. Pokud neví, jak velký obrázek bude, nevyhradí pro něj patřičné místo. Jakmile se obrázek stáhne, vloží ho do stránky a všechen okolní obsah se posune dolů. Uživatel to vidí jako skákání stránky při načítání.
Toto skákání měří Google metrikou Cumulative Layout Shift, která je součástí Core Web Vitals. Vysoký CLS skóre zhoršuje hodnocení stránky a Google ho bere v potaz při určování pozic ve výsledcích vyhledávání. Zadání rozměrů do HTML kódu je technicky nenáročná oprava s přímým dopadem na tuto metriku.
Lazy loading – obrázky se načtou až když je uživatel potřebuje
Třetí oblast kontroly je lazy loading. Jde o techniku, při které se obrázky nenačítají všechny najednou při otevření stránky, ale postupně podle toho, jak uživatel scrolluje dolů. Obrázky nad ohybem stránky, tedy ty viditelné bez scrollování, se načtou okamžitě. Obrázky níže počkají, dokud se uživatel k nim nepřiblíží.
Nástroj zkontroluje, zda mají obrázky pod ohybem stránky atribut loading=“lazy“. Na stránkách s větším množstvím fotografií je rozdíl v rychlosti načítání znatelný. Stránka se uživateli zobrazí rychleji, protože nemusí najednou stáhnout veškerý obrazový obsah.
Implementace lazy loading je ve většině případů otázka přidání jednoho atributu do HTML tagu obrázku. Na WordPressu moderní verze jádra lazy loading přidává automaticky. Na starších instalacích nebo zakázkových šablonách to vyžaduje ruční úpravu nebo plugin.
Moderní formáty obrázků – WebP a AVIF
Poslední kontrola se zaměřuje na formát obrázků. SEOtest.online zjistí, zda stránka používá moderní formáty WebP nebo AVIF, a upozorní, pokud obrázky zůstávají ve starším JPEG nebo PNG.
WebP je formát vyvinutý Googlem a při srovnatelné vizuální kvalitě produkuje soubory výrazně menší než JPEG nebo PNG. AVIF je ještě novější formát s ještě lepšími výsledky komprese, ale s o něco nižší podporou ve starších prohlížečích. Oba formáty podporují všechny moderní prohlížeče a přechod na ně znamená menší soubory, rychlejší načítání a lepší skóre v PageSpeed.
Převod existujících obrázků na WebP zvládnou online nástroje i WordPress pluginy. Při nasazení na web je dobrým zvykem použít HTML element <picture> s fallbackem na JPEG nebo PNG pro případ, že by starší prohlížeč WebP nepodporoval. V praxi jde dnes o okrajový případ, ale technicky správné řešení tuto situaci ošetří.
Jak výsledky analýzy zpracovat?
SEOtest.online označuje nálezy barevně. Oranžová upozornění u alt textu jsou nejzávažnější a zaslouží si první pozornost. Modré informace u rozměrů, lazy loadingu a formátů jsou důležité, ale web s nimi funguje. Zařaďte je do plánu oprav podle dostupného času.
U webu s desítkami stránek začněte od těch s největší návštěvností. Oprava obrázků na homepage a nejnavštěvovanějších stránkách přinese největší okamžitý efekt. E-shopy s tisíci produktových fotografií řeší chybějící alt texty nejefektivněji úpravou šablony, která alt text generuje automaticky z názvu produktu. Automaticky generovaný alt text není ideální, ale je výrazně lepší než prázdný atribut.
Nechte obrázky pro váš web skutečně pracovat
Správně implementované obrázky dělají tři věci najednou. Zpřístupní obsah uživatelům se zdravotním omezením. Dají Googlu textové signály pro pochopení obsahu stránky. A nenabourávají rychlost načítání, na kterém závisí jak uživatelský zážitek, tak hodnocení v Core Web Vitals. Nástroj SEOtest.online ukáže, kde vaše obrázky tyhle tři podmínky nesplňují. Co s tím uděláte dál, je pak otázka hodin práce, ne týdnů.
