Come creare efficaci pagine 404 di errore in WordPress

I più grandi siti là fuori sono sempre degni di nota per la loro attenzione ai dettagli. Un dettaglio spesso sottovalutato è l'esistenza di una pagina di errore 404 utile e intuitiva. WordPress offre un modo semplice per creare e personalizzare la pagina 404-error, ma sfortunatamente, la semplicità nella personalizzazione non significa automaticamente efficacia.

Il noto esperto SEO di WordPress, Joost de Valk (alias yoast), riporta le sue recenti scoperte da diversi anni di audit SEO di siti web. Secondo questo rapporto, un numero significativo di siti Web controllati ha avuto problemi con l'ottimizzazione della pagina 404-error. Il tema WordPress predefinito (attualmente TwentyTwelve) ha un modello molto semplice per questo caso e non molti proprietari di siti vanno oltre.

Perché è importante?

Diamo un'occhiata a questo dal punto di vista del senso comune. Quando si verifica un errore 404? Quando qualcuno clicca su un link che dovrebbe puntare al contenuto del tuo sito, ma per qualsiasi ragione non c'è una pagina corrispondente: forse hai cambiato un permalink o rimosso la pagina, forse hai cambiato i tag o la slug di categoria, forse il link era semplicemente sbagliato Ci sono diversi motivi per l'errore, ma un fatto importante non può essere negato: il visitatore è già sul tuo sito, è già interessato a qualcosa, ha già fatto uno sforzo per trovarlo, quindi questo sforzo dovrebbe essere ricompensato

Una delle regole fondamentali dell'interfaccia utente non è quella di lasciare gli utenti nel vicolo cieco senza una guida. C'è sempre un pulsante indietro nel browser, ma vuoi davvero che il tuo visitatore debba usarlo?

 Mela fornisce una sitemap sulla loro pagina 404-error accompagnata da un messaggio semplice e chiaro.

37signals usa l'opportunità in più per presentare i loro prodotti e fornisce informazioni di contatto per risolvere il problema.

ZURB La pagina 404-error enfatizza l'opzione per contattarli con un problema. I progettisti dovrebbero risolvere i problemi, giusto?

 Problogger presenta una vasta gamma di vari contenuti da immergersi nella lettura.

Justin Tadlock Il blog di Google utilizza breadcrumb per presentare un link alla home page.

Creazione di una pagina di errore 404 personalizzata in WordPress

Cosa si può fare per migliorare questa situazione? Come si può trasformare l'errore in un'opportunità?

Alla ricerca di idee e linee guida possiamo consultare WordPress Codex o le Istruzioni per i webmaster di Google come punti di partenza perfetti. In realtà, il nostro compito principale è piuttosto semplice: spiega perché una pagina non può essere localizzata e offri suggerimenti per raggiungere lo schermo giusto. Da questo punto di vista possiamo ricavare un elenco di possibili componenti che creano una pagina "perfetta" 404-error:

• un chiaro messaggio di errore in modo semplice e amichevole, con scuse per l'inconveniente;
• l'aspetto grafico del resto del sito con chiare opzioni di branding e navigazione;
• possibili alternative e suggerimenti su come trovare le informazioni desiderate. Un modulo di ricerca, link a contenuti rilevanti e / o popolari e la homepage sono tutte soluzioni possibili per questa parte;
• un modo per segnalare un errore se l'utente lo desidera; puoi fornire una email di contatto o altre informazioni di contatto.

Da questo elenco possiamo determinare utili suggerimenti e idee su cosa includere in un modello di errore 404:

• post recenti e / o popolari, o in alternativa post casuali;
• opzioni di abbonamento (come RSS) oltre ai dettagli di contatto;
• sitemap, specialmente nel caso di siti di piccole dimensioni;
• promozioni o informazioni sulle tue offerte e servizi;
• materiali di branding per identificare facilmente il tuo sito e il tuo settore;
• informazioni sull'URL richiesto e il contenuto più pertinente;
• tagcloud come un modo rapido per posizionare il visitatore nel contesto del tuo sito;
• un sistema di notifica e / o tracciamento per essere a conoscenza di eventuali errori 404 sul tuo sito.

Una cosa importante di una pagina 404-error è un corretto stato HTTP 404 che dovrebbe essere servito dal server. Fortunatamente, WordPress gestisce questo per noi automaticamente, in modo che possiamo concentrare i nostri sforzi sulla creazione della pagina stessa. Abbiamo bisogno del tema attivo per avere un modello separato per la pagina 404.php. La struttura delle ossa nude del modello è abbastanza semplice:

Il markup che crea la struttura della pagina deve corrispondere a ciò che viene utilizzato dal tema attivo. In alternativa, può essere fornito uno stile aggiuntivo per imitare quella struttura. Includendo le chiamate standard get_header e get_footer, ci assicuriamo che la pagina contenga tutti gli elementi di branding e le opzioni di navigazione e che tutti gli script e gli stili siano caricati correttamente.

Ora, quando abbiamo fatto i preparativi iniziali, compiliamo la pagina. La cosa migliore che potremmo fare per il visitatore sulla pagina 404 è indovinare cosa è effettivamente richiesto e fornire la corrispondenza più vicina possibile. Le informazioni sull'URL richiesto sono memorizzate da WordPress nella proprietà $ wp-> request . Possiamo analizzare quella stringa e cercare di trovare contenuti simili basati su dati post_name , che memorizzino informazioni su post e slug di pagina. Se tale ricerca non restituisce nulla di significativo, possiamo provare una ricerca regolare attraverso il contenuto del post. Se questi sforzi non producono risultati positivi, possiamo sempre fornire una lista di post recenti come una riserva.

Ovviamente includiamo anche il messaggio amichevole, il modulo di ricerca e un link alla homepage.

Per prima cosa creeremo alcune funzioni ausiliarie per gestire alcune routine di template; potrebbero essere inclusi in functions.php del tuo tema o direttamente all'inizio del file 404.php.

function frl_get_requested_slug(){global $wp;$q = $wp->request;$q = preg_replace("/(.*)(html|htm|php|asp|aspx)$/","",$q);$parts = explode('/', $q);$q = end($parts);return $q;}

La funzione frl_get_requested_slug tenta di ottenere lo slug di pagina richiesto utilizzando l'oggetto globale $ wp e le espressioni regolari. Il codice presuppone che il sito utilizzi i permalink e la richiesta vada nella forma appropriata.

function frl_list_posts($posts){if(empty($posts))return '';$list = array();foreach($posts as $cpost) {$title = apply_filters('the_title', $cpost->post_title);$url = get_permalink($cpost);$list[] = "

frl_load_error_style carica stili personalizzati con il modello 404, assumendo che il file .css appropriato si trovi nella cartella / css all'interno della directory del tema attivo.

Il codice del modello come pianificato include quattro parti: il messaggio amichevole; la ricerca; la lista dei post recenti; l'ultima opportunità.

Il messaggio amichevole:

  404 pagina non trovata 
  Siamo spiacenti, sfortunatamente, non siamo riusciti a trovare la pagina richiesta. 
  Troviamo le informazioni che ti servono. 

La ricerca del contenuto richiesto:

  'any', 'post_status' => 'publish', 'name' => $ q, 'posts_per_page' => 5); $ query = new WP_Query ($ args);  // query post di slugif (vuoto ($ query-> posts)) {// cerca post $ q = str_replace ('-', '', $ q); $ args = array ('post_type' => 'any ',' post_status '=>' pubblica ',' s '=> $ q,' posts_per_page '=> 5); $ query-> query ($ args);} if (! vuoto ($ query-> post)) :?> 
  Stavi cercando una delle seguenti pagine? 
  posti);?> 

Prima di tutto, eseguiamo una query di WordPress con una serie iniziale di argomenti che cerca lo slug richiesto in un campo nome post / pagina. Se non otteniamo risultati dopo, sostituiremo i trattini nella stringa richiesta con spazi ed eseguiremo un'altra query che cerca le parole richieste nel contenuto di post / pagine. Se abbiamo ottenuto dei risultati, li emettiamo con l'aiuto della funzione frl_list_posts creata in precedenza .

Elenco dei post recenti:

  "post", "post_status" => "pubblica", "posts_per_page" => 5); $ query-> query ($ args); if (! vuoto ($ query-> post)):?> 
  Perché non dare un'occhiata ai post più recenti? 
  posti);?> 

In questa parte eseguiamo una query per i 5 post più recenti nel blog e li emettiamo nello stesso modo di prima.

L'ultima opportunità:

  Non buono? 
  Si prega di utilizzare il modulo di ricerca per riprovare o iniziare a navigare dalla home page   . 
  . Se hai bisogno di ulteriore assistenza, non esitare a contattare [email protected] . 

Infine, se nessuna delle opzioni di cui sopra soddisfa l'utente, offriamo un link alla homepage e forniamo un modulo di ricerca.

Prevenire 404 errori sul tuo sito

Sembra che abbiamo fatto del nostro meglio per aiutare il visitatore sulla pagina 404-error. In realtà, il miglior aiuto è quello di impedire l'uso della pagina 404. In particolare, possiamo:

• istituire permalink ben strutturati dall'inizio del progetto, quindi è meno probabile che ci sarà bisogno di cambiarli in futuro;
• monitorare i collegamenti in entrata che non sono corretti, contattare i proprietari dei siti Web in cui tali collegamenti vengono visualizzati, con una richiesta di correggerli;
• prenditi cura dei vecchi contenuti, non rimuovili fino a quando non è assolutamente necessario e imposta il corretto reindirizzamento sulla migrazione delle pagine.

Non ci sono scuse reali per cui il tuo sito o blog non dovrebbe avere una pagina 404-error utile e user-friendly. Spero che questa guida ti abbia fornito alcuni suggerimenti utili.

Cosa hai sulla tua pagina 404? Cosa trovi utile quando incontri 404 pagine? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, immagine persa via Shutterstock.