Alt text je krátky textový popis obrázka, ktorý sa zobrazí keď sa obrázok nenačíta a ktorý čítačky obrazovky prečítajú nevidiacim používateľom. Pre vyhľadávače je alt text jediný spôsob ako pochopiť obsah obrázka, čo priamo ovplyvňuje či sa váš web zobrazí vo výsledkoch vyhľadávania obrázkov.
Správne napísaný alternatívny text k obrázkom zlepšuje prístupnosť webu, posilňuje SEO a pomáha získavať organickú návštevnosť z Google Images. Napriek tomu väčšina webov má alt texty buď prázdne, alebo zle napísané. ako písať alt text správne a akým chybám sa vyhnúť.
Alt text (skratka z anglického alternative text) je atribút HTML kódu, ktorý sa pridáva k obrázkom pomocou tagu alt="". V praxi vyzerá takto: <img src="obrazok.jpg" alt="Popis obrázka">. Tento text plní tri základné funkcie, ktoré sú pre moderný web nevyhnutné.
Prvou funkciou je prístupnosť. Približne 285 miliónov ľudí na svete má zrakové postihnutie a používa čítačky obrazovky. Tieto zariadenia prekladajú obsah webu do zvukovej podoby. Keď čítačka narazí na obrázok bez alt textu, používateľ nevie čo obrázok zobrazuje. S kvalitným popisom získa plnohodnotnú informáciu.
Druhou funkciou je záložné zobrazenie. Keď sa obrázok nenačíta kvôli pomalému pripojeniu, chybe servera alebo blokovanému obsahu, prehliadač zobrazí namiesto obrázka práve alt text. Používateľ tak aspoň vie čo mal na danom mieste vidieť.
Treťou funkciou je SEO. Google a ďalšie vyhľadávače nedokážu obrázky vidieť ako ľudia. Alt atribút im poskytuje kontext a pomáha pochopiť obsah stránky. Podľa Google je alt text jedným z najdôležitejších faktorov pre indexovanie obrázkov.
Google Images generuje približne 20-25% všetkých vyhľadávaní na Google. Pre e-shopy a vizuálne orientované weby môže byť vyhľadávanie obrázkov významným zdrojom návštevnosti. Bez správneho alt textu vaše obrázky v týchto výsledkoch jednoducho nebudú.
Alt text SEO ovplyvňuje niekoľkými spôsobmi. Vyhľadávače ho používajú na určenie relevancie obrázka voči vyhľadávanému výrazu. Zároveň pomáha pochopiť tematické zameranie celej stránky. Ak máte článok o tvorbe webstránok a obrázky majú relevantné alt texty s príbuznými výrazmi, Google lepšie pochopí o čom stránka je.
Konkrétny príklad: e-shop s nábytkom, ktorý má pri produktových fotkách alt text "IMG_2847.jpg" prichádza o potenciálnych zákazníkov hľadajúcich "kožená sedačka hnedá" v Google Images. S popisným alt textom "Hnedá kožená trojsedačka v škandinávskom štýle" sa tieto obrázky môžu zobrazovať na relevantné dopyty.
Dobrý alt text je stručný, popisný a relevantný ku kontextu stránky. Nejde o miesto pre keyword stuffing ani o formálne pole ktoré treba len vyplniť. Tu sú konkrétne pravidlá ktoré fungujú.
Predstavte si, že popisujete obrázok niekomu cez telefón. Čo by ste povedali? Presne to patrí do alt textu. Buďte konkrétni, ale zároveň struční.
Alt text je legitímne miesto pre kľúčové slová, ale iba ak dávajú zmysel. Google jasne varuje pred prehnaným vkladaním kľúčových slov do alt textov. Jedno relevantné kľúčové slovo v rámci prirodzeného popisu je ideálne.
Ten istý obrázok môže mať rôzny alt text podľa toho kde sa nachádza. Fotka kávy na produktovej stránke e-shopu bude mať iný popis ako tá istá fotka v blogovom článku o pražení kávy. Vždy premýšľajte čo používateľ na danej stránke hľadá.
Ideálna dĺžka alt textu je 80-125 znakov. Väčšina čítačiek obrazovky má limit okolo 125 znakov, po ktorom text odseknú alebo prečítajú v nepríjemných blokoch. Google síce indexuje aj dlhšie alt texty, ale pre používateľskú skúsenosť je lepšie ostať pod týmto limitom.
Príliš krátky alt text (1-2 slová) väčšinou neposkytuje dostatok informácií. Príliš dlhý (200+ znakov) je zbytočne podrobný a môže pôsobiť ako spam. Snažte sa o zlatú strednú cestu kde v 10-15 slovách vystihne podstatu obrázka.
Rôzne typy obrázkov vyžadujú rôzny prístup k písaniu alt textu. Tu sú konkrétne príklady ktoré môžete použiť ako vzor.
Pri produktoch uvádzajte názov produktu, značku, farbu a relevantné vlastnosti. Príklad: "Dámske bežecké tenisky Nike Air Zoom Pegasus 40 v čiernej farbe, veľkosť 38".
Pre infografiky popíšte hlavný záver alebo dáta ktoré zobrazujú. Príklad: "Graf znázorňujúci rast e-commerce trhu na Slovensku o 23% medzi rokmi 2022-2024".
Pri firemných fotkách uveďte kontext a čo fotka zachytáva. Príklad: "Tím marketingového oddelenia počas workshopu o digitálnej stratégii v kancelárii Bratislava".
Obrázky ktoré slúžia čisto na vizuálne obohatenie stránky a neprinášajú informačnú hodnotu (dekoratívne vzory, oddeľovače) môžu mať prázdny alt text: alt="". Čítačka ich potom preskočí a nezaťažuje používateľa zbytočnými informáciami.
Pri audite webových stránok pravidelne narážame na rovnaké problémy s alt textami. Poznanie týchto chýb vám pomôže sa im vyhnúť.
Existuje niekoľko spôsobov ako zistiť stav alt textov na vašom webe. Najjednoduchší je kliknúť pravým tlačidlom na obrázok v prehliadači a zvoliť "Preskúmať element". V kóde uvidíte či obrázok má alt atribút a aký text obsahuje.
Pre väčší web použite nástroje ako Screaming Frog SEO Spider, ktorý dokáže preindexovať celý web a vyexportovať zoznam všetkých obrázkov s ich alt textami. Google Search Console tiež zobrazuje problémy s prístupnosťou vrátane chýbajúcich alt textov. Pri nastavovaní trackingu a analytiky je dobré myslieť aj na pravidelné kontroly prístupnosti.
Pridávanie alt textu je v moderných redakčných systémoch jednoduché. Vo WordPress-e pri nahrávaní obrázka do knižnice médií nájdete pole "Alternatívny text" priamo v pravom paneli. V Shopify sa alt text pridáva cez nastavenia obrázka produktu. WooCommerce používa rovnaký systém ako WordPress.
Pri UX/UI dizajne webu vždy myslíme na to, aby bolo pridávanie alt textov pre editorov čo najjednoduchšie. Keď je pole pre alt text viditeľné a intuitívne, zvyšuje sa šanca že ho redaktori naozaj vyplnia.
Alt text je malý detail ktorý má veľký dopad. Správne napísané alternatívne texty zlepšujú prístupnosť webu pre zrakovo postihnutých, pomáhajú vyhľadávačom pochopiť obsah a môžu priniesť dodatočnú návštevnosť z vyhľadávania obrázkov. Investícia pár sekúnd do každého obrázka sa dlhodobo vracia.
V BigWay pri tvorbe e-shopov riešime alt texty ako súčasť komplexnej SEO optimalizácie. Napríklad pri e-shope s kávou sme nastavili štruktúru alt textov tak, aby produktové fotografie obsahovali názov kávy, pôvod a spôsob spracovania. Ak riešite podobný projekt, napíšte nám a radi sa naň pozrieme.
