Bloky súvisiaceho obsahu: Pravidlá interného prepojovania

Blok súvisiaceho obsahu je krátka, manuálne vybraná sada odkazov umiestnená na konci hlavného tela stránky. Prenesie čitateľa na najužitočnejšiu ďalšiu stránku a zároveň prenáša internú autoritu pozdĺž toho istého odkazu. Každý cieľ musí mať editoriálny dôvod na existenciu; samotné zdieľané značky nestačia.

Vykreslený príklad je zámerne skromný. Jeho nadpis vysvetľuje výber, každý kotviaci text predpovedá cieľ a každý dôvod hovorí čitateľovi, prečo je daná stránka ďalšia. Blok nesúťaží s článkom, ktorý uzatvára.

Prečo na tomto prvku záleží

Dokončenie užitočnej stránky vytvára rozhodovací bod. Čitateľ možno rozumie bezprostrednej téme, ale stále ju potrebuje aplikovať, porovnať možnosti, naučiť sa predpoklad alebo sa pohnúť smerom k produktu. Blok súvisiaceho obsahu znižuje úsilie potrebné na nájdenie tohto ďalšieho kroku. Ponúka malú sadu účelných ciest v momente, keď je čitateľ pripravený vybrať si, namiesto toho, aby ho žiadal vrátiť sa k globálnej navigácii alebo znova vyhľadávať.

Druhou úlohou je architektonická. Interná autorita je dôležitosť a kontextová relevantnosť, ktorú odkazy pomáhajú distribuovať medzi stránkami na rovnakej lokalite. Odkaz vytvára hranu medzi dvoma dokumentmi. Jeho pozícia, kotviaci text a vysvetlenie hovoria vyhľadávacím systémom, čo táto hrana predstavuje: ktorá stránka je širokou autoritou, ktorá pokrýva podtému a ktorá odpovedá na susednú potrebu.

Strojová extrahovateľnosť znamená, že automatizovaný systém dokáže tieto vzťahy z HTML získať bez hádania z rozloženia. Sémantická navigačná oblasť, viditeľný nadpis, bežné prehľadávateľné odkazy, popisné kotviace texty a jedna položka na cieľ odhaľujú čistú sadu výrokov zdroj–vzťah–cieľ. Karusely závislé len na JavaScripte, karty len s obrázkom a generické kotviace texty tieto výroky zatemňujú, aj keď vyzerajú esteticky.

Obe úlohy musia prežiť kontrolu. Blok, ktorý získava kliknutia, ale posiela autoritu na nesúvisiace stránky, poškodzuje obsahový model; správna mapa klastra s irelevantnými odkazmi plytvá rozhodovacím bodom čitateľa.

Kedy ho použiť

Použite tento prvok, keď má stránka dva až päť dôveryhodných ďalších cieľov a vzťah je možné uviesť v jednej vete. Patrí na nadčasový vzdelávací obsah, komerčné vysvetľovače, porovnania, produktové a kategóriové stránky, stránky prípadov použitia a prípadové štúdie, keď iná stránka skutočne posúva rovnakú úlohu alebo rozhodnutie.

Nepridávajte ho len preto, že šablóna má prázdne miesto. Jednoúčelová konverzná stránka s jedným nevyhnutným krokom môže potrebovať iba svoju záverečnú výzvu na akciu. Právne oznámenie, obrazovka účtu, incident podpory alebo krátka pomôcka môžu nemať žiadne zmysluplné editoriálne pokračovanie. Index, ktorého hlavné telo už pozostáva z navigačných kariet, nepotrebuje druhý zoznam, ktorý by ich opakoval.

Časté takmer správne prístupy zahŕňajú:

• Kanál podľa značky odpovedá na otázku „čo zdieľa tento štítok?“, nie „čo by mal čitateľ urobiť ďalej?“ Dva články označené značkou „analytika“ môžu slúžiť rôznym publikám a fázam.
• Nedávne príspevky odmeňujú dátum publikovania, nie relevantciu. Aktuálnosť je užitočná pri objavovaní noviniek, ale nie je to model vzťahu.
• Populárne príspevky optimalizujú pre agregovanú návštevnosť, nie pre aktuálnu otázku.
• Mapa stránky v pätičke podporuje široké objavovanie, nie malú editoriálne vybranú cestu.
• Ovládanie predchádzajúci/ďalší odráža poradie publikovania. Dáva zmysel len vtedy, keď je toto poradie samo osebe zámerným kurzom alebo postupnosťou.
• Inline kontextové odkazy vysvetľujú pojmy alebo podporujú tvrdenia na mieste potreby. Dopĺňajú tento blok, ale nenahrádzajú jeho rozhodovaciu úlohu na konci stránky.

Výber je štandardne manuálny. Ku každému navrhovanému odkazu editor zaznamená dôvod, napríklad „aplikuje metódu“, „definuje predpoklad“, „porovnáva dve možnosti predstavené tu“ alebo „ukazuje dôkaz v praxi.“ Ak je dôvod len „rovnaká značka“, položku odstráňte.

Automatický výber je prijateľný v archívoch správ, kolekciách vytvorených používateľmi alebo inventároch príliš veľkých a nestálych na individuálnu správu. Aj vtedy vyžadujte riadenú množinu kandidátov, vylúčenia aktuálnej URL a expirovaných stránok, aktuálnosť tam, kde záleží na čase, relevantnosť presahujúcu jednu značku, stabilný mechanizmus na rozhodovanie pri zhode a editoriálne prepísanie.

Kam ho umiestniť

Umiestnite blok za celé hlavné telo a za blok zdrojov, ale pred záverečnú výzvu na akciu. Dôvod je postupný: zdroje uzatvárajú dôkazovú povinnosť aktuálnej stránky; súvisiaci obsah ponúka ďalšiu vzdelávaciu alebo hodnotiacu cestu; záverečná výzva na akciu ponúka komerčnú alebo produktovú cestu. Keď stránka nemá blok zdrojov, súvisiaci obsah nasleduje za poslednou vecnou sekciou.

Neumiestňujte druhý blok súvisiaceho obsahu inde na stránke. Neumiestňujte ho vedľa duplicitnej navigácie predchádzajúci/ďalší, hustého mraku značiek alebo inej kolekcie s názvom „Mohlo by sa vám páčiť.“ Stačí jedna jasná oblasť odporúčaní.

Anatómia

Vykreslená legenda:

1. Nadpis sekcie: pomenúva vzťah, napríklad „Aplikujte, čo ste sa naučili“ alebo „Porovnajte ďalšie možnosti.“ Generický názov „Súvisiace“ je prijateľný len vtedy, keď ciele skutočne pokrývajú rôzne akcie.
2. Názov položky: poskytuje popisný kotviaci text a predpovedá primárnu hodnotu cieľovej stránky.
3. Cieľová URL: smeruje na jednu kanonickú, prehľadávateľnú internú URL bez reťazca presmerovaní.
4. Miniatura: voliteľne odlišuje cieľovú stránku, keď obrázok nesie skutočné identifikačné informácie.
5. Jednoriadkový dôvod: voliteľne vysvetľuje, prečo je táto stránka logickým ďalším krokom; dôrazne sa odporúča, keď vzťah nie je zjavný z názvu.
6. Hranica bloku: zoskupuje odkazy ako navigáciu bez toho, aby sa celá karta stala nejednoznačným cieľom kliknutia.

Legenda patrí na stránku, nie do obrázka, aby zostala vybrateľná, preložiteľná a dostupná pre asistenčné technológie.

Príklady dizajnu

Varianty menia informačnú hustotu, nie editoriálnu logiku.

Iba text: predvolený variant, keď sú názvy cieľov dostatočne jasné.

S dôvodmi: predvolený variant pre rôzne fázy cesty. Dôvod pridáva vzťah, nie opakuje názov.

S miniatúrami: vyhradené pre prípady, kde originálne obrázky pomáhajú pri rozpoznávaní. Obrázky potrebujú rozmery a užitočný alternatívny text alebo prázdny alternatívny text, keď názov už cieľ pomenúva.

Krížovo-pilierový: explicitne vyjadruje vzťahy medzi typmi príspevkov, prvkami a obchodnými aplikáciami. Je generovaný z recenzovanej front matter, nie zo značiek.

Parametre

Dve položky sú povolené len vtedy, keď má stránka úzku, dôveryhodnú vetvu. Tri až päť je normálny rozsah: dostatok možností na pokrytie rôznych ďalších potrieb, ale dosť málo na to, aby každý odkaz zostal viditeľný a zámerný. Šesť je tvrdá výnimka pre pilier, ktorý musí sprístupniť kompletný malý klaster. Viac ako šesť sa stáva adresárom, oslabuje editoriálny signál každej hrany a sťažuje skenovanie na mobile.

Vynechaný atribút title môže byť odvodený z prvého nadpisu v tele položky. Neposkytujte oba s rôznym textom. Dôvod môže byť v atribúte pre jednoduchú vetu alebo v tele, keď potrebuje inline dôraz; nesmie sa objaviť dvakrát.

Syntax a príklady kódu

Kanonický názov komponentu je related-content. Vnorená forma ::item{} udržiava polia každej cieľovej stránky pohromade a bráni paralelným poliam, aby sa rozišli.

Prenosná Markdown direktíva

:::related-content{heading="Continue with the playbook" variant="reason"}
::item{title="Write a reliable how-to guide" url="/seo-playbook/post-types/how-to-guide/" reason="Turn the element rules into a complete instructional page."}
::item{title="Structure an ultimate guide" url="/seo-playbook/post-types/ultimate-guide/" reason="Connect this element to a broad pillar and its supporting spokes."}
::item{title="Build a use-case page" url="/seo-playbook/post-types/use-case-page/" reason="Carry educational intent into a specific audience and outcome."}
:::

Hugo shortcode

{{< related-content heading="Continue with the playbook" variant="reason" >}}
  {{< item title="Write a reliable how-to guide" url="/seo-playbook/post-types/how-to-guide/" reason="Turn the element rules into a complete instructional page." />}}
  {{< item title="Structure an ultimate guide" url="/seo-playbook/post-types/ultimate-guide/" reason="Connect this element to a broad pillar and its supporting spokes." />}}
  {{< item title="Build a use-case page" url="/seo-playbook/post-types/use-case-page/" reason="Carry educational intent into a specific audience and outcome." />}}
{{< /related-content >}}

Toto je prenosná cieľová zmluva, nie tvrdenie, že toto úložisko registruje daný shortcode. Živý príklad používa sémantické HTML a nepridáva žiadnu závislosť na rozložení.

WordPress blok alebo shortcode

<!-- wp:amicited/related-content {"heading":"Continue with the playbook","variant":"reason"} -->
[related_item title="Write a reliable how-to guide" url="/seo-playbook/post-types/how-to-guide/" reason="Turn the element rules into a complete instructional page."]
[related_item title="Structure an ultimate guide" url="/seo-playbook/post-types/ultimate-guide/" reason="Connect this element to a broad pillar and its supporting spokes."]
[related_item title="Build a use-case page" url="/seo-playbook/post-types/use-case-page/" reason="Carry educational intent into a specific audience and outcome."]
<!-- /wp:amicited/related-content -->

WordPress by mal používať registrovaný dynamický blok s vnorenými ovládacími prvkami položiek. Forma shortcode je pre systémy, ktoré nevedia ukladať vnorené bloky, a musí byť zaregistrovaná pred publikovaním.

Príklady

Správny: každý odkaz odpovedá na inú ďalšiu potrebu

:::related-content{heading="Put the method into practice" variant="reason"}
::item{title="Run the pre-publish QA checklist" url="/seo-playbook/process/checklists/pre-publish-qa/" reason="Verify links, evidence, accessibility, and page structure before release."}
::item{title="Build a how-to guide" url="/seo-playbook/post-types/how-to-guide/" reason="Apply the element inside a complete instructional format."}
::item{title="Adapt the playbook for SaaS" url="/seo-playbook/business-types/saas/" reason="Translate the shared rules into a product-led content journey."}
:::

Toto funguje, pretože ciele sú odlišné, ale prepojené: overenie, implementácia a obchodná adaptácia. Kotviace texty uvádzajú, čo každá stránka ponúka, a dôvody vysvetľujú vzťah k aktuálnej stránke.

Nesprávny: widget značiek maskovaný ako editoriálny výber

:::related-content{heading="You may also like"}
::item{title="Read more" url="/blog/new-office/"}
::item{title="Click here" url="/features/ai-visibility/"}
::item{title="Latest post" url="/blog/quarterly-roundup/"}
::item{title="SEO" url="/seo-playbook/"}
::item{title="More SEO" url="/blog/old-seo-notes/"}
::item{title="Another article" url="/academy/how-to-export-prompt-data/"}
::item{title="Recommended" url="/case-studies/hz-containers/"}
:::

Príklad zlyháva, aj keď každá URL funguje. Sedem možností presahuje rozsah. Kotviace texty nepredpovedajú cieľ. Ciele miešajú firemné novinky, produkt, archív, akadémiu a prípadovú štúdiu bez uvedených dôvodov. „Latest“ je pravidlo podľa dátumu, „SEO“ je príliš široké a nič nedokazuje, že tieto odkazy slúžia ďalšej úlohe tohto čitateľa.

Zmluva o klastri

Tematický klaster je plánovaná skupina stránok okolo jednej témy. Jeho pilier je široká stránka, ktorá organizuje tému; jeho lúče sú užšie stránky, ktoré odpovedajú na jej časti. Blok súvisiaceho obsahu premieňa tento plán na skutočné HTML odkazy:

• Každý lúč odkazuje na svoj pilier. To hovorí čitateľom, kam patrí úzka odpoveď, a bráni tomu, aby sa lúč stal izolovaným koncovým bodom.
• Pilier odkazuje na každý aktuálny lúč. Keď má klaster viac ako šesť lúčov, použite organizované sekcie v tele piliera, namiesto toho, aby ste celú sadu tlačili do jedného bloku súvisiaceho obsahu.
• Laterálne odkazy prepájajú jeden lúč s druhým len vtedy, keď čitateľ vie uviesť vzťah ďalšieho kroku. Zdieľanie rodiča nie je dostatočné.
• Každá hrana je obojsmerná, keď oba smery pomáhajú čitateľovi. Obrátený kotviaci text a dôvod sa môžu líšiť, pretože cesta je iná.
• Odstránenie, zlúčenie alebo presmerovanie stránky spúšťa kontrolu každej uloženej hrany, ktorá na ňu smeruje.

V rámci tohto playbooku stránka typu príspevku odkazuje na prvky, ktoré vyžaduje, a na obchodné typy, ktoré ju adaptujú. Stránka prvku odkazuje späť na typy príspevkov, ktoré ju používajú. Tieto vzťahy sú generované z recenzovanej front matter podľa pravidiel krížovo-pilierového prepojenia: pole postTypes tejto stránky je zdrojom pre jej odkazy na typy príspevkov, zatiaľ čo zodpovedajúce metadáta typu príspevku poskytujú spätnú hranu. Generovanie sa stará o vykreslenie; editori stále rozhodujú, či vzťah patrí do metadat.

Širšie pravidlá písania prvkov určujú, ako tieto metadáta zostávajú prenosné. Nikdy neopravujte chýbajúci editoriálny vzťah pridaním značky a nádejou, že widget vyberie správne.

Pravidlá pre kotviaci text

Kotviaci text je viditeľné, klikateľné znenie odkazu. Napíšte ho tak, aby čitateľ vedel predpovedať cieľ bez čítania URL. „Vytvorte návod“ je užitočné; „čítajte viac,“ „kliknite sem,“ „dozvedieť sa viac“ a holá URL nie sú.

Obmieňajte kotviace texty prirodzene pri zachovaní témy cieľa. „Vytvorte návod“ a „štruktúrujte inštruktážnu príručku“ fungujú; nesúvisiace synonymá kľúčových slov nie. Nikdy nesľubujte šablónu, kalkulačku, cenu, štúdiu alebo kontrolný zoznam, ktorý cieľová stránka neponúka.

Vnútri bloku by mali byť kotviace texty názvov jedinečné. Ak by dva ciele používali rovnaký názov, pridajte rozlišujúce publikum, metódu alebo výsledok. Udržujte voliteľný dôvod mimo kotviaceho textu, aby klikací cieľ zostal stručný a zoznamy odkazov pre asistenčné technológie zostali užitočné.

Značkovanie schema a prístupnosť

Nie je potrebný žiadny špeciálny typ JSON-LD. JSON-LD je skriptový formát pre štruktúrované dáta a Schema.org je spoločný slovník bežne s ním kódovaný. Odkazy normálne zostávajú súčasťou obklopujúceho Article, TechArticle, Product alebo WebPage. Nevymýšľajte typ schema RelatedContent.

ItemList môže opisovať blok len vtedy, keď je skutočne usporiadaným alebo pomenovaným editoriálnym zoznamom a celo-stránková politika schema to vyžaduje. Ak sa používa, itemListElement musí zodpovedať viditeľnému poradiu položiek, URL a názvom. Nepridávajte skryté ciele alebo umelé hodnotenia. Drobecková navigácia je iný vzťah a nesmie absorbovať tieto odkazy.

Prístupnosť začína orientačným bodom <nav>, teda oblasťou, ktorú asistenčná technológia dokáže identifikovať ako navigáciu. Dajte jej viditeľný nadpis prepojený pomocou aria-labelledby; ARIA je sada atribútov používaná na sprístupnenie názvov a stavov rozhrania, keď samotné natívne HTML potrebuje pomoc. Použite <ul>, pretože poradie normálne nesie žiadne hodnotenie. Zachovajte viditeľný klávesnicový fokus, urobte z názvu primárny odkaz a vyhnite sa vnoreniu interaktívnej karty dovnútra iného odkazu.

Alternatívny text miniatúry nesmie duplikovať prepojený názov. Použite prázdny alternatívny text pre dekoratívnu miniatúru. Keď obrázok prináša odlišnú informáciu, opíšte len túto informáciu. Blok musí zostať kompletný aj bez obrázkov alebo JavaScriptu a nesmie presúvať klávesnicový fokus, keď sa odporúčania obnovujú.

Pravidlá písania

Štandardne používajte tri až päť položiek, dve pre úzku vetvu a maximálne šesť pre zdokumentovanú potrebu malého klastra. Napíšte nadpis o dvoch až ôsmich slovách, kotviace texty názvov o troch až dvanástich slovách a voliteľné dôvody o ôsmich až dvadsiatich dvoch slovách. Dôvody používajú jednu vetu, aktívny hlas a konkrétny vzťah: aplikujte, porovnajte, overte, definujte, diagnostikujte alebo pozrite dôkaz.

Každá položka potrebuje odlišný editoriálny dôvod v obsahovom modeli, aj keď dôvod nie je vykreslený. Skontrolujte názvy po zmene nadpisov cieľových stránok. Používajte kanonické interné URL s úvodným a koncovým lomítkom. Odstráňte sledovacie parametre, fragmenty, ktoré neidentifikujú stabilné sekcie, presmerovania a odkazy späť na aktuálnu stránku.

Nikdy neumiestňujte reklamy, biografie autorov, tlačidlá sociálnych sietí, formuláre newsletterov, mraky značiek, nesúvisiace promo akcie ani citácie zdrojov do tohto prvku. Nemiešajte externé čítanie s internými ďalšími krokmi; externé dôkazy patria do bloku zdrojov. Nepoužívajte odznaky ako „najlepší,“ „populárny“ alebo „odporúčaný,“ pokiaľ stránka nedefinuje a nepodporuje základ výberu.

Tón by mal byť nápomocný a konkrétny, nie naliehavý. Vyhnite sa „musíte si prečítať,“ „nepremeškajte,“ umelej nedostatkovosti a tvrdeniam, že cieľ je komplexný, pokiaľ jeho rozsah toto slovo nepodporuje. Blok odporúča cestu; nevytvára dôležitosť.

Typy príspevkov, ktoré ho používajú

Pole postTypes vo front matter je zdrojom pravdy pre nasledujúce krížovo-pilierové vzťahy.

Nie každý kandidát sa musí vykresliť na každej stránke. Typ príspevku definuje oprávnený vzťah; editor stránky vyberie ciele, ktoré dávajú zmysel pre skutočnú tému a cestu.

Kontrolný zoznam QA

• Blok sa zobrazuje raz, za zdrojmi a pred záverečnou výzvou na akciu.
• Stránka obsahuje dva až päť odkazov, alebo zdokumentovaný dôvod na použitie šiestich.
• Každá položka má zaznamenaný editoriálny dôvod presahujúci zdieľanú značku, kategóriu alebo dátum publikovania.
• Každý kotviaci text predpovedá, čo cieľová stránka skutočne ponúka, a vyhýba sa výrazom „čítajte viac,“ „kliknite sem“ a podobnému generickému jazyku.
• Sada podporuje zmluvu o klastri: lúč nahor, pilier nadol a laterálne len vtedy, keď je skutočne súvisiace.
• Aktuálna URL je vylúčená, ciele sú kanonické a žiadny odkaz sa nespolieha na presmerovanie alebo sledovací parameter.
• Front matter súvisiaceho obsahu súhlasí s vykreslenými krížovo-pilierovými odkazmi.
• Blok zostáva čitateľný, navigovateľný a kompletný bez miniatúr alebo JavaScriptu.
• Navigačná oblasť má viditeľný nadpis a prístupný názov; klávesnicový fokus je viditeľný.
• Miniatúry existujú, pridávajú identifikačnú hodnotu, vyhradzujú rozmery a používajú správny alternatívny text.
• Dôvody pridávajú vzťah ďalšieho kroku namiesto opakovania názvov.
• Zdroje, reklamy, formuláre, sociálne odkazy a nesúvisiace promo akcie zostávajú mimo bloku.
• Akékoľvek štruktúrované dáta ItemList presne zodpovedajú viditeľným položkám a poradiu.
• Mobilné vykreslenie zobrazuje každý názov a dôvod bez skrytého horizontálneho karuselu.

Recenzent by mal zamietnuť iba zdanlivo správne odkazy. Každý z nich musí byť správnym ďalším krokom, vyjadrovať skutočnú architektonickú hranu a zostať jasný v HTML.

FAQ

Šablóna akadémie vykresľuje FAQ záznamy z front matter.