Imagebox: Pravidla a příklady informačního bloku s obrázkem

Imagebox spojuje jeden obrázek s jedním soustředěným vysvětlením, takže je čtenáři vnímají jako jedinou redakční jednotku. Obrázek může přinášet důkazy, které text interpretuje, nebo může ilustrovat myšlenku, kterou text zcela vysvětluje. Autor musí deklarovat, kterou funkci plní, protože tato volba řídí text, alternativní text, popisek, strukturovaná data a to, zda prvek funguje i bez zraku.

Toto je varianta obsahového obrázku: viditelné datum a stav jsou důkazy, zatímco přilehlý text interpretuje jejich vztah. Pokud by byl obrázek pouze dekorativním kalendářem, musel by text celý bod o aktuálnosti vysvětlit samostatně a obrázek by používal prázdný alternativní text.

Proč na tomto prvku záleží

Čtenáři nevnímají obrázek a vzdálený odstavec automaticky jako jednu myšlenku. Když se obrázek objeví bez výslovného textového vztahu, musí se sami rozhodnout, co zkoumat, proč to má význam a zda to podporuje okolní tvrzení. Imagebox tuto nejistotu snižuje tím, že umísťuje jeden vizuál a jedno vysvětlení do jasných hranic. Název pojmenovává pointu; obrázek ji ukazuje; text říká čtenáři, čeho si má všimnout nebo co má pochopit.

Psychologickým přínosem je společná pozornost: design směřuje pozornost k vizuálnímu objektu, zatímco text stanovuje jeho relevanci. Výřez grafu může naznačovat nárůst, volatilitu nebo časovou hranici; přilehlé vysvětlení vybírá relevantní čtení.

Strojová extrahovatelnost je schopnost softwaru izolovat obsahovou jednotku, aniž by ztratil vztah mezi jejími částmi. Sémantický imagebox zpřístupňuje obrázek, přístupný popis, popisek, nadpis, vysvětlení a deklarovanou roli obrázku v jednom kontejneru. Text musí stále obsahovat tvrzení: počítačové vidění nesmí být jedinou cestou k číslu, instrukci, omezení nebo závěru.

Pravidla pro psaní prvků řídí sdílenou direktivní syntaxi, mapování těla, cesty a prioritu. Tato stránka má přednost tam, kde definuje specifiku imageboxu – rozlišení mezi obsahem a ilustrací, povolená pole a omezení na jeden obrázek.

Kdy jej použít

Použijte imagebox, když jeden obrázek a jedno vysvětlení mají přímý, nezbytný vztah a ani jeden si nezaslouží vlastní samostatnou sekci. Mezi silná použití patří soustředěný výřez rozhraní spojený s interpretací, detail produktu spojený s vysvětlením, proč ovlivňuje vhodnost, fotografie procesu spojená s pravidlem kontroly kvality nebo jednoduchá konceptuální ilustrace spojená se stručným vysvětlením.

Nejprve rozhodněte, zda je obrázek obsahem nebo ilustrací:

• Obsahový obrázek: čtenář musí obrázek prohlédnout, aby ověřil tvrzení, identifikoval funkci, porovnal stav nebo porozuměl vizuální skutečnosti. Text pojmenovává relevantní detail a vysvětluje jeho význam. Alternativní text je smysluplný a popisek je obvykle přítomen.
• Ilustrační obrázek: obrázek posiluje tón, zapamatovatelnost nebo porozumění, ale přilehlý text poskytuje úplné tvrzení. Odstranění obrázku činí blok méně poutavým, nikoli méně přesným. Alternativní text je prázdný, pokud ilustrace sama o sobě nesděluje další informace.

Použijte test odstranění. Pokud neúspěšný požadavek na obrázek odstraní důkazy nebo způsobí, že vysvětlení bude neúplné, deklarujte role=content. Pokud odstraní pouze vizuální posílení, deklarujte role=illustration.

Běžné jsou hraniční případy:

• Použijte samostatný obrázek, když vizuál potřebuje plnou šířku čtení a text jej pouze identifikuje.
• Použijte anotovaný snímek obrazovky , když čtenáři musí lokalizovat více oblastí rozhraní.
• Použijte tabulku pro opakovaná srovnávací kritéria, diagram pro systém nebo posloupnost a galerii pro související obrázky.
• Použijte běžný text, když vizuál pouze opakuje větu.

Nepoužívejte imagebox k tomu, aby slabá sekce působila designově. Skladová fotografie lidí ukazujících na notebook nevysvětluje „spolupráci“ a generický robot nečiní tvrzení o umělé inteligenci konkrétnějším. Pokud lze obrázek vyměnit za nesouvisející obrázek beze změny textu, dvojice nemá redakční smlouvu.

Kam jej umístit

Umístěte imagebox bezprostředně za odstavec, který uvádí tvrzení nebo koncept, který rozvíjí. V postupu jej umístěte za akci a před kontrolu úspěchu, aby vizuální důkazy nepřerušovaly instrukci.

Může být umístěn přímo pod H2 pouze tehdy, když je jeho interní název konkrétnější. Udržujte citaci nebo kvalifikaci vedle tvrzení, které omezuje; nikdy mezi ně imagebox nevkládejte.

Nesmí být umístěn přímo vedle jiného imageboxu, galerie, obrázku přes celou šířku, videa, tabulky nebo dvousloupcového informačního bloku. Mezi vizuální kontejnery vložte interpretaci, zkombinujte skutečné partnery nebo vytvořte samostatné podsekce.

Neumísťujte jej dovnitř odrážky, kroku, výzvy, buňky tabulky, harmoniky nebo klikatelné karty. Nevkládejte výzvu k akci dovnitř bloku ani mezi jeho obrázek a vysvětlení.

Na desktopu se může obrázek objevit před nebo za textem. Na mobilu zachovejte předvídatelné pořadí zdroje, klávesnice a čtečky obrazovky; nespoléhejte na konfliktní CSS změny pořadí.

Anatomie

Anatomie je definována významem, nikoli barvou, stínem nebo šířkou sloupce.

1. Kontejner: Seskupuje přesně jeden obrázek a jedno vysvětlení jako jedinou redakční jednotku.
2. Obrázek: Zobrazuje důkazy nebo poskytuje ilustraci podle deklarované role.
3. Alternativní text: Sděluje relevantní vizuální účel obsahového obrázku; pro redundantní dekorativní ilustraci je prázdný.
4. Popisek: Identifikuje, co obsahový obrázek zobrazuje, a poskytuje nezbytný kontext, jako je stav, datum nebo měřítko.
5. Nadpis: Uvádí poznatek nebo téma, nikoli název souboru nebo obecný štítek jako „Příklad“.
6. Vysvětlení: Říká čtenáři, čeho si má všimnout, proč to má význam a jaká omezení interpretace platí.
7. Uvedení autora: Uvádí tvůrce nebo zdroj, když to vyžadují práva, původ nebo redakční politika.
8. Pořadí čtení: Zachovává koherentní vztah obrázku a textu při sbalení dvou sloupců do jednoho.

Vysvětlení musí odkazovat na předmět přímo, nikoli pomocí souřadnic jako „obrázek vlevo“. Pozice se mění napříč zlomy, překlady a syndikací. „Zastaralý stav a datum aktualizace identifikují cíl revize“ platí vždy a všude.

Designové příklady

Designový systém podporuje čtyři kombinace role a pozice. Žádná nemění obsahové požadavky.

Obsahový obrázek, obrázek na začátku

Použijte tento výchozí způsob, když mají čtenáři prozkoumat důkazy před jejich interpretací.

Obsahový obrázek, obrázek na konci

Použijte tento způsob, když vysvětlení musí nejprve nastavit čočku, než přijde důkaz.

Ilustrace, obrázek na začátku

Použijte tento způsob, když konceptuálně specifický vizuál zlepšuje rozpoznání, zatímco text nese plný význam.

Ilustrace, obrázek na konci

Použijte tento způsob, když je vysvětlení primární a ilustrace působí jako vizuální tečka.

Chování na úzkém zobrazení

Každá varianta se stává jednosloupcovou bez horizontálního posouvání nebo ořezů měnících význam. Popisek zůstává připojen ke svému obrázku.

Parametry

Obsahová smlouva odděluje redakční význam od prezentace. Poměry šířek, mezery, okraje, pozadí, zaoblení, stíny a zlomy patří do vykreslovacího systému.

Publikujte src až poté, co aktivum existuje. Čekající snímek používá komentář se snímkem a screenshotsPending = true. role nemá výchozí hodnotu, protože tiché považování důkazu za dekoraci vytváří selhání přístupnosti.

První nadpis těla se stává title; vše za ním se stává content. Tělo povoluje odstavce, zvýraznění, vložený kód a jeden kontextuční odkaz. Odmítá seznamy, vnořené nadpisy, tabulky, média, tlačítka, formuláře, citace, harmoniky a komponenty.

Syntaxe a příklady kódu

Všechny tři zápisy zachovávají stejnou roli, obrázek, nadpis, vysvětlení, popisek, uvedení autora a pořadí čtení. Jedná se o přenosné adaptérové smlouvy; neimplikují, že již existuje registrovaný lokální shortcode nebo blok.

Přenosná direktiva Markdown

:::imagebox{src="/cdn-assets/seo-playbook/examples/freshness-status.png" role=content position=image-start alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date."}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
:::

Ukázková cesta demonstruje pouze syntaxi. Produkční validace ji musí odmítnout, dokud toto aktivum neexistuje.

Hugo shortcode

{{< imagebox src="/cdn-assets/seo-playbook/examples/freshness-status.png" role="content" position="image-start" alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date." >}}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
{{< /imagebox >}}

Adaptér používá pouze pojmenované parametry. Dokud není registrován, použijte sémantický <figure> následovaný prózou. Adaptér ověřuje aktivum a zachovává mapování těla direktivy.

WordPress blok

<!-- wp:amicited/imagebox {"src":"/cdn-assets/seo-playbook/examples/freshness-status.png","role":"content","position":"image-start","alt":"Freshness report row showing a stale status beside an update date of 12 February 2026","caption":"The stale status is evaluated against the recorded update date."} -->
<figure class="wp-block-image">
  <img src="/cdn-assets/seo-playbook/examples/freshness-status.png" alt="Freshness report row showing a stale status beside an update date of 12 February 2026">
  <figcaption>The stale status is evaluated against the recorded update date.</figcaption>
</figure>
<div class="imagebox__content">
  <h2>See why the page needs review</h2>
  <p>The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPress by měl vystavit jedno mediální pole a omezenou textovou oblast. Pokud to není možné, použijte nativní bloky Obrázek, Nadpis a Odstavec; zachovejte význam i bez vedlejšího rozvržení.

Příklady

Dobrý příklad: obrázek je důkaz

Toto funguje, protože obrázek dokazuje dva fyzické detaily a text vysvětluje jejich provozní důsledek. Nadpis uvádí poznatek, popisek identifikuje viditelný důkaz a vysvětlení zůstává konkrétní, aniž by se pokoušelo vyjmenovat celou fotografii.

Špatný příklad: obecná dekorace prezentovaná jako důkaz

Pracujte chytřeji s přehlednými daty
Obrázek: obecná osoba usmívající se na notebook vedle barevných grafů.
Naše inovativní platforma přeměňuje data na akční poznatky, takže každý tým může odemknout lepší rozhodnutí a dosáhnout více.

Toto selhává, protože ani jedna polovina nepřináší ověřitelné informace. Obrázek by mohl inzerovat jakýkoli softwarový produkt, zatímco text obsahuje široké výsledky bez mechanismu, detailu rozhraní, omezení nebo příkladu. Dvojice vytváří vizuální výraznost, ale žádný význam, který by čtenář nebo stroj mohl extrahovat. Nahraďte jej soustředěným stavem produktu a vysvětlením jednoho rozhodnutí, které podporuje, nebo imagebox odstraňte a napište tvrzení jako běžnou prózu s důkazy.

Značení Schema a přístupnost

Imagebox nemá vlastní typ Schema.org. Jeho text zůstává součástí nadřazené entity stránky. Obsahový obrázek může být ImageObject, pokud má stabilní contentUrl, přesný popisek, rozměry a požadovaná metadata o autorovi nebo licenci. Dekorativní ilustrace nepotřebují samostatnou entitu.

Schéma na úrovni stránky může odkazovat na stejný reprezentativní obrázek. Fotografie detailu produktu může napájet vlastnost image viditelného produktu, ale výřez grafu se nestává Dataset a snímek obrazovky se nestává SoftwareApplication.

Použijte jeden <figure> a <figcaption> plus označenou oblast vysvětlení. Nastavte vnitřní width a height; responzivní výstup se nesmí horizontálně posouvat ani ořezávat pojmenovaný detail.

Alternativní text pojmenovává relevantní předmět, stav a rozhodující detail obsahového obrázku. Nezačínejte slovem „obrázek“, nekopírujte popisek a necpěte klíčová slova. Redundantní ilustrace používají alt=""; vynechání atributu může odhalit název souboru.

Nespoléhejte pouze na pozici, barvu nebo pixely. Opakujte rozhodující čísla, štítky, varování a závěry v textu. Udržujte odkazy dosažitelné klávesnicí, nikdy nedělejte celý blok jedním odkazem, zachovejte zdrojové pořadí a testujte při 200% zvětšení.

Pravidla psaní

Napište vysvětlení před výběrem obrázku, poté zvolte nejužší ořez, který zachovává potřebný kontext.

• Napište nadpis o 3–10 slovech, který uvádí poznatek, téma nebo vztah. Vyhněte se „Obrázek“, „Přehled“, „Zjistěte více“ a „Podívejte se v akci“.
• Udržujte vysvětlující text na 40–140 slovech v jednom nebo dvou odstavcích. Prvek podporuje jeden bod, nikoli miniaturní článek.
• Udržujte popisky na 5–25 slovech. Identifikujte, co je zobrazeno, a kontext nezbytný pro jeho interpretaci; úvahy umístěte do těla.
• Použijte 40–180 znaků pro smysluplný alternativní text s maximem 250 znaků. Upřednostněte přesnost před naplněním rozsahu.
• Zahrňte přesně jeden obrázek a nejvýše jeden kontextuční textový odkaz. Odkazujte pouze tehdy, když cíl materiálně prohlubuje vysvětlení.
• Použijte jeden hlas a čas napříč nadpisem, popiskem a tělem. Upřednostněte konkrétní podstatná jména a slovesa před propagačními přídavnými jmény.
• Uveďte omezení vedle interpretace, když obrázek ukazuje pouze jeden stav, datum, ořez, zařízení nebo příklad.

Nikdy dovnitř nevkládejte seznam, tabulku, reference, cenu, formulář, média, soubor ke stažení, tlačítko, vícestupňovou instrukci, prohlášení o vyloučení odpovědnosti nebo výzvu k akci. Nepoužívejte dva obrázky, nevkládejte podstatný text do pixelů, nevystavujte zákaznická data a nepublikujte díla s neznámými právy.

Vyhněte se psaní „jak můžete vidět“. Čtenář nemusí obrázek vidět a i vidící čtenář potřebuje vědět, jaké pozorování je důležité. Uveďte to přímo: „Pojistná západka je v rovině, když je konektor zcela zasunut.“

Typy příspěvků, které jej používají

Následující řádky jsou řízeny frontmatter postTypes. „Použití“ popisuje vhodnou roli, nikoli požadavek vložit imagebox do každé stránky.

Kontrolní seznam QA

Před publikací ověřte celý prvek:

• Obrázek a vysvětlení tvoří jeden bod a patří do jedné redakční jednotky.
• role je explicitně content nebo illustration, zvoleno pomocí testu odstranění.
• Zdrojový soubor existuje, je schválen a nepoužívá žádná soukromá data, neznámá práva ani zástupné aktivum.
• Nadpis uvádí poznatek ve 3–10 slovech a tělo jej vysvětluje ve 40–140 slovech.
• Obsahový obrázek má smysluplný alternativní text a stručný popisek; redundantní ilustrace používá prázdný alt text.
• Text uvádí každé rozhodující číslo, štítek, instrukci, varování a závěr, které nesmí záviset na zraku.
• Popisek identifikuje obrázek, aniž by duplikoval tělo nebo alternativní text.
• Jakýkoli požadovaný odkaz na tvůrce, zdroj, licenci nebo uvedení autora je přesný a viditelný.
• Blok obsahuje jeden obrázek, jedno vysvětlení a nejvýše jeden kontextuční textový odkaz.
• Neobsahuje žádný vnořený seznam, tabulku, média, tlačítko, formulář, výzvu k akci ani interaktivní kartu.
• Nenahrazuje vhodnější anotovaný snímek, srovnání, diagram, galerii nebo obrázek přes celou šířku.
• Desktopové a mobilní rozvržení zachovávají sémantické zdrojové pořadí, připojení popisku a pořadí klávesnice.
• Smysluplný ořez přežije responzivní změnu velikosti, 200% zvětšení a selhání načtení obrázku.
• Šířka a výška rezervují místo, zatímco líné načítání nezdržuje obrázek nad okrajem obrazovky.
• Strukturovaná data, pokud jsou emitována, odpovídají viditelnému obsahu a nepopisují dekoraci jako samostatnou entitu.
• Přenosná mapování v Markdown, Hugo a WordPress zachovávají stejnou roli, pole a význam.

FAQ

Akademická šablona vykresluje pět recenzovaných otázek uložených v [[faq]] frontmatter této stránky. Pokrývají test obsahu versus ilustrace, dekorativní alternativní text, rozsah popisu, výzvy k akci a schéma ImageObject.

Imagebox je úspěšný, když čtenář dokáže okamžitě odpovědět na dvě otázky: „Co tento obrázek přináší?“ a „Proč na tom zde záleží?“ Pokud je některá odpověď vágní, posilte vztah nebo blok odstraňte.