I template di default di Blogger usano la seguente struttura di intestazioni H1, H2 e H3:

  • Intestazione di primo livello (h1): Titolo del blog;
    • Intestazione di secondo livello (h2): Data degli articoli (divisi per giorni)
      • Intestazione di terzo livello (h3): Titolo dell'articolo
      • h3: Articolo 2
      • h3: Articolo 3
      • h3: etc...
    • h2: giorno 2
      • h3: Articolo 1
      • h3: etc...
    • h2: etc...
Questa stessa struttura viene ripetuta anche nella pagina dell'articolo singolo:
  • Intestazione di primo livello (h1): Titolo del blog;
    • Intestazione di secondo livello (h2): Data dell'articolo
      • Intestazione di terzo livello (h3): Titolo dell'articolo
Ovviamente, la lista multilivello avrà solo 3 elementi, in questo caso. Analizziamo subito il caso della pagina del post singolo e vediamo perché questa struttura non segue i suggerimenti del W3C.

Dalla lettura dell'articolo "Use h1 for top level heading" del W3C capiamo anzitutto che il tag h1, oltre che essere unico all'interno della pagina, dovrà essere simile al tag title del documento Web (che in questo caso è il singolo post).

E il tag title? Esso deve identificare il contenuto del documento nella sua interezza (cfr. a good title di Tim Berners-Lee). E nel caso di un articolo singolo, ciò che identifica il documento Web non è altro che il titolo dell'articolo stesso (Blogger, di default, inserisce, nel title, anche il titolo del blog, anteponendolo al titolo dell'articolo; per il momento però, se ciò sia giusto o meno, non ci interessa).

Pertanto, il titolo dell'articolo, nella pagina dell'articolo stesso, non deve essere relegato ad un "semplice" H3, ma deve occupare l'intestazione di primo livello; la struttura corretta, quindi, ha un solo elemento:
  • Intestazione di primo livello (h1): Titolo dell'Articolo;
Per le stesse considerazioni viste sopra, vediamo invece che la struttura delle intestazioni di default, sulla Home Page (che è un elenco di articoli), è sostanzialmente corretta: il titolo del documento Web corrisponde giustamente al titolo del blog, mentre gli articoli vengono raggruppati secondo la data di pubblicazione.

Io preferisco eliminare l'informazione della data dalla struttura delle intestazioni, ma non è sbagliato lasciarla; nel mio caso, la struttura delle intestazioni, nella Home page, diventerà:
  • h1: Titolo del blog;
    • h2: Titolo dell'articolo 1
    • h2: Titolo dell'articolo 2
    • ...

Abbiamo dunque visto, in questo articolo, che una corretta (dal punto di vista semantico) struttura di intestazioni prevede una differenziazione della stessa, a seconda che ci si trovi nella home page oppure nella pagina del post singolo. E tale struttura di intestazioni modificata darà anche maggiori benefici con i motori di ricerca, rispetto a quella standard (ottimizzazione lato SEO).

Da un punto di vista pratico, dovremo personalizzare il codice HTML del template di Blogger, utilizzando degli IF condizionali per differenziare i due casi visti sopra; ma questo lo spiego in un altro articolo "leggermente" :-P più tecnico (ma niente di che, tranquilli): Blogger: ottimizzare le intestazioni (heading)

4 commenti

  1. Luigi Tanzi  

    18 marzo 2008 11.10

    Scusami, mi potresti dire come si aggiunge "Chatta con Notorious", grazie.

  2. notoriousxl  

    18 marzo 2008 12.19

    @luigi tanzi:
    Figurati! Leggi qui: Google Talk chatback badge ;-)

  3. Anonimo  

    21 aprile 2008 20.13

    Un dubbio... nella home page di http://www.qmpeople.it/ come potete vedere ho un IFRAME con 4 tab. Ogni Tab fa riferimento ad una pagina HTML separata con un suo H1. Così facendo, inevitabilmente nella home page mi ritroverei più di un tag h1. E' corretto? E' prevista questa eccezione?

  4. notoriousxl  

    21 aprile 2008 21.52

    @anonimo: secondo me sì, proprio perché sono documenti separati, e ogni documento deve avere il suo tag H1, che, similmente a quanto fa il title, dovrebbe spiegare di cosa parli il documento (magari in maniera meno sintetica del title).

    Vedila anche così: il problema dei frame e degli iframe, è che di solito i contenuti dei frame sono difficilmente indicizzabili, in quanto i webmaster curano title e h1 del frameset e si dimenticano (di solito) di quelli dei frame...

    ... in questo modo, invece, i visitatori provenienti dai motori di ricerca vedranno un buon titolo, piuttosto che un poco appetibile "Untitled document"... ;)

Posta un commento