giovedì 14 maggio 2009

Document outline. Struttura logica dei contenuti.

-----------------------------------------------------
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:
  1. Layout -> Modifica HTML
  2. Scaricare il modello completo. Ossia facciamo una copia del template in quanto se facciamo danni possiamo ripartire.
  3. Espandi i modelli widget per riuscire a vedere tutto il codice del template.
  4. 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)
  5. 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
  6. 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)
  7. 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
  8. 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
  9. 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
  10. 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 H2
Anche 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 H3
Ovviamente 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 H4
Non 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).

50 commenti:

Alexxandro ha detto...

comunque è un problema che deve risolvere Google....con tutto il to impegno ma mi son scomparsi i post

Customsoft ha detto...

Si infatti ho aperto una domanda nel forum di Google per chiedere che ci pensino loro a correggere i template.
I post comunque non sono stati cancellati ma solamente non vengono mostrati probabilmente perchè il tuo template non è identico a quello usato nell'esempio. Quindi il codice va corretto e non sovrascritto. Basta anche solo una / nel posto sbagliato che non funziona più nulla :-)
Saluti
Marco (SE&O)

gfdesigner ha detto...

C'è un errore di fondo: gente senza competenza pubblica templates per blogger.com sono quei templates che rovinano il rigore dei templates originali, io mi sono pentito di aver adottato un template esterno che mi ha sbilanciato tutta la struttura, irreparabilmente danneggiata, tant'è che ho dovuto ricreare tutti i gadgets da capo......e na schifezz!!!

gfdesigner ha detto...

Comunque mi sono scordato di dire bell'articolo se magari passi il codice sai com'è virgole punti etc etc, sono delle belle modifiche potevi utilizzare un parser per inserire il codice html tipo http://www.blogcrowds.com/resources/parse_html.php ciau

Customsoft ha detto...

Grazie per il commento e la segnalazione ... appena ho tempo me lo guardo :-)
Saluti
Marco (SE&O)

Alex ha detto...
Questo commento è stato eliminato dall'autore.
Alex ha detto...

ciao!ho scaricato il template che utilizzi da qui:
http://www.blogcrowds.com/resources/view_template.php/_23
ho controllato.
le prime due parti sono identiche al template(h1,h2)
cambia da h3

Alexxandro ha detto...
Questo commento è stato eliminato dall'autore.
Alexxandro ha detto...

ho verificato la struttura del blog con esito negativo:
http://img193.imageshack.us/i/paginastruttura.jpg/

Alexxandro ha detto...

mi sembra di capire che il problema sta in h2

Alexxandro ha detto...
Questo commento è stato eliminato dall'autore.
Customsoft ha detto...

per Alex: Piccola precisazione.
Non ho visto sinora il template da te indicato, poi lo esamino, ci tengo comunque a precisare che ogni codice/modifica descritta sul mio blog è farina del mio sacco in seguito a miei ragionamenti. Poi se altri vevano già risolto il problema questo non mi è dato sapere :-)

Customsoft ha detto...

Per Alexxandro. Il test va fatto su un post singolo. La home appare corretta sempre. Sia prima che dopo le modifiche.
Il mio post/La mia guida serve a correggere il problema della struttura nei singoli post.

Customsoft ha detto...

Per Alex:
Ho fatto un confronto veloce fra i due template e ci sono parecchie differenze.

Da un esame veloce direi anche che quello da te indicato non mi pare funzionante. Almeno on come dico io nel mio post. Manca infatti il codice H1.

Per chiunque sia interessato a vedere il mio template lo può scaricare da:
http://www.customsoft.it/template_assistenza_su_blogspot.xml

Saluti a tutti e grazie per la partecipazione attiva!

Marco (SE&O)

Alexxandro ha detto...
Questo commento è stato eliminato dall'autore.
Alexxandro ha detto...

aggiungo un'altra cosa:
mi son messo a verificare dei blog che sono perfettamente indicizzati e guardando la struttura:
h1 risulta come il nome del Blog
continuo a non capire

Alexxandro ha detto...

ecco il risultato guardando un singolo post:
http://img268.imageshack.us/img268/6436/postblogger.jpg
h1 è associata al titolo post e non piu al titolo blog
cosa sta a significare in rosso missing heading(nessuna voce)??

Customsoft ha detto...

1) il posizionamento dipende da tanti fattori circa 200. Questo degli Hx è uno dei 200.

2) l'errore è nella data che è ancora h2
la data deve essere h2 solo nella home
se togli h2 per il singolo post verrà fuori giusto

Alexxandro ha detto...

quindi che modifica deve essere effettuata ?
in quale punto?...scusa

Alexxandro ha detto...

dovrebbe essere cosi :(dovresti correggere il codice h2)
h2 class /h2
andrebbe sostituito con
span class /span

guarda:
http://img26.imageshack.us/i/bloggerstrutturadel.jpg/

Adriano Alfaro ha detto...

Ciao Customsoft, sono Adriano, mi hai fornito assistenza qualche giorno fa per il mio Blog su Windows 7. Anche io ho un problema con la data: lo puoi vedere, ad esempio, a questo indirizzo --> http://www.windowsette.com/2009/06/windows-7-in-vendita-da-22-ottobre.html

Nel mio caso il codice è già h2.date-header {
cioè come hai detto che dovrebbe essere modificato. Riesci ad aiutarmi?

Customsoft ha detto...

per Alexxandro:
Ecco ora il titolo del post ha la giusta rilevanza. Prova a fare un po di ricerche di titoli oggi e riprova poi fra 15-30 giorni. Vedrai che dove oggi appare la home fra un po di tempo apparirà l post ver e proprio.

per adriano:
h2.date-header {
diventa
h2.date-header, div.date-header {

Ricontrolla h1 che mi sembra sbagliato, in quanto ne appaiono 2 nel singolo post. Deve esserci solo un h1

Saluti
Marco (SE&O)

Alexxandro ha detto...

ciao! io ho risolto cosi
ti mostro il codice:
http://dl.getdropbox.com/u/844780/HTML/momentanea/dataheader.txt

Customsoft ha detto...

si va bene
se vuoi che graficamente appaiano uguali non dimenticare di modificare
h2.date-header {
diventa
h2.date-header, span.date-header {

Ad Adriano avevo consigliato DIV in quanto aveva usato un DIV; tu hai usato uno SPAN quindi devi usare lo SPAN anche nel css

Saluti
Marco (SE&O)

Alexxandro ha detto...

io invece ho risolto diversamente,guarda il codice che ho sostituito,nel link..
domanda:cosa succede se il post di stamattina l'ho ripropongo,quindi con la data attuale,cosa succede?

Alexxandro ha detto...

ma graficamente non mi pare che sia cambiato qualcosa ??
cosa intendi:se vuoi che graficamente appaiano uguali non dimenticare di modificare....

Customsoft ha detto...

se graficamente non vedi modifiche come non detto apposto cosi.

per la data non ho capito la domanda ... comunque non ritengo sia un dato importante nella ricerca. dubito l'utente ricerchi un post scrivendo la data.

Alexxandro ha detto...

mi spiego meglio..ho riproposto un post(poche ore fa) che avevo gia inviato stamattina.
Domandavo : verrà di nuovo arhiviato nella cache di google ?quindi ricoretto...oppure per verificare che tutto sia andato bene,devo aspettare nella creazione di un nuvo post?

Adriano Alfaro ha detto...

Customsoft grazie, la data ora è OK. Piuttosto anche io avevo notato che, oltre al titolo del post, anche il nome del Blog aveva H1. Solo che non ho idea di dove andare a mettere le mani: qualche tua dritta mi farebbe piacere.
Grazie.

Customsoft ha detto...

Per Alexx: Google pian piano passerà a rileggersi anche i vecchi post. Ovviamente più post trova e più movimento vede sul blog prima aggiornerà l sua cache

Pe Adriano: per l'H1 devi cercare nel codice del template dove viene impostato. Nel caso di post singolo il titolo del blog non deve essere h1 ma ad esempio in un div. mi sembra di capire hai corretto h2 ... in modo similare va corretto anche h1

Alexxandro ha detto...

purtoppo non Google non legge neanche i nuovi post.
ore 13:14 creato nuovo post
se andava tutto bene ,dopo circa un'ora venivi indicizzato
invece ora se metto l'intero titolo del post,che una parola chiave univoca personale,deve riportarti nei risultati il post,invece mi riporta sembre alla pagina principale...quindi non fa distinzioni

Alexxandro ha detto...

il problema è nella struttura interna dei widget(secondo il mio intuito) ,dove non si puo mettere mani,quindi nulla.
Se vuoi fare una guida corretta,bastava modificare uno dei templates di blogger non uno esterno...poi non ci voleva tanto salvare quel poco di codice html in un file di testo in qualsiasi spazio web,che mettere un immagine .
Mi fermo qui....

Customsoft ha detto...

1) io ho preso uno dei template più semplici offerti da blogger e l'ho modificato
2) se leggessi quel che ho scritto vedresti il link al template (e a te l'ho pure mandato per email)
3) fai bene a fermarti in quanto stai solo dicendo cose inesatte(per essere gentile). Mi ero reso disponibile la settimana prossima a guardarti il codice, ma mi hai bombardato di email e con commenti sul blogt anche usando nick diversi. A questo punto ti invito a fare un corso html e SEO in modo da risolvere da solo i tuoi problemi in quanto pure io mi fermo qui (traduzione: non ho più intenzione di risponderti).
Saluti
Marco (SE&O)

Customsoft ha detto...

per Adriano: scusa non ho capito il tuo problema.

Alexxandro ha detto...
Questo commento è stato eliminato dall'autore.
Customsoft ha detto...

PS: ( = Post scriptum )
SE&O = Salvo errori & omissioni
e non
SEO = Search engine optimization

Alexxandro ha detto...
Questo commento è stato eliminato dall'autore.
Alexxandro ha detto...

Ok ti saluto...
problema NON risolto
e ti ringrazio per quel poco di disponibilità

Adriano Alfaro ha detto...

Ciao Customlsoft, il problema è che non so dove andare a mettere le mani... Ti disturbo troppo se ti mando il template?

PS: Per correggere il problema che anche il titolo del Blog è H1...

Customsoft ha detto...

Se vedi l'immagine dell'H1 vedi che grazie all'IF H1 viene sostituito con un tag DIV
Basta integrare il codice nel tuo template.
Mi sembgra la modifica più semplice tra tutte quelle da fare. Se hai fatto le altre non è una cosa impossibile. Qui sopra ho messo il link al mio template magari prova a confrontarlo col tuo H1
Saluti
Marco (SE&O)

Flash Desmond ha detto...

Avrei bisogno di una delucidazione, Customsoft.
Poichè blogger ha un massimo di 38 caratteri per il titolo dell'url, per quei post a cui intendo dare un titolo più lungo del solito uso il trucco di pubblicare prima un titolo fittizio contenente soltanto la parole chiave. Dopo di che ripubblico il post inserendo il titolo vero che avevo in mente all'inizio e sembra tutto ok.
Nei risultati di ricerca però la pagina del post viene indicizzata con il titolo dell'url, il quale contiene soltanto le parole chiave. Invece io vorrei far nominare la pagina con il titolo vero del post, che ho aggiunto dopo il titolo fittizio. Sapresti dirmi come si fa?
Ciao

Customsoft ha detto...

Questo è il bello del mondo :-) che è vario :-)

Ammetto che non mi ero mai posto il problema, e se avessi del tempo libero sarebbe un argomento interessante d'approfondire.

Visto che però le 2 di notte si stanno avvicinando vado a logica senza provar nulla.

Nella teoria, nei risultati dovrebbero apparire i titoli delle pagine. Se poi il tuo cambiar il titolo è cosi rapido da anticipare lo spider (programma di Google che legge le pagine) direi che in teoria il titolo nei risultati dovrebbe apparire corretto. Per aiutare la corretta indicizzazione consiglierei comunque di modificare anche H1. Ora su tutte le pagine del sito è indicato (se non erro) il nome del tuo sito come tag H1. Indicare invece il titolo della pagina dovrebbe aiutare nella corretta indicizzazione.

A parte il corretto uso dell'H1 se le tue modifiche al titolo sono immediate direi che (al momento) non vedo altre operazioni da fare. Se ancora non funziona potrebbe essere che Blogspot abbia una gestione/comunicazione particolare per l'indicizzazione su Google ... ma non mi risulta.

Mi spiace non poter esser più preciso, ma anche se l'argomento mi stuzzicherebbe, non ho veramente tempo per approfondire.

Saluti
Marco (SE&O)

Flash Desmond ha detto...

Quindi come potrei modificare H1 per questo scopo? Se lo sai, altrimenti non fa niente.
Ciao

Flash Desmond ha detto...

In breve il problema è questo.

Il titolo della pagina di tutti i miei post l'ho impostato in modo che compare il titolo del post seguito dal nome del blog. In sostanza io vorrei far comparire nei risultati di ricerca proprio il titolo della pagina e non quello dell'url.

Ciao

Customsoft ha detto...

La spiegazione di come modificare il template ed avere l'H1 contenente il titolo è nel post che hai appena commentato ...

Saluti
Marco (SE&O)

Flash Desmond ha detto...

Grazie Customsoft, volevo solo chiederti un'altra cosa, sempre inerente alle questioni di url e titolo dei post.

Girando fra vari siti mi sono copiato il codice Javascript per inserire sul blog la lista dei commenti recenti, e fin qui tutto ok.

Il formato è del tipo

TIZIO su TITOLO POST ha detto...

E il discorso è sempre quello. Invece del titolo reale del post mi mette di nuovo l'url associato al post. Mentre io vorrei il titolo del post.

Credo che la parte incriminata del codice sia questa:

var posttitle = linktext.replace(/-/g," "); posttitle = posttitle.link(postlink);

...ma potrei anche sbagliarmi. Comunque sapresti dirmi come posso modificare il codice?

Ciao

Customsoft ha detto...

Lo script funziona cosi in quanto "crea" il titolo del post partendo dal link del post:
---
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
---

Bisognerebbe riscrivere mezzo script perchè scriva il titolo prendendolo dal feed ... sempre sia possibile.

Come già detto, sfortunatamente non ho tempo di scrivere sul blog e nemmeno di correggere script o anche solo verificare se sia tecnicamente fattibile :-)

Spiacente

Saluti
Marco(SE&O)

Lorinza Catherina ha detto...

Buongiorno Sig.ra/sig.
Sono un privato che offre prestiti ad un tasso di 2% l'importo varia da 1000€ a 150. 000. 000€. Desidero avere a che fare con gente onesta e degno di fiduce. Se la vostra domanda è seria volete contattarlo per posta elettronica: catherina.lorinza04@gmail.com

Katiuscja Conforto ha detto...

Vi manca un finanziamento per realizzare il vostro progetto o per regolare problemi finanziari personali. Metto a vostra disposizione uno credito che va di 5.000 euro a 1.500.000 euro a tutti i privati ed a imprese per aiutarli a trovare una soluzione ai vostri problemi.
Allora, se siete interessati volete contattarlo da mail per più di informazioni.
Email: confortokatui@gmail.com

Suero Aniello ha detto...

Ho trovato il sorriso è grazie al questo Signore. Muscolino GIOVANNI che ho ricevuto un prestito di 70.000€ nel mio conto il mercoledì a 11:32 min e due dei miei colleghi hanno anche ricevuto prestiti di questo signore senza alcuna difficoltà. Li consiglio più voi non fuorviate persone se volete effettivamente fare una domanda di prestito di denaro per il vostro progetto e qualsiasi altro. Pubblico questo messaggio perché signore Muscolino GIOVANNI mi ha fatto bene con questo prestito. È tramite un amico che ho incontrato quest'uomo onesto e generoso che mi ha permesso di ottenere questo prestito. Allora vi consiglio di contattarlo e li soddisfarà per tutti i servizi che gli chiederete. Ecco il suo indirizzo elettronico: muscolinogiovanni61@gmail.com

Posta un commento