Bloky souvisejícího obsahu: Pravidla interního propojování

Blok souvisejícího obsahu je krátká, ručně vybraná sada odkazů umístěná na konci hlavního těla stránky. Přivádí čtenáře k nejužitečnější další stránce a zároveň přenáší interní autoritu po stejném odkazu. Každý cíl musí mít redakční důvod k existenci; samotné sdílené štítky nestačí.

Vykreslený příklad je záměrně skromný. Jeho nadpis vysvětluje volbu, každý kotvící text předpovídá cílovou stránku a každý důvod čtenáři říká, proč je daná stránka další na řadě. Blok nesoupeří s článkem, který uzavírá.

Proč na tomto prvku záleží

Dokončení užitečné stránky vytváří rozhodovací bod. Čtenář může rozumět bezprostřednímu tématu, ale přesto potřebuje aplikovat poznatky, porovnat možnosti, naučit se předpoklad nebo se posunout k produktu. Blok souvisejícího obsahu snižuje úsilí potřebné k nalezení tohoto dalšího kroku. Nabízí malou sadu cílených cest v okamžiku, kdy je čtenář připraven vybírat, místo aby se musel vracet do globální navigace nebo znovu vyhledávat.

Druhým úkolem je architektonický. Interní autorita je důležitost a kontextová relevance, kterou odkazy pomáhají distribuovat mezi stránkami na stejném webu. Odkaz vytváří hranu mezi dvěma dokumenty. Jeho pozice, kotvící text a vysvětlení říkají vyhledávacím systémům, co tato hrana představuje: která stránka je širokou autoritou, která pokrývá podtéma a která odpovídá na související potřebu.

Strojová extrahovatelnost znamená, že automatický systém může tyto vztahy získat z HTML bez hádání z rozvržení. Sémantická navigační oblast, viditelný nadpis, běžné procházené odkazy, popisné kotvící texty a jedna položka na cílovou stránku odhalují čistou sadu výroků zdroj–vztah–cíl. Pouze JavaScriptové karusely, pouze obrázkové karty a generické kotvící texty tyto výroky zastírají, i když vypadají elegantně.

Oba úkoly musí přežít kontrolu. Blok, který získává kliknutí, ale posílá autoritu na nesouvisející stránky, poškozuje obsahový model; správná mapa shluku s irelevantními odkazy plýtvá čtenářovým rozhodovacím bodem.

Kdy jej použít

Tento prvek použijte, když má stránka dva až pět důvěryhodných dalších cílů a vztah lze uvést v jedné větě. Patří na stálý vzdělávací obsah, komerční vysvětlující texty, srovnání, produktové a kategorické stránky, stránky případů použití a případové studie, pokud jiná stránka skutečně posouvá stejný úkol nebo rozhodnutí.

Nepřidávejte jej jen proto, že má šablona prázdné místo. Jednoúčelová konverzní stránka s jedním nezbytným úkonem může potřebovat pouze svou závěrečnou výzvu k akci. Právní oznámení, obrazovka účtu, záznam podpory nebo krátká nástrojová stránka nemusí mít žádnou smysluplnou redakční návaznost. Index, jehož hlavní tělo již sestává z navigačních karet, nepotřebuje druhý seznam, který je opakuje.

Mezi častá málem správná řešení patří:

• Tagový feed odpovídá na otázku „co sdílí tento štítek?“, nikoli „co by měl čtenář udělat dál?“. Dva články označené „analytika“ mohou sloužit různým publikům a fázím.
• Nejnovější příspěvky odměňují datum publikace namísto relevance. Aktuálnost je užitečná pro objevování novinek, ale není to model vztahu.
• Nejčtenější příspěvky optimalizují pro celkovou návštěvnost, nikoli pro aktuální otázku.
• Zápatkové mapy webu podporují široké objevování, nikoli malou redakčně zvolenou cestu.
• Ovládání předchozí/další odráží pořadí publikování. Počítá se pouze tehdy, když je toto pořadí samo o sobě záměrným kurzem nebo posloupností.
• Kontextové inline odkazy vysvětlují pojmy nebo podporují tvrzení v místě potřeby. Doplňují tento blok, ale nenahrazují jeho rozhodovací roli na konci stránky.

Výběr je standardně ruční. U každého navrhovaného odkazu editor zaznamená důvod, například „aplikuje metodu“, „definuje předpoklad“, „porovnává dvě možnosti představené zde“ nebo „ukazuje důkazy v praxi“. Pokud je důvod pouze „stejný štítek“, položku odstraňte.

Automatický výběr je přijatelný v archivních novinkách, obsahu vytvářeném uživateli nebo inventářích, které jsou příliš velké a proměnlivé na položkovou kurátorskou správu. I tehdy vyžadujte řízenou množinu kandidátů, vyloučení aktuální URL a prošlých stránek, aktuálnost tam, kde záleží na čase, relevanci přesahující jeden štítek, stabilní rozhodovací mechanismus a redakční přepis.

Kam jej umístit

Blok umístěte za úplné hlavní tělo a za blok zdrojů, ale před závěrečnou výzvu k akci. Důvod je sekvenční: zdroje uzavírají důkazní povinnost aktuální stránky; související obsah nabízí další vzdělávací nebo hodnotící cestu; závěrečná výzva k akci nabízí komerční nebo produktovou cestu. Pokud stránka nemá blok zdrojů, související obsah následuje za poslední věcnou sekcí.

Neumísťujte druhý blok souvisejícího obsahu jinam na stránku. Neumísťujte jej vedle duplicitní navigace předchozí/další, hustého tagového mraku nebo jiné kolekce s názvem „Mohlo by se vám také líbit“. Stačí jedna jasná doporučovací oblast.

Anatomie

Popisek:

1. Nadpis sekce: pojmenovává vztah, například „Aplikujte, co jste se naučili“ nebo „Porovnejte další možnosti“. Generické „Související“ je přijatelné pouze tehdy, když cíle skutečně zahrnují různé akce.
2. Název položky: poskytuje popisný kotvící text a předpovídá primární hodnotu cílové stránky.
3. Cílová URL: odkazuje na jednu kanonickou, procházenou interní URL bez řetězce přesměrování.
4. Náhledový obrázek: volitelně odlišuje cílovou stránku, pokud obrázek nese skutečnou identifikační informaci.
5. Jednořádkový důvod: volitelně vysvětluje, proč je tato stránka logickým dalším krokem; je silně doporučen, pokud vztah není zřejmý z názvu.
6. Hranice bloku: seskupuje odkazy jako navigaci, aniž by celá karta byla nejednoznačným cílem kliknutí.

Popisek patří do stránky, nikoli dovnitř obrázku, aby zůstal vybratelný, překládatelný a dostupný pro asistenční technologie.

Příklady provedení

Varianty mění informační hustotu, nikoli redakční logiku.

Pouze text: výchozí varianta, když jsou názvy cílových stránek dostatečně jasné.

S důvody: výchozí varianta pro různé fáze cesty. Důvod přidává vztah, nikoli opakuje název.

S náhledovými obrázky: vyhrazeno pro případy, kdy původní obrázky pomáhají s rozpoznáním. Obrázky potřebují rozměry a užitečný alternativní text, nebo prázdný alternativní text, pokud název již cílovou stránku pojmenovává.

Napříč pilíři: explicitně vyjadřuje vztahy mezi typy příspěvků, prvky a obchodními aplikacemi. Je generován z recenzovaných frontmatter dat, nikoli ze štítků.

Parametry

Dvě položky jsou povoleny pouze tehdy, když má stránka úzkou, důvěryhodnou vidlici. Tři až pět je normální rozsah: dostatek volby pro různé další potřeby, ale dost málo na to, aby každý odkaz zůstal viditelný a záměrný. Šest je tvrdá výjimka pro pilíř, který musí vystavit celý malý shluk. Více než šest se stává adresářem, oslabuje redakční signál každé hrany a prodražuje prohlížení na mobilu.

Vynechaný atribut title může být odvozen z prvního nadpisu v těle položky. Neposkytujte oba s různým textem. Důvod může být v atributu pro jednoduchou větu nebo v těle, když potřebuje inline zvýraznění; nesmí se objevit dvakrát.

Syntaxe a příklady kódu

Kanonický název komponenty je related-content. Vnořená forma ::item{} udržuje pole každé cílové stránky pohromadě a zabraňuje paralelním polím, aby se rozcházela.

Přenosná direktiva Markdown

:::related-content{heading="Pokračujte v playbooku" variant="reason"}
::item{title="Napište spolehlivý návod" url="/seo-playbook/post-types/how-to-guide/" reason="Přeměňte pravidla prvků na kompletní instruktážní stránku."}
::item{title="Strukturovat ultimátního průvodce" url="/seo-playbook/post-types/ultimate-guide/" reason="Propojte tento prvek s širokým pilířem a jeho podpůrnými paprsky."}
::item{title="Vytvořte stránku případu použití" url="/seo-playbook/post-types/use-case-page/" reason="Přeneste vzdělávací záměr do konkrétního publika a výsledku."}
:::

Hugo shortcode

{{< related-content heading="Pokračujte v playbooku" variant="reason" >}}
  {{< item title="Napište spolehlivý návod" url="/seo-playbook/post-types/how-to-guide/" reason="Přeměňte pravidla prvků na kompletní instruktážní stránku." />}}
  {{< item title="Strukturovat ultimátního průvodce" url="/seo-playbook/post-types/ultimate-guide/" reason="Propojte tento prvek s širokým pilířem a jeho podpůrnými paprsky." />}}
  {{< item title="Vytvořte stránku případu použití" url="/seo-playbook/post-types/use-case-page/" reason="Přeneste vzdělávací záměr do konkrétního publika a výsledku." />}}
{{< /related-content >}}

Toto je přenosný cílový kontrakt, nikoli tvrzení, že toto úložiště registruje daný shortcode. Živý příklad používá sémantické HTML a nepřidává žádnou závislost na rozvržení.

WordPress blok nebo shortcode

<!-- wp:amicited/related-content {"heading":"Pokračujte v playbooku","variant":"reason"} -->
[related_item title="Napište spolehlivý návod" url="/seo-playbook/post-types/how-to-guide/" reason="Přeměňte pravidla prvků na kompletní instruktážní stránku."]
[related_item title="Strukturovat ultimátního průvodce" url="/seo-playbook/post-types/ultimate-guide/" reason="Propojte tento prvek s širokým pilířem a jeho podpůrnými paprsky."]
[related_item title="Vytvořte stránku případu použití" url="/seo-playbook/post-types/use-case-page/" reason="Přeneste vzdělávací záměr do konkrétního publika a výsledku."]
<!-- /wp:amicited/related-content -->

WordPress by měl používat registrovaný dynamický blok s ovládacími prvky pro vnořené položky. Forma shortcode je pro systémy, které nemohou ukládat vnořené bloky a musí být zaregistrovány před publikací.

Příklady

Dobře: každý odkaz odpovídá na jinou další potřebu

:::related-content{heading="Uveďte metodu do praxe" variant="reason"}
::item{title="Spusťte předpublikační QA kontrolní seznam" url="/seo-playbook/process/checklists/pre-publish-qa/" reason="Ověřte odkazy, důkazy, přístupnost a strukturu stránky před vydáním."}
::item{title="Vytvořte návod" url="/seo-playbook/post-types/how-to-guide/" reason="Aplikujte prvek v rámci kompletního instruktážního formátu."}
::item{title="Přizpůsobte playbook pro SaaS" url="/seo-playbook/business-types/saas/" reason="Přeložte sdílená pravidla do obsahové cesty vedené produktem."}
:::

Toto funguje, protože cíle jsou odlišné, ale propojené: ověření, implementace a obchodní adaptace. Kotvící texty uvádějí, co každá stránka přináší, a důvody vysvětlují vztah k aktuální stránce.

Špatně: tagový widget maskující se jako redakční výběr

:::related-content{heading="Mohlo by se vám také líbit"}
::item{title="Čtěte dále" url="/blog/new-office/"}
::item{title="Klikněte sem" url="/features/ai-visibility/"}
::item{title="Nejnovější příspěvek" url="/blog/quarterly-roundup/"}
::item{title="SEO" url="/seo-playbook/"}
::item{title="Více SEO" url="/blog/old-seo-notes/"}
::item{title="Další článek" url="/academy/how-to-export-prompt-data/"}
::item{title="Doporučeno" url="/case-studies/hz-containers/"}
:::

Příklad selhává, i když každá URL funguje. Sedm možností překračuje rozsah. Kotvící texty nepředpovídají cílovou stránku. Cíle míchají firemní novinky, produkt, archiv, akademii a záměr případové studie bez uvedených důvodů. „Nejnovější“ je pravidlo data, „SEO“ je příliš široké a nic neprokazuje, že odkazy slouží dalšímu úkolu tohoto čtenáře.

Kontrakt shluku

Tematický shluk je plánovaná skupina stránek kolem jednoho tématu. Jeho pilíř je široká stránka, která téma organizuje; jeho paprsky jsou užší stránky, které odpovídají na jeho části. Blok souvisejícího obsahu přeměňuje tento plán na skutečné HTML odkazy:

• Každý paprsek odkazuje nahoru na svůj pilíř. To čtenářům říká, kam úzká odpověď patří, a zabraňuje tomu, aby se paprsek stal izolovaným koncovým bodem.
• Pilíř odkazuje dolů na každý aktuální paprsek. Když má shluk více než šest paprsků, použijte organizované sekce v těle pilíře, spíše než nutit celou sadu do jednoho bloku souvisejícího obsahu.
• Boční odkazy spojují jeden paprsek s druhým pouze tehdy, když čtenář dokáže formulovat vztah dalšího kroku. Sdílení rodiče není dostačující.
• Každá hrana je obousměrná, když oba směry pomáhají čtenáři. Opačný kotvící text a důvod se mohou lišit, protože se liší cesta.
• Odstranění, sloučení nebo přesměrování stránky spouští kontrolu každé uložené hrany, která na ni ukazuje.

V rámci tohoto playbooku stránka typu příspěvku odkazuje na prvky, které vyžaduje, a na obchodní typy, které ji přizpůsobují. Stránka prvku odkazuje zpět na typy příspěvků, které ji používají. Tyto vztahy jsou generovány z recenzovaných frontmatter dat podle pravidel napříč pilíři: pole postTypes této stránky je zdrojem pro její odkazy na typy příspěvků, zatímco odpovídající metadata typu příspěvku poskytují zpětnou hranu. Generování zajišťuje vykreslování; editoři stále rozhodují, zda vztah patří do metadat.

Širší pravidla psaní prvků určují, jak tato metadata zůstávají přenosná. Nikdy neopravujte chybějící redakční vztah přidáním štítku a doufáním, že widget vybere správně.

Pravidla pro kotvící text

Kotvící text je viditelné, klikatelné znění odkazu. Pište jej tak, aby čtenář mohl předpovědět cílovou stránku, aniž by četl URL. „Vytvořte návod“ je užitečné; „čtěte dále“, „klikněte sem“, „dozvědět se více“ a holá URL užitečné nejsou.

Kotvící texty přirozeně obměňujte, přičemž zachovejte předmět cílové stránky. „Vytvořte návod“ a „strukturujte instruktážního průvodce“ fungují; nesouvisející synonyma klíčových slov nikoli. Nikdy neslibujte šablonu, kalkulačku, cenu, studii nebo kontrolní seznam, který cílová stránka nenabízí.

Uvnitř bloku by kotvící texty (názvy) měly být jedinečné. Pokud by dva cíle používaly stejný název, přidejte rozlišující publikum, metodu nebo výsledek. Udržujte volitelný důvod mimo kotvící text, aby klikací cíl zůstal výstižný a seznamy odkazů v asistenčních technologiích zůstaly užitečné.

Schema markup a přístupnost

Není vyžadován žádný speciální JSON-LD typ. JSON-LD je formát založený na skriptech pro strukturovaná data a Schema.org je sdílený slovník běžně používaný pro jeho kódování. Odkazy normálně zůstávají součástí obklopujícího Article, TechArticle, Product nebo WebPage. Nevymýšlejte typ schema RelatedContent.

ItemList může popisovat blok pouze tehdy, když se skutečně jedná o seřazený nebo pojmenovaný redakční seznam a celková schema politika webu to vyžaduje. Pokud je použit, itemListElement musí odpovídat viditelnému pořadí položek, URL a názvům. Nepřidávejte skryté cíle nebo syntetická hodnocení. Drobečková navigace je jiný vztah a nesmí tyto odkazy pohlcovat.

Přístupnost začíná u orientačního bodu <nav>, tedy oblasti, kterou asistenční technologie dokáže identifikovat jako navigaci. Dejte jí viditelný nadpis propojený pomocí aria-labelledby; ARIA je sada atributů používaných k odhalení názvů a stavů rozhraní, když samotné nativní HTML potřebuje pomoc. Použijte <ul>, protože pořadí obvykle nenese žádné hodnocení. Zachovejte viditelný klávesnicový fokus, udělejte z názvu primární odkaz a vyhněte se vnoření interaktivní karty do jiného odkazu.

Alternativní text náhledového obrázku nesmí duplikovat proklikávací název. Pro dekorativní náhledový obrázek použijte prázdný alternativní text. Pokud obrázek přináší výraznou informaci, popište pouze tuto informaci. Blok musí zůstat úplný i bez obrázků nebo JavaScriptu a nesmí přesouvat klávesnicový fokus při obnovování doporučení.

Pravidla psaní

Používejte standardně tři až pět položek, dvě pro úzkou vidlici a ne více než šest pro zdokumentovanou potřebu malého shluku. Napište nadpis o dvou až osmi slovech, kotvící texty o třech až dvanácti slovech a volitelné důvody o osmi až dvaadvaceti slovech. Důvody používají jednu větu, aktivní hlas a konkrétní vztah: aplikovat, porovnat, ověřit, definovat, diagnostikovat nebo vidět důkazy.

Každá položka potřebuje v obsahovém modelu odlišný redakční důvod, i když důvod není vykreslen. Zkontrolujte názvy po změně nadpisů cílových stránek. Používejte kanonické interní URL s úvodním a koncovým lomítkem. Odstraňte sledovací parametry, fragmenty, které neidentifikují stabilní sekce, přesměrování a odkazy zpět na aktuální stránku.

Nikdy neumísťujte do tohoto prvku reklamy, biografie autorů, tlačítka pro sledování na sociálních sítích, formuláře newsletterů, tagové mraky, nesouvisející propagace nebo citace zdrojů. Nemíchejte externí čtení s interními dalšími kroky; externí důkazy patří do bloku zdrojů. Nepoužívejte odznaky jako „nejlepší“, „populární“ nebo „doporučeno“, pokud stránka nedefinuje a nepodporuje základ výběru.

Tón by měl být nápomocný a konkrétní, ne naléhavý. Vyhněte se „musíte si přečíst“, „nepropásněte“, umělé vzácnosti a tvrzením, že cílová stránka je komplexní, pokud její rozsah toto slovo nepodporuje. Blok doporučuje cestu; nevytváří důležitost.

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

Pole postTypes ve frontmatter je zdrojem pravdy pro následující vztahy napříč pilíři.

Ne každý kandidát se musí vykreslit na každé stránce. Typ příspěvku definuje způsobilý vztah; editor stránky vybírá cíle, které dávají smysl pro skutečné téma a cestu.

QA kontrolní seznam

• Blok se objeví jednou, za zdroji a před závěrečnou výzvou k akci.
• Stránka obsahuje dva až pět odkazů, nebo zdokumentovaný důvod pro použití šesti.
• Každá položka má zaznamenaný redakční důvod přesahující sdílený štítek, kategorii nebo datum publikace.
• Každý kotvící text předpovídá, co cílová stránka skutečně nabízí, a vyhýbá se výrazům „čtěte dále“, „klikněte sem“ a podobné generické formulaci.
• Sada podporuje kontrakt shluku: paprsek nahoru, pilíř dolů a boční pouze tehdy, když jsou skutečně související.
• Aktuální URL je vyloučena, cíle jsou kanonické a žádný odkaz nespoléhá na přesměrování nebo sledovací parametr.
• Frontmatter souvisejícího obsahu souhlasí s vykreslenými odkazy napříč pilíři.
• Blok zůstává čitelný, procházetelný a úplný bez náhledových obrázků nebo JavaScriptu.
• Navigační oblast má viditelný nadpis a přístupný název; klávesnicový fokus je viditelný.
• Náhledové obrázky existují, přidávají identifikační hodnotu, rezervují rozměry a používají správný alternativní text.
• Důvody přidávají vztah dalšího kroku namísto opakování názvů.
• Zdroje, reklamy, formuláře, sociální odkazy a nesouvisející propagace zůstávají mimo blok.
• Jakákoli strukturovaná data ItemList přesně odpovídají viditelným položkám a pořadí.
• Mobilní vykreslení zobrazuje každý název a důvod bez skrytého horizontálního karuselu.

Recenzent by měl odmítnout jen zdánlivě relevantní odkazy. Každý musí být správným dalším krokem, vyjadřovat skutečnou architektonickou hranu a zůstat srozumitelný v HTML.

FAQ

Šablona akademie vykresluje FAQ záznamy z frontmatter.