SEO Playbook · Element

Oznámení: Dva sloupce — Pravidla a příklady

Použijte dvousloupcové oznámení k přehlednému zobrazení dvou souvisejících sdělení, zachování kontrastu na mobilu a zamezení falešné symetrie u pokynů a podmínek.

13 min read

Dvousloupcové oznámení umisťuje dvě krátká, popsaná sdělení pod jedno společné téma. Sdělení mohou kontrastovat činnosti, vysvětlovat dvě podmínky nebo rozlišovat související stavy, ale každé musí zůstat přesné a užitečné, i když je čteno samostatně.

Zvolte pokyn podle stavu vaší publikace

Tento vykreslený prvek funguje, protože „Koncept stránky" a „Publikovaná stránka" jsou skutečné stavy, nikoli pouze dekorativní nadpisy. Společný nadpis definuje rozhodnutí, každé oznámení poskytuje úplný pokyn a ani jedno nevyžaduje, aby čtenář význam odvozoval z barvy nebo horizontálního umístění.

Proč na tomto prvku záleží

Čtenáři se často setkávají s pokyny během skenování pro podmínku, která se jich týká. Dlouhý odstavec, který říká „koncepty mohou obsahovat označené příklady, zatímco publikované stránky vyžadují ověřené hodnoty", nutí čtenáře držet jednu větu v paměti při testování druhé. Dvě ohraničená oznámení tuto práci snižují. Popisky nejprve odhalí větev, takže čtenář může identifikovat relevantní podmínku a pak si přečíst její pokyn.

Psychologickým přínosem je selektivní pozornost. Lidé ne vždy potřebují obě zprávy stejně; potřebují jistotu, že si všimli té správné. Společný nadpis stanovuje otázku, zatímco odlišné popisky zpřístupňují dostupné stavy. Vedlejší uspořádání také činí smysluplný kontrast zřejmým, aniž by ho přehánělo jako vítěze a poraženého.

Tento přínos mizí, když autor vytvoří falešnou symetrii. Falešná symetrie nastává, když rozvržení implikuje, že dvě myšlenky mají stejný rozsah, důležitost nebo platnost, i když obsah tomu neodpovídá. Jednovětá připomínka vedle šestikrokového bezpečnostního postupu není pár. Stejně tak není povinné právní omezení vedle volitelného tipu na produktivitu. Sloupce stejné šířky mohou způsobit, že nerovnocenná sdělení vypadají zaměnitelně, což je přesně špatný signál.

Strojová extrahovatelnost je schopnost softwaru izolovat obsah při zachování vztahů, které jej činí přesným. Typové dvousloupcové oznámení odhaluje jeden rodičovský předmět a dvě popsaná podřízená oznámení. Vyhledávací systémy a AI agenti mohou získat „Pro publikovanou stránku používejte ověřené hodnoty se zdrojem a datem kontroly", aniž by hádali, který nadpis řídí kterou větu. Explicitní popisky, pořadí ve zdroji a samostatná těla přežijí responzivní skládání i extrakci pouze textu.

Než zvolíte tuto komponentu, postupujte podle pravidel psaní prvků . Účel má přednost před vzhledem. Závažné riziko zůstává varovným boxem , oprava chování po jednotlivých bodech zůstává blokem doporučeného a zakázaného chování a dvě skutečnosti se nestanou oznámeními jen proto, že je design umí umístit do sloupců.

Kdy to použít

Použijte tento prvek, když má jedno společné téma přesně dvě krátká sdělení a jejich současné zobrazení pomáhá čtenáři klasifikovat, porovnávat nebo předcházet zmatku. Mezi vhodné vztahy patří:

  • Dvě podmínky: přihlášen versus odhlášen, koncept versus publikováno, před migrací versus po migraci.
  • Dva okruhy uživatelů: vlastník účtu versus pozvaný uživatel, pokud oba dostávají pokyny ke stejné události.
  • Doporučené a nedoporučované chování: pouze pokud je každá strana krátkým sdělením, nikoli seznamem porovnávaných chování.
  • Dostupné a nedostupné stavy: pokud popisky uvádějí podmínky, které daný stav vytvářejí.
  • Současné a budoucí chování: pokud jsou data nebo hranice verzí explicitní.

Všechny tyto testy musí projít:

  1. Jeden nadpis může přesně uvést obě sdělení.
  2. Existují přesně dvě podmínky nebo sdělení; zdroj neskrývá třetí případ.
  3. Každé sdělení má konkrétní popisek a úplný důsledek nebo akci.
  4. Dvojici lze pochopit v pořadí zdroje na úzké obrazovce.
  5. Žádné sdělení nevyžaduje vnořený postup, tabulku, formulář nebo dlouhé upřesnění.

Těsné mimonávrhy odhalují zneužití. Použijte běžnou prózu, když druhé tvrzení pouze navazuje na první. Použijte srovnávací tabulku, když čtenáři musí posoudit několik kritérií. Použijte rozhodovací strom, když se větví více než dvě podmínky nebo když jedna odpověď vede k další otázce. Použijte samostatné varování, když by přehlédnutí zprávy mohlo způsobit škodu, ztrátu dat, právní postih nebo nevratnou akci. Použijte blok doporučeného a zakázaného chování, když několik nesprávných chování vyžaduje odpovídající nápravu.

Nevymýšlejte protiváhu. Pokud je poctivý pokyn „Před migrací zazálohujte databázi", přidání „Po migraci: pokračujte v práci" vytváří symetrii, ale žádnou hodnotu. Stejně tak nerozdělujte jedno oznámení na „Důležité" a „Také důležité". Popisky musí pojmenovávat skutečné podmínky, stavy, okruhy uživatelů nebo pozice.

Kam to umístit

Umístěte prvek ihned za odstavec, který definuje společnou situaci. Čtenáři musí vědět, jaké rozhodnutí nebo stav sdělení zpřesňují, než narazí na větve. Když dvojice předchází akci, umístěte ji před první krok, který mění data nebo zavazuje čtenáře k volbě.

Přesná pravidla umístění jsou:

  • Umístěte dvojici se dvěma podmínkami po předpokladech a před pokyny specifickými pro danou podmínku.
  • Umístěte kontrast před akcí před ovládací prvek, příkaz, stažení nebo krok, který zpřesňuje.
  • Umístěte dvojici výsledných stavů poté, co byl výsledek definován, a před podrobnosti o řešení problémů.
  • Uchovávejte důkaz nebo zdroj uvnitř příslušného sdělení, pokud podporuje pouze toto sdělení; sdílený důkaz umístěte ihned za celou dvojici.
  • V opakovaných dokumentačních sekcích používejte stejné pořadí ve zdroji, aby se opakující se stavy nepřesouvaly.

Prvek nesmí sousedit s jinou dvousloupcovou komponentou, srovnávací tabulkou, ovládacím prvkem záložek, cenovou mřížkou nebo rozdělenou výzvou k akci. Sousedící mřížky činí hranice nejasnými a mohou naznačovat čtyřsměrnou volbu. Nesmí oddělovat tvrzení od jeho citace, krok od požadovaného varování ani ovládací prvek formuláře od jeho popisku. Neumisťujte jej do číslovaného kroku: vnořené větve mohou učinit posloupnost a odpovědnost nejasnými.

Nikdy neumisťujte závažné varování do jednoho sloupce vedle běžné rady ve druhém. Stejná geometrie snižuje dominanci varování a naznačuje, že si čtenář může mezi nimi vybrat. Povýšte riziko na samostatné varování před příslušnou akcí, pak tento prvek použijte později, pouze pokud si dvě bezpečné podmínky stále vyžadují objasnění.

Anatomie

  1. Společný nadpis: pojmenovává jednu situaci nebo rozhodnutí, které řídí obě sdělení.
  2. Kontejner sdělení: seskupuje dvojici jako jeden redakční prvek, aniž by naznačoval, že jde o jediné upozornění.
  3. Popisek sdělení: pojmenovává podmínku, stav, okruh uživatelů nebo chování ve 2–6 slovech.
  4. Tělo sdělení: uvádí relevantní skutečnost, důsledek a následnou akci v tomto pořadí, pokud jsou všechny tři potřeba.
  5. Volitelná ikona: posiluje viditelný textový popisek; nikdy nenesou rozlišení sama.
  6. Volitelná poznámka ke zdroji: podporuje měnící se, regulované nebo externě definované tvrzení v rámci sdělení, které zpřesňuje.
  7. Pořadí ve zdroji: určuje pořadí pro čtečky obrazovky, kopírování a mobil; vizuální stylování jej nesmí obracet.

Autor dodává společný nadpis, dva popisky, dvě těla, tón a případné zdroje. Vykreslovací engine dodává responzivní mřížku, mezery, vizuální důraz, sémantický kontejner a dekorativní zpracování ikon.

Příklady designu

Toto jsou všechny podporované varianty. Varianty mění popisky a důraz, nikoli datový model dvou sdělení.

Kontrastní činnosti

Použijte pro jednu doporučenou a jednu nedoporučovanou činnost, pokud je na každé straně pouze jedno sdělení. Uveďte činnost a její důvod; tuto variantu nerozšiřujte na porovnávané seznamy.

Podmíněné stavy

Použijte, pokud správný pokyn závisí na vzájemně se vylučující podmínce, například „Existující účet" a „Nový účet". Pojmenujte podmínku v každém popisku a uveďte nejběžnější nebo předpokladovou podmínku jako první.

Párová objasnění

Použijte, když dvě související skutečnosti zabraňují různým nedorozuměním, ale nejsou protiklady. Aplikujte neutrální stylování na obě, aby design nevytvářel schválení, závažnost nebo preferenci.

Kompaktní dvojice stavů

Použijte pro krátké důsledky stavů poté, co již byly stavy vysvětleny. Každé tělo je jedna věta. Neodstraňujte popisky ani neredukujte těla na nevysvětlené hodnoty.

Skládaná mobilní dvojice

Všechny varianty se skládají na úzkých šířkách. Udržujte první sdělení bezprostředně před druhým a zachovejte společný nadpis. Nevytvářejte swipe interakci nebo záložky, protože skrytí jednoho sdělení maří účel prvku.

Parametry

„Zdroj" určuje, odkud adaptér získává jednotlivé hodnoty. Mapování těla záměrně ukládá dva kompletní záznamy sdělení, nikoli dva vizuálně umístěné sloupce.

Parametry rozhraní dvousloupcového oznámení
NázevTypPovinnéMin/maxVýchozíZdroj
titlePlain stringYes3–12 slov; 100 znakůNonePrvní nadpis v těle
variantEnumNocontrast, conditional, clarification, nebo compactclarificationAtribut
noticeRepeated recordYesPřesně 2NoneVnořená položka těla
labelPlain stringYes per notice2–6 slov; 50 znakůNonePrvní nadpis v těle sdělení
contentLimited rich textYes per notice1–2 odstavce; doporučeno 25–80 slov, maximum 120NoneTělo sdělení za prvním nadpisem
toneEnumNoneutral, positive, caution, nebo negativeneutralAtribut sdělení
iconRegistered icon keyNoJedna dekorativní ikona na sděleníNoneAtribut sdělení
sourcePlain text with optional linkConditionalJedna stručná poznámka ke zdroji na sděleníNoneKonec těla sdělení

První nadpis rodičovského těla se mapuje na title. Každá vnořená položka mapuje svůj první nadpis na label a vše za ním na content; atributy sdělení obsahují tone a icon. Vykreslovací engine musí odmítnout jednu, tři nebo prázdné položky sdělení, místo aby tiše vyplnil nebo vypustil sloupec.

Syntaxe a příklady kódu

Všechny formáty zachovávají stejný název, pořadí sdělení, popisky, těla, tóny a zdroje. „Sloupec jedna" a „sloupec dva" jsou prezentační termíny, nikoli názvy polí.

Přenosná Markdown direktiva

:::notification-two-column{variant=conditional}
## Zvolte pokyn podle stavu vaší publikace

::notice{tone=neutral icon="draft"}
### Koncept stránky

Ukázkové hodnoty používejte pouze tehdy, jsou-li viditelně označeny jako příklady. Před publikací každý vzorek odstraňte nebo nahraďte.
::

::notice{tone=caution icon="publish"}
### Publikovaná stránka

Používejte ověřené hodnoty se zdrojem a datem kontroly. Pokud není ověření dokončeno, tvrzení neuveřejňujte.
::
:::

Tento prvek přepisuje generický název vnořené položky na notice, protože záznamy mají chování tónu specifické pro sdělení. První rodičovský nadpis poskytuje společný název; první nadpis každého sdělení poskytuje jeho popisek.

Hugo shortcode

V současné produkci neexistuje shortcode, který by implementoval tuto přesnou smlouvu párových sdělení. Dokud nebude existovat adaptér, používejte sémantické HTML jako ve vykresleném příkladu. Zamýšlená Hugo notace je zdokumentována jako:

{{< notification-two-column variant="conditional" >}}
## Zvolte pokyn podle stavu vaší publikace

{{< notification tone="neutral" icon="draft" >}}
### Koncept stránky
Označené ukázkové hodnoty používejte pouze jako příklady a před publikací je odstraňte.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Publikovaná stránka
Používejte ověřené hodnoty se zdrojem a datem kontroly.
{{< /notification >}}
{{< /notification-two-column >}}

Forma s lomítkem a hvězdičkou zabraňuje tomu, aby tento příklad specifikace vyvolal shortcode, který neexistuje. Budoucí adaptér musí validovat přesně dvě podřízená oznámení a vykreslit je v pořadí zdroje.

WordPress blok

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Zvolte pokyn podle stavu vaší publikace</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Koncept stránky</h3>
<p>Označené ukázkové hodnoty používejte pouze jako příklady a před publikací je odstraňte.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Publikovaná stránka</h3>
<p>Používejte ověřené hodnoty se zdrojem a datem kontroly.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

WordPress editor by měl nabízet dvě pevně daná místa pro sdělení, umožnit změnu pořadí a zabránit publikaci, pokud je popisek nebo tělo prázdné. Nesmí dovolit autorům přidat třetí sdělení jen proto, že blok mřížky podporuje více sloupců.

Příklady

Dobře: dvě skutečné podmínky s úplnými akcemi

Před importem
Stáhněte aktuální záznamy a poznamenejte si čas exportu. Kopie vám poskytne bod obnovy, pokud mapování polí přinese neočekávaný výsledek.

Po importu
Porovnejte počet importovaných záznamů se zdrojovým počtem, poté zkontrolujte alespoň jeden záznam obsahující každé mapované pole. Počty odhalí chybějící položky; celý záznam odhalí posunuté hodnoty.

Tato dvojice má jedno téma — bezpečné ověření importu — a skutečnou časovou hranici. Každé sdělení pojmenovává akci a vysvětluje, jaké selhání odhaluje. Druhé je delší, protože obsahuje dvě související kontroly, ale obě strany nesou srovnatelnou odpovědnost a zůstávají srozumitelné i při skládání.

Špatně: falešná symetrie, která degraduje riziko

Užitečný tip
Přejmenujte export, aby se později snáze hledal.

Důležité
Import s volbou „Nahradit vše" trvale smaže stávající záznamy a nelze jej vrátit zpět. Před pokračováním zazálohujte databázi, potvrďte cíl, získejte schválení a naplánujte odstávku.

První sdělení je volitelná administrativní záležitost; druhé popisuje nevratnou ztrátu dat a několik předpokladů. Jejich umístění do stejně širokých sloupců implikuje stejnou váhu a činí kritickou zprávu jednou ze dvou alternativ. Přesuňte sdělení o ztrátě dat do samostatného varovného boxu před ovládací prvek. Tip na název souboru ponechte jako běžnou podpůrnou prózu.

Schéma markup a přístupnost

Dvousloupcové oznámení nemá vyhrazený typ Schema.org. Jeho obsah zůstává v rámci nadřazeného Article, TechArticle nebo WebPage. Nevydávejte ItemList, HowToStep, Question nebo Answer pouze proto, že existují dva ohraničené záznamy. Pokud sdělení obsahuje obsah, který nezávisle splňuje podmínky pro strukturovaná data, rozhodují o mapování pravidla schématu nadřazeného typu příspěvku; tento prvek sám o sobě žádné nepřidává.

Použijte jeden popsaný section, když dvojice patří do hlavního vysvětlení, nebo popsaný aside, když jsou obě sdělení doplňková. Každý potomek může být aside nebo section se skutečným nadpisem na správné úrovni dokumentu. Nepoužívejte ARIA role alert nebo alertdialog: tyto role ohlašují dynamické, časově citlivé změny a nejsou vhodné pro statické redakční pokyny.

Přístupný název pochází z viditelného společného nadpisu prostřednictvím nativní struktury nadpisů nebo aria-labelledby. Každý popisek sdělení musí být text. Barva, styl okraje, pozice a ikony mohou posilovat tón, ale nemohou jej definovat. Pokud je ikona dekorativní, skryjte ji před asistenčními technologiemi; pokud sděluje informace, které nejsou v popisku, přepište popisek místo spoléhání se na alternativní text pro opravu návrhu.

Pořadí v DOM řídí význam. Čtečky obrazovky a mobilní rozvržení musí narazit nejprve na první sdělení a poté na druhé. Neobracejte vizuální pořadí pomocí CSS. Při 200% přiblížení textu a na úzkých šířkách se sdělení musí skládat bez ořezávání nebo horizontálního posouvání stránky. Odkazy potřebují popisné popisky a více odkazů nesmí být stlačeno do neoznačeného řádku ikon.

Pravidla psaní

Než začnete psát sdělení, napište vztah: „Čtenář potřebuje dvě zprávy, protože správný pokyn se mění podle ___." Pokud nelze prázdné místo vyplnit konkrétní podmínkou, stavem, okruhem uživatelů, časem nebo kontrastem chování, použijte prózu.

  • Použijte přesně dvě sdělení pod jedním společným nadpisem.
  • Udržujte nadpis na 3–12 slovech a každý popisek na 2–6 slovech.
  • Cílejte na 25–80 slov na tělo; 120 slov je absolutní maximum.
  • Použijte jeden nebo dva krátké odstavce na sdělení a nejvýše jeden krátký inline odkaz.
  • Uveďte nejprve skutečnost nebo podmínku, poté její důsledek a nakonec akci, pokud jsou přítomny všechny.
  • Používejte paralelní gramatiku popisků: „Před spuštěním / Po spuštění", nikoli „Před spuštěním / Co by měli administrátoři udělat později".
  • Pojmenovávejte podmínky přímo. Nikdy nepište „vlevo", „vpravo", „druhá možnost" nebo „box výše".
  • Přizpůsobte tón důkazům. Neutrální párová fakta by neměla zdědit zelené a červené zpracování.
  • U měnících se tvrzení uveďte datum, verzi, plán, jurisdikci nebo zdroj podle potřeby.

Srovnatelná váha znamená, že si obě sdělení zaslouží stejný okamžik v toku čtenáře. Nevyžaduje shodný počet vět nebo znaků. Nenatahujte krátkou pravdu, aby odpovídala delší. Pokud jedno tělo převyšuje druhé zhruba více než dvakrát, otestujte, zda větší sdělení nepotřebuje samostatnou sekci nebo zda menší sdělení není falešným protějškem.

Nikdy neumisťujte vícekrokový postup, tabulku, formulář, cenovou kartu, reference, propagační výzvu k akci, dlouhou citaci, ukázku kódu, video nebo vnořenou komponentu dovnitř sdělení. Nikdy nepoužívejte dvojici ke změkčení právních, lékařských, finančních, bezpečnostních, ochranných nebo destruktivních pokynů. Neimplikujte, že dvě podmínky jsou vyčerpávající, pokud vlastník obsahu neověřil, že neexistuje žádný třetí stav.

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

Pole postTypes v frontmatter je zdrojem pro tuto tabulku. Uvedení znamená, že prvek je k dispozici pro skutečný případ dvou sdělení, nikoli povinný na každé stránce daného typu.

Typ příspěvkuTypické použitíDoporučené umístěníBěžné zneužití
NávodDvě podmínky, které mění následující akciPo předpokladech a před ovlivněným krokemSkrytí sekvenčních kroků v paralelních sděleních
Průvodce řešením problémůDva pozorované stavy s odlišnými dalšími kontrolamiPo potvrzení příznakuPoužití dvojice, když jsou možné tři nebo více příčin
Dokumentační článekPokyny pro stávající a nové uživatele k jedné funkciIhned před podrobnostmi konfiguracePárování běžné nápovědy s varováním o destruktivní akci
Stránka zásadPodmínky v rozsahu a mimo rozsah s ekvivalentními vysvětlenímiPo definování rozsahuZobrazení závazného požadavku jako jedné volitelné strany
Stránka normy nebo nařízeníDva stavy použitelnosti nebo dvě odpovědné stranyPo uvedení řídícího termínu a jurisdikceKomprimování výjimek nebo právních upřesnění do malého boxu
Srovnání A vs BJedno krátké kontextové sdělení pro každou možnostPo rozsahu srovnání, před tabulkami důkazůNahrazení férového srovnání kritérium po kritériu marketingovými shrnutími

Kontrolní seznam QA

  • Společné téma: Jeden přesný nadpis řídí obě sdělení, aniž by rozšiřoval záběr.
  • Přesně dvě sdělení: Zdroj obsahuje dva kompletní záznamy a žádný implikovaný třetí stav.
  • Skutečný vztah: Popisky pojmenovávají smysluplný kontrast, podmínku, okruh uživatelů, stav nebo časovou hranici.
  • Nezávislý význam: Každé sdělení zůstává jasné i při extrakci se společným nadpisem.
  • Žádná falešná symetrie: Obě sdělení si zaslouží srovnatelný důraz; žádné není výplň nebo degradované kritické varování.
  • Správné umístění: Dvojice následuje svůj kontext a předchází akci nebo detailu, který zpřesňuje.
  • Bezpeční sousedé: Není vedle jiného rozděleného rozvržení, tabulky, ovládacího prvku záložek nebo dvousloupcové CTA.
  • Užitečné popisky: Popisky používají paralelní gramatiku a nikdy nezávisí na pozici vlevo/vpravo nebo barvě.
  • Kontrola délky: Těla zůstávají v rozsahu jednoho nebo dvou odstavců a nejvýše 120 slov.
  • Obsahová zdrženlivost: Uvnitř se neobjevuje žádný vnořený postup, tabulka, formulář, média, propagace ani složitá komponenta.
  • Responzivní pořadí: Pořadí na mobilu, klávesnici, čtečce obrazovky a při kopírování textu odpovídá autorově posloupnosti.
  • Přístupná sémantika: Viditelný nadpis popisuje rodiče; podřízené popisky jsou nadpisy; statický obsah nepoužívá role alert.
  • Integrita tónu: Stylování odráží skutečný význam a nemění neutrální fakta na hodnocení dobrý/špatný.
  • Parita notace: Markdown, Hugo a WordPress zachovávají stejný název, popisky, těla, atributy a pořadí.
  • Schéma zdrženlivost: Prvek nevytváří žádná nepodporovaná strukturovaná data.

Zamítněte prvek, pokud selžou kontroly společného tématu, skutečného vztahu nebo falešné symetrie. Jde o redakční vady, které vykreslovací engine nemůže opravit. Přepište obsah jako prózu, samostatné sekce, samostatné varování nebo jiný prvek odpovídající účelu, než upravíte prezentaci.

FAQ

Strukturované FAQ ve frontmatter pokrývá implementační rozhodnutí, která jsou nejčastěji nepochopena: sdělení nemusí být protiklady nebo stejně dlouhá, mobilní pořadí následuje pořadí zdroje, závažná rizika zůstávají samostatnými varováními a prvek sám o sobě nevytváří žádné schéma markup.

← All SEO Playbook guides

Připraveni uvést to do praxe?

Bezplatná kontrola · 7denní zkušební verze · bez platební karty