Mappa del sito, aggiornamenti e ricerca per blog su Blogger

Per migliorare la SEO di un blog su Blogger è consigliabile inviare la sitemap del sito a Search Console. È però pure necessario creare uno strumento che permetta ai lettori di navigare nel nostro sito alla scoperta di contenuti che possano interessarli. Oltre alle frecce di navigazione, per spostarsi al post più vecchio e al post più recente, che possono essere personalizzate, si possono aggiungere una casella di ricerca e un menù.

Sono utili anche altri widget ufficiali di Blogger oppure realizzati da altre persone, come quelli degli Ultimi Post, degli Ultimi Commenti, degli Articoli Correlati, dei Post più Popolari personalizzati e altri ancora.

Una buona soluzione è pure quella di creare una sitemap per i lettori, oltre a quella per i motori di ricerca. Naturalmente una tale sitemap dovrà essere intuitiva e facilmente navigabile e non realizzata in linguaggio XML come quelle inviate a Google Search Console. La scelta migliore è quella di mostrarla in una pagina statica.

In questo post riprenderò un codice che avevo già pubblicato ma che utilizzava uno script caricato esternamente al sito, precisamente in Google Sites in modalità Schedario. Ho modificato tale codice in modo che non siano più necessarie risorse esterne. Oltre a mostrare titoli e miniature degli articoli più recenti, ha anche una funzionalità che permette di scorrere gli aggiornamenti di un sito. Solitamente, quando si modificano vecchi post, questi non vanno a finire nei feed. Con questa Mappa del Sito si potranno visualizzare anche gli ultimi aggiornamenti.

Inoltre c'è la possibilità di effettuare delle ricerche direttamente nella mappa del sito digitando una parola chiave in un apposito form. Si potranno scorrere le etichette e, cliccando sopra a una di esse, si visualizzeranno tutti i post che la contengono. Infine si può impostare il numero massimo degli elementi visualizzabili.





Alla fine della tabella sarà però mostrato il link Post Successivi per visualizzarne altri qualora fossero disponibili. Come se non bastassero tutte queste opzioni, la tabella della Mappa del Sito si adatterà automaticamente alla larghezza del layout e sarà perfettamente visualizzabile anche da dispositivi mobili

mappa del sito per blog su blogger
In alto vengono mostrati i tre form per selezionare la modalità di navigazione. Nel primo si sceglie tra gli Ultimi Articoli e gli Aggiornamenti. In questo secondo caso, oltre agli ultimi post pubblicati, verranno elencati anche gli articoli che sono stati modificati dall'amministratore del sito secondo l'ordine temporale.

Cliccando sul secondo form della Categoria, si potrà selezionare l'etichetta in un menù verticale di cui visualizzare gli ultimi post pubblicati o aggiornati. Infine il terzo form funziona come una casella di ricerca in cui digitare una parola chiave, o anche una frase, per poi andare su Invio e visualizzare i post corrispondenti. 

ricerca nella mappa del sito

Il codice è personalizzabile per modificare colori, famiglia di font e testo visualizzato. Gli articoli saranno mostrati in due colonne nella versione desktop e in una colonna in quella mobile. Sulla sinistra si visualizzerà la miniatura della prima immagine presente nel post. Se non ce ne fosse nessuna, si vedrà il logo del blog. Sulla destra invece ci sarà il link con il titolo del post. Cliccando su quest'ultimo, o sulla miniatura, si aprirà l'articolo collegato. 

Con il codice che andrò a pubblicare verrà mostrato anche il numero dei commenti che però potranno anche essere nascosti eliminando una stringa di codice. Di default verranno mostrati 30 elementi, numero che però potrà essere modificato. Per l'installazione si usa una pagina statica e non viene modificato il codice del Tema.

Si apre la Bacheca di Blogger e si seleziona il blog in cui aggiungere la Mappa del sito. Si clicca poi sulla scheda Pagine -> Nuova Pagina. Si digita il Titolo, si va su HTML, pulsante accanto a Scrivi, e si incolla questo codice:








                                              
                                              
                                              
    
















    Si va su Pubblica per mettere online la Mappa del Sito. Importante è non tornare su Scrivi prima di pubblicare.


    La Demo è stata inserita in una pagina molto larga ma il codice funziona anche con layout stretti.





    Prima di passare alle personalizzazioni, consiglio di incollare il codice così com'è per controllare che funzioni. Le modifiche al codice poi è meglio farle a parte con un programma come Notepad++ o anche con il Blocco Note.

    Le personalizzazioni più importanti sono le seguenti:
    1. Va sostituito l'URL di questo sito con quello del vostro blog
    2. I codici dei colori sono colorati di rosso e possono essere modificati. Il codice esadecimale #008250; mostrerà di quel colore le linee della tabella e lo sfondo dei Post Successivi.
    3. La famiglia dei caratteri Georgia può essere sostituita con un'altra
    4. Se si preferisce non visualizzare tra parentesi il numero dei commenti ricevuti da un post, occorre eliminare la stringa evidenziata di giallo " - (" + commentNum + ")" + 
    5. La immagine con l'URL colorato di viola è il logo di questo sito e deve essere sostituito con l'indirizzo del logo del vostro blog, precedentemente caricato in una bozza di Blogger
    6. thumbWidth: 80 fissa la dimensione della miniatura in 80 pixel
    7. Le scritte colorate in blu possono essere personalizzate
    8. feedNum: 30, per impostare in 30 il numero di elementi da mostrare
    9. Le etichette vengono mostrate nel menù in ordine decrescente secondo il numero di post che contengono.
    Per fare delle ricerche si digita una parola, o una query formata da una frase, per poi andare su Invio. Se gli elementi da mostrare sono più di 30 si clicca sul link Post Successivi per visualizzarne altri. 

    IMPORTANTE: Se il codice non funzionasse, potrebbe essere dovuto a problemi di copia-incolla. In quel caso scaricate questo file ZIP da Dropbox con un file di testo con il codice da usare e personalizzare.

    Posta un commento

    Comments (0)

    Nuova Vecchia