Alt text: Sprievodca pre SEO a prístupnosť

Prehľad

Alt text (atribút alt na prvkoch <img>) je krátky textový popis obrázka určený predovšetkým pre prístupnosť a ako záloha, keď sa obrázok nepodarí načítať. Čítačky obrazovky oznamujú alt text používateľom, ktorí sú nevidiaci alebo majú znížené videnie, a vyhľadávače používajú alt text ako jeden z viacerých textových signálov o téme obrázka. Alt text pomáha indexácii tým, že poskytuje parsovateľný text pre obrázky, ale je len jedným signálom medzi mnohými, ktoré ovplyvňujú hodnotenie a viditeľnosť.

Píšte alt text tak, aby opisoval informácie, ktoré obrázok odovzdáva zamýšľanému publiku. Pre čisto dekoratívne obrázky použite prázdny alt atribút (<img src="..." alt="">), aby ich čítačky obrazovky preskočili. Pre zložité vizuály—grafy, infografiky, diagramy—poskytnite textové zhrnutie v blízkosti alebo použite ARIA/HTML techniky na dlhší popis.

Krok za krokom

1) Určte úlohu obrázka: zistite, či je obrázok informatívny, funkčný (napr. tlačidlo) alebo dekoratívny. Informatívne a funkčné obrázky vyžadujú popisný alt text; dekoratívne obrázky by mali mať prázdny alt atribút.

2) Stručne opíšte podstatný obsah: napíšte, čo potrebuje používateľ z obrázka vedieť. Udržujte alt text výstižný—cieľte na vyjadrenie hlavnej myšlienky jednou vetou alebo frázou. Príklad štandardného informatívneho alt: <img src="/photos/harbor.jpg" alt="Červená rybárska loď prichytená v skalnatom prístave pri východe slnka">.

3) Vyhnite sa keyword stuffing a redundantným formuláciám. Neuvádzajte predpony ako „image of" alebo „picture of"—čítačky obrazovky už oznamujú, že ide o obrázok. Urobte text užitočným pre človeka skôr než pre crawler.

4) Zaobchádzajte s funkčnými obrázkami a ovládacími prvkami: ak je obrázok odkazom alebo tlačidlom, opíšte akciu, ktorú vykonáva. Príklad: <img src="/icons/download.svg" alt="Stiahnuť produktový list">. Ak ovládací prvok má viditeľný text, alt by mal zodpovedať jeho účelu alebo byť prázdny, ak text už akciu vyjadruje.

5) Poskytnite dlhšie popisy pre zložité obrázky: použite priľahlý popis, prepojený detailný opis, aria-describedby alebo viditeľný HTML text na rozšírenie informácií o grafe či infografike. Pre tlačením ekvivalentné detaily (dátové tabuľky, popisky osí) zahrňte kľúčové informácie do textu stránky.

6) Používajte konzistentné redakčné pravidlá: vytvorte stručné smernice pre prispievateľov (cieľová dĺžka, kedy skracovať, jazykové pravidlá) a uplatnite ich v šablónach alebo poliach CMS, aby sa alt text spoľahlivo zadával v škále.

HTML príklady

Popisný obrázok: <img src="https://example.com/park.jpg" alt="Dieťa púšťajúce červeného šarkan v mestskom parku">. Dekoratívny obrázok: <img src="/decorative-divider.png" alt="">. Funkčný obrázok použitý ako odkaz: <a href="/download"><img src="/icons/pdf.svg" alt="Stiahnuť správu vo formáte PDF"></a>.

Overenie alt textu: technický kontrolný zoznam

**Prítomnosť alt atribútov** — kde overiť: view-source, Chrome DevTools Elements alebo curl (stiahnite celú HTML s curl bez -I) — prejde, keď každý významný <img> má alt atribút a dekoratívne obrázky používajú alt="".

**Rendered DOM for JS-inserted images** — kde overiť: Chrome DevTools Elements (skontrolujte finálny DOM) — prejde, keď obrázky viditeľné používateľom tiež obsahujú vhodný alt text v renderovanom DOM.

**Audit prístupnosti** — kde overiť: Lighthouse v Chrome DevTools alebo automatizovaný nástroj na prístupnosť — prejde, ak audit neeviduje chýbajúci alt text pri informatívnych obrázkoch a označuje len zámerné dekoratívne obrázky.

**Kontrola ľudskej čitateľnosti** — kde overiť: náhodná kontrola redaktorom obsahu alebo pomocou čítačky obrazovky (NVDA, VoiceOver) — prejde, keď alt text sprostredkuje rovnaké užitočné informácie ako vizuál pre používateľov so asistenčnými technológiami.

**Indexovateľnosť stránky** — kde overiť: pre vlastné stránky použite Google Search Console URL Inspection; pre stránky tretích strán použite operátor site: ako indikátor — prejde, keď je stránka prístupná pre crawlovanie (nie je zablokovaná súborom robots.txt alebo noindex) a URL Inspection ukáže, že stránka je známa Googlu. Poznámka: site: je len indikátor; URL Inspection je autoritatívny pre stránky, ktoré vlastníte.

Praktické tipy k nástrojom

Použite curl na stiahnutie HTML stránky ako konkrétny user agent: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Nepoužívajte -I, ak potrebujete telo odpovede. Otvorte uložený súbor v textovom editore alebo spustite DOM parser na nájdenie <img> tagov a ich alt atribútov.

Spustite Lighthouse (Chrome DevTools → Lighthouse) na odhalenie bežných problémov s prístupnosťou a otestujte s čítačkou obrazovky (NVDA na Windows, VoiceOver na macOS) na potvrdenie používateľskej skúsenosti.

Ak používate štruktúrované dáta, ktoré odkazujú na obrázky (napr. Product alebo Recipe schema), validujte markup pomocou Rich Results Test alebo Schema Markup Validator, aby ste sa uistili, že obrázky uvedené v JSON-LD sú prítomné a prístupné.

Bežné problémy

Chýbajúci alt text pri informatívnych obrázkoch. To zhoršuje prístupnosť a necháva nevidiacich používateľov bez vizuálnych informácií stránky.

Keyword stuffing: opakované vkladanie cieľových kľúčových slov alebo názvov značiek do alt atribútov neprirodzeným spôsobom. To poskytuje zlú skúsenosť a môže byť ignorované vyhľadávačmi.

Používanie názvov súborov alebo všeobecných fráz (napr. "image1.jpg", "picture") ako alt text, čo nie je zmysluplné pre asistívnu technológiu alebo indexovanie.

Spoliehanie sa na title atribút namiesto alt pre kritické informácie; mnohé čítačky obrazovky title nezobrazujú konzistentne.

Myslieť si, že alt text sám ovláda hodnotenie obrázkov. Alt text pomáha vyhľadávačom rozumieť obrázkom, ale indexácia a viditeľnosť závisia od kontextu stránky, štruktúrovaných dát, crawlability a ďalších signálov.

Ak sú obrázky vkladané na klientskej strane cez JavaScript, autori niekedy zabudnú zahrnúť alt atribúty vo vygenerovanom DOM; vždy skontrolujte finálny DOM, nie iba serverové HTML.

Prečítajte si Technical SEO Guide

Často kladené otázky

Q: Ako dlhý by mal byť alt text? A: Snažte sa o stručné popisy, ktoré komunikujú účel obrázka. Jedna krátka veta alebo fráza zvyčajne postačuje; pre zložité vizuály poskytnite dlhší prístupný popis inde na stránke.

Q: Ovplyvňuje alt text SEO ranking? A: Alt text poskytuje textový signál, ktorý môže pomôcť indexácii a relevantnosti v image search, ale sám o sebe neurčuje hodnotenie. Hodnotenie závisí na mnohých signáloch vrátane relevantnosti stránky, štruktúrovaných dát, crawlability a celkovej kvality obsahu.

Q: Mali by dekoratívne obrázky mať alt text? A: Nie. Dekoratívne obrázky by mali používať prázdny alt atribút (alt="") tak, aby ich čítačky obrazovky ignorovali a nepridávali šum do prístupnostnej skúsenosti.

Q: Môžu automatizované nástroje generovať prijateľný alt text? A: Automatické návrhy z CMS alebo rozpoznávania obrázkov môžu pomôcť, ale vždy skontrolujte a upravte strojovo generovaný alt text kvôli presnosti, zrozumiteľnosti a otázkam ochrany súkromia pred zverejnením.

Q: Čo s obrázkami v CSS background? A: CSS background obrázky nie sú vystavené ako prvky <img> a nemajú alt atribút; ak má background obrázok informatívny obsah, prezentujte ho v HTML, aby bol prístupný.

Technické SEO je len jedna časť organického rastu. Budovanie tematickej autority vyžaduje kvalitné backlinks a indexovateľný, prístupný obsah—zvážte overené marketplaces a partnerstvá, ktoré uprednostňujú indexovateľnosť vydavateľa a redakčný kontext. Budujte autoritu kvalitnými backlinks