Dopo aver affrontato il tema della riorganizzazione del blog, ho deciso di fare questo tutorial su come creare e personalizzare la pagina 404 sulla piattaforma di Blogger. È importante infatti non lasciare nel vuoto il link appartenente al post che magari abbiamo deciso di rimettere in bozza o di eliminare.
Dobbiamo creare un messaggio personalizzato che spieghi all'utente perché quel post non si trova più nel nostro blog e invitarlo, comunque, a continuare a navigare.
Ora c'è chi preferisce fare un redirect direttamente verso la homepage; personalmente propendo per la pagina 404, e ti spiego perché.
Il redirect, con il reindirizzamento personalizzato, preferisco farlo quando al posto del mio vecchio articolo ne sostituisco uno nuovo che tratta dello stesso argomento, ma più completo, approfondito e valido.
In questo caso il post esiste ancora (fin quando si vuole) ma reindirizzo gli utenti verso il nuovo post.
Un esempio pratico?
Un tutorial che ormai non funziona più ma che potrebbe essere sostituito da uno nuovo rispondente alla stessa esigenza.
La pagina personalizzata 404 preferisco utilizzarla quando il link è interrotto perché il post non esiste più, quindi spiego agli utenti il perché non hanno trovato il post e li invito a continuare la navigazione attraverso pulsanti, immagini e così via.
In questo modo gli utenti si sentiranno meno disorientati.
Ma ognuno è libero di scegliere come operare nel proprio blog: ciò che faccio (e che ho sempre fatto) è semplicemente condividere con voi la mia personale esperienza.
In ogni caso ricorda che ci sono figure specializzate solo nella SEO che possono certamente consigliarti quale caso è meglio per il tuo blog.
Veniamo a noi.
Crea la pagina 404
Vai nella sezione Pagine e crea una Nuova Pagina inserendo come titolo proprio 404 e all'interno scrivi il messaggio che vuoi mostrare. Se vuoi puoi aggiungere immagini, pulsanti, casella di ricerca, ecc...
Ecco come si presenta la mia pagina 404.
Ho creato una immagine che avesse come richiamo il mio logo e poi ho inserito il messaggio per avvisarti che è tutto ok se non hai trovato ciò che stavi cercando, e che puoi continuare la navigazione proponendoti tante varianti: tornare alla homepage, la casella di ricerca e i pulsanti con alcuni argomenti che potrebbero interessarti.
Se vuoi sapere come realizzare i link pulsante segui il tutorial Come creare il "link in bio" su Blogger.
Per rendere unica la tua pagina, diversa da tutte le altre, ti basta aggiungere gli stili in fondo al post, proprio come ho fatto nel video che trovi sempre nel post della creazione del "link in bio" che ti ho appena linkato.
Gli stili andranno ad agire SOLO su quella pagina, non sulle altre!
Che figata, vero?
Aggiungi il codice di reindirizzamento
Per visualizzare la pagina 404 non dobbiamo certo inserirla nel menu o lasciare il link visibile da qualche parte nel nostro blog. Dobbiamo effettuare un reindirizzamento automatico qual'ora fosse necessario.
Per fare ciò vai in Modifca HTML e subito sotto il tag <head>, che trovi all'inizio, aggiungi questo codice:
<b:if cond='data:blog.pageType == "error_page"'>
<script type='text/javascript'>
BSPNF_redirect = setTimeout(function() {
location.pathname= "/p/404.html"
}, 0000);
</script>
</b:if>
Il codice che inizia con 'b:if' è uno dei miei migliori amici quando creo i temi grafici personalizzati. Sono le cosiddette condizioni che vengono inserite nel codice per dire al browser come si deve comportare quando incontra il contenuto della condizione enunciata.
In questo caso gli diciamo che quando si trova nella pagina di errore, error_page, deve attivare quello script, e avviare un redirect seguendo il percorso (pathname) che io gli ho indicato: /p/404...
E lo deve fare nel tempo da me stabilito, ovvero senza pause "0000".
So che può sembrare difficile, ma basta applicarsi un po' per inziare a capire come funziona.
Poi, è tutto divertimento!
Immagino che avrai un sacco di domande e spero di riuscire a soddisfarle, quindi lasciami pure un commento!
Aiutami a crescere, condividi il mio post!
Grazie!
.jpg)
Bè, certo che ho delle domande. Prima cosa grazie per il tutorial e poi volevo sapere come personalizzare la scritta (quella che tu hai in verdino) e come posso fare il pulsante di ricerca. Per il resto tutto chiaro.
RispondiEliminaGrazie.
Mary
Grazie Mary, vedo che comunque sei riuscita ad inserire la casella di ricerca :) Per la scritta basta sempre utilizzare gli stili, perché in fondo è sempre questione di stili :D
EliminaE' una bellissima idea la tua di far diventare la famigerata pagina 404 in una piacevole pagina piena di informazioni. Io però non tocco la pagina html. Su Splinder tanti anni fa era molto più semplice e lo facevo. Su Blogger non mi fido. Ciao Simona e grazie per i tuoi tutorial e i tuoi consigli. ^_^
RispondiEliminaAnche tu usavi Splinder? Anche io!!! *_*
EliminaComunque se segui questi passaggi ti assicuro che funziona e non si rovina nulla ;)
Prima di pubblicare un tutorial lo testo sempre sul mio blog :*
Beh, dopo aver messo 50 post in bozza seguendo i tuoi consigli, sono felicissima di personalizzare il 404 😁
RispondiEliminaAccipicchia 😲 è stata una gran bella pulizia di primavera, non mi aspettavo che ne rimuovessi così tanti 😅
EliminaCiao e grazie per il tutorial. Come posso mettere la pagina a tutto schermo su blogspot come la tua ed aggiungere la casella di ricerca all'interno? Grazie mille
RispondiEliminaCiao Valentina! Per avere una pagina a tutto schermo, quindi senza che la sidebar venga visualizzata, bisogna inserire un codice che indichi una condizione, il cosiddetto conditional tag. Di questo tipo di codice farò dei tutorial in più post perché è un po' complicato da descrivere in un commento.
EliminaTi posso però consigliare di scrivere dei codici di stile proprio all'interno della specifica pagina.
Innanzitutto apri la pagina e clicca sulla visione html.
In fondo al testo, creando un po' di spazio, scrivi questo codice:
<style>
.main-inner .column-right-outer {display:none !important;}
.region-inner.main-inner, .column-center-outer { width: 100% !important;}
</style>
Per quanto riguarda la casella di ricerca è un codice che non riesco a condividere qui nei commenti.
Fammi sapere se ha funzionato :*
Grazie mille! Ha funzionato, è un po' decentrata ma non voglio abusare della tua gentilezza! Spero di leggere presto della casella. Ancora grazie!
EliminaHo risolto e centrato allargando l'immagine ;) :*
EliminaMi fa molto piacere che tu ci sia riuscita ^_^
Elimina