Technologie

Optimalizace obrázků pro AI přehledy: kontextově navázaný alt text a titulek

Petra Svobodová 0

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

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/legendou) formulovanými ve vztahu k otázce zvyšují pravděpodobnost, že systém vyhodnotí vizuál jako přímo relevantní důkaz či ilustrační prvek odpovědi. Výsledkem je lepší „citation fit“, vyšší míra zobrazení v AI přehledech a sekundárně i vyšší CTR v klasickém SERPu.

Rozdíl: alt atribut 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, nikoliv pro klíčová slova bez souvislosti.
  • titulek (atribut title na <img>): obvykle pouze tooltip při najetí kurzoru. Optimalizační efekt je sekundární, ale může dodat jemný kontext.
  • <figcaption>: viditelný popis pod obrázkem. Je důležitý jak pro čtenáře, tak pro modely, které sledují okolní text jako součást odpovědi na otázku.

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

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

  1. explicitně reflektovaly 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, porovnání).

Struktura HTML pro AIO-ready vizuály

Hledáte jak psát alt texty 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 alt popisů podle typu otázky

  • „Jak…?” (How-to): „Jak [dokončit úkol] v [nástroj/proces]: krok [n] vizuálně zobrazen”
  • „Co je…?” (Definice): „Co je [pojem]: ilustrační příklad/[diagram] s vyznačenými [klíčovými částmi]”
  • „Proč…?” (Důvod): „Proč [jev nastává]: porovnání [A vs. B] s vyznačeným [důvodovým faktorem]”
  • „Který je lepší…?” (Porovnání): „Porovnání [produkt A] vs. [produkt B] při [kritériu]: graf výsledků”
  • „Kdy…?” (Časový): „Kdy [aktivita je optimální]: časová osa s [milníky]”

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

Situace Špatný alt Dobrý alt
How-to krok 3 „Krok 3” „Jak nastavit kanonickou URL v CMS: krok 3 – výběr šablony a uložení”
Porovnání „Graf porovnání” „Který formát je rychlejší: WebP vs. AVIF – průměrný čas načítání na 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 vázané na otázku podpoříte strukturovanými daty. Použijte ImageObject a pokud je stránka Q&A nebo návod, propojíte 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 ve <figcaption>, který parafrázuje titulek sekce,
  3. odkaz v blízkém textu (např. „Podívejte se na porovnávací graf…”) směřující na kotvu obrázku.

Generování programově: CMS pole a redakční workflow

  • Pole v CMS: Otázka, Typ otázky, Primární entita, Alt (auto), 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.

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

Alt text musí odpovídat přirozené morfologii dotazu. Při pádech, diakritice a variabilních tvarech:

  • Udržujte konzistentní entitu (např. „AI Overviews”),
  • Připodobněte větnou konstrukci k formě otázky uživatele (např. „Jak nastavit…”, nikoliv „Nastavení…”),
  • Vyhněte se anglicismům, pokud je cílový jazyk stránky SK.

Technická pravidla: výkon, kvalita, formáty

  • Formát: AVIF/WebP s fallbackem JPEG, bez ztráty čitelnosti textu v grafech.
  • Responsive: srcset a sizes, loading="lazy", decoding="async".
  • Rozměry: vždy explicitní width/height pro CLS.
  • Přístupnost: alt smysluplný 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 legendách uvádějte autora, zdroj a datum sběru dat. U grafů doplňte metodiku (vzorek, období, metrika). Zvyšujete tak důvěryhodnost a pravděpodobnost převzetí obrázku jako „citace” v AI přehledech.

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

Jak psát alt texty vá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 ukazuje.

Alt je formulován jako odpověď na otázku; obsahuje entity (AIO/SGE, alt text) a výstup (krokový postup).

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 obsahu.
  • Nesoulad s otázkou: alt hovoří o A, figcaption o B.
  • Chybějící entity: neuvaní produkty, modely, metriky.
  • Příliš dlouhý alt: romány snižují čitelnost a smysl přístupnosti.

Kontrolní seznam před publikací

  • Je alt napsaný jako mini odpověď na otázku?
  • Souhlasí entity v alt, figcaption a okolním textu?
  • Je figcaption užitečný bez obrázku (kontext pro čtenáře)?
  • 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

  • AI Overviews/SGE coverage: sledujte zobrazení URL a citace obrázků v přehledech.
  • CTR v sekcích s vizuály: porovnání s/bez figcaptionu vázaného na otázku.
  • Engagement: hloubka procházení (scroll-depth) ke figure, kliky na lightbox, čas strávený u sekce.
  • Replikovatelnost: kolik altů vzniklo šablonou vs. manuálně a jejich 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ástroj]: krok [n] – [konkrétní úkon na obrazovce]”
  • „Co je [pojem]: diagram s [části/atributy] a příkladem [X]”
  • „Proč [jev]: porovnání [A vs. B] a vliv na [metrika]”
  • „Který [produkt/model] je lepší při [kritériu]: výsledky testu [metoda]”
  • „Kdy [aktivita] přináší nejvíce [výsledek]: časová osa s [milníky]”

Implementační příklad s interním prolinkováním

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

Otázka: Který formát je rychlejší? Odpověď: AVIF je stabilně rychlejší při stejné vizuální kvalitě v mobilní síti.

Časté otázky editorů

  • Je titulek povinný? Ne, ale figcaption je výrazně užitečný. title používejte střídmě.
  • Musí alt kopírovat figcaption? Ne. Alt je stručnější a funkční bez kontextu; figcaption může být bohatší.
  • Kolik obrázků na otázku? Ideálně jeden hlavní a případné detailní pod-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 pomohou uživateli rychleji pochopit odpověď.

Petra Svobodová

Website:

Related Story