Blocchi di Contenuti Correlati: Regole di Collegamento Interno
Costruisci un blocco di contenuti correlati che guidi i lettori verso la pagina successiva più adatta, rafforzi i cluster di argomenti e dia a ogni collegamento interno uno scopo editoriale.
Un blocco di contenuti correlati è un breve insieme di link selezionati manualmente, posizionato alla fine del corpo principale. Porta il lettore alla pagina successiva più utile e trasporta l’autorità interna attraverso lo stesso collegamento. Ogni destinazione deve avere una ragione editoriale per esistere; i soli tag condivisi non bastano.
L’esempio renderizzato è volutamente modesto. La sua intestazione spiega la scelta, ogni ancora prevede la destinazione e ogni motivo dice al lettore perché quella pagina è la successiva. Il blocco non compete con l’articolo che conclude.
Perché questo elemento è importante
Terminare una pagina utile crea un punto decisionale. Il lettore può comprendere l’argomento immediato ma ha comunque bisogno di applicarlo, confrontare opzioni, apprendere un prerequisito o avvicinarsi a un prodotto. Un blocco di contenuti correlati riduce lo sforzo di trovare quel passo successivo. Offre un piccolo insieme di percorsi mirati nel momento in cui il lettore è pronto a scegliere, invece di chiedergli di tornare alla navigazione globale o cercare di nuovo.
Il secondo compito è architetturale. L’autorità interna è l’importanza e la rilevanza contestuale che i link aiutano a distribuire tra le pagine dello stesso sito. Un link crea un arco tra due documenti. La sua posizione, ancora e spiegazione dicono ai sistemi di recupero cosa rappresenta quell’arco: quale pagina è l’autorità ampia, quale copre un sotto-argomento e quale risponde a un’esigenza adiacente.
L’estraibilità automatica significa che un sistema automatizzato può recuperare quelle relazioni dall’HTML senza doverle indovinare dal layout. Una regione semantica di navigazione, un’intestazione visibile, normali link scansionabili, ancore descrittive e un elemento per destinazione espongono un insieme pulito di dichiarazioni fonte–relazione–destinazione. I carousel solo JavaScript, le schede solo immagini e le ancore generiche oscurano quelle dichiarazioni anche quando sembrano rifiniti.
Entrambi i compiti devono sopravvivere alla revisione. Un blocco che ottiene click ma invia autorità a pagine non correlate danneggia il modello di contenuto; una mappa di cluster corretta con link irrilevanti spreca il punto decisionale del lettore.
Quando usarlo
Usa questo elemento quando la pagina ha da due a cinque destinazioni successive credibili e la relazione può essere espressa in una riga. È adatto per contenuti educativi sempreverdi, guide commerciali, confronti, pagine prodotto e categoria, pagine caso d’uso e casi studio quando un’altra pagina fa avanzare genuinamente lo stesso compito o decisione.
Non aggiungerlo semplicemente perché un template ha spazio vuoto. Una pagina di conversione a scopo unico con un’azione necessaria potrebbe aver bisogno solo della sua call to action finale. Un avviso legale, una schermata account, un incidente di supporto o una breve pagina utilitaria potrebbero non avere una continuità editoriale sensata. Un indice il cui corpo principale consiste già di schede di navigazione non ha bisogno di un secondo elenco che le ripeta.
Gli errori comuni includono:
- Un feed di tag risponde a “cosa condivide questa etichetta?”, non a “cosa dovrebbe fare dopo questo lettore?”. Due articoli taggati “analytics” possono servire pubblici e fasi diverse.
- Post recenti premiano la data di pubblicazione piuttosto che la rilevanza. La freschezza è utile per la scoperta di notizie, ma non è un modello di relazione.
- Post popolari ottimizzano per il traffico aggregato, non per la domanda corrente.
- Una sitemap nel footer supporta una scoperta ampia, non un piccolo percorso scelto editorialmente.
- Un controllo precedente/successivo riflette l’ordine di pubblicazione. Conta solo quando quell’ordine è di per sé un corso o una sequenza deliberata.
- Link contestuali in linea spiegano termini o supportano affermazioni nel punto di bisogno. Completano questo blocco ma non sostituiscono il suo ruolo decisionale di fine pagina.
La selezione è manuale per impostazione predefinita. Per ogni link proposto, l’editore registra una ragione come “applica il metodo”, “definisce il prerequisito”, “confronta le due opzioni introdotte qui” o “mostra prove nella pratica”. Se la ragione è semplicemente “stesso tag”, rimuovi l’elemento.
La selezione automatica è accettabile in archivi di notizie, raccolte generate dagli utenti o inventari troppo grandi e volatili per una cura elemento per elemento. Anche in questo caso, richiedi un insieme di candidati controllato, esclusioni per l’URL corrente e pagine scadute, freschezza dove il tempo conta, rilevanza oltre un singolo tag, un criterio di spareggio stabile e un override editoriale.
Dove posizionarlo
Posiziona il blocco dopo il corpo principale completo e dopo il blocco delle fonti, ma prima della call to action finale. La ragione è sequenziale: le fonti chiudono l’obbligo di prova della pagina corrente; i contenuti correlati offrono il prossimo percorso di apprendimento o valutazione; la call to action finale offre il percorso commerciale o di prodotto. Quando una pagina non ha un blocco fonti, i contenuti correlati seguono l’ultima sezione sostanziale.
| Posizione | Consentito? | Perché | Regola |
|---|---|---|---|
| Tra l’H1 e la risposta diretta | No | La navigazione ritarda la risposta promessa dalla pagina. | Mantieni l’apertura focalizzata sull’orientamento e la risposta primaria. |
| A metà del corpo principale | No | Il blocco sembra concludere l’articolo e può allontanare i lettori prima che l’argomentazione sia completa. | Usa invece un link contestuale in linea. |
| Immediatamente prima delle fonti | No | I lettori potrebbero scambiare le prove di supporto per una lettura successiva opzionale. | Completa prima il registro delle prove. |
| Dopo le fonti | Sì | La pagina ha completato la sua tesi e può aprire il prossimo percorso. | Usa questa come posizione predefinita. |
| Prima della call to action finale | Sì | Le scelte educative rimangono distinte dall’azione commerciale. | Mantieni le due regioni visivamente e semanticamente separate. |
| Accanto a un annuncio, pop-up newsletter o altro carousel di raccomandazioni | No | Scelte concorrenti diluiscono l’attenzione e confondono quali link sono editoriali. | Rimuovi o sposta il modulo concorrente. |
Non posizionare un secondo blocco di contenuti correlati altrove nella pagina. Non affiancarlo a una navigazione precedente/successiva duplicata, a una nuvola di tag densa o a un’altra raccolta intitolata “Potrebbe interessarti anche”. Una sola regione di raccomandazione chiara è sufficiente.
Anatomia
Legenda renderizzata:
- Intestazione della sezione: denomina la relazione, ad esempio “Applica ciò che hai imparato” o “Confronta le prossime opzioni”. Il generico “Correlati” è accettabile solo quando le destinazioni riguardano genuinamente azioni diverse.
- Titolo dell’elemento: fornisce l’ancora descrittiva e prevede il valore primario della destinazione.
- URL di destinazione: risolve a un URL interno canonico e scansionabile senza catena di reindirizzamento.
- Miniatura: distingue opzionalmente una destinazione quando le immagini portano informazioni identificative reali.
- Motivo in una riga: spiega opzionalmente perché questa pagina è il passo logico successivo; è fortemente raccomandato quando la relazione non è ovvia dal titolo.
- Confine del blocco: raggruppa i link come navigazione senza rendere l’intera scheda un bersaglio di click ambiguo.
La legenda appartiene alla pagina piuttosto che all’interno dell’immagine, in modo che rimanga selezionabile, traducibile e disponibile per le tecnologie assistive.
Esempi di design
Le varianti cambiano la densità informativa, non la logica editoriale.
Solo testo: predefinito quando i titoli delle destinazioni rendono chiara la relazione.
Con motivi: predefinito per diverse fasi del percorso. Il motivo aggiunge la relazione invece di ripetere il titolo.
Con miniature: riservato ai casi in cui le immagini originali aiutano il riconoscimento. Le immagini necessitano di dimensioni e testo alternativo utile, o di un testo alternativo vuoto quando il titolo già nomina la destinazione.
Cross-pillar: rende esplicite le relazioni tra tipi di post, elementi e applicazioni aziendali. Viene generato dal frontmatter revisionato, non dai tag.
Parametri
| Nome | Tipo | Obbligatorio | Min/max | Default | Fonte | |
|---|---|---|---|---|---|---|
heading | Stringa semplice | Sì | 2–8 parole; 70 caratteri | Related content | Attributo | |
item | Elemento annidato | Sì | 2–5 elementi; massimo assoluto 6 | Nessuno | Corpo utilizzando voci ::item{} annidate | |
title | Stringa semplice | Sì | 3–12 parole; 90 caratteri | Prima intestazione all’interno dell’elemento quando omesso come attributo | Attributo dell’elemento o prima intestazione | |
url | URL | Sì | Un URL interno canonico | Nessuno | Attributo dell’elemento | |
thumbnail | Percorso risorsa | No | Zero o un’immagine esistente per elemento | Nessuno | Attributo dell’elemento | |
reason | Stringa semplice | No | 8–22 parole; una riga | Nessuno | Attributo dell’elemento o corpo dell’elemento | |
ariaLabel | Stringa semplice | No | 2–10 parole; 80 caratteri | Valore di heading | Attributo | |
variant | Enum | No | text, reason, thumbnail, cross-pillar | text | Attributo |
Sono consentiti solo due elementi quando la pagina ha un bivio ristretto e credibile. Da tre a cinque è la fascia normale: scelta sufficiente per servire diverse esigenze successive, ma abbastanza pochi perché ogni link rimanga visibile e intenzionale. Sei è un’eccezione rigorosa per un pilastro che deve esporre un piccolo cluster completo. Più di sei diventa una directory, indebolisce il segnale editoriale di ogni arco e rende costosa la scansione mobile.
Un attributo titolo omesso può essere derivato dalla prima intestazione nel corpo dell’elemento. Non fornire entrambi con testo diverso. Un motivo può risiedere nell’attributo per una frase semplice o nel corpo quando necessita di enfasi in linea; non deve apparire due volte.
Sintassi ed esempi di codice
Il nome canonico del componente è related-content. La forma annidata ::item{} mantiene insieme i campi di ogni destinazione e impedisce agli array paralleli di sfasarsi.
Direttiva Markdown portabile
:::related-content{heading="Continua con il playbook" variant="reason"}
::item{title="Scrivi una guida how-to affidabile" url="/seo-playbook/post-types/how-to-guide/" reason="Trasforma le regole dell'elemento in una pagina didattica completa."}
::item{title="Struttura una guida definitiva" url="/seo-playbook/post-types/ultimate-guide/" reason="Collega questo elemento a un pilastro ampio e ai suoi raggi di supporto."}
::item{title="Crea una pagina caso d'uso" url="/seo-playbook/post-types/use-case-page/" reason="Porta l'intento educativo in un pubblico e risultato specifici."}
:::
Shortcode Hugo
{{< related-content heading="Continua con il playbook" variant="reason" >}}
{{< item title="Scrivi una guida how-to affidabile" url="/seo-playbook/post-types/how-to-guide/" reason="Trasforma le regole dell'elemento in una pagina didattica completa." />}}
{{< item title="Struttura una guida definitiva" url="/seo-playbook/post-types/ultimate-guide/" reason="Collega questo elemento a un pilastro ampio e ai suoi raggi di supporto." />}}
{{< item title="Crea una pagina caso d'uso" url="/seo-playbook/post-types/use-case-page/" reason="Porta l'intento educativo in un pubblico e risultato specifici." />}}
{{< /related-content >}}
Questo è il contratto di destinazione portabile, non un’affermazione che questo repository registri lo shortcode. L’esempio reale utilizza HTML semantico e non aggiunge dipendenze di layout.
Blocco o shortcode WordPress
<!-- wp:amicited/related-content {"heading":"Continua con il playbook","variant":"reason"} -->
[related_item title="Scrivi una guida how-to affidabile" url="/seo-playbook/post-types/how-to-guide/" reason="Trasforma le regole dell'elemento in una pagina didattica completa."]
[related_item title="Struttura una guida definitiva" url="/seo-playbook/post-types/ultimate-guide/" reason="Collega questo elemento a un pilastro ampio e ai suoi raggi di supporto."]
[related_item title="Crea una pagina caso d'uso" url="/seo-playbook/post-types/use-case-page/" reason="Porta l'intento educativo in un pubblico e risultato specifici."]
<!-- /wp:amicited/related-content -->
WordPress dovrebbe utilizzare un blocco dinamico registrato con controlli annidati per gli elementi. La forma shortcode è per sistemi che non possono memorizzare blocchi annidati e deve essere registrata prima della pubblicazione.
Esempi
Buono: ogni link risponde a una diversa esigenza successiva
:::related-content{heading="Metti in pratica il metodo" variant="reason"}
::item{title="Esegui la checklist QA pre-pubblicazione" url="/seo-playbook/process/checklists/pre-publish-qa/" reason="Verifica link, prove, accessibilità e struttura della pagina prima del rilascio."}
::item{title="Crea una guida how-to" url="/seo-playbook/post-types/how-to-guide/" reason="Applica l'elemento all'interno di un formato didattico completo."}
::item{title="Adatta il playbook per SaaS" url="/seo-playbook/business-types/saas/" reason="Traduci le regole condivise in un percorso di contenuti guidato dal prodotto."}
:::
Questo funziona perché le destinazioni sono distinte ma collegate: verifica, implementazione e adattamento aziendale. Le ancore dichiarano cosa offre ogni pagina e i motivi spiegano la relazione con la pagina corrente.
Cattivo: il widget per tag si spaccia per selezione editoriale
:::related-content{heading="Potrebbe interessarti anche"}
::item{title="Leggi altro" url="/blog/new-office/"}
::item{title="Clicca qui" url="/features/ai-visibility/"}
::item{title="Ultimo post" url="/blog/quarterly-roundup/"}
::item{title="SEO" url="/seo-playbook/"}
::item{title="Altro SEO" url="/blog/old-seo-notes/"}
::item{title="Un altro articolo" url="/academy/how-to-export-prompt-data/"}
::item{title="Consigliato" url="/case-studies/hz-containers/"}
:::
L’esempio fallisce anche se ogni URL è valido. Sette scelte superano la fascia. Le ancore non prevedono la destinazione. Le destinazioni mescolano notizie aziendali, prodotto, archivio, academy e caso studio senza motivi dichiarati. “Ultimo” è una regola basata sulla data, “SEO” è troppo ampio e nulla prova che i link servano il compito successivo di questo lettore.
Il contratto del cluster
Un cluster di argomenti è un gruppo pianificato di pagine attorno a un soggetto. Il suo pilastro è la pagina ampia che organizza l’argomento; i suoi raggi sono pagine più specifiche che ne rispondono a parti. Il blocco di contenuti correlati trasforma quel piano in effettivi link HTML:
- Ogni raggio collega verso l’alto al suo pilastro. Questo dice ai lettori dove appartiene la risposta specifica e impedisce al raggio di diventare un punto finale isolato.
- Il pilastro collega verso il basso a ogni raggio corrente. Quando il cluster ha più di sei raggi, usa sezioni organizzate nel corpo del pilastro piuttosto che forzare l’insieme completo in un singolo blocco di contenuti correlati.
- I link laterali collegano un raggio a un altro solo quando un lettore può esprimere la relazione di passo successivo. Condividere un genitore non è sufficiente.
- Ogni arco è bidirezionale quando entrambe le direzioni aiutano un lettore. L’ancora e il motivo inversi possono differire perché il percorso è diverso.
- Rimuovere, unire o reindirizzare una pagina attiva una revisione di ogni arco memorizzato che punta a essa.
All’interno di questo playbook, una pagina tipo di post collega agli elementi che richiede e ai tipi di business che la adattano. Una pagina elemento collega di nuovo ai tipi di post che la utilizzano. Quelle relazioni sono generate dal frontmatter revisionato secondo le regole cross-pillar: l’array postTypes di questa pagina è la fonte per i suoi link ai tipi di post, mentre i metadati del tipo di post corrispondente forniscono l’arco di ritorno. La generazione gestisce il rendering; gli editori decidono ancora se la relazione appartiene ai metadati.
Le più ampie regole di scrittura degli elementi governano come quei metadati rimangano portabili. Non riparare mai una relazione editoriale mancante aggiungendo un tag e sperando che un widget scelga correttamente.
Regole per il testo ancora
Il testo ancora è la formulazione visibile e cliccabile di un link. Scrivilo in modo che un lettore possa prevedere la destinazione senza leggere l’URL. “Crea una guida how-to” è utile; “leggi altro”, “clicca qui”, “scopri di più” e un URL nudo non lo sono.
Varia le ancore in modo naturale preservando il soggetto della destinazione. “Crea una guida how-to” e “struttura una guida didattica” funzionano; sinonimi di parole chiave non correlati no. Non promettere mai un template, calcolatrice, prezzo, studio o checklist che la destinazione non possiede.
All’interno del blocco, le ancore dei titoli dovrebbero essere uniche. Se due destinazioni userebbero lo stesso titolo, aggiungi il pubblico, il metodo o il risultato distintivo. Mantieni il motivo opzionale fuori dall’ancora in modo che il bersaglio del click rimanga conciso e gli elenchi di link delle tecnologie assistive rimangano utili.
Markup schema e accessibilità
Nessun tipo JSON-LD speciale è richiesto. JSON-LD è un formato basato su script per dati strutturati, e Schema.org è il vocabolario condiviso comunemente codificato con esso. I link normalmente rimangono parte dell’Article, TechArticle, Product o WebPage che li contiene. Non inventare un tipo schema RelatedContent.
Un ItemList può descrivere il blocco solo quando è genuinamente un elenco editoriale ordinato o nominato e la politica di schema a livello di sito lo richiede. Se utilizzato, itemListElement deve corrispondere all’ordine visibile degli elementi, agli URL e ai nomi. Non aggiungere destinazioni nascoste o valutazioni sintetiche. Un breadcrumb è una relazione diversa e non deve assorbire questi link.
L’accessibilità inizia con un landmark <nav>, ovvero una regione che le tecnologie assistive possono identificare come navigazione. Forniscile un’intestazione visibile collegata tramite aria-labelledby; ARIA è l’insieme di attributi usati per esporre nomi e stati dell’interfaccia quando l’HTML nativo da solo ha bisogno di aiuto. Usa un <ul> perché l’ordine normalmente non comporta una classificazione. Preserva il focus visibile della tastiera, rendi il titolo il link principale ed evita di annidare una scheda interattiva all’interno di un altro link.
Il testo alternativo della miniatura non deve duplicare il titolo collegato. Usa testo alternativo vuoto per una miniatura decorativa. Quando l’immagine contribuisce con informazioni distinte, descrivi solo quelle informazioni. Il blocco deve rimanere completo con immagini o JavaScript disabilitati e non deve spostare il focus della tastiera quando le raccomandazioni si aggiornano.
Regole di scrittura
Usa da tre a cinque elementi per impostazione predefinita, due per un bivio ristretto e non più di sei per un’esigenza documentata di piccolo cluster. Scrivi un’intestazione da due a otto parole, ancore titolo da tre a dodici parole e motivi opzionali da otto a ventidue parole. I motivi usano una frase, voce attiva e una relazione concreta: applica, confronta, verifica, definisci, diagnostica o vedi le prove.
Ogni elemento necessita di una ragione editoriale distinta nel modello di contenuto anche quando la ragione non viene renderizzata. Rivedi i titoli dopo che le intestazioni delle destinazioni cambiano. Usa URL interni canonici con barre iniziali e finali. Rimuovi parametri di tracciamento, frammenti che non identificano sezioni stabili, reindirizzamenti e link che tornano alla pagina corrente.
Non inserire mai pubblicità, biografie degli autori, pulsanti di follow social, moduli newsletter, nuvole di tag, promozioni non correlate o citazioni delle fonti all’interno di questo elemento. Non mescolare letture esterne con passi successivi interni; le prove esterne appartengono al blocco delle fonti. Non usare badge come “migliore”, “popolare” o “consigliato” a meno che la pagina non definisca e supporti la base di selezione.
Il tono dovrebbe essere utile e specifico, non urgente. Evita “da leggere assolutamente”, “da non perdere”, scarsità artificiale e affermazioni che la destinazione sia completa a meno che la sua portata non supporti quella parola. Il blocco raccomanda un percorso; non crea importanza.
Tipi di post che lo utilizzano
L’array postTypes nel frontmatter è la fonte di verità per le seguenti relazioni cross-pillar.
| Tipo di post | Dove appare il blocco | Enfasi della selezione |
|---|---|---|
| Guide definitive | Dopo le fonti, prima della CTA finale | Collega a raggi di alto valore e al percorso applicativo più utile. |
| Guide how-to | Dopo risoluzione problemi e fonti | Offri pagine di prerequisiti, procedure avanzate o verifica. |
| Guide a elenco | Dopo metodologia, elenco, conclusione e fonti | Continua per pubblico, categoria o esigenza di confronto invece di ripetere gli elementi elencati. |
| Confronti A-versus-B | Dopo verdetto e fonti | Collega a dettaglio prodotto, alternative o una decisione di categoria più ampia. |
| Pagine Best-X-for-Y | Dopo metodo di selezione, raccomandazioni e fonti | Offri confronti più approfonditi o guide specifiche per caso d’uso. |
| Pagine di alternative | Dopo raccomandazioni e fonti | Collega a confronti diretti, criteri di categoria o dettaglio prodotto pertinente. |
| Termini del glossario | Dopo esempi e fonti | Collega verso l’alto al pilastro e verso l’esterno solo ai concetti necessari successivamente. |
| Pagine What-is | Dopo applicazioni, limitazioni e fonti | Passa dalla comprensione all’implementazione o valutazione. |
| Pagine prodotto | Dopo prove e specifiche, prima della CTA primaria | Collega a casi d’uso, contesto di categoria e prove credibili dei clienti. |
| Pagine categoria | Dopo l’inventario completo della categoria e le indicazioni | Collega a prodotti, confronti o formazione sulla selezione senza duplicare i filtri. |
| Pagine caso d’uso | Dopo flusso di lavoro e prove, prima della CTA di conversione | Collega a capacità di supporto, pagine prodotto e prove pertinenti. |
| Casi studio | Dopo risultati, metodologia e fonti | Collega al caso d’uso dimostrato, alla capacità o a un caso comparabile. |
Non tutti i candidati devono essere renderizzati su ogni pagina. Il tipo di post definisce la relazione ammissibile; l’editore della pagina seleziona le destinazioni che hanno senso per l’argomento e il percorso effettivi.
Checklist QA
- Il blocco appare una volta sola, dopo le fonti e prima della call to action finale.
- La pagina contiene da due a cinque link, o una ragione documentata per usarne sei.
- Ogni elemento ha una ragione editoriale registrata oltre a un tag, categoria o data di pubblicazione condivisi.
- Ogni ancora predice cosa la destinazione offre effettivamente ed evita “leggi altro”, “clicca qui” e linguaggio generico simile.
- L’insieme supporta il contratto del cluster: raggio verso l’alto, pilastro verso il basso e laterale solo quando genuinamente correlato.
- L’URL corrente è escluso, le destinazioni sono canoniche e nessun link si basa su un reindirizzamento o parametro di tracciamento.
- Il frontmatter dei contenuti correlati concorda con i link cross-pillar renderizzati.
- Il blocco rimane leggibile, navigabile e completo senza miniature o JavaScript.
- La regione di navigazione ha un’intestazione visibile e un nome accessibile; il focus della tastiera è visibile.
- Le miniature esistono, aggiungono valore identificativo, riservano dimensioni e utilizzano testo alternativo corretto.
- I motivi aggiungono una relazione di passo successivo invece di ripetere i titoli.
- Fonti, annunci, moduli, link social e promozioni non correlate rimangono fuori dal blocco.
- Qualsiasi dato strutturato
ItemListcorrisponde esattamente agli elementi e all’ordine visibili. - Il rendering mobile espone ogni titolo e motivo senza un carousel orizzontale nascosto.
Un revisore dovrebbe respingere link meramente plausibili. Ognuno deve essere il giusto passo successivo, esprimere un reale arco architetturale e rimanere chiaro in HTML.
FAQ
Il template academy renderizza le voci FAQ dal frontmatter.
Altri tutorial in questa sezione
Pronto a metterlo in pratica?
Verifica gratuita · Prova di 7 giorni · senza carta di credito