Blogger: ottimizzare le intestazioni (heading)
Blogger (blogspot.com) utilizza la seguente struttura per le intestazioni (gli heading h1, …, h6), sia in home page che nella pagina del singolo post:
- h1: titolo del blog;
- h2: data del post (presente più di una volta in home page);
- h3: titolo del o dei post.
- h2: data del post (presente più di una volta in home page);
Questa struttura, però, oltre a non seguire i suggerimenti del W3C (errori semantici), non è neanche ottimale per i motori di ricerca (ottimizzazione lato SEO).
Per vedere un esempio finale di questa guida, puoi visitare il mio blog personale su blogspot.com.
Premessa: Struttura corretta delle intestazioni
Dovrai differenziare la pagina del post singolo dalle altre che riportano più post, come l’home page o le pagine di ricerca (che comprendono le etichette). Se ti interessa capire perché abbia scelto proprio questa struttura, leggi l’articolo “Blogger: gerarchia degli heading H1 e H2 migliorabile“ che ho postato sul mio blog personale 
Intestazioni per la pagina del post singolo
Il post singolo riporterà un unico heading di primo livello (h1) che corrisponderà al titolo dell’articolo, e non del blog
Intestazioni per le altre pagine (post multipli)
La Home Page e le altre pagine dovranno riportare la seguente semplice struttura a due livelli di profondità:
- h1: titolo del blog;
- h2: titoli dei singoli post
Modifica del template di Blogger
Devi modificare il codice del template di Blogger: entra nella bacheca del tuo blog, alla voce Bacheca > Tuo blog > Modello > Modifica HTML, e, molto importante, scegli “Espandi i modelli widget”. E prima di fare modifiche (e possibili casini), ricordati di salvare, nel tuo hard disk, una copia di backup del tuo template attuale!
Codice XHTML
Titolo del Blog
Per prima cosa modifica il titolo del blog. Cerca
<!--No header image --> <div id='header-inner'>
Subito sotto, sostituisci
<h1 class='title'> <b:include name='title'/> </h1>
con
<b:if cond='data:blog.pageType == "item"'> <span class='title'> <b:include name='title'/> </span> <b:else/> <h1 class='title'> <b:include name='title'/> </h1> </b:if>
Nota: l’esempio riportato sopra si applica nel caso in cui tu non abbia scelto un’immagine per l’header, altrimenti dovrai cercare le altre occorrenze di
<h1 class='title'
e sostituirle in maniera simile a quanto visto sopra (il tag h1 sarà più lungo di prima; riportalo per intero all’interno di <b:if, modificando, solo la prima volta, h1 con span).
Data
Sostituisci
<h2 class='date-header'><data:post.dateHeader/></h2>
con
<span class='date-header'><data:post.dateHeader/></span>
Titolo del post
Sostituisci
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
con
<b:if cond='data:blog.pageType == "item"'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
<b:else/>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
CSS
Non premere ancora Salva. Già visualizzando l’anteprima, puoi vedere che la grafica risulta un po’ sballata: le regole CSS corrispondono a tag XHTML che, in seguito alle modifiche, non sono più presenti. Occorrerà quindi cambiare leggermente anche il codice CSS.
Sostituisci
h1 a, h1 a:link, h1 a:visited {
con
#header .title a, #header .title a:link, #header .title a:visited {
Sostituisci
#header h1 {
con
#header .title {
Sostituisci
h2.date-header {
color: $dateHeaderColor;
}
con
.date-header {
color: $dateHeaderColor;
font-size: 130%;
}
Sostituisci infine
.post h3 {
con
.post h1, .post h2 {
È fatta, adesso i titoli del tuo blog su blogspot.com risultano semanticamente corretti e ottimizzati per i motori di ricerca!
Ti è piaciuto l’articolo? Vota Ok oppure No. Grazie Mille!
Puoi votare le mie notizie anche in questa pagina.
Articoli simili:
Se questo articolo ti è stato utile, segnalalo sul tuo sito! Puoi inoltre seguire comodamente gli aggiornamenti di Techlog tramite il feed RSS; infine puoi lasciare un commento se ti serve aiuto (o anche solo per un saluto); anche qui non serve registrarsi (sono abilitati anche i commenti anonimi; l'E-Mail serve, eventualmente, per ricevere le notifiche delle nuove risposte). ;-)
January 3rd, 2008 at 11:38 am
Blogger: ottimizzare le intestazioni (heading)…
Blogger (blogspot.com) utilizza la seguente struttura per le intestazioni (gli heading h1, …, h6), sia in home page che nella pagina del singolo post:
* h1: titolo del blog;
o h2: data del post (presente più di una volta in home page)…
January 3rd, 2008 at 12:13 pm
Grande!! :DDDD
January 3rd, 2008 at 1:03 pm
@m1979: grazie ^_^
Più che altro, dimmi una cosa: il codice XHTML dei template di default di blogger è sempre lo stesso, o cambia da un template all’altro? In quest’ultimo caso dovrei aggiungere altre considerazioni a questo post 
Ho appena scritto il perché abbia scelto quella particolare struttura (ieri sera ero troppo stanco); leggilo, magari ho scritto un mucchio di baggianate!
January 3rd, 2008 at 4:10 pm
Credo che il codice cambi da template a template, ognuno insomma lo crea come vuole…
Ottima guida comunque domenica segnalata!
January 3rd, 2008 at 5:00 pm
@Trakkyk:
(voglio il tasto : mrgreen : sulla tastiera…)
Grazie
Poi faccio una prova su http://howtolog.blogspot.com/ (il sito dove volevo mettere le traduzioni in inglese degli articoli di techlog… ma ancora devo vedere se ciò convenga) che usa un altro template…
January 3rd, 2008 at 8:33 pm
Dovrebbero cambiare solo i CSS, XHTML dei template di default (quelli preimpostati) sono uguali per tutti!! O almeno non ho notato nessuna differenza… adesso mi hai fatto venire il dubbio!! O_o
In genere cambiano leggermente i template messi a disposizione dai terzi, anche se poi dipende da grafico a grafico!!
Se riesco, per stasera faccio delle prove con il mio blogtest!!
January 3rd, 2008 at 10:01 pm
@m1979: grazie per l’eventuale test
Casomai più tardi aggiungo, prima dei CSS, il nome del tema su cui sono stati testati 
January 4th, 2008 at 2:51 pm
Si io intendevo sui template di terzi!
January 4th, 2008 at 3:36 pm
@Traffyk:
Ok, la grafica è molto semplice (ma gradevole, e comunque è possibile personalizzare il CSS), ma come diceva qualcuno… “we want information!” 
(OT) c’è un template di default su Blogger che secondo me rende quasi del tutto inutile la necessità di usare template di terzi: sand-dollar (qui un esempio: http://howtolog.blogspot.com/ )
Layout che occupa tutta la larghezza della finestra del browser, e fluido (la larghezza della sidebar è espressa in percentuale, come piace a me); ha anche un occhio di riguardo per i mdr, avendo il codice degli articoli prima del codice della sidebar.
January 5th, 2008 at 3:22 pm
notorious ho testato YOUOS sull’iphone.. vai a vedere l’aggiornamento dell’articolo
January 6th, 2008 at 4:08 pm
[…] Blogger/Blogspot Ottimizzare le intestazioni […]
January 6th, 2008 at 4:21 pm
Beata te che hai un iPhone io lo bramo da molto tempo…. diciamo troppo!!!
March 8th, 2008 at 1:47 pm
ciao se ti spedisco il template me lo correggeresti tu?
Te lo chiedo in quanto alcune voci non le trovo, e non vorrei combinare un pasticcio….
ciao, sbondo
March 8th, 2008 at 1:48 pm
scusami la sfacciataggine….
March 8th, 2008 at 9:20 pm
@sbondo: figurati
Scrivimi qui ( http://techlog.netsons.org/contattaci/ ) che poi ci mettiamo d’accordo sulle modalità di invio del template.
April 14th, 2008 at 10:15 pm
[…] sapere subito di cosa parla il sito - e la tagline, cioè quel breve testo posto di solito sotto il titolo del blog, potrebbe non bastare. Soprattutto, un utente non abituato ai blog potrebbe ritrovarsi spiazzato, […]
August 24th, 2008 at 10:54 pm
Ciao,io non trovo
h1 a, h1 a:link, h1 a:visited {
nel mio blog :
http://mondoemule.blogspot.com
Come devo procedere?
Grazie mille.
August 25th, 2008 at 11:40 am
@ Laura:
Probabilmente il codice del tuo template è parecchio diverso da quello che uso io (per lo meno, nel CSS). Sei riuscita comunque ad applicare le modifiche del paragrafo “Codice XHTML”?
Io ti consiglio di:
1) fare il backup del tuo template attuale di blogspot;
2) provare ad applicare le modifiche di quel paragrafo ( http://technoburger.net/blogger-blogspot-heading#toc-codice-xhtml ), senza seguire le indicazioni del paragrafo “CSS” ( http://technoburger.net/blogger-blogspot-heading#toc-css )
3) vedere se la grafica dei titoli risulti parecchio sballata
Fammi sapere
August 25th, 2008 at 12:34 pm
si va tutto bene tranne il css.
ora provo a fare le modifiche.
volevo sapere se con tali modifiche correggo il problema di google che a volte riporta nei risultati della ricerca l’homepage e non i singoli articoli.
Grazie.
August 25th, 2008 at 1:10 pm
Laura scrive:
Ok, poi fammi sapere.
Il CSS si può sistemare anche in un secondo momento 
Laura scrive:
Non penso che risolvi quel problema specifico. Hai controllato, in questi casi, che la pagina che vuoi che compaia nei risultati sia indicizzata? Basta cercare site:indirizzo_pagina.html su Google per vederlo. Infatti, se riporta l’home page, significa che il post è nuovo, e Google potrebbe non averlo ancora letto.
Questa modifica serve ad utilizzare una struttura di intestazioni corretta, come suggerisce il W3C; sempre secondo il W3C, all’interno del post dovresti usare le intestazioni dall’H2 all’H6, in quanto l’H1 va usato una volta sola (per il titolo). Ad esempio in questo articolo ho usato:
H1: Blogger: ottimizzare le intestazioni (heading)
|-H2: Premessa: Struttura corretta delle intestazioni
|–H3: Intestazioni per la pagina del post singolo
|–H3: Intestazioni per le altre pagine (post multipli)
|-H2: Modifica del template di Blogger
etc…
Molti SEO affermano inoltre che il tag H1 sia importante per il posizionamento sui motori (delle pagine già indicizzate, però), e che, usandoli correttamente (cioè secondo i suggerimenti W3C) si possano guadagnare un po’ di posizioni nelle SERP.
August 25th, 2008 at 1:16 pm
@ Andrea Romagnoli:
si ho controllato e le pagine sono indicizzate correttamente.
ma da un po’ di giorni (il mio sito è nato poco piu’ di un mese fa)non sono piu’ tra i primi risultati della ricerca su Google.
e se scrivo qualche parola chiave e trovo il mio sito,riporta l’homepage.
comunque ho appena modificato il template e se provo a fare l’anteprima Blogger mi restituisce un errore(non nel template)e dice di contattare l’assistenza Blogger…
August 25th, 2008 at 1:20 pm
Laura scrive:
Mi faresti un esempio? Ti succede anche con gli articoli più vecchi? Di solito questo succede con i siti nuovi o a basso trust (succede anche qui su technoburger, purtroppo), e, nonostante l’indicizzazione, le pagine impiegano 2 settimane ad apparire nelle SERP.
Per il resto, ti contatto via mail.
August 25th, 2008 at 1:50 pm
@ Andrea Romagnoli:
Grazie,sei stato gentilissimo.
September 29th, 2008 at 7:01 pm
queste guide su blogger sono davvero molto molto utili!!! grazie andrea!!!
September 29th, 2008 at 7:22 pm
@ italida:
Figurati!
Se vuoi, puoi segnalarle nel tuo blog
(ma non ti obbligo, c’entrerebbero poco in un blog sulla fotografia)
October 12th, 2008 at 10:17 pm
Scusate ma non riesco a fare copia incolla da questo codice nè su word nè quindi poi nella pagina del mio blog
come mai?
scusate l’ignoranza ma inizio adesso a usare i blog!!
ciao!
October 13th, 2008 at 4:10 pm
@ Michele:
Se vuoi ti aiuto personalmente (come ho fatto con altri miei amici): mi aggiungi temporaneamente come co-amministratore, ti faccio quelle 2-3 modifiche al template, poi mi rimuovi come admin.
Fammi sapere, in caso ti contatto via email.
December 8th, 2008 at 9:40 am
grazie, i tuoi post mi sono molto utili!
December 17th, 2008 at 1:53 pm
Di niente, se lasci un commento, se hai esperienze di testimonianza personale di rimedi naturali di successo, li gradisco!
ciao!!!!!
tu hai un blog tuo?
mi fa piacere esserti di aiuto!
Ciao
December 17th, 2008 at 2:23 pm
Michel scrive:
Non capisco a chi sia rivolto il tuo commento…
December 23rd, 2008 at 4:16 pm
Andrea il mio commento era riferito a gimbola, in questi giorni sono in ferie vedo di ricontattarti, se la tua offerta di aiutarmi nelle modifiche é sempre valido..
December 23rd, 2008 at 5:16 pm
@ Michel:
Ha ripetuto lo stesso esatto commento su un sacco di pagine (neanche troppo correlate tra loro), con un link che ho rimosso “per punizione” 
Ehm… il commento di gimbola penso fosse spam, più che altro.
Avevo rimosso tutti gli altri commenti, lasciando solo questo.
Michel scrive:
Ovvio, tempo permettendo!
January 10th, 2009 at 11:32 am
Andrea Romagnoli scrive:
Gentilissimo Signor Romagnoli,
io non faccio spam, e neanche mi interessa pubblicizzare il link del mio blog (se è questo che pensa).
Sono semplicemente una utente di blogger che sta interessandosi delle modifiche al codice di blogger e, durante una ricerca sono incappara nel suo blog. Ho trovato alcuni post, li ho letti e ho voluto semplicemente lasciare una testimonianza del mio passaggio e del fatto che ho “usato un po’ del mio tempo” per studiare alcuni suoi post.
Se nota infatti, i miei commenti sono collegati dal fatto che sono solo sui post dedicati alle modifiche del codice dei template (quelli che a me interessavano). E’ vero che ho scritto le stesse parole in tutti, per pigrizia, forse…. : mi scuso per questo, stia pur tranquillo che non si ripeterà. Può dirmi che sono una pigra, senza fantasia, ripetitiva, ma _non_ che faccio spam.
Forse lei è abituato a ricevere molto spam, ma in internet esistono anche persone oneste e in buona fede che commentano quando trovano dei post utili.
Ora lei cancelli pure tutti i miei commenti, questo e il precedente, come vede non ho neanche scritto il mio website perchè quello che mi interessa non è avere un link in più, ma dirle semplicemente che non sono una spammer, ma una blogger in buona fede.
Mi dispiace se i miei commenti ad alcuni suoi post l’hanno disturbata, stia pur tranquillo che non capiterà più.
I miei più cordiali saluti e un augurio per il proseguimento delle attività in questo blog.
January 10th, 2009 at 4:49 pm
@ gimbola:
Mi scuso, c’è stato un fraintendimento da parte mia, nato dal fatto di aver visto 3 commenti uguali, inviati a distanza di poco tempo l’uno dall’altro.
Pensavo, quindi, che fossero stati generati da un bot, mentre, probabilmente, avevi solo più tab aperte. Purtroppo mi capitano diversi “tentativi” simili da parte di bot ogni giorno, e pensavo, nel tuo caso, che ci fosse stata una svista da parte dell’antispam.
gimbola scrive:
Infatti, come dicevo sopra, è stata una mia svista
- e rinnovo le scuse. Se possono sbagliare degli algoritmi (i “falsi positivi” dei filtri antispam), a maggior ragione possiamo sbagliare noi umani. 
E mi fa piacere che i miei post ti siano serviti; spero, quindi, che sia tutto chiarito, e che tornerai a commentare su questo blog. E ti invito, ovviamente, a segnalare il tuo blog.
January 13th, 2009 at 12:33 pm
Complimenti per il sito che è interessantissimo: ho un grosso problema, ho eseguito alla lettera i consigli per ottimizzare, h1 ,h2 ma una volta eseguito il tutto h2, che rappresnta il titolo del post è scomparso dal template, non si vede più il titolo del post come posso risolvere questo problema qualcuno puo’ aiutarmi!!!! ho eseguito molte ricerche ma nulla….non vorrei che google mi bannasse per titoli invisibili grazie.
……….autonoleggioalghero.blogspot.com non voglio fare (spam) questo è il mio sito.
January 13th, 2009 at 5:52 pm
pasquale scrive:
… sembra che Akismet abbia riconosciuto il tuo commento come spam
- mi sono accorto solo oggi e l’ho recuperato subito, quindi mi scuso per il ritardo della risposta 
pasquale scrive:
Guardando il codice HTML sembra che ci sia qualche problemino:
1) l’unica modifica che ha avuto successo è stata quella di H1/span sul titolo del blog;
2) la data è ancora all’interno di un tag h2, invece di span;
3) i CSS non sono stati modificati (andando infatti sulla pagina dei post, il titolo del blog è piccolo)
4) il titolo del post non è nascosto… semplicemente non è presente nel codice (c’è un tag H2 vuoto)… quindi non rischi penalizzazioni in quel senso.
Ti contatto in privato, così puoi spedirmi il file del tuo template, in modo che possa controllare direttamente io i problemi.
February 2nd, 2009 at 10:57 pm
ciao…ho seguito le tue istruzioni ma ho sbagliato qualcosa, non riesco a cambiare l’header del post quando cliccki è tutto sballato, mi sai aiutare? anche in email….grazie
February 2nd, 2009 at 11:14 pm
Non so che fare…help me…se clicco sul post singolo..guarda che cacchio è successo
February 3rd, 2009 at 4:13 pm
@ Riccardo:
Adesso controllo.
PS: cos’hai inserito da js-kit.com? Rallenta l’apertura del sito
February 3rd, 2009 at 4:16 pm
@ Riccardo:
Non mi sembra tu abbia applicato la guida, il titolo del post è in H3
April 6th, 2009 at 11:51 pm
<h1 class=’title’e sostituirle in maniera simile a quanto visto sopra (il tag h1 sarà più lungo di prima; riportalo per intero all’interno di <b:if, modificando, solo la prima volta, h1 con span).
—-
io questo pezzo non lo riesco a fare… se qualcuno può darmi una mano è un santo, anche perchè ho bisogno solo di questi tag per gli heading, tutto il resto in questo blog è più chiaro e trasparente dell’acqua…. DATEMI UNA MANO CON QUESTI HEADING, ecco il mio contatto msn minutidirecupero@hotmail.it
May 21st, 2009 at 11:13 am
Io nella header ho un’immagine ma non ho capito cosa devo cambiare. Inoltre nel Css per i post ho questo “.post h3 a, .post h3 a:visited, .post h3 strong {” e non con h1. E’ un modello minima di blogger. Non riesco a farlo questo passo potete aiutarmi?
Se ti mandassi il template mi potresti trovare degli errori? fra l’altro ho un problema che mi scala una terza colonna in explorer! sono disperato perchè ho avuto un’incredibile calo di contatti.
June 3rd, 2009 at 8:31 pm
Ciao!
ho letto i commenti velocemente e sembra di aver capito che non si risolve il problema della male indicizzazione dei post di blogger ,dove erroneamente appare sempre la pagina principale .
Per controllare la struttura del blog ,io utilizzo web developer ,ti vorrei mostrare l’immagine della struttura di ogni singolo post,per vedere se è tutto a posto:
http://img26.imageshack.us/img26/6883/bloggerstrutturadel.jpg
September 27th, 2009 at 8:10 pm
non riesco a trovare il primo codice del css.
Un Aiutino?
Comunque grazie degli utili consigli!
October 23rd, 2009 at 5:49 pm
Complimenti per l’articolo, davvero interessante. Ho provato tutte le modifiche e funzionano. Purtroppo con il mio template minima alcuni tag non li trovo e non so come modificare l’html in maniera efficace… così per il momento ho disattivato le modifiche per gli header….
Come posso procedere…?
January 7th, 2010 at 12:39 pm
[…] Come ottimizzare le intestazioni su blogger […]