Alt text obrázků ve WordPressu: dobré a špatné příklady
Alt text obrázků ve WordPressu je krátký popis obrázku, který čtečka obrazovky přečte nahlas a který Googlu pomáhá obrázku porozumět. Zadáváte ho v Knihovně médií nebo v bloku Obrázek. Dobrý alt popíše několika až desítkou slov, co je vidět. Alt změněný v Knihovně neopraví obrázky, které už jsou vložené v příspěvcích.
Autor: Tým TellMyShop. Průvodce pro majitele webů na WordPressu a obchodů na WooCommerce: příčina, ruční oprava a stejná práce v rozhovoru v chatu.
Naposledy aktualizováno: · 5 min čtení
Kdo alt čte a proč
Alt má dva čtenáře. Prvním je člověk, který obrázek nevidí: nevidomý, slabozraký nebo někdo na pomalém připojení, kde se obrázek nenačetl. Čtečka obrazovky místo obrázku přečte alt. Bez altu často uslyší název souboru, například „IMG_4471“, nebo nic.
Druhým čtenářem je Google. Podle pokynů Googlu k obrázkům je alt jedním z důležitých zdrojů informací o tom, co obrázek ukazuje, a pomáhá Obrázkům Google ukázat ho u správných dotazů. Google také upozorňuje, že alt nacpaný klíčovými slovy škodí.
Tyto dvě potřeby se nebijí. Alt napsaný pro člověka bývá dobrý i pro Google.
Dobré a špatné alty v příkladech
Příklady pocházejí z obchodu se zahradním osvětlením. Každý špatný alt má typickou chybu, kterou najdete na webech na WordPressu.
| Obrázek | Špatný alt | Proč je špatný | Dobrý alt |
|---|---|---|---|
| Lucerna na terase večer | IMG_4471 | název souboru nic neříká | Kovaná lucerna svítící večer na dřevěné terase |
| Stejný obrázek | zahradní lucerny lucerny levný obchod lucerny | cpaní klíčových slov | jako výše |
| Majitelka u stolu se vzorky | obrázek ukazuje ženu | „obrázek ukazuje“ je zbytečné, chybí obsah | Majitelka obchodu rovná vzorky stínidel na dílenském stole |
| Produkt na bílém pozadí | produkt | příliš obecné | Grafitové zahradní nástěnné LED svítidlo, pohled z boku |
| Ozdobná linka mezi sekcemi | linka | dekorativní grafika | prázdný alt |
| Graf v návodu | graf | skrývá informaci | Graf: roční spotřeba LED a halogenových žárovek, LED spotřebuje méně |
Častěji než špatné alty najdete žádné alty. Pokud má web stovky obrázků bez popisu, začněte těmi, které jsou vidět na stránkách s návštěvností: produkty, stránka služeb, nejčtenější příspěvky.
Kdy má alt zůstat prázdný
Rada „každý obrázek musí mít alt“ je zjednodušení. Grafika, která jen zdobí, například ornamenty, pozadí nebo ikona vedle textu, který říká totéž, má mít prázdný alt. Čtečka obrazovky ji pak přeskočí a neunavuje posluchače popisem ozdobné linky. Tak to doporučuje návod W3C k obrázkům.
Prázdný alt je něco jiného než chybějící alt. Prázdný říká „tohle je jen ozdoba“. Chybějící nutí čtenáře hádat, často přečtením názvu souboru.
Kam ve WordPressu zadat alt text
Máte tři místa. Každé funguje trochu jinak.
- Knihovna médií. Média → Knihovna, klikněte na obrázek a napište popis do pole Alternativní text. WordPress změnu uloží sám. Tento alt se nabídne při každém vložení obrázku a obvykle se používá i u náhledového obrázku (víc o tom v návodu k náhledovému obrázku ve WordPressu).
- Blok Obrázek v editoru. Označte obrázek v příspěvku a zadejte Alternativní text v panelu nastavení bloku. Tato změna platí jen pro ten jeden příspěvek. Popis bloku najdete v dokumentaci bloku Obrázek.
- Obrázky produktů ve WooCommerce. Hlavní obrázek i galerie produktu pocházejí z Knihovny médií, takže alt zadáváte tam. V typické šabloně ho stránka produktu bere přímo z Knihovny.
Pole Název v Knihovně je něco jiného než alt. Název pomáhá hlavně vám při hledání souborů a popis pro čtečku obrazovky nenahradí.
Past: starší příspěvky nový alt nevidí
Tady hodně lidí ztrácí čas. Vyplníte alty v Knihovně médií, zkontrolujete starší příspěvek a ve zdrojovém kódu stránky je pořád prázdný alt.
Důvod je technický, ale jednoduchý. Když v blokovém editoru vložíte obrázek do příspěvku, WordPress alt zkopíruje do obsahu příspěvku. Od té chvíle má příspěvek vlastní kopii. Pozdější změna v Knihovně opraví náhledové obrázky a nová vložení, ale kopii ve starších příspěvcích nezmění.
U několika příspěvků otevřete každý z nich, označte obrázek a opravte alt v bloku. U mnoha příspěvků začněte těmi s největší návštěvností.
Jak chat doplňuje alty po dávkách
Úloha „Alternativní texty obrázků“ v pluginu TellMyShop pro WordPress a WooCommerce začíná Knihovnou médií. Váš chat (Claude nebo ChatGPT) tam najde obrázky bez altu a ke každému navrhne popis podle názvu souboru, titulku a stránky, ke které je obrázek připojený. U obrázků produktů bere v úvahu data produktu. Když nedokáže určit, co je na obrázku, nehádá a přidá soubor na seznam pro vás.
Vy: Doplň chybějící alty obrázků.
Váš chat: Knihovna médií má 37 obrázků bez altu. První tři, abyste schválili styl:
Dva soubory podle názvu a kontextu popsat neumím, nechávám je vám. Vyhovuje styl?
Vy: Ano, udělej zbytek.
Váš chat: Náhled dávky: 35 altů. Uložím po vašem „ano“ a celou dávku můžete vrátit zpět z historie změn.
Stav karty: čeká na vaše „ano“kovana-lucerna-02.jpg
stará verze: alt: žádný
nová verze: alt: Kovaná lucerna s otevřenými dvířky, pohled zepředu
sklenena-lucerna-terasa.jpg
stará verze: alt: žádný
nová verze: alt: Skleněná lucerna se svíčkou na stole na terase
DSC_0193.jpg, připojený k produktu Malá závěsná lucerna
stará verze: alt: žádný
nová verze: alt: Malá závěsná lucerna v černé barvě na řetízku
V bezplatné verzi TellMyShop Free chat ukáže seznam obrázků bez altu a navržené popisy. Uložení potřebuje TellMyShop Pro. Chat pak mění alty v Knihovně médií, až 50 souborů v jedné dávce, po schválení náhledu. Kopie altů ve starších příspěvcích jsou samostatná změna obsahu příspěvku: chat je umí opravit ve vybraných příspěvcích, také s náhledem „před → po“ a možností vrátit zpět.
Podrobnosti a registraci najdete na stránce TellMyShop pro WordPress a WooCommerce a ceny v ceníku. Alty jsou jedním bodem širší kontroly webu, kterou popisujeme v návodu k SEO auditu webu na WordPressu.
Krátký tahák
Popište, co vidíte, jako byste obrázek popisovali někomu po telefonu. Vynechte „obrázek ukazuje“. Klíčové slovo použijte, jen když k obrázku sedí. Dekorativní grafice dejte prázdný alt. Po změnách v Knihovně zkontrolujte i starší příspěvky. Další návody najdete na blogu.
Otázky a odpovědi
Kam ve WordPressu zadám alt text?
Na dvě místa. V Knihovně médií, po kliknutí na obrázek, do pole Alternativní text, a pak se alt nabídne při každém vložení obrázku. Nebo v bloku Obrázek v editoru, v panelu nastavení bloku, a pak alt změníte jen v tom jednom příspěvku.
Změnil jsem alt v Knihovně médií, ale příspěvek má pořád starý. Proč?
Protože blokový editor ukládá alt do obsahu příspěvku ve chvíli, kdy obrázek vložíte. Změna v Knihovně platí pro náhledové obrázky a nová vložení, ale obrázky vložené dřív neopraví. Ve starších příspěvcích musíte alt změnit v bloku Obrázek nebo v obsahu příspěvku.
Potřebuje alt text každý obrázek?
Každý obrázek, který něco sděluje, ano. Čistě dekorativní grafika, například ozdobné linky nebo pozadí, má mít prázdný alt, aby ji čtečka obrazovky přeskočila. Prázdný alt má být záměrné rozhodnutí u konkrétní grafiky.
Mám do altu dát klíčové slovo?
Jen když přirozeně popisuje, co je na obrázku. Google varuje před cpaním klíčových slov do altů. Alt „kovaná zahradní lucerna na terase“ je lepší než „zahradní lucerny levné lucerny obchod“.
Pozná chat sám, co je na obrázku?
Chat píše alt z názvu souboru, titulku a stránky, ke které je obrázek připojený. Když mu tato data neřeknou, co na obrázku je, nehádá. Takové soubory jdou na seznam, který popíšete vy.
WordPress je ochranná známka WordPress Foundation. WooCommerce je ochranná známka společnosti Automattic Inc. Claude je ochranná známka společnosti Anthropic PBC. ChatGPT a OpenAI jsou ochranné známky společnosti OpenAI. TellMyShop s těmito společnostmi není propojen.