Creare la pagina 404 con WordPress e Visual Composer

Nikola Puciriusa Ultimo aggiornamento 02.09.2021
6 Min.
Ultimo aggiornamento 02.09.2021

Può sempre succedere che il tuo sito web sia in manutenzione, che singole pagine non siano accessibili o che contengano link difettosi, il che porta spesso a una pagina 404. Questo non è bello, ma con pagine di errore ben progettate puoi ancora mantenere i tuoi visitatori. Vi mostriamo come farlo con WordPress e Visual Composer .

Lo scopo di una pagina di errore 404 è quello di informare i tuoi visitatori sull'errore che si è verificato. E per reindirizzarli a quelle parti del tuo sito web che ancora esistono o funzionano. In questo modo, si abbassa la frequenza di rimbalzo.

Una pagina 404 personalizzata è anche ideale per promuovere e inserire elementi di call-to-action. Questo significa che può fondamentalmente svolgere le stesse funzioni di una landing page e di una pagina di atterraggio funzionante.

Lo sapevi?

L'inventore del World Wide Web Tim Berners-Lee aveva un ufficio nella stanza 404 del CERN (Organizzazione Europea per la Ricerca Nucleare), dove ospitava il primo server web. L'errore 404 è stato chiamato così perché Tim spesso non poteva essere trovato.

Guardiamo i seguenti punti:

  • Cos'è una pagina di errore 404?
  • Varianti di errore 404
  • Quando si verificano gli errori 404 
  • Come risolvere gli errori 404
  • Esempi buoni e creativi per le pagine 404
  • Creare una pagina di errore 404 personalizzata con WordPress
  • Pagina di errore 404 con Visual Composer creare

Cos'è una pagina 404?

Brevemente descritto, l'errore 404 è un codice di risposta Hypertext Transfer Protocol (HTTP). Significa che il server non può trovare la fonte richiesta. O quella parte del percorso del sito web che viene dopo la "/". Fondamentalmente, questo significa che la pagina specifica da visualizzare non è disponibile.

La maggior parte delle volte, un messaggio di errore 404 viene visualizzato come segue:

  • HTTP 404
  • 404 Non trovato / non trovato
  • 404
  • Errore 404 / Errore
  • 404 Questa pagina non esiste (La pagina non esiste)
  • Pagina non trovata
  • File non trovato
  • Elenco non trovato 
  • URL richiesto non trovato
  • ... e varianti simili

Possibili ragioni per cui si verificano errori 404:

  • Una pagina o un post di WordPress viene cancellato o spostato in un'altra pagina senza reindirizzare i link
  • Un visitatore inserisce il nome del dominio in modo errato (manca una lettera, errore di ortografia, ecc.)
  • I link precedenti (che sono cambiati) sono ancora elencati nelle fonti esterne
  • Il server/sito web si è bloccato, è in manutenzione o ha problemi tecnici che impediscono la corretta visualizzazione del sito (per esempio, connessione interrotta).

Oltre agli errori 404, ci sono i seguenti codici di stato HTTP:

  • 100-199 Risposta: richiedere il destinatario e continuare l'elaborazione
  • 200-299 Successo: richiesta riuscita e accettata
  • 300-399 Redirection: richiede un'ulteriore azione per completare la richiesta.
  • 400-499 Errore del cliente: richiesta non valida o richiesta non completabile.
  • 500-599 Errore del server: il server non ha potuto accettare la richiesta

Come risolvere gli errori 404

Da un lato, attraverso i redirect, inoltrate i vostri visitatori direttamente alle pagine di destinazione che corrispondono il più possibile al contenuto della richiesta originale. Su RAIDBOXES non è necessario un ulteriore WordPress Plugin per impostare i reindirizzamenti e le regole di reindirizzamento. Vedi le istruzioni sui redirect 301 e 302.

Un'altra possibilità è quella di trovare e riparare i link rotti - cioè sostituirli con la nuova fonte interna valida. Assicuratevi che tutti i link interni portino alle pagine desiderate. Chiedete anche ai proprietari delle fonti di link esterni di cambiare tutti i link rotti.

Un altro consiglio è quello di utilizzare URL e permalink user-friendly - mantenerli brevi, usare lettere minuscole e descrivere dove portano i link. Questo ti aiuterà a tenere traccia di eventuali link interrotti e ad ottimizzare il tuo sito web per i motori di ricerca. Vedi l'articolo Collegamento interno e SEO con WordPress .

Infine, dovreste creare una pagina 404 personalizzata. Questo condurrà i visitatori "persi" di nuovo alla homepage o al contenuto pertinente. Allo stesso tempo, non confonderanno l'errore con un fallimento del vostro intero sito web.

404 pagine e SEO

La maggior parte degli errori 404 di solito non hanno un impatto negativo diretto sulle prestazioni o sul ranking del sito web. Nel peggiore dei casi, non contengono redirect. Poi, gli utenti hanno l'88 per cento di probabilità in più di lasciare il sito completamente e non tornare - un fattore SEO indiretto. Una buona pagina 404 riguarda più che altro la creazione di un'esperienza migliore per il tuo pubblico di riferimento.

Che cosa costituisce le pagine 404 mirate

Quindi è importante avere una pagina di errore 404 personalizzata che riporta i tuoi visitatori alle parti esistenti del sito web. Ora diamo un'occhiata alle opzioni che avete. Gli approcci comuni e raccomandati per creare pagine 404 personalizzate sono:

  • Pulsanti Indietro o Home: Date al vostro pubblico la possibilità di tornare alle pagine disponibili o a qualsiasi luogo.
  • Barra di ricerca: Di solito, questi tipi di errori si verificano quando gli utenti:dentro cercano di trovare un contenuto specifico o una pagina. Quindi, offrite loro un'opzione di ricerca o suggerite pagine di destinazione specifiche.
  • Moduli di contatto: Le persone possono usare un modulo di contatto o una chat dal vivo per ottenere aiuto se non riescono a trovare il contenuto che stanno cercando. O se hanno bisogno di aiuto con altre cose sul tuo sito web.
  • Icone dei social media: È sempre bene collegare diverse piattaforme di social media dove il tuo contenuto può essere trovato e raggiunto.
  • Immagini umoristiche: Questa è una delle pratiche più sottovalutate e chiaramente sottoutilizzate. Certamente l'umorismo può disinnescare il risultato di una percezione (probabilmente) negativa. Qualche altro esempio tra un momento.

Creare una pagina 404 personalizzata con WordPress

Avete le seguenti opzioni per creare una pagina 404. Con WordPress , con un costruttore di siti web o di pagine e con codice personalizzato - come HTML. Ecco come funziona con WordPress :

  1. Vai al tuo WordPress dashboard
  2. Seleziona l'area "Design" sulla sinistra
  3. Lì la sottovoce "Editor
  4. Controlla se il tuo WordPress Theme contiene un "template 404" (Ctrl + F e poi inserisci "404.php");
  5. Clicca il link per il modello 404 sul lato destro

Il contenuto assomiglia a questo:

get_header();
?>
	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->
	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Ora cambialo secondo le tue esigenze. Tuttavia, è necessario conoscere l'HTML per farlo. Dovresti anche lavorare con un figlio Theme, altrimenti le tue modifiche potrebbero essere cancellate di nuovo dopo un aggiornamento di WordPress Themes .

404 WordPress Plugins

La cosa migliore nel mondo di WordPress è Plugins. Ci sono oltre 50.000 Plugins gratuiti per quasi tutti gli scopi che puoi immaginare: Per pagine 404, pagine 301, reindirizzamenti, SEO e molto altro. Vedere l'elenco ufficiale WordPress Plugin .

Creare una pagina 404 con Visual Composer

Uno dei modi più facili e veloci per creare una pagina 404 è con un sito web o un costruttore di pagine. In questo esempio, vi mostriamo come creare una pagina 404 personalizzata con Visual Composer , usando il drag and drop. Notate che questo è possibile solo con la versione premium.

Per prima cosa è necessario scaricare e installare Visual Composer Plugin . Vedi questo video tutorial su YouTube:

YouTube 

Caricando il video, accetti l'informativa sulla privacy di YouTube.
Per saperne di più 

Carica il video 

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9DY2FVNHNZd2NvbyIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Non appena Plugin è stato installato e attivato, si può iniziare. Usa uno dei tanti modelli. Per farlo, clicca sul simbolo del mercato nell'editor del frontend. Seleziona Modelli e inserisci "404" per trovare pagine 404 già pronte.

Questo tutorial spiega esattamente come creare una pagina 404 personalizzata con Visual Composer :

YouTube 

Caricando il video, accetti l'informativa sulla privacy di YouTube.
Per saperne di più 

Carica il video 

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9hSHg2V3dETnVqTSIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Dopo aver terminato e salvato i tuoi design di pagina 404 individuali, puoi ora gestirli nell'editor. Il seguente video mostra come farlo:

YouTube 

Caricando il video, accetti l'informativa sulla privacy di YouTube.
Per saperne di più 

Carica il video 

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9LeG4xT2hmUGRxayIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Per ulteriori suggerimenti su come creare una pagina 404 personalizzata, le migliori soluzioni Plugin e qualche ispirazione per le pagine 404, controlla il post di Visual Composer 404 pagine con WordPress .

Esempi di buone pagine 404

Abbiamo raccolto alcune delle pagine di errore 404 più creative - indipendenti da WordPress e Visual Composer - da cui trarre ispirazione. La pagina 404 di GOG.com è uno dei migliori esempi di pensare fuori dagli schemi. E questo nel vero senso della parola:

404 Pagina campione GOG
La pagina 404 di GOG.com (Immagine © gog.com)

Poiché si tratta di una pagina con valore di intrattenimento, Blizzard ha dovuto soddisfare uno standard elevato in termini di pagina 404. Il design fresco diventa un classico in sé:

404 Pagina campione Blizzard
Blizzard manda i suoi aiutanti (Immagine © Blizzard)

L'ultimo esempio di pagine 404 di Slack è super semplice, ma ancora sorprendente. È un bellissimo esempio di creatività:

Esempio di pagina 404 Slack
Giocoso e con animazione: la pagina di errore 404 di Slack (Immagine © Slack )

Conclusione sulle pagine 404 con WordPress

Ora sai come creare una pagina di errore 404 per condurre i tuoi visitatori alle sottopagine attive del tuo sito web. E come si può trasformare una brutta situazione in qualcosa che minimizza o addirittura risolve il fastidio. Inoltre, ci sono modi molto semplici per progettare una tale pagina 404 - a condizione di creatività e un po' di abilità grafica.

Con un costruttore di siti web come strumento, non hai bisogno di alcuna conoscenza di programmazione per trasformare una noiosa pagina 404 in qualcosa che ti mette di buon umore. E/o che aiuta i tuoi visitatori nella loro situazione. Hai un buon esempio di una pagina di errore 404 di successo? Allora sentitevi liberi di condividerlo nei commenti.

Le vostre domande sulle pagine 404

Che domande avete sulle pagine di errore 404 con WordPress ? Aspettiamo il suo commento. Sei interessato a temi attuali su WordPress e WooCommerce? Poi segui RAIDBOXES su Twitter, Facebook, LinkedIn o tramite la nostra newsletter.

Dopo i suoi studi - Relazioni Pubbliche e Gestione della Pubblicità - Nikola lavora nel team di marketing di Visual Composer . La sua attenzione è rivolta al copywriting, ai social media e all'analitica, è interessata alla psicologia e ai processi decisionali del comportamento dei consumatori.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.