Come costruire l'indice di un blog

Un indice di blog è una lista di articoli con data, autore, argomento e tempo di lettura, costruita da un array di dati. Non richiede un CMS: richiede campi stabili e un ordinamento.

I campi minimi di una voce

Cinque campi coprono una lista e una scheda articolo. Se ne aggiungi altri, aggiungili dopo aver reso obbligatori questi.

• Slug: l'identificatore stabile; il titolo può cambiare, lo slug no.
• Titolo e sommario: due testi distinti, non lo stesso testo tagliato.
• Data ISO e autore: un solo formato, con il fuso orario dichiarato.
• Argomento: una sola etichetta, presa da una lista chiusa.
• Tempo di lettura: calcolato dalle parole, non scritto a mano.

Il comando

L'API del catalogo restituisce i blocchi blog in JSON, con licenza e dipendenze per voce.

curl "https://ui.eneawork.it/api/blocks/category/blog?limit=10"

La stessa forma serve per l'indice: una lista ordinata per data, con un limite e un cursore. Se il limite non è nella query, la pagina cresce finché il browser regge.

Un esempio concreto: la lista

type Post = { slug: string; title: string; publishedAt: string; topic: string; minutes: number };

export function PostList({ posts }: { posts: Post[] }) {
  return (
    
      {posts.map((post) => (
        
          {post.title}
          {post.publishedAt.slice(0, 10)}
          {post.topic} · {post.minutes} min
        
      ))}
    
  );
}

La chiave è lo slug, non l'indice dell'array: se filtri o riordini, React riusa il nodo giusto. time con dateTime in formato ISO rende la data leggibile a un crawler, e i minuti arrivano già calcolati dal file, non dal render. La lista resta senza stato: cambia l'array, cambia il markup, e non c'è nessun valore da sincronizzare.

Il 1 novembre 2026 node scripts/validate-blog-quality.js conta 538 articoli indicizzati su questo sito. A dodici voci per pagina servono 45 pagine: la divisione è aritmetica, non una stima, e spiega perché il numero di pagina deve stare nell'URL invece che nello stato del componente.

Tre record da guardare

Il blocco blogs di Cnippet, il blog7 di Shadcnblocks e la categoria blog mostrano tre densità diverse: elenco compatto, griglia con immagine, lista con autore.

Ordinamento, paginazione, stato vuoto

Tre decisioni da prendere prima di scrivere il componente: l'ordine (data di pubblicazione), la paginazione (numero fisso per pagina) e lo stato vuoto (un messaggio, non una griglia vuota).

La limitazione

Otto blocchi da due fonti dichiarano la licenza come see source: il catalogo non può dirti se puoi usarli in un prodotto commerciale. E nessuno degli otto risolve la paginazione: quella la scrivi tu.

La regola di decisione

Una sola data decide l'ordine: publishedAt. Correggere un refuso non muove nulla; riscrivere un articolo e volerlo in cima significa cambiare publishedAt e lasciare lo slug fermo, così l'URL e i link esterni continuano a funzionare. La data di modifica resta nella scheda, fuori dall'ordinamento.

L'errore da evitare

Calcolare il tempo di lettura sull'HTML grezzo: tag, attributi e blocchi di codice gonfiano il conteggio, e due articoli lunghi uguali ricevono tempi diversi. Togli i tag, conta le parole e dividi per 200 una volta sola, quando il file viene salvato; se lo ricalcoli in tre componenti, prima o poi i tre valori divergono.

Per il cursore usa lo slug dell'ultimo articolo, non un offset: un articolo pubblicato mentre l'utente scorre sposta tutte le posizioni e la pagina due mostra un duplicato. Lo slug resta stabile anche quando l'ordine cambia, e la query diventa ?after=slug.

Dove continuare

Le sezioni per un magazine sono in blocchi per blog e magazine; i dati strutturati dell'articolo sono in come aggiungere schema markup; la classifica verificata è in migliori blog blocks 2026.