Quando progettiamo siti web WordPress, uno degli elementi più trascurati ma cruciali è la pagina d’errore 404. Molti proprietari di siti non si rendono conto che una pagina 404 ben realizzata può essere un potente strumento per la fidelizzazione e l’engagement degli utenti.
Secondo la nostra esperienza, una pagina 404 predefinita è un’opportunità mancata. Abbiamo visto in prima persona come una pagina 404 personalizzata possa trasformare un potenziale punto di uscita in un’occasione per guidare i visitatori verso contenuti di valore.
In questo articolo vi mostreremo 2 metodi efficaci per migliorare il modello della pagina 404 di WordPress.
Perché migliorare il template della pagina 404 in WordPress?
La maggior parte dei temi di WordPress è dotata di un modello 404 di base, compresi i temi WordPress predefiniti.
Ad esempio, nell’immagine seguente è possibile vedere la pagina 404 di ThemeIsle Hestia.
La maggior parte di questi modelli predefiniti sono semplici e non mostrano alcun contenuto del vostro sito. Ciò significa che chi arriva sulla pagina 404 ha maggiori probabilità di abbandonare il vostro sito WordPress, aumentando così la vostra frequenza di rimbalzo.
Questa è una cattiva notizia per la SEO di WordPress e può influire sulla posizione del vostro sito nelle classifiche dei motori di ricerca.
Detto questo, è una buona idea creare una pagina 404 con i propri contenuti e il proprio marchio.
Una pagina 404 personalizzata è un ottimo modo per promuovere contenuti, come i post più popolari o i prodotti del vostro negozio online. Potete anche includere i link ai vostri profili di social media, mettere in evidenza i vostri ultimi commenti e altro ancora.
Se siete in cerca di ispirazione, abbiamo raccolto per voi i migliori esempi di design di pagine di errore 404.
Detto questo, vediamo come migliorare il modello della pagina 404 in WordPress. Potete utilizzare i collegamenti rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare:
Metodo 1: Creare una pagina 404 personalizzata in WordPress senza codice (consigliato)
Il modo migliore per migliorare la pagina 404 del vostro sito è utilizzare SeedProd.
SeedProd è il miglior costruttore di pagine di destinazione per WordPress. Consente di creare, modificare e personalizzare le pagine di WordPress senza scrivere alcun codice.
SeedProd è dotato di oltre 300 modelli già pronti, tra cui molti design 404. Ciò significa che è possibile creare una pagina 404 dal design professionale in pochi minuti.
La prima cosa da fare è installare il plugin SeedProd. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Nota: esiste una versione gratuita di SeedProd che consente di creare bellissime pagine di manutenzione e di prossima pubblicazione. Tuttavia, utilizzeremo il plugin premium, che consente di sostituire il modello 404 integrato nel tema.
Dopo aver attivato il plugin, SeedProd chiederà la chiave di licenza.
Queste informazioni si trovano nel proprio account sul sito web di SeedProd. Dopo aver inserito la licenza, fare clic sul pulsante “Verifica chiave”.
Una volta fatto ciò, andare su SeedProd ” Pagine di destinazione. Nella sezione “Pagina 404”, fate clic su “Imposta una pagina 404”.
Ora è possibile scegliere un modello per la pagina 404.
Per visualizzare l’anteprima di un disegno, è sufficiente passarci sopra il mouse e cliccare sulla lente di ingrandimento.
Quando trovate un design che vi piace, fate clic su “Scegli questo modello”.
In tutte le nostre immagini utilizziamo la scritta “Oh No 404 Page”, ma potete utilizzare qualsiasi design desideriate.
Dopo aver selezionato un modello, si accede al costruttore drag-and-drop, dove si può cominciare a personalizzare la pagina 404.
Sul lato sinistro dello schermo si trovano i blocchi e le sezioni che si possono aggiungere al progetto. Il lato destro della pagina mostra un’anteprima dal vivo.
La maggior parte dei modelli 404 contiene già alcuni blocchi, che sono parte integrante di tutti i progetti SeedProd.
Per personalizzare uno di questi blocchi, è sufficiente fare clic per selezionare il blocco nel layout. È quindi possibile apportare modifiche utilizzando le impostazioni nel menu di sinistra.
Per aggiungere un nuovo blocco al progetto, è sufficiente trovare il blocco nel menu di sinistra. Quindi, trascinarlo nel layout. A questo punto è possibile personalizzare il blocco seguendo la procedura descritta sopra.
Per iniziare, in genere è opportuno aggiungere il logo del sito web alla pagina 404, in modo che i visitatori sappiano di essere ancora sul vostro sito.
Per sostituire il logo SeedProd con il proprio marchio, è sufficiente fare clic per selezionare il logo segnaposto nel layout. Quindi, passare il mouse sull’immagine nel menu di sinistra.
Quando appare, fare clic sul pulsante “Seleziona immagine”.
Questo avvia la libreria multimediale di WordPress, dove è possibile selezionare qualsiasi immagine o caricare un nuovo file dal computer.
Molti modelli 404 mostrano anche il menu di navigazione principale del sito. Se avete più menu, potreste preferire mostrare un menu diverso.
Per effettuare questa modifica, è sufficiente fare clic sul blocco “Menu nav” nel modello. Si può quindi aprire il menu a tendina ‘Menu’ e scegliere un menu qualsiasi dall’elenco.
Per ulteriori informazioni, consultare la nostra guida su come aggiungere menu di navigazione personalizzati nei temi WordPress.
Quando un visitatore arriva sulla vostra pagina 404, potrebbe essere confuso su come sia arrivato qui e su cosa fare dopo. Per questo motivo, è bene aggiungere un testo che spieghi l’impossibilità di trovare il contenuto e suggerisca le azioni da intraprendere successivamente.
A tal fine, aggiungere un blocco “Titolo” e un blocco “Testo” al progetto. È quindi possibile digitare il messaggio nell’editor di testo nel menu di sinistra.
Successivamente, modificheremo il pulsante “Torna alla pagina iniziale” in modo da incoraggiare le persone a consultare un post specifico invece di tornare semplicemente alla pagina iniziale.
Ad esempio, si possono promuovere i post più recenti o mostrare i post più commentati.
Per personalizzare il pulsante, è sufficiente fare clic per selezionarlo nel layout della pagina. Nel campo ‘Link’, digitare l’URL che si desidera utilizzare al suo posto.
Poiché il pulsante non rimanda più alla homepage, è necessario sostituire l’etichetta “Torna a casa”. È sufficiente digitare un nuovo messaggio nella casella “Testo del pulsante”.
Una volta fatto ciò, fare clic sulla scheda “Avanzate”. Qui è possibile modificare il colore, le dimensioni e altro ancora del pulsante.
Questo è tutto ciò che serve per creare una semplice pagina 404 personalizzata. Tuttavia, ci sono molte altre caratteristiche e contenuti che possono migliorare l’esperienza dei visitatori, mantenere le persone impegnate e persino aiutare a ottenere più conversioni.
Detto questo, vediamo alcune caratteristiche avanzate che potete aggiungere alla vostra pagina 404.
Aggiungete i vostri post più popolari alla pagina 404 di WordPress
Per cominciare, si potrebbe mostrare un elenco dei post più popolari. Poiché questi articoli sono popolari, è molto probabile che i visitatori trovino qualcosa di loro gradimento.
È possibile creare questo elenco automaticamente utilizzando il plugin MonsterInsights. È la migliore soluzione analitica per WordPress, utilizzata da oltre 3 milioni di siti web.
MonsterInsights può vedere quali sono i post che ottengono il maggior numero di visitatori e aggiungerli alla pagina 404. Per maggiori dettagli, consultate la nostra guida su come visualizzare i post più popolari in base alle visualizzazioni in WordPress.
Dopo aver attivato MonsterInsights, è possibile visualizzare i post più popolari aggiungendo uno shortcode in WordPress. Nel menu di sinistra di SeedProd, è sufficiente trovare il blocco “Shortcode” e inserirlo nel layout.
Ora, copiate il seguente shortcode:
[monsterinsights_popular_posts_widget theme="beta"]
Successivamente, fare clic per selezionare il blocco Shortcode nell’editor di SeedProd. Ora è possibile incollare il codice nel menu a sinistra.
Per impostazione predefinita, SeedProd non mostra un’anteprima dei post più popolari all’interno dell’editor di pagina, quindi è necessario fare clic sul pulsante “Anteprima” nell’angolo in alto a destra per vedere lo shortcode in azione.
Se si desidera visualizzare l’elenco dei post popolari all’interno dell’editor di SeedProd, è sufficiente fare clic sull’interruttore “Mostra anteprima shortcode”.
Nello shortcode qui sopra, usiamo theme="beta"
per il nostro elenco, ma MonsterInsights offre alcuni temi diversi che si possono usare.
Per vedere i diversi temi, andate su Insights ” Popular Posts nella dashboard di WordPress e poi cliccate su ‘Popular Posts Widget’.
È ora possibile fare clic sui diversi temi per vederne un’anteprima.
Quando trovate un design che vi piace, aggiornate semplicemente lo shortcode in SeedProd. Ad esempio, se si desidera utilizzare il tema ‘Alpha’, è necessario digitare:
[monsterinsights_popular_posts_widget theme="alpha"]
Mostrare i prodotti WooCommerce più popolari
Se avete un negozio online, potreste voler mostrare i vostri prodotti WooCommerce più venduti nella pagina 404. In questo modo, la pagina 404 personalizzata può aiutarvi a ottenere più vendite.
Nel menu di sinistra, trovare il blocco Prodotti più venduti e trascinarlo nel layout.
SeedProd mostrerà automaticamente alcuni prodotti. Tuttavia, è possibile regolare questo blocco selezionandolo nell’editor e utilizzando le impostazioni nel menu a sinistra.
Ad esempio, è possibile modificare il numero di colonne del blocco, aggiungere la paginazione, consentire agli acquirenti di filtrare i prodotti più venduti e altro ancora.
Per ulteriori informazioni, consultare la nostra guida su come visualizzare i prodotti WooCommerce più popolari.
Nonostante il nome, è possibile utilizzare questo blocco per mostrare altri tipi di prodotti. Ad esempio, si possono mostrare i prodotti in saldo o gli articoli più votati.
Per dare un’occhiata alle diverse opzioni, aprire il menu a discesa “Tipo” e scegliere un’opzione dall’elenco.
Aggiungere un modulo di contatto alla pagina 404 di WordPress
Si può anche aggiungere un modulo di contatto, in modo che i visitatori possano contattarli se non riescono a trovare ciò che cercano. Questo modulo offre anche un modo semplice per segnalare gli errori 404, in modo da poter correggere i link non funzionanti e migliorare l’esperienza dei visitatori futuri.
Per ulteriori informazioni, consultate la nostra guida completa su come correggere i link rotti in WordPress.
Il modo migliore per aggiungere un modulo di contatto al vostro sito è utilizzare il plugin WPForms. È il miglior plugin per moduli di contatto per WordPress e viene fornito con un costruttore di moduli drag-and-drop.
Per maggiori dettagli, consultate la nostra guida passo passo su come creare un modulo di contatto in WordPress.
Una volta creato un modulo di contatto, è possibile aggiungerlo alla pagina 404 utilizzando il blocco “Modulo di contatto”. È sufficiente trovare il blocco nel menu di sinistra e trascinarlo nel progetto.
Quindi, aprire il menu a tendina “Seleziona un modulo” e scegliere il modulo di contatto dall’elenco.
L’editor di pagina mostrerà ora un’anteprima del modulo di contatto.
Si potrebbe aggiungere un testo che introduca il modulo di contatto o che incoraggi i visitatori a mettersi in contatto.
Per farlo, è sufficiente aggiungere un blocco “Titolo” o “Testo” sopra il modulo di contatto e digitare il testo che si desidera utilizzare.
Come pubblicare la pagina 404
Quando si è soddisfatti dell’aspetto della pagina 404, è il momento di pubblicarla.
È sufficiente fare clic sulla freccia a discesa accanto a “Salva” e selezionare “Salva come modello”.
Quando vi viene chiesto, digitate un nome per il modello. Questo è solo un riferimento, quindi si può usare qualsiasi cosa si voglia.
Quindi, fare clic su “Salva modello”.
Nel popup successivo, fare clic su “Torna all’editor di pagine”. È quindi possibile fare clic sul pulsante “X” nell’angolo superiore destro per chiudere l’editor di pagine di SeedProd.
A questo punto, potrebbe apparire un popup che chiede se si desidera pubblicare il progetto 404. Se siete d’accordo, fate clic su “Sì, attiva”.
Se non si desidera pubblicare il modello in questo momento, fare clic su “No, chiudere”.
Successivamente, è possibile pubblicare il progetto in qualsiasi momento andando su SeedProd ” Pagine. Qui, fare clic sull’interruttore nella sezione “404 Page” in modo che appaia “Active”.
Per vedere la vostra pagina 404 in azione, basta aggiungere /404 alla fine del vostro nome di dominio.
Dopo aver pubblicato la vostra pagina 404 personalizzata, è bene monitorare il coinvolgimento delle persone in quella pagina. In questo modo è possibile vedere cosa funziona e cosa non funziona, in modo da poter perfezionare il design della 404 per ottenere più conversioni e coinvolgimento.
Per saperne di più, consultate la nostra guida per principianti su come installare Google Analytics in WordPress.
Metodo 2: Creare una pagina 404 utilizzando l’editor completo del sito (solo per i temi a blocchi)
Se si utilizza un tema WordPress abilitato ai blocchi, è possibile modificare la pagina 404 del sito nell’editor completo del sito.
Per iniziare, andate su Aspetto ” Editor nella dashboard di WordPress.
Per impostazione predefinita, l’editor completo del sito mostra il modello di home del tema.
Per modificare la pagina 404, fare clic su “Modelli”.
A questo punto viene visualizzato un elenco di tutti i modelli che compongono il tema a blocchi, come la pagina del blog e la pagina degli archivi.
Basta fare clic su “404”.
WordPress mostrerà ora un’anteprima del design attuale della 404.
Per modificare questo modello, fare clic sull’icona della matita.
L’editor del sito completo funziona in modo simile all’editor di contenuti standard di WordPress.
Per aggiungere blocchi al disegno, fare clic sul pulsante “+”.
Ora è possibile digitare il blocco che si vuole aggiungere alla pagina 404.
Ad esempio, si potrebbe voler visualizzare i post più recenti. A tale scopo, è sufficiente digitare “Ultimi messaggi” e trascinare il blocco sul design.
Dopo aver aggiunto un blocco, è possibile personalizzarlo.
È possibile fare clic per selezionare il blocco nell’anteprima. Il menu di destra mostrerà tutte le impostazioni che si possono utilizzare per modificare il contenuto e l’aspetto del blocco.
Le opzioni visualizzate possono variare a seconda del blocco selezionato. Tuttavia, in genere è possibile modificare il colore dello sfondo, il colore del testo e la dimensione dei caratteri.
Se necessario, è possibile visualizzare i messaggi recenti come menu a discesa.
A questo punto, potete continuare ad aggiungere blocchi al vostro progetto e a perfezionarli seguendo lo stesso processo descritto sopra. Potreste anche voler disporre i widget di WordPress in colonne o utilizzare i modelli di blocco di WordPress per creare più velocemente una pagina 404 personalizzata.
Quando si è soddisfatti dell’aspetto della pagina 404, fare clic su “Salva” per renderla attiva.
Ora, se aggiungete /404 alla fine del nome di dominio del vostro sito web, vedrete la pagina 404 personalizzata in azione.
Quando è necessario reindirizzare le pagine 404?
Una delle cause più comuni degli errori 404 è quando il visitatore ha commesso un errore nell’inserimento dell’URL.
In questo caso, di solito non è necessario reindirizzare l’utente a un’altra pagina. Tuttavia, vi consigliamo di seguire le best practice che vi abbiamo illustrato per riportarli sulla retta via.
Detto questo, se non avete il tempo di creare un modello di pagina 404 personalizzato, potreste voler reindirizzare gli utenti alla homepage nel frattempo. In questo modo, è possibile mantenere gli utenti sul sito web.
Oltre a questo, vi suggeriamo di monitorare e reindirizzare gli errori 404. In questo modo è possibile individuare i link a cui gli utenti non sono riusciti ad accedere e reindirizzarli alle pagine più pertinenti.
Di conseguenza, è possibile massimizzare l’opportunità di aumentare le pagine viste e ridurre la frequenza di rimbalzo. Inoltre, potete conservare i backlink che sono stati collegati a queste pagine per mantenere l’autorità del vostro dominio.
Il plugin All in One SEO dispone di un pratico registro degli errori 404 e di una funzione di reindirizzamento. Non è necessaria alcuna conoscenza tecnica per utilizzarlo correttamente, in quanto è piuttosto semplice da usare.
Se volete altri consigli sui plugin, consultate il nostro elenco dei migliori plugin per il reindirizzamento 404 gratuiti per WordPress.
Video tutorial
Speriamo che questo articolo vi abbia aiutato a migliorare il vostro modello di pagina 404 in WordPress. Potreste anche voler consultare le nostre scelte degli esperti sui migliori plugin di post popolari per WordPress e il nostro articolo sull’anatomia di una landing page ad alta conversione.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Moinuddin Waheed
Thanks for giving the design options for making intuitive and innovative 404 page error.
I have been seeing good 404 error pages and was not sure that making it is so easy.
Seedprod gives so much options to tweak on 404 error page and make it as intuitive and innovative as possible so that users bad experience turns into good experience.
Pramendra Singh
Thank you sir. This is what I was searching for long time. Great Post.
Joe Wocoski
Hi,
I just read about the 404 page, but I am not code literate. Your article seems complicated and the popular posts does not float my boat.
What would is a simple widget that I can use to display a single list of my main tabs on the 404 page under the search.
Do you have a widget to send readers back to my main blog page or my other main 9 tabs?
Thank you very much
Joe Wocoski
arman
This code is showing headings of post but i want to show content of posts also .Thanks in advance
WPBeginner Staff
Try updating your permalink structure by visiting Settings -> Permalinks. Simply click on save changes button without making any changes to your permalink structure.
On Boit Quoi Ce Soir
Hello there, very nice article, thanks ! However something simply does not work. When calling on 404.php page (once plug-in activated), it just does not show. Anyway idea why this is happening?
Ali Sajjad
Thanks for this usefull post, i want to know how i can bend my first post from header just like a curve with shadow?
CANALWP
Thank you for this awesome article. I was wondering how can i add my category to this page and as well images. Thanks.
Cheri- CreationScience4kids
Thanks! I’d used wp.com for 2 years before moving to selfhosting. It was exciting to take out all the dates on my articles, but then I started realizing my most popular page by far was the 404! I did the work to use the redirect plugin (also great for posts with rotten original headlines), but haven’t done it for all 400+.
The email alert will be a relief and the most recent/popular/etc posts idea is great.