ALT text: čo to je, prečo je dôležitý a ako ho správne písať

ALT text (alternatívny text) je textový popis obrázka v HTML kóde, ktorý sa zobrazí keď sa obrázok nenačíta a ktorý čítajú hlasoví asistenti pre nevidiacich. Pre vyhľadávače je ALT text jediný spôsob ako pochopiť obsah obrázka — Google nedokáže „vidieť" fotku, ale dokáže prečítať jej popis.

Správne napísaný ALT text plní dvojakú funkciu: zlepšuje prístupnosť webu pre používateľov so zrakovým postihnutím a pomáha obrázkom rankovať v Google Images. Podľa údajov Ahrefs pochádza až 22% všetkých vyhľadávaní v Google z obrázkov — ignorovať ALT atribút znamená strácať organickú návštevnosť.

Čo je ALT text a na čo slúži

ALT text je hodnota atribútu alt v HTML tagu img. Technicky vyzerá takto: <img src="obrazok.jpg" alt="Popis obrázka">. Tento text nie je viditeľný pre bežného návštevníka — zobrazí sa len v troch situáciách.

Prvá situácia nastane keď sa obrázok nenačíta (pomalé pripojenie, chyba servera, zablokovaný zdroj). Namiesto prázdneho miesta alebo ikony rozbitého obrázka používateľ vidí alternatívny text. Druhá situácia je čítanie webu pomocou screen readera — softvéru ktorý číta obsah nahlas pre nevidiacich. Screen reader prečíta ALT text namiesto obrázka. Tretia situácia je crawlovanie vyhľadávačmi — Googlebot analyzuje ALT text aby pochopil čo obrázok zobrazuje.

ALT text nie je to isté ako title atribút obrázka (tooltip ktorý sa zobrazí pri podržaní myši) ani ako popis pod obrázkom (caption). Každý má inú funkciu a ALT text je z pohľadu SEO a prístupnosti najdôležitejší.

Prečo je ALT text dôležitý pre SEO

Google opakovane potvrdil že ALT text je primárny signál pre pochopenie obsahu obrázka. John Mueller z Google v roku 2020 povedal: „ALT text nám pomáha pochopiť čo je na obrázku a ako súvisí so stránkou." Bez ALT textu Google háda — a háda často zle.

ALT text ovplyvňuje SEO štyrmi konkrétnymi spôsobmi:

• Rankovanie v Google Images — obrázky s relevantným ALT textom sa zobrazujú vyššie vo vyhľadávaní obrázkov. Pre e-shopy je to kritický zdroj návštevnosti.
• Kontextový signál pre stránku — ALT text pomáha Google pochopiť celkovú tému stránky. Obrázok produktu s ALT textom „červené dámske kožené topánky veľkosť 38" posilňuje relevanciu stránky pre tieto kľúčové slová.
• Featured snippets s obrázkami — Google často vyťahuje obrázky do featured snippetov. Obrázok s presným ALT textom má vyššiu šancu na výber.
• Prístupnosť ako rankingový faktor — Google čoraz viac zohľadňuje prístupnosť webu. Stránky bez ALT textov signalizujú nižšiu kvalitu.

Podľa analýzy Backlinko existuje korelácia medzi optimalizovanými ALT textami a vyššími pozíciami v organickom vyhľadávaní. Stránky na prvej pozícii majú v priemere ALT text pri 93% obrázkov.

Ako správne napísať ALT text k obrázku

Kvalitný ALT text spĺňa jedno pravidlo: opisuje čo je na obrázku tak aby to pochopil niekto kto obrázok nevidí. Nie je to miesto na vkladanie kľúčových slov ani marketingových sloganov.

Postup pre písanie ALT textu

• Opíšte obsah obrázka — čo presne obrázok zobrazuje? Osobu, produkt, graf, infografiku, screenshot?
• Buďte konkrétni — namiesto „topánky" napíšte „červené dámske lodičky na podpätku značky XY".
• Zahrňte kontext — ak obrázok ilustruje článok o vaření, zahrňte relevantný kontext: „šéfkuchár krája cibuľu na drevenej doske".
• Vynechajte slová ako obrázok alebo foto — screen readery automaticky oznamujú že ide o obrázok, duplikovať túto informáciu je zbytočné.
• Prirodzene zahrňte kľúčové slovo — ak obrázok skutočne zobrazuje to čo chcete rankovať, keyword bude v popise prirodzene.

Príklady dobrého a zlého ALT textu

Zlý ALT text: „obrázok" — nehovorí nič.
Zlý ALT text: „topánky topánky kúpiť topánky lacné topánky" — keyword stuffing, Google to penalizuje.
Zlý ALT text: „IMG_4523.jpg" — názov súboru nie je ALT text.

Dobrý ALT text: „Biela dámska kabelka z umelej kože s nastaviteľným popruhom"
Dobrý ALT text: „Graf zobrazujúci nárast organickej návštevnosti o 150% za 6 mesiacov"
Dobrý ALT text: „Tím BigWay pri práci na UX dizajne mobilnej aplikácie"

Aký dlhý má byť ALT text

Optimálna dĺžka ALT textu je 80 až 125 znakov. Tento rozsah vychádza z dvoch technických limitov. Screen readery niektoré ALT texty nad 125 znakov odstrihnú alebo čítajú s pauzou čo zhoršuje používateľský zážitok. Google síce dokáže indexovať dlhšie ALT texty, ale pri extrémne dlhých popisoch môže časť ignorovať.

Pre jednoduché obrázky stačí 40 až 60 znakov. Pre komplexné infografiky alebo grafy môže byť potrebných aj 150+ znakov — v takom prípade je lepšie pridať aj textový popis pod obrázok.

Pravidlo: ALT text má byť tak dlhý ako potrebuje byť aby presne opísal obrázok. Nie kratší, nie dlhší.

Kedy nechať ALT text prázdny

Nie každý obrázok potrebuje ALT text. Dekoratívne obrázky ktoré nepridávajú žiadnu informačnú hodnotu by mali mať prázdny atribút alt: alt="". Pozor — nie chýbajúci atribút, ale prázdny. Toto signalizuje screen readerům že obrázok môžu preskočiť.

Príklady dekoratívnych obrázkov:

• Grafické oddeľovače — čiary, vlnky, dekoratívne prvky medzi sekciami.
• Pozadiové vzory — textúry ktoré slúžia len na estetiku.
• Ikony duplikujúce text — ak vedľa textu „Telefón" je ikona telefónu, ALT text by bol redundantný.

Ak si nie ste istí či je obrázok dekoratívny, položte si otázku: stratil by používateľ nejakú informáciu keby obrázok nevidel? Ak áno, potrebuje ALT text.

Najčastejšie chyby pri ALT textoch

• Chýbajúci ALT atribút — najhoršia chyba. Bez atribútu screen readery čítajú názov súboru čo je pre používateľa mätúce.
• Keyword stuffing — opakovanie kľúčových slov v ALT texte. Google to považuje za spam a môže penalizovať celú stránku.
• Generické popisy — „obrázok produktu" alebo „foto" neposkytuje žiadnu hodnotu.
• Príliš dlhé ALT texty — celé odseky textu v atribúte alt. ALT text nie je miesto na článok.
• Rovnaký ALT text pre všetky obrázky — ak máte 10 produktových fotiek, každá potrebuje unikátny popis.
• Ignorovanie kontextu — rovnaký obrázok môže potrebovať iný ALT text na rôznych stránkach podľa kontextu.

Ako skontrolovať ALT texty na webe

Audit ALT textov je súčasťou každej SEO analýzy. Na kontrolu môžete použiť niekoľko nástrojov:

• Screaming Frog — crawlne celý web a zobrazí všetky obrázky s chýbajúcimi alebo duplicitnými ALT textami.
• Chrome DevTools — pravým tlačidlom na obrázok → Inspect → v kóde nájdete atribút alt.
• WAVE Accessibility Tool — bezplatný nástroj ktorý zvýrazní obrázky bez ALT textu.
• Ahrefs Site Audit — automaticky reportuje chýbajúce ALT texty ako SEO problém.

Pri väčších weboch s tisíckami obrázkov sa oplatí automatizovať generovanie ALT textov. AI nástroje dokážu navrhnúť základné popisy ktoré potom manuálne upravíte.

ALT text v e-commerce

Pre e-shopy má ALT text špeciálny význam. Produktové fotografie sú často jediný vizuálny kontakt zákazníka s tovarom pred kúpou. Dobre napísaný ALT text pomáha nielen SEO ale aj konverziám — ak sa obrázok nenačíta, zákazník aspoň vidí čo mal zobraziť.

Štruktúra ALT textu pre produkty: [Názov produktu] + [Kľúčová vlastnosť] + [Farba/Veľkosť ak relevantné]. Príklad: „Apple iPhone 15 Pro 256GB titanová sivá zadný pohľad". Pri viacerých fotkách rovnakého produktu odlíšte uhol pohľadu alebo detail.

Potrebujete pomoc s optimalizáciou e-shopu? V BigWay vytvárame e-shopy na mieru s kompletnou SEO optimalizáciou vrátane správne nastavených ALT textov pre všetky produkty.