Optimalizace obrázků pro AIO: alternativní text a titulek navázané na kontext otázky

AIO a AI Overviews
Eva Senková
Optimalizácia obrázkov pre AIO: Alt text a titulok naviazaný na kontext otázky

Proč vázat obrázky na otázku uživatele (kontext AIO/SGE)

AI Overviews (SGE) i klasické výsledky vyhledávání staví odpověď na záměru otázky (intent) a na propojení entit. Obrázky s kvalitním alt a titulkem (popisem/popiskem) formulovanými ve vztahu k otázce zvyšují šanci, že systém vyhodnotí vizuál jako přímo relevantní důkaz nebo ilustrační prvek odpovědi. Výsledkem je lepší „citation fit“, vyšší míra zobrazení v přehledech AI a sekundárně také vyšší CTR v klasickém SERPu.

Rozdíl: atribut alt vs. titulek vs. figcaption

  • alt: textový náhradní popis pro asistivní technologie a pro případy, kdy se obrázek nenačte. V AIO/SGE slouží jako signál kontextu a entity, nikoli pro nesouvisející klíčová slova.
  • titulek (atribut title u <img>): obvykle pouze tooltip po najetí kurzorem. Jeho optimalizační vliv je druhotný, může však doplnit jemný kontext.
  • <figcaption>: viditelný popis pod obrázkem. Je důležitý pro čtenáře i modely, které sledují okolní text jako součást odpovědi na otázku.

Vzorec „otázka → odpověď → důkaz (obrázek)“

U každého vizuálu si položte otázku, kterou uživatel řeší. Potom napište alt a figcaption tak, aby:

  1. výslovně odrážely formu otázky (co, jak, proč, kdy, který),
  2. obsahovaly konkrétní entity (produkt, model, místo, osoba, metrika),
  3. naznačovaly výsledek nebo klíčový údaj, který obrázek přináší (číslo, krok, srovnání).

Struktura HTML pro vizuály připravené pro AIO

Ako napísať alt text viazaný na otázku: schéma pre AIO/SGE s príkladmi dobrých a zlých popisov
Hledáte jak psát texty alt pro AIO/SGE? Tento diagram ukazuje, proč je lepší odpovědět na otázku („jak…“) přímo v popisu a pracovat s entitami (typ stránky, intent, metrika).

Šablony popisů alt podle typu otázky

  • „Jak…?“ (How-to): „Jak [dokončit úkol] v [nástroj/proces]: krok [n] zobrazený na obrázku“
  • „Co je…?“ (Definition): „Co je [pojem]: ilustrační příklad/[diagram] s vyznačenými [klíčovými částmi]“
  • „Proč…?“ (Reasoning): „Proč [jev nastává]: srovnání [A vs. B] s vyznačeným [faktorem, který je příčinou]“
  • „Který je lepší…?“ (Comparison): „Srovnání [produkt A] vs. [produkt B] podle [kritéria]: graf výsledků“
  • „Kdy…?“ (Temporal): „Kdy je [aktivita optimální]: časová osa s [milníky]“

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

Situace Špatný alt Dobrý alt
Krok 3 návodu „Krok 3“ „Jak nastavit kanonickou URL v CMS: krok 3 – výběr šablony a uložení“
Srovnání „Srovnávací graf“ „Který formát je rychlejší: WebP vs. AVIF – průměrná doba načítání přes LTE“
Definice „Obrázek entit“ „Co je entita v SEO: schéma vztahů mezi dotazem, stránkou a značkou“

Propojení s entitami a schématem (ImageObject, QA/HowTo)

Obrázky navázané na otázku podpoříte strukturovanými daty. Použijte ImageObject a pokud jde o stránku s Q&A nebo návod, propojte obrázek přímo s Question/Answer nebo HowToStep.

Interní prolinkování a kotvy k otázkám

Každý obrázek by měl mít:

  1. kotvu v DOM blízko textové odpovědi na otázku,
  2. popis v <figcaption>, který parafrázuje nadpis sekce,
  3. odkaz v blízkém textu (např. „Podívejte se na srovnávací graf…“) směřující na kotvu obrázku.

Programové generování: pole CMS a redakční workflow

  • Pole v CMS: Otázka, Typ otázky, Primární entita, Alt (automaticky), Figcaption (editor), Licence/autor.
  • Automatická šablona alt: generujte podle typu otázky a vložených entit, editor doladí nuance.
  • Validační pravidla: délka 80–140 znaků, zákaz výplňových slov, povinné entity.

Vícejazyčnost a skloňování (slovenština)

Text alt musí odpovídat přirozené morfologii dotazu. Při používání pádů, diakritiky a variantních duplicit:

  • Zachovejte konzistentní entitu (např. „AI Overviews“),
  • Přizpůsobte větnou konstrukci formě otázky uživatele (např. „Jak nastavit…“, nikoli „Nastavení…“),
  • Vyhněte se anglicismům, pokud je cílovým jazykem stránky slovenština.

Technické zásady: výkon, kvalita, formáty

  • Formát: AVIF/WebP se záložní variantou JPEG, bez ztráty čitelnosti textu v grafech.
  • Responzivita: srcset a sizes, loading="lazy", decoding="async".
  • Rozměry: vždy výslovně uveďte width/height kvůli CLS.
  • Přístupnost: smysluplný text alt i bez kontextu; pokud je obrázek čistě dekorativní, použijte prázdný alt="".

Licence, atribuce a důvěryhodnost (E-E-A-T)

V popiscích uvádějte autora, zdroj a datum sběru údajů. U grafů doplňte metodiku (vzorek, období, metrika). Zvýšíte tak důvěryhodnost a pravděpodobnost převzetí obrázku jako „citace“ v přehledech AI.

Příklad bloku „Q&A“ s obrázkem

Jak psát texty alt navázané na otázku v AIO/SGE?

Začněte formou otázky uživatele, převeďte ji na krátkou větu, přidejte klíčové entity a výsledek, který obrázek znázorňuje.

Ako písať alt texty pre AIO/SGE: krok za krokom s ukážkou entít a výsledku
Alt je formulován jako odpověď na otázku; obsahuje entity (AIO/SGE, text alt) a výstup (postup krok za krokem).

Antivzorce (čemu se vyhnout)

  • Keyword stuffing: opakování klíčových slov bez odpovědi na otázku.
  • Neurčité popisy: „graf“, „obrázek“, „ilustrace“ bez uvedení obsahu.
  • Nesoulad s otázkou: alt popisuje A, figcaption B.
  • Chybějící entity: nezmíněné produkty, modely, metriky.
  • Příliš dlouhý alt: dlouhé texty snižují čitelnost a přístupnost.

Kontrolní seznam před zveřejněním

  • Je alt napsán jako miniodpověď na otázku?
  • Souhlasí entity v textu alt, figcaption a okolním textu?
  • Je figcaption užitečný i bez obrázku (poskytuje čtenáři kontext)?
  • Má obrázek správnou licenci, atribuci a datum?
  • Jsou nastaveny srcset, sizes, width/height a loading?
  • Je obrázek propojen interním odkazem z textu odpovědi?

Měření dopadu v praxi

  • Pokrytí v AI Overviews/SGE: sledujte zobrazení URL a citace obrázků v přehledech.
  • CTR v sekcích s vizuály: srovnání s/bez figcaptionu navázaného na otázku.
  • Engagement: hloubka posunu k prvku figure, kliknutí na lightbox, čas strávený v sekci.
  • Replikovatelnost: kolik textů alt vzniklo pomocí šablony oproti ruční tvorbě a jaký mají výkon.

Programová validace (příklady pravidel)

  • Délka: 60–140 znaků (výjimky pro technické diagramy).
  • Povinné části: forma otázky (Jak/Co/Proč/Který/Kdy) + entita + výsledek/údaj.
  • Zákaz: prázdný alt, samotné „Obrázek“, 3× stejné slovo za sebou.

Mini knihovna šablon (copy-paste)

  • „Jak [úkol] v [nástroji]: krok [n] – [konkrétní úkon na obrazovce]“
  • „Co je [pojem]: diagram s [částmi/atributy] a příkladem [X]“
  • „Proč [jev]: srovnání [A vs. B] a vliv na [metrikу]“
  • „Který [produkt/model] je lepší podle [kritéria]: výsledky testu [metoda]“
  • „Kdy [aktivita] přináší největší [výsledek]: časová osa s [milníky]“

Příklad implementace s interním prolinkováním

V textu: „Podívejte se na srovnávací graf WebP vs. AVIF.“

Ktorý formát je rýchlejší pre LCP: WebP vs. AVIF pri mobilnom LTE – boxplot doby načítania
Otázka: Který formát je rychlejší? Odpověď: AVIF je při stejném vizuálním prahu kvality v mobilní síti stabilně rychlejší.

Časté otázky editorů

  • Je titulek povinný? Ne, ale figcaption je velmi užitečný. title používejte střídmě.
  • Musí alt kopírovat figcaption? Ne. Alt je stručnější a funguje bez kontextu; figcaption může být podrobnější.
  • Kolik obrázků na jednu otázku? Ideálně jeden hlavní a případně další detailní vizuály s jasnými nadpisy.

Shrnutí

Obrázky optimalizované pro AIO/SGE fungují nejlépe, když odpovídají na konkrétní otázku, pracují s entitami a jsou technicky bezchybné. Kombinace správného alt, kvalitního figcaption, schématu ImageObject a interního prolinkování výrazně zvyšuje pravděpodobnost, že budou použity jako ilustrační důkaz v AI Overviews – a že pomohou uživateli rychleji pochopit odpověď.