Alt texty obrázkov: prečo ich Google aj zákazníci potrebujú

Chýbajúci alt text je jedna z najčastejších chýb, na ktoré na weboch narazím. Na e-shope s tisíckami produktových fotiek to nie je päť chýb, ale často niekoľko tisíc. Dobrá správa: je to jedna z mála SEO chýb, ktorá sa opravuje mechanicky a nepotrebuje na to redizajn ani vývojára.

Čo je alt text a kde sa berie

Alt text je atribút v HTML značke obrázka:

``html <img src="/fotky/kresle-scandi-dub.jpg" alt="Čalúnené kreslo Scandi s dubovými nohami, sivá látka"> ``

V praxi ho zadávate v administrácii — vo WordPresse v knižnici médií v poli "Alternatívny text", v e-shopových systémoch pri obrázku produktu. Nezamieňajte ho s titulkom obrázka, popisom ani s názvom súboru. To sú tri iné polia a Google ich číta inak.

Alt text má jednu pôvodnú úlohu: povedať, čo je na obrázku, keď obrázok nevidíte. To platí pre nevidiaceho človeka s čítačkou obrazovky aj pre prehliadač, ktorému sa fotka nenačíta. SEO prínos je vedľajší efekt tejto úlohy — nie naopak.

Prečo to Googlu vadí

Google nevie pozrieť na fotku a s istotou povedať, že je to práve váš model kresla v sivej látke. Rozpoznávanie obrazu má svoje limity a Google sám v dokumentácii k obrázkom hovorí, že alt text používa ako hlavný zdroj informácie o tom, čo obrázok zobrazuje.

Z toho plynú tri konkrétne dôsledky:

Vyhľadávanie obrázkov. Bez alt textu sa produktová fotka prakticky nemá ako dostať do Google Images. Pri nábytku, oblečení, dekoráciách alebo šperkoch je to reálny kanál návštevnosti, ktorý si ľudia sami vypnú.

Kontext stránky. Alt texty pomáhajú vyhľadávaču pochopiť, o čom stránka je. Na kategórii s dvadsiatimi produktovými fotkami bez popisu prichádzate o dvadsať drobných signálov naraz.

Prístupnosť ako signál kvality. Google nemeria prístupnosť priamo ako faktor poradia, ale weby, ktoré ju riešia, mávajú čistejší kód celkovo. A čistejší kód sa lepšie indexuje.

Prečo to vadí zákazníkom viac než Googlu

Čítačka obrazovky prečíta alt text nahlas. Keď je prázdny, prečíta názov súboru. Zákazník s poruchou zraku tak počuje "IMG podčiarkovník 2847 bodka jotpégé" namiesto "čalúnené kreslo Scandi, sivá látka". Na e-shope, kde je desať variantov produktu odlíšených len fotkou, je to nákup naslepo.

Druhá situácia je banálnejšia a týka sa všetkých: pomalé mobilné pripojenie, obrázok sa nenačíta, na jeho mieste zostane prázdne miesto alebo alt text. Ak tam nič nie je, používateľ nevie, čo mu uniklo.

Ako napísať dobrý alt text

Pravidlá sú krátke a nemenia sa:

Opíšte, čo je na obrázku, konkrétne. Nie "kreslo", ale "čalúnené kreslo Scandi s dubovými nohami, sivá látka". Nie "tím", ale "tri servisné techničky pri montáži klimatizácie".

Držte sa do 125 znakov. Niektoré čítačky obrazovky dlhší text orežú. Ak potrebujete povedať viac, patrí to do popisku pod obrázok, nie do altu.

Nezačínajte slovami "obrázok" alebo "fotka". Čítačka už povedala, že ide o obrázok. Duplicitná informácia zdržuje.

Kľúčové slovo použite len vtedy, keď tam prirodzene patrí. Ak fotka naozaj zobrazuje kreslo Scandi, slovo "kreslo" v alte je namieste. Nacpať tam "kreslo lacno Bratislava kreslo eshop" je stuffing a Google si to vie prečítať rovnako ako vy.

Dekoratívne obrázky nechajte s prázdnym altom. Oddeľovače, tieňové podklady, ikony pozadia — tam patrí alt="". Prázdny atribút je správna hodnota, ktorá čítačke povie "toto preskoč". Vynechať atribút úplne správne nie je.

Obrázok, ktorý je odkazom, opíšte cieľom. Ak je logo v hlavičke odkazom na domovskú stránku, alt má znieť napríklad "Nábytok Novák — domovská stránka", nie "logo".

Text na obrázku prepíšte. Infografika, cenník v obrázku, banner s podmienkami akcie — čo je na obrázku napísané, musí byť dostupné aj textom. Buď v alte (ak sa zmestí), alebo v texte pod ním.

Typické chyby, ktoré vidím na e-shopoch

| Chyba | Ako to vyzerá | Čo s tým | |---|---|---| | Prázdny alt na produktoch | alt="" na fotke tovaru | Doplniť názov produktu a rozlišovací znak | | Názov súboru ako alt | alt="DSC_0431" | Prepísať na popis obsahu | | Rovnaký alt na všetkých fotkách produktu | 6× "Kreslo Scandi" | Odlíšiť pohľad: spredu, detail poťahu, v interiéri | | Alt = celý názov kategórie + značka | 200 znakov s kľúčovkami | Skrátiť na podstatu | | Alt na dekorácii | alt="vlnka pozadie" | Nastaviť alt="" |

Pri variantoch produktu je odlíšenie dôležitejšie, než sa zdá. Šesť fotiek s identickým altom nedá Googlu ani zákazníkovi žiadnu novú informáciu. Stačí pridať dve slová: "pohľad zboku", "detail švu", "v obývačke".

Ako ich doplniť, keď ich chýbajú stovky

Ručne po jednom to na e-shope nedáte. Postup, ktorý funguje:

1. Zistite rozsah. Prejdite si web crawlerom a nechajte si vypísať všetky <img> bez altu alebo s altom kratším než pár znakov. Bez čísla neviete, či ide o desať obrázkov alebo tritisíc.
2. Roztrieďte podľa typu stránky. Produktové fotky, kategórie, blog, dekorácie v šablóne. Každá skupina má iný recept.
3. Šablóna pre produkty. Väčšinu produktových fotiek viete vygenerovať zo štruktúrovaných údajov: názov produktu + farba/variant + poradie fotky. Nie je to poézia, ale je to presné a v priebehu jedného zásahu opravíte celý katalóg.
4. Ručne dorobte to, na čom záleží. Fotky na domovskej stránke, v kľúčových kategóriách, v článkoch, ktoré privádzajú návštevnosť. Tam sa oplatí desať minút navyše.
5. Nastavte pravidlo do budúcna. Ak sa alt nedopĺňa automaticky pri nahrávaní produktu, o mesiac budete tam, kde ste boli.

Presne takto to riešim ja: pri prechode webu nájdem každý obrázok bez alt textu a k dôležitým nálezom rovno napíšem konkrétny text, ktorý tam má byť — nie odporúčanie "doplňte alt text". Návrhy schválite a nasadia sa cez WordPress plugin, API alebo si ich stiahnete v CSV a nahráte hromadne do e-shopu.

Čo od toho reálne čakať

Aby sme si rozumeli: doplnenie alt textov nie je zásah, po ktorom sa web posunie o desať pozícií. Je to hygiena. Efekt býva takýto:

• viditeľnosť vo vyhľadávaní obrázkov sa zlepší tam, kde má obsah vizuálny charakter (produkty, interiéry, jedlo, remeslá)
• stránka je použiteľná pre ľudí s čítačkou obrazovky, čo je právna aj slušnostná povinnosť
• ubudne varovaní v auditoch a prestane to prekrývať vážnejšie nálezy

Pozície v organickom vyhľadávaní sa pohybujú pomaly a alt texty samé o sebe nie sú páka, ktorá by tým pohla. Kto tvrdí opak, predáva vám nádej. Zmysel to dáva ako súčasť balíka spolu s titulkami, popismi a rýchlosťou — a preto meriam dopad každej nasadenej opravy 28 dní pred a po, aby bolo vidieť, čo naozaj zabralo.

Rýchla kontrola za päť minút

Otvorte si ľubovoľnú produktovú stránku, kliknite pravým tlačidlom na hlavnú fotku a zvoľte "Preskúmať prvok". Pozrite sa, čo je v atribúte alt. Ak tam vidíte názov súboru, prázdny reťazec alebo tam atribút vôbec nie je, máte odpoveď — a s veľkou pravdepodobnosťou to isté platí pre celý katalóg.