Imagebox: Regole ed Esempi per i Riquadri Immagine

Un imagebox abbina un’immagine a una spiegazione mirata in modo che i lettori le percepiscano come un’unica unità editoriale. L’immagine può fornire prove che il testo interpreta, oppure può illustrare un’idea che il testo spiega completamente. L’autore deve dichiarare quale funzione svolge, perché questa scelta controlla la copia, il testo alternativo, la didascalia, i dati strutturati e se l’elemento funziona anche senza vista.

Questa è la variante contenuto-immagine: la data e lo stato visibili sono prove, mentre il testo adiacente interpreta la loro relazione. Se l’immagine fosse semplicemente un calendario decorativo, il testo dovrebbe sostenere autonomamente l’intero punto sull’aggiornamento e l’immagine utilizzerebbe un testo alternativo vuoto.

Perché questo elemento è importante

I lettori non associano automaticamente un’immagine e un paragrafo distante come un’unica idea. Quando un’immagine appare senza una relazione testuale esplicita, devono decidere cosa esaminare, perché è importante e se supporta l’affermazione circostante. Un imagebox riduce questa incertezza collocando un elemento visivo e una spiegazione all’interno di un confine chiaro. Il titolo indica il punto; l’immagine lo mostra; il testo dice al lettore cosa notare o comprendere.

Il beneficio psicologico è l’attenzione congiunta: il design dirige l’attenzione verso un oggetto visivo mentre il testo ne stabilisce la rilevanza. Un ritaglio di grafico potrebbe suggerire un aumento, una volatilità o un limite temporale; la spiegazione adiacente seleziona la lettura pertinente.

L’estraibilità automatica è la capacità del software di isolare un’unità di contenuto senza perdere la relazione tra le sue parti. Un imagebox semantico espone in un unico contenitore un’immagine, una descrizione accessibile, una didascalia, un’intestazione, una spiegazione e il ruolo dichiarato dell’immagine. Il testo deve comunque contenere l’affermazione: la visione artificiale non deve essere l’unico mezzo per ottenere un numero, un’istruzione, un limite o una conclusione.

Le regole di scrittura degli elementi disciplinano la sintassi condivisa delle direttive, il mapping del corpo, i percorsi e la precedenza. Questa pagina ha precedenza dove definisce la distinzione specifica dell’imagebox tra contenuto e illustrazione, i suoi campi consentiti e il limite di una sola immagine.

Quando utilizzarlo

Utilizza un imagebox quando un’immagine e una spiegazione hanno una relazione diretta e necessaria e nessuna delle due merita una sezione autonoma completa. Gli usi appropriati includono un ritaglio mirato dell’interfaccia abbinato a un’interpretazione, un dettaglio del prodotto abbinato a una spiegazione del perché influisce sulla compatibilità, una foto di processo abbinata a una regola di controllo qualità, o una semplice illustrazione concettuale abbinata a una spiegazione concisa.

Decidi innanzitutto se l’immagine è di contenuto o illustrativa:

• Immagine di contenuto: il lettore deve esaminare l’immagine per verificare un’affermazione, identificare una caratteristica, confrontare uno stato o comprendere un dato visivo. Il testo indica il dettaglio rilevante e ne spiega il significato. Il testo alternativo è significativo ed è normalmente presente una didascalia.
• Immagine illustrativa: l’immagine rinforza tono, memoria o comprensione, ma il testo adiacente fornisce l’affermazione completa. Rimuovere l’immagine rende il blocco meno coinvolgente, non meno accurato. Il testo alternativo è vuoto a meno che l’illustrazione stessa non comunichi informazioni aggiuntive.

Utilizza il test di rimozione. Se una richiesta di immagine fallita rimuove prove o rende la spiegazione incompleta, dichiara role=content. Se rimuove solo un rinforzo visivo, dichiara role=illustration.

I casi limite sono comuni:

• Utilizza un’immagine autonoma quando il supporto visivo necessita dell’intera larghezza di lettura e il testo la identifica soltanto.
• Utilizza uno screenshot annotato quando i lettori devono individuare più aree dell’interfaccia.
• Utilizza una tabella per criteri di confronto ripetuti, un diagramma per un sistema o una sequenza, e una galleria per immagini simili.
• Utilizza la prosa ordinaria quando il supporto visivo si limita a ripetere una frase.

Non utilizzare un imagebox per far sembrare progettata una sezione debole. Una fotografia generica di persone che indicano un computer portatile non spiega “collaborazione”, e un robot generico non rende più concreta un’affermazione sull’intelligenza artificiale. Se l’immagine potesse essere sostituita con un’immagine non correlata senza modificare il testo, l’abbinamento non ha un contratto editoriale.

Dove posizionarlo

Posiziona l’imagebox immediatamente dopo il paragrafo che introduce l’affermazione o il concetto che sviluppa. In una procedura, posizionalo dopo l’azione e prima della verifica del successo, in modo che la prova visiva non interrompa l’istruzione.

Può essere posizionato direttamente sotto un H2 solo quando il suo titolo interno è più specifico. Mantieni una citazione o una qualifica accanto all’affermazione che delimita; non inserire mai l’imagebox tra di esse.

Non deve essere posizionato direttamente accanto a un altro imagebox, galleria, figura a larghezza intera, video, tabella o infobox a due colonne. Inserisci interpretazione tra contenitori visivi, combina elementi realmente pari o crea sottosezioni separate.

Non posizionarlo all’interno di un elenco puntato, un passaggio, un callout, una cella di tabella, un accordion o una scheda cliccabile. Non inserire un invito all’azione all’interno del blocco o tra la sua immagine e la spiegazione.

Su desktop, l’immagine può apparire prima o dopo il testo. Su mobile, preserva un ordine prevedibile per sorgente, tastiera e lettore schermo; non affidarti a un riordinamento CSS contrastante.

Anatomia

L’anatomia è definita dal significato piuttosto che da colore, ombra o larghezza delle colonne.

1. Contenitore: Raggruppa esattamente una figura e una spiegazione come un’unica unità editoriale.
2. Immagine: Mostra prove o fornisce illustrazione in base al ruolo dichiarato.
3. Testo alternativo: Comunica lo scopo visivo rilevante per un’immagine di contenuto; è vuoto per un’illustrazione decorativa ridondante.
4. Didascalia: Identifica ciò che mostra un’immagine di contenuto e fornisce contesto essenziale come stato, data o scala.
5. Titolo: Esprime l’intuizione o l’argomento, non il nome del file o un’etichetta generica come “Esempio”.
6. Spiegazione: Dice al lettore cosa notare, perché è importante e ogni limite all’interpretazione.
7. Crediti: Indica il creatore o la fonte quando diritti, provenienza o politica editoriale lo richiedono.
8. Ordine di lettura: Preserva una relazione coerente tra figura e testo quando due colonne si riducono a una.

La spiegazione deve riferirsi direttamente all’argomento anziché utilizzare coordinate come “l’immagine a sinistra”. La posizione cambia tra punti di interruzione, traduzioni e syndication. “Lo stato obsoleto e la data di aggiornamento identificano il target della revisione” rimane vero ovunque.

Esempi di design

Il sistema di design supporta quattro combinazioni di ruolo e posizione. Nessuna modifica i requisiti di contenuto.

Immagine di contenuto, immagine all’inizio

Utilizza questa impostazione predefinita quando i lettori dovrebbero esaminare le prove prima dell’interpretazione.

Immagine di contenuto, immagine alla fine

Utilizza questa quando la spiegazione deve stabilire una lente prima delle prove.

Illustrazione, immagine all’inizio

Utilizza questa quando un’immagine concettuale migliora il riconoscimento mentre il testo veicola il significato completo.

Illustrazione, immagine alla fine

Utilizza questa quando la spiegazione è primaria e l’illustrazione funge da chiusura visiva.

Comportamento su viewport stretto

Ogni variante diventa a una colonna senza scorrimento orizzontale o ritagli che alterano il significato. La didascalia rimane associata alla sua figura.

Parametri

Il contratto di contenuto separa il significato editoriale dalla presentazione. Rapporti di larghezza, spaziature, bordi, sfondi, raggio, ombre e punti di interruzione appartengono al renderer.

Pubblica src solo dopo che l’asset esiste. Un’acquisizione in sospeso utilizza un commento screenshot e screenshotsPending = true. role non ha un valore predefinito perché trattare silenziosamente le prove come decorazione crea un problema di accessibilità.

La prima intestazione del corpo diventa title; tutto ciò che segue diventa content. Il corpo consente paragrafi, enfasi, codice inline e un collegamento contestuale. Esclude elenchi, intestazioni annidate, tabelle, media, pulsanti, moduli, citazioni, accordion e componenti.

Sintassi ed esempi di codice

Tutte e tre le notazioni preservano lo stesso ruolo, immagine, titolo, spiegazione, didascalia, crediti e ordine di lettura. Si tratta di contratti di adattamento portabili; non implicano che esista già uno shortcode o un blocco locale non registrato.

Direttiva Markdown portabile

:::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.
:::

Il percorso di esempio dimostra solo la sintassi. La validazione in produzione deve rifiutarlo fino a quando quell’asset non esiste.

Shortcode Hugo

{{< 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 >}}

L’adattatore utilizza solo parametri nominati. Fino alla registrazione, utilizza un <figure> semantico seguito da prosa. L’adattatore convalida l’asset e preserva il mapping del corpo della direttiva.

Blocco WordPress

<!-- 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 dovrebbe esporre un campo Media e un’area di testo limitata. Se non disponibile, utilizza i blocchi nativi Immagine, Intestazione e Paragrafo; preserva il significato anche senza layout affiancato.

Esempi

Esempio corretto: l’immagine è una prova

Questo funziona perché l’immagine dimostra due dettagli fisici e la copia spiega la loro conseguenza operativa. Il titolo esprime l’intuizione, la didascalia identifica le prove visibili e la spiegazione rimane specifica senza tentare di inventariare l’intera fotografia.

Esempio errato: decorazione generica presentata come prova

Lavora in modo più intelligente con dati chiari
Immagine: una persona generica che sorride davanti a un computer portatile affiancato da grafici colorati.
La nostra piattaforma innovativa trasforma i dati in intuizioni attuabili, così ogni team può sbloccare decisioni migliori e ottenere di più.

Questo fallisce perché nessuna delle due metà fornisce informazioni verificabili. L’immagine potrebbe pubblicizzare qualsiasi prodotto software, mentre la copia contiene risultati generici senza un meccanismo, un dettaglio dell’interfaccia, un vincolo o un esempio. L’abbinamento crea risalto visivo ma nessun significato che un lettore o una macchina possa estrarre. Sostituiscilo con uno stato del prodotto mirato e una spiegazione di una decisione che supporta, oppure rimuovi l’imagebox e scrivi l’affermazione come prosa ordinaria con prove.

Marcatura Schema e accessibilità

Un imagebox non ha un tipo Schema.org dedicato. Il suo testo rimane parte dell’entità della pagina che lo contiene. Un’immagine di contenuto può essere un ImageObject quando ha un contentUrl stabile, una didascalia accurata, dimensioni e crediti o metadati di licenza richiesti. Le illustrazioni decorative non necessitano di un’entità separata.

Lo schema a livello di pagina può fare riferimento alla stessa immagine rappresentativa. Una foto di dettaglio del prodotto può alimentare la proprietà image del prodotto visibile, ma un ritaglio di grafico non diventa Dataset e uno screenshot non diventa SoftwareApplication.

Utilizza un <figure> e un <figcaption> più un’area esplicativa etichettata. Imposta width e height intrinseci; l’output reattivo non deve scorrere orizzontalmente né ritagliare il dettaglio indicato.

Il testo alternativo indica l’oggetto rilevante, lo stato e il dettaglio decisivo di un’immagine di contenuto. Non iniziare con “immagine di”, non duplicare la didascalia e non inserire parole chiave. Le illustrazioni ridondanti utilizzano alt=""; omettere l’attributo potrebbe esporre il nome del file.

Non affidarti esclusivamente a posizione, colore o pixel. Ripeti nel testo numeri, etichette, avvertenze e conclusioni decisive. Mantieni i collegamenti raggiungibili tramite tastiera, non trasformare mai l’intero riquadro in un unico collegamento, preserva l’ordine della sorgente e verifica con zoom al 200%.

Regole di scrittura

Scrivi la spiegazione prima di selezionare l’immagine, poi scegli il ritaglio più stretto che preservi il contesto necessario.

• Scrivi un titolo di 3–10 parole che esprima l’intuizione, l’argomento o la relazione. Evita “Immagine”, “Panoramica”, “Scopri di più” e “Vedilo in azione”.
• Mantieni la copia esplicativa tra 40 e 140 parole in uno o due paragrafi. L’elemento supporta un punto, non un mini-articolo.
• Mantieni le didascalie tra 5 e 25 parole. Identifica ciò che viene mostrato e il contesto necessario per interpretarlo; inserisci il ragionamento nel corpo.
• Utilizza 40–180 caratteri per un testo alternativo significativo, con 250 come massimo assoluto. Preferisci l’accuratezza al riempimento dell’intervallo.
• Includi esattamente un’immagine e non più di un collegamento testuale contestuale. Collegati solo quando una destinazione approfondisce materialmente la spiegazione.
• Utilizza una voce e un tempo verbale uniformi tra titolo, didascalia e corpo. Preferisci nomi e verbi concreti rispetto ad aggettivi promozionali.
• Indica il limite accanto all’interpretazione quando l’immagine mostra un solo stato, data, ritaglio, dispositivo o esempio.

Non inserire mai all’interno un elenco, tabella, testimonianza, prezzo, modulo, media, download, pulsante, istruzione multi-passaggio, disclaimer o invito all’azione. Non utilizzare due immagini, incorporare copia essenziale in pixel, esporre dati del cliente o pubblicare opere con diritti sconosciuti.

Evita di scrivere “come puoi vedere”. Un lettore potrebbe non vedere l’immagine, e anche un lettore vedente ha bisogno di sapere quale osservazione conta. Dichiaralo direttamente: “La linguetta di blocco è a filo quando il connettore è completamente inserito.”

Tipi di post che lo utilizzano

Le righe seguenti sono guidate dal frontmatter postTypes. “Utilizzo” descrive un ruolo appropriato, non l’obbligo di inserire un imagebox in ogni pagina.

Checklist QA

Prima della pubblicazione, verifica l’elemento completo:

• L’immagine e la spiegazione costituiscono un unico punto e appartengono a un’unica unità editoriale.
• role è esplicitamente content o illustration, scelto con il test di rimozione.
• Il file sorgente esiste, è approvato e non utilizza dati privati, diritti sconosciuti o asset placeholder.
• Il titolo esprime l’intuizione in 3–10 parole e il corpo la spiega in 40–140 parole.
• Un’immagine di contenuto ha un testo alternativo significativo e una didascalia concisa; un’illustrazione ridondante utilizza testo alt vuoto.
• Il testo riporta ogni numero, etichetta, istruzione, avvertenza e conclusione decisiva che non può dipendere dalla vista.
• La didascalia identifica l’immagine senza duplicare il corpo o il testo alternativo.
• Ogni eventuale collegamento a creatore, fonte, licenza o credito richiesto è accurato e visibile.
• Il blocco contiene un’immagine, una spiegazione e al massimo un collegamento testuale contestuale.
• Non contiene elenchi annidati, tabelle, media, pulsanti, moduli, inviti all’azione o schede interattive.
• Non sostituisce uno screenshot annotato, un confronto, un diagramma, una galleria o una figura a larghezza intera più adatti.
• I layout desktop e mobile preservano l’ordine semantico della sorgente, l’associazione della didascalia e l’ordine da tastiera.
• Il ritaglio significativo sopravvive al ridimensionamento reattivo, allo zoom al 200% e al fallimento del caricamento dell’immagine.
• Larghezza e altezza riservano spazio, mentre il caricamento lazy non ritarda un’immagine above-the-fold.
• I dati strutturati, se emessi, corrispondono al contenuto visibile e non descrivono decorazioni come entità separate.
• Le mappature Markdown portabile, Hugo e WordPress mantengono lo stesso ruolo, campi e significato.

FAQ

Il modello academy mostra le cinque domande revisionate memorizzate nel frontmatter [[faq]] di questa pagina. Riguardano il test contenuto-versus-illustrazione, il testo alternativo decorativo, l’ambito descrittivo, gli inviti all’azione e lo schema ImageObject.

Un imagebox ha successo quando il lettore può rispondere immediatamente a due domande: “Cosa contribuisce questa immagine?” e “Perché quel contributo è importante qui?” Se una delle due risposte è vaga, rafforza la relazione o rimuovi il riquadro.