-----------------------------------------------------
AGGIORNAMENTO 31.05.2009 21:53: Dopo alcune richieste di assistenza mi son accorto che il seguente articolo è da indirizzare solo a chi ha un minimo di conoscenze di HTML. Infatti il Vostro template può essere differente da quello presente in questo esempio. Non dovete copiate testualmente quanto trovate qui, ma dovete correggere il Vostro template seguendo l'esempio. Ripeto dovete correggere e non sostituire il codice.
FINE AGGIORNAMENTO-----------------------------------------------------
Come si suol dire: "il giustascarpe (calzolaio) va sempre in giro con le scarpe bucate."
Dopo tanto parlar bene delle cose da fare per avere un blog facilmente e correttamente indicizzabile, mi son accorto che il mio blogghino di assistenza non rispetto le regole che tanto vado a predicando.
Una delle cose che ritengo importanti è far capire all'utente (e di conseguenza ai motori di ricerca) quali sono i contenuti che si vanno a proporre. Riuscire a presentarli nella maniera logica e chiara aiuta sicuramente l'utente (ed il motore di ricerca) che li deve consultare.
Come già anticipato nel mio precedente post
Miniguida posizionamento blogger: elementi importanti per i motori di ricerca Hx (h1,h2,...,h6) permettono di creare una struttura logica alla pagina.
Come potete vedere dall'immagine il "
document outline" della mia homepage si presenta in maniera logica e corretta. H1 è il titolo della pagina, H2 le date dei post ed H3 i titoli degli ultimi post. Fin qui tutto bene.

Il problema nasce quando entriamo nell'item. Qui vado a rispondere ad una domanda che è stata fatta più volte.
Perchè nei risultati di google.it si trova la mia homepage invece che il post vero e proprio? Semplice: la homepage è più pertinente per quella ricerca. Dobbiamo quindi aiutare il motore a capire i contenuti che presentiamo.

H1 non deve più essere il nome del blog, bensì il titolo del post. Nel caso del singolo post nemmeno la data ha più importanza. Quindi è meglio promuovere ad h2 i commenti. Andiamo quindi a modificare il template:
- Layout -> Modifica HTML
- Scaricare il modello completo. Ossia facciamo una copia del template in quanto se facciamo danni possiamo ripartire.
- Espandi i modelli widget per riuscire a vedere tutto il codice del template.
- Inizia il difficile Cerchiamo i riferimenti H1. Ctrl + F e scriviamo <.h1 (senza punto! ho dovuto metterlo senno il parser di blogger mi cancellava h1)
- Dovreste individuare due tag H1.Inserire la condizione IF, come da immagine, per fare in modo che H1 non appaia nei singoli post (item). NB: Può capitare che dopo questa modifica il nome del blog nei singoli post appaia diverso. Per risolvere questo problema vedasi la nota estetica h1 in calce

- Cerchiamo i tag H2 (la data deve diventare un testo normale non rilevante nella struttura del singolo post). Ctrl + F e scriviamo <.h2 (senza punto! ho dovuto metterlo senno il parser di blogger mi cancellava h2)
- Dovremmo individuare vari h2. Quello che a noi interessa è quello della data, ossia quello al cui interno c'è scritto: data:post.dateHeader. Anche in questo caso sostituiamo il codice come rappresentato nell'immagine. NB: Può capitare che dopo questa modifica la data nei singoli post appaia diverso. Per risolvere questo problema vedasi la nota estetica h2 in calce

- Cercate h3 (titolo del post deve diventare titolo della pagina) come fatto in precedenza e modificate anche questo pezzo di codice come da immagine. la cosa complicata è che in questo caso c'è molto testo (14 righe) da copiare/incollare e il codice potrebbe essere completamente visibile nella videata. Quindi attenzione a non perdervi pezzi! NB: Vedasi la nota estetica h3 in calce

- Concludiamo con h4 (commento del post deve diventare un h2 per rispettare la struttura logica del documento). La cosa complicata dei ommenti è che ci sono 3 pezzi di codice da cercare e modificare. Vedete l'immagine e fate con molta calma ed attenzione le modifiche. NB: Vedasi la nota estetica h4 in calce

- Salvate e se non vi appaiono errori il vostro nuovo"document outline" del singolo post dovrebbe essere simile all'immagine sottostante.

Ora si che c'è la giusta struttura logica nella nostra pagina.-----------------------
Nota estetica H1. Dopo aver fatto tutte le mie belle modifiche i son accorto che il blog appariva esteticamente diverso guardando i singoli post. Il motivo è probabilmente legato ad un errore nel codice de CSS. Nel mio template c'è scritto ad esempio:
#header
h1 {
margin:5px 5px 0;
ecc.ecc.ecc.
bisogna aggiungere all'
h1 la classe
.title (non dimenticate il punto! E' indispensabile in quanto title è una classe e non un elemento html.)
#header
h1, #header .title {
margin:5px 5px 0;
ecc.ecc.ecc.
Ricordo che è sbagliato usare H1, H2 ecc per formattare i contenuti. Questo elemento Html è nato per strutturare i contenuti. E il codice CSS assieme al linguaggio HTML che deve essere scritto correttamente con l'ausilio di classi ecc per formattare l'aspetto estetico dei contenuti.
-----------------------
Nota estetica H2Anche nel caso dell H2 per il mio template c'è un errore nel CSS. Ho cercato quindi
h2 e lo ho integrato con
.date-header (non dimenticate il punto!). Controllate che ci sia la parentesi graffa per non sbagliare con altre stringhe h2; quindi da
h2 { si passa a
h2, .date-header {-----------------------
Nota estetica H3Ovviamente H3 non poteva essere da meno dell'H2. Ho dovuto fare 3 integrazioni per ottenere lo stesso effetto estetico che si aveva prima della modifica del codice.
Quindi:
Da
.post h3 { sono passato a
.post h3, .post h1 { Da
.post h3 a, .post h3 a:visited, .post h3 strong { sono passato a
.post h3 a, .post h3 a:visited, .post h3 strong, .post h1 a, .post h1 a:visited, .post h1 strong {Da
.post h3 strong, .post h3 a:hover { sono passato a .post h3 strong,
.post h3 a:hover, .post h1 strong, .post h1 a:hover {-----------------------
Nota estetica H4Non c'è 2 senza 3 e subito dopo vine il 4.
Da
#comments h4 { a
#comments h4, #comments h2 {FINITO!
Saluti
Marco (SE&O)
PS:
Come vedere il document outline? Per gli irriducibili che sono arrivati a leggere fino in fondo e vogliono vedere coi loro occhi il loro document outline, lascio due riferimenti
Web Developer toolbar estensione Firefox (Information > Documento outline) oppure
Web Accessibility Toolbar per Internet Explorer (Structure > Headings).