Domů / Slovník pojmů / Atribut ALT

Atribut ALT

Atribut ALT: Co to je, proč je důležitý a jak ho správně používat

Atribut ALT (zkratka z anglického alternative text, tedy alternativní text) je krátký popis obrázku, který se vkládá do HTML kódu. I když se na první pohled může zdát jako drobnost, hraje klíčovou roli v SEO, přístupnosti webu a uživatelské zkušenosti.

V tomto článku si vysvětlíme: ✅ Co je ALT text a jak funguje ✅ Proč je důležitý pro SEO a přístupnost ✅ Jak psát efektivní ALT texty (s praktickými příklady) ✅ Časté chyby a jak se jim vyhnout ✅ Kdy ALT text nepoužívat

1. Co je ALT text a jak funguje?

ALT text je popis obrázku, který se zobrazí, pokud:

  • Obrázek se nenahrál (např. kvůli pomalému internetu).
  • Uživatel používá čtečku obrazovky (např. nevidomí nebo slabozrací).
  • Vyhledávače (Google, Seznam) potřebují pochopit, co obrázek zobrazuje (pro lepší indexaci).

Příklad v HTML kódu

<img src="obrazek.jpg" alt="Černý kocour leze po stromě v parku">
  • src = cesta k obrázku
  • alt = alternativní text, který se zobrazí, pokud obrázek není k dispozici

2. Proč je ALT text důležitý?

🔹 1. Přístupnost (Accessibility)

  • Pro nevidomé a slabozraké uživatele: Čtečky obrazovky (např. JAWS, NVDA) přečtou ALT text místo obrázku.
  • Pokud ALT text chybí, uživatel neví, co obrázek zobrazuje, což může ztížit porozumění obsahu.

❌ Špatně (bez ALT textu):

<img src="grafika.png">

✅ Správně (s ALT textem):

<img src="grafika.png" alt="Graf znázorňující růst prodejů v roce 2024">

🔹 2. SEO (optimalizace pro vyhledávače)

  • Google a další vyhledávače nevidí obrázky – potřebují textový popis, aby pochopily, o čem obrázek je.
  • Dobře optimalizované ALT texty pomáhají stránce lépe rankovat (zejména v obrázkovém vyhledávání).
  • Souvisí s E-A-T (Expertise, Authoritativeness, Trustworthiness – odbornost, důvěryhodnost, spolehlivost), protože kvalitní ALT texty zvyšují relevanci a srozumitelnost obsahu.

📌 Příklad: Pokud máte e-shop s botami a obrázek má ALT text:

alt="Červené tenisky Nike Air Max pro běhání"

→ Vyhledávače lépe pochopí, že stránka je relevantní pro dotazy jako "nike air max běžecké boty".

🔹 3. Uživatelská zkušenost (UX)

  • Pokud se obrázek nenahrál (např. kvůli špatnému připojení), uživatel vidí alespoň popis, co mělo být zobrazováno.
  • Zlepšuje celkovou srozumitelnost stránky.

3. Jak psát efektivní ALT texty? (Praktický návod)

📌 Základní pravidla pro psaní ALT textů

Pravidlo Příklad
Buďte struční a výstižní (max. ~125 znaků) ❌ "Tady je obrázek, na kterém je pes, který sedí na trávníku a kouká na pána."
✅ "Zlatý retrívr sedí na trávníku a čeká na hračku."
Popište, co je na obrázku důležité pro kontext stránky Pokud je obrázek grafu, uveďte, co znázorňuje:
✅ "Graf porovnávající návštěvnost webu v letech 2022–2024"
Nepište "obrázek" nebo "fotka" (je to zbytečné) ❌ "Obrázek domu"
✅ "Moderní dřevostavba s velkými okny"
Používejte klíčová slova přirozeně (necpěte je násilně) ❌ "Levné běžecké boty Nike koupit online nejlevnější cena"
✅ "Černé běžecké boty Nike React s odpružením"
U dekorativních obrázků použijte prázdný ALT html <img src="ozdoba.png" alt="">

📌 Příklady dobrých a špatných ALT textů

Typ obrázku ❌ Špatně ✅ Správně
Produkt v e-shopu "boty" "Hnědé kožené pánské polobotky s gumovou podrážkou"
Graf / infografika "graf" "Infografika znázorňující 5 kroků pro lepší SEO v roce 2025"
Logo firmy "logo" "Logo společnosti SEO Expert s modrým písmem na bílém pozadí"
Fotka v blogovém článku "fotka" "Žena píše na notebooku v kavárně s kávou a sluchátky"
Screenshot nástroje "obrázek" "Screenshot nastavení Google Analytics s filtrem pro organický provoz"

4. Časté chyby při psaní ALT textů (a jak se jim vyhnout)

❌ 1. Vycpávání klíčovými slovy (Keyword Stuffing)

❌ "Koupit levné běžecké boty Nike Air Max slevy akce nejlevnější cena online obchod" ✅ "Černé běžecké boty Nike Air Max s odpružením pro dlouhé běhy"

➡ Proč je to špatně?

  • Vyhledávače to považují za spam a může to poškodit SEO.
  • Uživatelům to nic neřekne o obsahu obrázku.

❌ 2. Příliš obecné popisy

❌ "obrázek" / "fotka" / "grafika" ✅ "Ilustrace znázorňující, jak funguje backlink v SEO"

➡ Proč je to špatně?

  • Nepomáhá vyhledávačům pochopit kontext.
  • Nevidomí uživatelé neví, co obrázek zobrazuje.

❌ 3. Ignorování kontextu stránky

❌ Pokud je obrázek čokoládového dortu v článku o zdravém stravování, ALT text by neměl být: "Lahodný čokoládový dort s polevou" ✅ Měl by odrážet kontext: "Příklad nezdravého dezertu – čokoládový dort s vysokým obsahem cukru"

❌ 4. Používání ALT textu u dekorativních obrázků

❌ html <img src="oddělovač.png" alt="čára oddělující sekce"> ✅ html <img src="oddělovač.png" alt="">

➡ Proč je to špatně?

  • Čtečky obrazovky zbytečně čtou prázdné informace.
  • Zhoršuje uživatelskou zkušenost.

5. Kdy ALT text nepoužívat?

✅ Použijte prázdný ALT text (alt="") v těchto případech:

  1. Dekorativní obrázky (např. ikony, oddělovače, pozadí).
  2. Obrázky, které jsou již popsané v okolí (např. v nadpisu nebo odstavci).
  3. Obrázky, které nemají žádnou informační hodnotu (např. ozdobné prvky).

❌ Nikdy nepoužívejte:

  • ALT text u obrázků, které jsou součástí textového obsahu (např. ikony v tlačítkách – tam patří do aria-label).
  • ALT text u obrázků, které jsou nahrazeny CSS (např. ikony z Font Awesome).

6. Jak ALT texty ovlivňují SEO? (Praktické tipy)

🔹 1. Pomáhají s rankováním v obrázkovém vyhledávání

  • Google Images používá ALT texty k třídění a zobrazování obrázků.
  • Příklad:
    • Pokud máte obrázek s ALT textem "Jak vybrat správnou matraci pro bolavá záda", může se zobrazit v vyhledávání pro dotazy jako "matrace na bolavá záda".

🔹 2. Zvyšují relevanci stránky

  • Vyhledávače lépe chápou téma stránky, pokud obrázky mají relevantní ALT texty.
  • Příklad:
    • Článek o "jak psát blogové články" by měl mít obrázky s ALT texty jako:
      • "Ukázka struktury blogového článku s nadpisy H1, H2, H3"
      • "Graf znázorňující ideální délku blogového příspěvku"

🔹 3. Podporují dlouhé klíčové fráze (Long-Tail Keywords)

  • Dlouhé dotazy (např. "jak vybrat notebook pro studenty do 15 000 Kč") často vedou k lepší konverzi.
  • ALT texty mohou pomoci zachytit tyto dotazy.

📌 Příklad:

alt="Porovnání notebooků Lenovo IdeaPad a HP Pavilion pro studenty do 15 000 Kč"

7. Jak kontrolovat a opravovat ALT texty?

🔹 1. Ruční kontrola v HTML

  • Otevřete zdrojový kód stránky (klikněte pravým tlačítkem → Zobrazit zdrojový kód).
  • Vyhledejte <img> tagy a zkontrolujte, zda mají alt atribut.

🔹 2. Použití nástrojů pro SEO audit

  • Google Lighthouse (v Chrome DevTools) – hlásí chybějící ALT texty.
  • Screaming Frog SEO Spider – prohledá celý web a najde obrázky bez ALT textů.
  • Yoast SEO (pro WordPress) – upozorní na chybějící ALT texty přímo v editoru.

🔹 3. Testování přístupnosti

  • WAVE (Web Accessibility Evaluation Tool) – zdarma zkontroluje, zda jsou ALT texty správně nastavené.
  • Čtečka obrazovky (NVDA, VoiceOver) – poslechněte si, jak váš web "slyší" nevidomý uživatel.

8. Závěr: Proč byste měli ALT texty brát vážně?

✅ Přístupnost – Pomáhají lidem se zrakovým postižením. ✅ SEO – Zlepšují rankování v klasickém i obrázkovém vyhledávání. ✅ UX – Zvyšují srozumitelnost stránky, pokud se obrázky nenahrají. ✅ Důvěryhodnost – Kvalitní ALT texty jsou součástí E-A-T (odbornost, autorita, důvěryhodnost).

🚀 Praktický tip na závěr:

"Pište ALT texty tak, jako byste popisovali obrázek někomu, kdo ho nevidí – jasně, stručně a s ohledem na kontext."

Zdroje (APA citace)

Autor: Michal Binka Datum poslední úpravy: 2025-05-20

Co potřebujete najít?

Doporučujeme