Come costruire una pagina 404 di WordPress: una guida approfondita

Sebbene la maggior parte degli URL dei siti siano leggibili e facili da digitare, non si tiene conto dell'errore umano. Anche il migliore di noi a volte digita in modo errato un URL e finisce in una posizione sul Web che non ci aspettiamo. Una pagina WordPress 404 aiuta gli utenti a capire che hanno commesso un errore. Tuttavia, può anche aiutare a mantenere gli utenti persi sul tuo sito e portarli alla pagina di cui hanno bisogno.

Spiegheremo di più su cosa è e cosa fa un 404 in una sezione successiva. In breve, è una pagina che mostra un codice di errore, ma molti siti si rendono conto che è anche un buon modo per presentare più informazioni agli utenti. In quanto tali, scoprirai che queste pagine possono essere uniche e utili di per sé.

Nelle prossime sezioni, ti mostreremo come creare una pagina WordPress 404 . Includerà alcuni esempi da tutto il Web, cosa dovrebbe contenere e molto altro.

Che cos'è (e fa) una pagina 404

Per iniziare, discutiamo di cos'è una pagina WordPress 404 . Per chi non lo sapesse, 404 è uno dei tanti "codici di stato della risposta HTTPS". Esistono diversi gruppi di codici in base alle informazioni che ti dicono e in passato abbiamo trattato molto sul blog. Ad esempio, l'intervallo di numeri 500 restituisce errori del server:

L'intervallo 400 copre le risposte agli errori del client, i momenti in cui il lato browser commette un errore. Ad esempio, l'errore 413 Entità richiesta troppo grande , l'errore 429 Troppe richieste e (ovviamente) l'errore 404 .

In parole povere, se riscontri un errore 404 , una pagina non esiste nell'URL in cui stai navigando. È un errore comune a causa di un semplice errore di battitura. In effetti, molti siti lo riconoscono. Sebbene la maggior parte degli errori non abbia pagine dedicate, un errore 404 lo farà. Ciò ti consente di mantenere un utente sul sito e di reindirizzarlo al tuo sito vero e proprio.

Nella prossima sezione, daremo un'occhiata a come altri siti mostrano un errore 404 a un utente, per la tua ispirazione.

Esempi di 404 pagine da tutto il Web

Possiamo iniziare con la pagina 404 per WPKube. Offre un layout funzionale, con un messaggio veloce per dire che la pagina non esiste:

C'è una casella di ricerca per aiutare l'utente a trovare il post o la pagina giusta e una raccolta di altri articoli organizzati per data e categoria. Questo è essenzialmente tutto ciò di cui hai bisogno per riportare gli utenti da dove sono venuti. Alcuni siti fanno il possibile.

Ad esempio, l'Internet Movie Database (IMDB) utilizza citazioni di film per aiutare ad accertare il problema, insieme a un collegamento alla home page:

Questo aiuta a mantenere la pagina sul marchio. La pagina Elementor 404 offre anche alcuni contenuti sul marchio. Questa volta, sotto forma di collegamento a un articolo pertinente:

Ci piace questo approccio, perché ti dà la guida per costruire la pagina che stai guardando. Questo non solo fornisce valore. Offre anche la prova di ciò che Elementor può fare.

Nella nostra ricerca, sono stati pochissimi i siti Web che hanno eseguito un reindirizzamento completo alla home page di fronte a un errore 404. C'è una buona ragione per questo, e lo tratteremo in seguito.

Perché vorresti creare una pagina 404 personalizzata di WordPress

A questo punto, capirai che una pagina WordPress 404 può essere una risorsa preziosa. Per darti alcuni dettagli, ecco perché vorresti metterne uno insieme:

• È un ottimo modo incentrato sull'utente per aiutare coloro che navigano su una pagina sconosciuta.
• Puoi mantenere bassa la frequenza di rimbalzo, il che aiuterà l'ottimizzazione per i motori di ricerca (SEO).
• A proposito, se progetti la pagina 404 nel modo giusto, puoi anche migliorare la SEO in una certa misura.
• Puoi continuare i tuoi sforzi di branding anche quando un utente si trova in un posto che non si aspetta sul tuo sito.

Nel complesso, una pagina WordPress 404 ti consente di offrire un elemento "umano" al tuo sito Web, in una situazione in cui potresti aspettarti di perdere un utente. In quanto tale, non sottovalutare il valore psicologico di questo. Potrebbe essere una differenza tra un utente rimbalzato e lo sviluppo di un potenziale cliente.

Come creare una pagina 404 di WordPress

Nelle prossime sezioni, ti mostreremo come creare una pagina WordPress 404. A nostro avviso, i passaggi da compiere sono tre:

• Scopri come creerai la pagina, indipendentemente dal fatto che utilizzi il codice, il modello WordPress esistente, un plug-in o un generatore di pagine.
• Aggiungi gli elementi che desideri sulla tua pagina e modifica il marchio e il design finché non sei soddisfatto dei risultati.
• Verifica se il tuo sito effettua reindirizzamenti alla tua pagina WordPress 404.

Il tuo primo compito, però, è prendere una decisione. Diamo un'occhiata a questo più in dettaglio ora.

1. Decidi come costruire la pagina 404

Come ti aspetteresti, ci sono diversi modi per creare la tua pagina WordPress 404. Il tuo approccio sarà basato sui tuoi obiettivi e sulle abilità che possiedi. Ecco un breve riepilogo dei diversi metodi che potresti utilizzare:

• Puoi prendere un file PHP vuoto e codificare una pagina WordPress 404 da zero.
• Ogni installazione di WordPress ha un modello di pagina 404 funzionale. Potresti prendere questo e sviluppare la tua pagina in cima al codice esistente.
• La maggior parte dei costruttori di pagine dispone di modelli per aiutarti a creare una pagina 404 per il tuo sito. Se utilizzi un generatore di pagine come GeneratePress, Elementor, Beaver Builder o altri, questo approccio ha molto senso.
• Sono inoltre disponibili plug-in per aiutarti a creare rapidamente 404 pagine.

Per questo articolo, ci concentreremo sugli approcci del generatore di pagine e dei plug-in. Questo perché saranno i metodi più accessibili per la maggior parte degli utenti. Inoltre, se sei in una fase in cui desideri codificare una pagina 404, avrai già molte delle conoscenze di cui hai bisogno.

Utilizzo di un plug-in per creare una pagina 404 di WordPress

Prima di entrare nell'approccio del generatore di pagine, l'obiettivo principale di questo articolo, vale la pena notare che esistono anche le opzioni del plug-in. Tuttavia, c'è davvero solo una soluzione da considerare qui: 404page:

In effetti, questo plugin non ti fornisce gli strumenti per creare il layout della pagina, più che ti consente di impostare la pagina che sviluppi come pagina 404. Molti altri plugin reindirizzeranno gli errori 404 a un'altra pagina. Questo non è ottimale per la SEO. Inoltre, il plug-in non crea richieste server aggiuntive, il che è fantastico se le prestazioni del sito sono importanti per te.

Il processo con il plug-in consiste nel creare il tuo 404 utilizzando l'editor di blocchi di WordPress standard. Questo ti darà tutti gli strumenti necessari per creare la tua pagina, mantenendo il layout "omogeneizzato" con il resto del tuo sito. Avremo maggiori dettagli su cosa includere in una sezione successiva.

Una volta terminato il progetto, andrai alla schermata Aspetto > Pagina di errore 404 :

Ciò ti consentirà di scegliere la pagina 404 giusta dal menu a discesa, ma include anche alcune altre opzioni:

Ad esempio, c'è una scheda Avanzate dedicata che include alcune opzioni utili (e potenti) per la tua pagina 404 :

Puoi scegliere tra varie opzioni per assicurarti che il tuo errore 404 funzioni nel modo giusto. I motori di ricerca utilizzano il feedback del server per decidere come indicizzare le pagine. Potresti voler utilizzare il codice di errore 410 Gone in alcuni casi e con 404page ottieni questa opzione.

Utilizzo di un Page Builder per creare una pagina 404 di WordPress

La maggior parte dei proprietari di siti utilizzerà un generatore di pagine o un framework di qualche descrizione e, in quanto tale, la maggior parte delle principali soluzioni sul mercato include modelli o raccolte di blocchi per la tua pagina 404:

L'aggiunta di questi dovrebbe essere semplice, almeno tanto quanto aggiungere qualsiasi altro elemento alla tua pagina WordPress 404. In effetti, c'è poco che possiamo dire di nuovo in questo senso. Il processo per ciascuna soluzione farà parte dell'esperienza complessiva.

C'è molto altro da dire sugli elementi inclusi nella tua pagina e lo vedremo in seguito.

2. Aggiungi gli elementi essenziali per la tua pagina

Se dai un'occhiata a qualsiasi pagina 404 - e ti incoraggiamo a farlo per ricerca e ispirazione - noterai alcune somiglianze su tutta la linea.

Al suo interno, una pagina WordPress 404 include i seguenti elementi:

• Un messaggio chiaro e diretto all'utente che si è verificato un errore 404.
• Un modo per tornare a una pagina del tuo sito che esiste, spesso la home page.

Nel nostro esempio, abbiamo entrambi questi elementi, insieme ad alcuni marchi iniziali per gentile concessione di un modello Elementor Block:

Tuttavia, se guardi altri esempi di 404 pagine, spesso includono modi per trovare la pagina corretta sul sito. Una casella di ricerca è la più comune e possiamo aggiungerla anche usando il nostro generatore di pagine:

Abbiamo dovuto rielaborare parte del testo per menzionare la casella di ricerca e, mentre eravamo qui, abbiamo aggiunto uno stile. C'è un divisore personalizzato nella parte superiore che funge da "confine" per il resto del testo e la casella di ricerca offre un aspetto "arrotondato" e "3D".

Abbiamo raggiunto questo obiettivo utilizzando le opzioni di stile di Elementor. Border Radius copre la forma dell'area di ricerca e Box Shadow aiuta a dare profondità all'elemento. Abbiamo fatto tutto questo senza un singolo carattere di codice, ma la funzionalità e il valore della pagina 404 sono evidenti.

Da qui, puoi aggiungere quasi tutti gli altri elementi che ritieni possano essere utili. Molti siti utilizzano elenchi di post, altri aggiungeranno un modulo di contatto e il mondo è la tua ostrica qui. Il nostro consiglio sarebbe di mantenere gli utenti sul sito. Per questo motivo, rinunceremmo ai collegamenti ai social media e ci atterremo a ciò che contiene il tuo sito. Questo servirà anche come una pagina pseudo-archivio, che aiuterà il tuo SEO.

3. Assicurati che il tuo sito reindirizza alla tua pagina 404

Il passaggio finale è assicurarsi che il tuo sito utilizzi la tua nuova pagina anziché il modello predefinito. Se stai usando un plugin come 404page, questo è un gioco da ragazzi. Passa a Aspetto > Pagina di errore 404 e individua la pagina corretta dal menu a discesa:

Una volta salvate le modifiche, il lavoro è completo. Per Elementor, dovrai impostare la tua pagina come modello. Se non l'hai fatto, espandi il pulsante verde Pubblica utilizzando la freccia e seleziona Salva come modello:

Una volta assegnato un nome al modello, sei a posto. Da qui, torna alla dashboard di WordPress e alla pagina Modelli > Modelli salvati :

La soluzione qui è un po' complicata, ma dovresti prima creare un nuovo modello usando il pulsante Aggiungi nuovo :

Nella schermata successiva, dai un nome al tuo modello e scegli il tipo Errore 404 :

Verrà visualizzato un pop-up, in cui inserirai il modello di pagina 404 di WordPress:

Questo ti riporterà alla schermata di modifica di Elementor e, quando fai clic su Pubblica , ti verrà visualizzata una schermata di dialogo che ti chiede di scegliere una "condizione":

Questo ti dà un modo per specificare quando e dove verrà visualizzata la pagina 404. Possiamo mantenere le cose semplici e scegliere Includi e Pagina 404 :

Una volta salvate le modifiche, il tuo sito mostrerà la tua pagina WordPress 404 personalizzata.

In sintesi

Se hai bisogno di indicazioni in un luogo grande e sconosciuto, cercherai spesso una mappa o un cartello per avere un indizio su dove ti trovi. Una pagina WordPress 404 è quasi equivalente a un "Sei qui!" marcatore. È un modo per dire a un utente che l'URL che ha digitato non esiste. Tuttavia, molti siti non si fermano a fornire un errore. Queste pagine diventano parte del marchio di un sito e aiutano gli utenti a tornare a una posizione più familiare sul tuo sito.

In questo post, abbiamo visto come creare una pagina WordPress 404. Non è troppo difficile indipendentemente dal tuo approccio. La maggior parte dei temi verrà fornita con un modello di pagina 404 funzionale, anche se se lo abbini a un generatore di pagine dedicato come GeneratePress, Elementor o Beaver Builder, puoi creare pagine 404 completamente funzionali che offrono valore al tuo sito web.

Vuoi creare una pagina WordPress 404 e questo articolo ti aiuterà? Condividi i tuoi pensieri, domande e idee nella sezione commenti qui sotto!