Alt text: průvodce pro SEO a přístupnost

Co je alt text?

Alt text (atribut alt u elementu <img>) je krátký text zapsaný přímo v HTML, který popisuje obsah obrázku. Primárně slouží čtečkám obrazovky a uživatelům, kterým se obrázek nenačte; zároveň poskytuje strojům (vyhledávačům a modelům strojového učení) sémantický kontext vizuálního obsahu.

Proč má alt text význam pro SEO

Alt text pomáhá vyhledávačům lépe porozumět obsahu obrázku, což usnadňuje správné zařazení stránky do indexu a její zobrazení ve výsledcích obrazového vyhledávání. Od roku 2026 vyhledávače kombinují alt text s vizuálními signály z modelů strojového učení; alt text tak zůstává důležitým doplňkem, nikoli samostatným garantem výsledků.

Důležité rozlišení: alt text ovlivňuje srozumitelnost a indexaci obrazového obsahu, nicméně sám o sobě neurčuje pořadí výsledků. Pořadí výsledků (ranking) závisí na celé řadě signálů — obsahové relevanci, autoritě stránky, technickém stavu a dalších signálech.

Jak alt text funguje

Prohlížeče a asistivní technologie čtou atribut alt, pokud obrázek není dostupný nebo když uživatel používá čtečku obrazovky. Vyhledávače kombinují textový alt s dalšími signály: kontextem okolního textu, názvem souboru, strukturovanými daty, cílovou stránkou a od roku 2026 také s vizuálními funkcemi z modelů ML.

Pokud je obrázek čistě dekorativní, ponechte atribut alt prázdný: <img src="obrazek.jpg" alt="">. U informačních obrázků napište stručný a výstižný popis do atributu alt. U složitých grafů uveďte krátký alt a delší vysvětlující popis doplňte v okolním textu nebo u titulku.

Typy alt textu

Informativní obrázky — krátký popis hlavního sdělení obrázku (doporučeno).

U funkčních obrázků (tlačítka, odkazy) popište jejich funkci, ne vizuální detaily; například: <img src="ikonka-hrncek.svg" alt="přidat do košíku">

Dekorativní obrázky — použijte prázdný alt atribut: alt=""; takové obrázky čtečky přeskočí.

U složitých grafů a diagramů vložte krátký alt a doplňte odkaz nebo textový výklad v okolním obsahu, například popiskem pod grafikou nebo sekcí Podrobnosti k grafu.

Jak začít s alt textem

1) Proveďte audit obrázků a identifikujte ty s chybějícím, prázdným nebo irelevantním alt textem. 2) Prioritizujte klíčové stránky — produktové stránky, návody a blogy. 3) Napište stručné a popisné alt texty: zaměřte se na to, co obrázek sděluje uživateli. 4) Použijte prázdný alt text pro dekorativní obrázky. 5) Sledujte změny pomocí nástrojů pro přístupnost a indexaci.

Příklady inline obrázků: standardní popis: <img src="kamera.jpg" alt="portrét ženy s červeným kabátem na ulici">. Dekorativní: <img src="stín.jpg" alt="">. Funkční: <img src="search.svg" alt="vyhledat">.

Běžné chyby u alt textu

1) Keyword stuffing — vkládání klíčových slov na úkor srozumitelnosti.
2) Duplikování okolního textu — alt atribut má doplnit informaci, ne přesně opakovat okolní text.
3) Neúplné alt u funkčních prvků — u tlačítek a odkazů musí alt atribut popsat jejich funkci.
4) Používání alt jako místo pro metadata (ceny, SKU) — tyto údaje patří do textu stránky.
5) Chybějící alt u významných obrázků — každý důležitý obrázek musí mít alt atribut.

Ověření a ladění: technická checklist

Přítomnost atributu alt v HTML — kde ověřit: zdrojová HTML stránka nebo curl — splněno, pokud je u každého <img> elementu atribut alt přítomen nebo je u dekorativních obrázků explicitně prázdný.

Renderovaný DOM — kde ověřit: Chrome DevTools Elements. Splníte ho, pokud alt atribut existuje v renderovaném DOM (nejen přidán JS po načtení) a čtečky obrazovky jej mohou přečíst.

HTTP hlavičky obrázku — ověříte příkazem curl -I https://example.com/image.jpg. Kontrola projde, pokud obrázek vrací 200/2xx a správný Content-Type. Chybové kódy znamenají, že atribut alt uživateli nebude užitečný, pokud se obrázek nenačte.

Indexační signály (jen indikace) — kde ověřit: site:dotaz nebo Google Search Console URL Inspection (pokud vlastníte stránku). Platí, když je stránka Googlem známa. Poznámka: site: je indikativní, nikoli autoritativní.

Přístupnost — kde ověřit: Lighthouse v Chrome DevTools, NVDA (Windows) nebo VoiceOver (macOS) — splněno, když automatizované nástroje nehlásí chybějící atribut alt u významných obrázků a čtečky obrazovky přečtou očekávané popisy.

Praktické příkazy: získejte HTML, které server vrací pro běžný User-Agent (UA): curl -A "Mozilla/5.0" https://example.com/stranka > stranka.html (tento příkaz stáhne HTML; nepoužívejte přepínač -I, pokud chcete tělo). Zkontrolujte hlavičky obrázku: curl -I https://example.com/obrazek.jpg. Pozor: curl -I vrací pouze hlavičky, ne tělo souboru.

Lees de Technical SEO Guide

Pro širší technické kontroly (responsivita, Core Web Vitals, indexace) si přečtěte: Lees de Technical SEO Guide

Časté dotazy

Může alt text zlepšit moje pořadí ve vyhledávání?

Alt text zlepšuje srozumitelnost obrázku pro vyhledávače a zvyšuje šanci na zobrazení v obrázkovém vyhledávání. Alt text sám o sobě Vám ale nezaručí lepší celkové pořadí, které závisí na celé řadě rankingových signálů.

Kolik znaků má alt text mít?

Neexistuje pevné pravidlo pro počet znaků; důležité je být výstižný. Obecně napište jen tolik slov, kolik stačí k popisu účelu obrázku — často jedna až dvě krátké věty. U složitých vizualizací doplňte delší popis v okolním textu.

Jak testovat alt text jako uživatel se zrakovým postižením?

Použijte čtečky obrazovky (NVDA, VoiceOver) a ověřte, že popisky v kontextu stránky dávají smysl. Spusťte také Lighthouse accessibility audit — automatizované testy odhalí časté chyby.

Tip: Při úpravách obsahu kontrolujte změny přímo v prohlížeči i pomocí curl, abyste nezmeškali, kdy JavaScript dynamicky mění atributy alt.

Technické SEO a přístupnost spolu úzce souvisejí: správně napsaný alt text zlepšuje uživatelskou zkušenost i strojové porozumění obsahu.

Bouw autoriteit via kwalitatieve backlinks