Alt text a SEO obrázků: jak psát popisky, které pomůžou lidem i vyhledávačům

Co je alt text a k čemu slouží

Alt text (z anglického alternative text, tedy alternativní text) je hodnota atributu alt u značky img v HTML. Návštěvník ho běžně nevidí, ale pracuje s ním několik různých „čtenářů“ najednou:

• Lidé se zrakovým postižením. Čtečka obrazovky přečte alt text nahlas místo obrázku. Bez něj uslyší jen název souboru, nebo nic.
• Návštěvníci s pomalým připojením. Když se obrázek nenačte, prohlížeč na jeho místě zobrazí alt text.
• Vyhledávače. Google i Seznam obrázky „nevidí“ jako člověk. Alt text, název souboru a okolní text jsou pro ně hlavní vodítka, o čem obrázek je a jestli ho ukázat ve vyhledávání obrázků.
• AI asistenti a jejich crawlery. Většina AI crawlerů čte jen HTML, které vrátí server. Informace schovaná pouze v obrázku pro ně neexistuje, alt text ano.

<img src="/obrazky/kavarna-brno-interier.webp"
     alt="Interiér kavárny s dřevěnými stoly a pultem s kávovarem"
     width="1200" height="800">

Pozor na záměnu s atributem title. Ten se zobrazí jako bublina po najetí myší, čtečky ho čtou nespolehlivě a alt text nenahrazuje. Viditelný popisek pod obrázkem (v HTML značka figcaption) je zase určený všem návštěvníkům. Může doplňovat alt text, ale neměl by ho doslova opakovat, jinak čtečka přečte totéž dvakrát.

Jak napsat dobrý alt text

Představte si, že obrázek popisujete do telefonu někomu, kdo stránku nevidí. Co potřebuje vědět, aby mu nic podstatného neuteklo? To je váš alt text.

1. Popište, co na obrázku skutečně je. Konkrétně: ne „auto“, ale „mechanik měří hloubku dezénu pneumatiky“.
2. Myslete na kontext stránky. Stejná fotka zubaře může mít jiný alt na stránce o bělení zubů a jiný na stránce o týmu. Popište to, kvůli čemu tam obrázek je.
3. Buďte struční. Obvykle stačí jedna věta. Dlouhé popisy čtečky čtou celé a návštěvníka zdržují.
4. Nezačínejte slovy „obrázek“ nebo „fotka“. Čtečka sama oznámí, že jde o obrázek.
5. Přepište text, který je v obrázku. Pokud banner říká „Sleva 20 % na servis klimatizace“, musí to být i v alt textu.
6. Klíčové slovo použijte, jen když sedí. Jedno přirozené spojení stačí. Výčet frází pro vyhledávače je špatně pro lidi i pro Google, který ho může považovat za spam.

Příklady: dobře a špatně

U produktů v e-shopu platí ještě jedna věc: když má produkt víc fotek, nedávejte všem stejný alt. Popište, čím se liší, třeba „detail zrn“, „balení zezadu se složením“ nebo „káva připravená v moka konvičce“.

Dekorativní obrázky a obrázky v odkazech

Ne každý obrázek nese informaci. Ozdobné oddělovače, pozadí, ikony vedle textu, který říká totéž, nebo ilustrační fotky bez souvislosti s obsahem jsou dekorativní. Ty mají mít alt prázdný: atribut alt uvedete, ale bez textu. Čtečka je pak přeskočí.

<!-- Dekorativní obrázek: prázdný alt -->
<img src="/obrazky/vlnka.svg" alt="">

<!-- Chybný zápis: alt úplně chybí -->
<img src="/obrazky/vlnka.svg">

Rozdíl mezi prázdným a chybějícím altem je důležitý. Když atribut chybí úplně, čtečka obrazovky často přečte název souboru, třeba „vlnka tečka s v g“. Nástroje pro audit chybějící alt hlásí jako chybu, prázdný ne.

U obrázku, který je zároveň odkazem, popisuje alt cíl odkazu, ne vzhled obrázku. Logo v hlavičce tedy nemá alt „logo“, ale název firmy a informaci, že vede na úvodní stránku. Totéž platí pro ikony fungující jako tlačítka. Obrázky vložené přes CSS jako pozadí alt mít nemůžou, proto do nich nedávejte nic, co má být čitelné nebo dohledatelné.

Grafy, infografiky a snímky obrazovky

Složité obrázky se do jedné věty nevejdou. Do altu napište hlavní sdělení, třeba co graf ukazuje a jaký je trend, a podrobnosti dejte do textu stránky nebo do tabulky pod obrázkem. Účetní kancelář v Ostravě, která na webu ukazuje infografiku s termíny daňových přiznání, by termíny měla mít i jako běžný text. Jen tak je přečte čtečka, vyhledávač i AI asistent, který odpovídá na otázku „do kdy podat daňové přiznání“.

Názvy souborů, formáty a velikost obrázků

Název souboru

Název souboru je pro vyhledávače další drobné vodítko a zároveň se objeví v adrese obrázku. Pojmenujte soubor výstižně, malými písmeny, bez diakritiky a s pomlčkami mezi slovy: vymena-brzdovych-desticek-liberec.webp místo IMG_4521.JPG. Přejmenujte ho ještě před nahráním na web, později se to dělá hůř.

Formát

Velikost a načítání

• Nenahrávejte fotky přímo z telefonu. Snímek o šířce 4 000 px a několika megabajtech zobrazený v pruhu širokém 800 px zbytečně zpomaluje stránku. Zmenšete ho na velikost, ve které se skutečně zobrazí, nejvýš dvojnásobnou kvůli displejům s vysokým rozlišením.
• Uveďte rozměry. Atributy width a height řeknou prohlížeči, kolik místa má obrázku vyhradit, a obsah při načítání neposkakuje. To zlepšuje metriku CLS v rámci Core Web Vitals.
• Odložené načítání (loading="lazy") používejte pro obrázky níž na stránce, ne pro hlavní obrázek nahoře. Ten bývá největším prvkem stránky a jeho zpoždění zhorší metriku LCP.
• Různé velikosti pro různá zařízení řeší atribut srcset. Moderní redakční systémy ho obvykle generují samy.

Další úspory, které zrychlí celou stránku, najdete v článku o rychlosti webu.

Obrázky ve vyhledávání Google a Seznamu

Google i Seznam mají vyhledávání obrázků a obrázky ukazují i přímo v běžných výsledcích. Pro e-shopy, restaurace, ubytování nebo řemeslníky jde o nezanedbatelný zdroj návštěv: lidé často hledají očima, třeba „dřevěná terasa modřín“ nebo „svatební dort se zlatým zdobením“.

• Okolní text rozhoduje stejně jako alt. Obrázek u odstavce, který o tématu mluví, má lepší šanci než osamocená fotka v galerii bez textu.
• Obrázky musí být dostupné robotům. Pokud je složka s obrázky zablokovaná v robots.txt, vyhledávač je nezobrazí.
• Produkty mají mít obrázek i ve strukturovaných datech. Typ Product ze schema.org obsahuje vlastnost image a pomáhá k bohatšímu zobrazení ve výsledcích.
• Obrázek pro sdílení na sociálních sítích se nastavuje zvlášť přes značku og:image, viz článek o Open Graph.
• Unikátní fotky mají přednost. Stejná fotka od dodavatele je na desítkách webů. Vlastní fotka provozovny nebo produktu vás odliší a lépe vypráví, kdo jste.

Jak alt texty zkontrolovat a doplnit

1. Najděte obrázky bez altu. Klikněte na obrázek pravým tlačítkem, zvolte Prozkoumat a podívejte se na atribut alt. Pro celý web je rychlejší Screaming Frog SEO Spider (zdarma do 500 adres), který chybějící alt texty vypíše hromadně. Audit přístupnosti v nástroji Lighthouse v prohlížeči Chrome je hlásí také.
2. Seřaďte podle důležitosti. Začněte úvodní stránkou, stránkami služeb a nejprodávanějšími produkty. Staré obrázky v archivu blogu počkají.
3. Doplňte alt v redakčním systému. Ve WordPressu má každý obrázek v knihovně médií pole pro alternativní text. Platí ale jen pro nově vložené obrázky, u obrázků už vložených do stránek je často potřeba alt upravit přímo v bloku obrázku. Víc v článku SEO pro WordPress.
4. Na Shoptetu a jiných e-shopových platformách se popisy obrázků zadávají u produktu v administraci. Kde přesně, najdete v nápovědě vaší platformy.
5. Nastavte pravidlo do budoucna. Kdo nahrává obrázky, píše alt hned. Zpětné doplňování stovek obrázků je mnohem pracnější.

Pokud chcete rychle zjistit, jestli na hlavní stránce obrázky alt texty mají, bezplatný sken Zmínky kontroluje popisky obrázků spolu s dalšími technickými body. Úplný seznam, co na webu projít, najdete v SEO audit checklistu.

Časté chyby

• Stejný alt u všech obrázků, typicky název firmy nebo produktu. Vyhledávač i čtečka se nedozví nic navíc.
• Seznam klíčových slov místo popisu. Lidem nepomůže a vyhledávače ho můžou brát jako manipulaci.
• Automaticky vložený název souboru, třeba „DSC_0042“. Některé systémy ho dosazují samy, když alt nevyplníte.
• Důležitý text jen v obrázku. Cena, otevírací doba nebo akce v grafickém banneru bez alt textu a bez HTML textu jsou pro roboty neviditelné.
• Popis dekorativních obrázků. Čtečka pak zahlcuje návštěvníka zbytečnostmi jako „modrá vlnka“.
• Alt generovaný AI bez kontroly. Nástroje, které alt navrhnou samy, šetří čas, ale nevědí, proč obrázek na stránce je. Návrh vždy zkontrolujte a upravte podle kontextu.