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!