Vuoi aprire un negozio online?

Errore 404: cos'è e come risolverlo a tuo vantaggio migliorando l'esperienza sul tuo sito

ERRORE 404

È inevitabile che ogni tanto i visitatori di un negozio online finiscano su una pagina di errore 404 (o "not found" in inglese), per via di un banale errore di digitazione o di un link non funzionante. 

La visualizzazione di una pagina 404 rappresenta solitamente un imprevisto, non è necessariamente un problema grave ma può essere dannosa per gli utenti e per la SEO; per i primi si tratta di una cattiva User Experience, per quanto riguarda la seconda invece può impattare negativamente sul posizionamento.

È quindi importante prendere provvedimenti per evitare o rendere meno gravi questi problemi, tra cui:

  • essere consapevoli dei propri "Errori 404";
  • risolverli, ripristinando le pagine o reindirizzando ad altro;
  • sfruttare a proprio vantaggio gli errori 404 che potrebbero occasionalmente sfuggire al vostro controllo.

Il come, per ciascun punto, lo vedremo in questo articolo.

In particolare, dopo aver analizzato cos'è un errore 404, come trovarlo e risolverlo, vedremo quali sono gli stratagemmi per trasformare questo potenziale problema in un momento di branding, dando valore ai clienti.

Anzi, può essere l'occasione per offrire loro assistenza con un messaggio personalizzato. In effetti, alcune delle migliori pagine 404 combinano umorismo e UX di qualità, creando esperienze memorabili.

Nel vostro sito web dovreste sfruttare questa opportunità e realizzare pagine personalizzate per i vostri clienti. Includere pagine di errore 404 semplici, utili e ben congegnate è importante per ridurre le difficoltà dei visitatori.

Call-to-action chiare, box di ricerca e menu di navigazione — uniti a immagini creative e divertenti — consentono di creare vere e proprie landing page personalizzate, trasformando un possibile evento negativo in qualcosa di positivo, anche dal punto di vista SEO.

Download gratuito: checklist per la SEO

Vuoi apparire più in alto nei risultati di ricerca? Chiedi l'accesso alla nostra checklist per l'ottimizzazione sui motori di ricerca.

Alla fine di questo articolo, quindi, esamineremo alcuni esempi di pagine 404 a cui ispirarvi. Vedremo anche come creare una pagina di errore 404 personalizzata su Shopify, il che vi aiuterà a perfezionare e arricchire i vostri ecommerce.

Errore 404: significato

Ma che cos'è una pagina o errore 404, cosa significa? È la schermata che appare al posto del vostro sito quando il server non riesce a trovare un documento o un file richiesti da un utente. Fondamentalmente, è un messaggio di errore che segnala una pagina che non esiste.

Entrando nel linguaggio tecnico, tutti i codici "errore 4xx" sono codici di status HTTP che indicano la presenza di una o più condizioni a carico del client, ovvero della pagina. Negli errori di tipo 4xx non è il server a dare problemi (come sarebbe invece per quelli 5xx, ad esempio l'errore 500) ma il sito web stesso, perché la risorsa non è accessibile.

Perché capita errore 404?

Ma quindi, tradotto, errore 404 cosa significa?

Semplicemente che la pagina non può essere trovata dal server, solitamente per uno (o più) dei seguenti motivi:

  • un errore di digitazione da parte dell'utente;
  • un tentativo di accesso con una modalità non consentita;
  • l'URL di destinazione non esiste più, è stato modificato o spostato;
  • la connessione è interrotta (non la connessione a internet dell'utente ma quella del server);
  • il server web che gestisce il sito ha dei problemi;
  • il dominio non esiste più;
  • altre condizioni varie e momentanee.

Nella maggior parte dei casi, si tratta semplicemente di un errore umano: una pagina che prima c'era ora non c'è più, perché è stata spostata senza fare un redirect, o è stata cancellata per errore, o per un aggiornamento in cui ci si è dimenticati di considerare i backlink da altre pagine, o ancora di cui non si sono analizzate tutte le ripercussioni...i motivi possono essere infiniti, e capita più spesso di quanto si possa pensare.

È evidente che con tutte queste possibilità di errore, solo alcune delle quali dipendono da voi, è praticamente impossibile assicurarsi che un utente non incappi mai in un errore 404 sul vostro sito.

La cosa più corretta da fare è quindi tenere sempre monitorato il problema, per agire tempestivamente qualora la condizione si presenti e dipenda da voi; ma soprattutto, organizzare il sito web in modo tale da sfruttare eventuali Errori 404 a vostro favore, come vedremo.

404 Not Found e problemi SEO

ERRORE 404 SEO

Non tutti gli errori 404 sono, in verità, veri e propri errori: in fase di aggiornamento capita spesso di cancellare pagine obsolete o non più interessanti.

Però questo tipo di situazione dovrebbe essere trattata in modo diverso dai webmaster ed essere segnalata con un codice diverso, il 410, quello che cioè identifica le pagine eliminate definitivamente. In questo modo si indica a Google che la pagina non è più visitabile.

Lasciare che pagine indicizzate vadano semplicemente in errore 404 not found, invece, può essere un grave errore con serie ripercussioni dal punto di vista SEO.

Google infatti si troverà nel processo di crawling con pagine che non riesce a trovare, penalizzando la loro indicizzazione in SERP e soprattutto, se i casi sono molteplici, rischiando di etichettare l'intero sito web in modo negativo a causa della cattiva esperienza utente che questo determina.

Ecco perché è importante trovarle tempestivamente.

Errore 404 not found: come trovarli?

Il primo passo è chiaramente identificare le pagine esistenti che forniscono questo errore.

Ci sono tanti programmi che permettono di scansionare il proprio sito web e trovare, tra le altre cose, gli errori 404 "page not found": quasi tutti gli strumenti SEO utilizzati per le analisi keyword vanno bene, come Semrush, Ahrefs o ScreamingFrog.

Anche strumenti specializzati come Link Checker di W3 o l'app Transportr consentono agli sviluppatori di identificare e correggere rapidamente qualsiasi evento 404.

Ma la cosa più semplice, che ogni persona che gestisce un ecommerce o un sito web dovrebbe fare, è consultare Google Search Console

Si tratta di una serie di strumenti gratuiti utilizzati per monitorare lo stato del proprio sito web avvalendosi del crawler di Google stesso, ovvero il robot con il compito di analizzare le pagine e la loro struttura per indicizzarle nel motore di ricerca.

Per iniziare a usare Search Console dovrete collegare il vostro sito web alla piattaforma - è semplice ma ci vorranno alcuni passaggi, che potete eseguire con le indicazioni di Google stesso.

Una volta avuto accesso ai dati di Search Console relativi al vostro sito web, trovare le pagine 404 sarà facile:

  • Cliccate su "Copertura" per vedere apparire un grafico con tutti gli errori del sito web e scorrete fino ai dettagli per capire di quali pagine ed errori si tratta, come da immagine sotto.
  • In alternativa, potete cercare link specifici con lo strumento "Controllo URL".

errore 404 search console

Se hai creato il tuo sito web con un CMS come Shopify la procedura potrebbe essere ancora più semplice utilizzando qualche app.

Considerate comunque che questi strumenti trovano solo una parte dei 404 in cui gli utenti potrebbero incappare (mancano ad esempio i 404 derivanti da collegamenti rotti su altri siti web). Si stima che si perdano fino all'83% dei 404 per queste inesattezze, quindi dovrete comunque considerare la possibilità che qualcosa sfugga al vostro controllo.

Come risolvere errori 404 not found 

Una volta individuati gli errori 404 bisogna capire come risolverli.

In alcuni casi può essere facile: si può scoprire che una pagina è stata cancellata o spostata per errore e, semplicemente, ripristinarla nella sua posizione originale.

In altri casi invece il contenuto potrebbe non essere più valido o pertinente - in questi casi è opportuno effettuare dei redirect 301, un altro tipo di codice che segnala al server di reindirizzare il traffico su una pagina differente. 

In questo modo gli utenti che arriveranno sulla vostra pagina 404 in realtà non vedranno un messaggio di errore, ma verranno mandati direttamente su un URL differente. Così facendo si salvaguarda anche l'aspetto SEO, non perdendo traffico né juice dei backlink.

Attenzione a usare questo metodo solo con pagine che effettivamente trattano lo stesso argomento, però, oppure a una pagina di disambiguazione: non è mai una buona idea ingannare l'utente facendolo cliccare su un link che non lo porta dove crede di andare.

Sarebbe sbagliato, ad esempio, rimandare semplicemente alla Home, e anche il crawler di Google non lo vedrebbe di buon occhio.

Ma quando non si può risolvere il problema di un errore 404? Se questo non dipendesse da voi, per esempio, oppure in quei casi che sfuggono al vostro controllo.

Proprio per essere preparati a queste situazioni è opportuno premunirsi e personalizzare la pagina di errore 404, così da sfruttarla a vostro vantaggio in uno o più modi.

Modificare le pagine 404 a proprio vantaggio

Idealmente una pagina 404, se sfuggita al nostro controllo e arrivata ugualmente nonostante le nostre attenzioni sotto gli occhi dell'utente, dovrebbe indicare che si è verificato un errore e indirizzarlo con chiarezza a una pagina più adatta; il tutto, restando in linea con lo stile del brand.

In questo modo una pagina di errore 404 può avere addirittura un impatto positivo sulla SEO perché, se ben strutturata e provvista di link utili, riduce il bounce rate (tasso di visitatori che lasciano il sito dopo aver visto una sola pagina). Inoltre, se dotata di contenuti coinvolgenti o divertenti, incoraggia gli utenti ad apprezzare il brand, umanizzandolo.

Anche Google dedica alcuni preziosi consigli alla creazione delle pagine 404:

“Se avete accesso al vostro server, vi consigliamo di creare una pagina 404 personalizzata. Una pagina 404 personalizzata ottimale consente agli utenti di trovare le informazioni che stanno cercando e fornisce loro altri contenuti utili che li incoraggiano a continuare la navigazione nel vostro sito”.

Ma cosa significa nel concreto? Ecco come è possibile personalizzare le pagine 404 sul proprio sito web per volgerle a proprio vantaggio.

Come personalizzare le pagine di errore 404 con Shopify

RISOLVERE ERRORE 404

State cercando di personalizzare la pagina di errore 404 su Shopify? L'utilizzo di una di quelle predefinite è una soluzione praticabile, ce ne sono tante tra i temi del nostro Theme Store.

Tuttavia considerate che le pagine 404 personalizzate sono più vantaggiose per i clienti. Una pagina di errore 404 progettata con cura e in linea con il brand offre la possibilità di incrementare le vendite.

Ad esempio, un pulsante di call-to-action può indirizzare i visitatori verso una collezione specifica; o un box di ricerca può consentire agli utenti di trovare facilmente ciò di cui hanno bisogno. La pagina di errore 404 è anche un'occasione unica per il merchant di comunicare con il proprio pubblico; l'aggiunta di un po' di umorismo con immagini adatte può aumentare la notorietà del brand. Come abbiamo visto con gli esempi di cui sopra, una pagina 404 divertente e informativa può neutralizzare un possibile problema e reindirizzare i visitatori a contenuti di valore.

Tenendo presenti questi aspetti, vi indichiamo alcuni metodi adatti a personalizzare le pagine di errore 404 per i vostri ecommerce.

1. Layout template alternativo per le pagine 404

Spesso nei siti web la pagina 404 ha uno stile e un aspetto diverso rispetto alle altre pagine. Per ottenere questo risultato dovete creare un file di layout alternativo per le pagine di errore 404. Ad esempio, potreste voler rimuovere il footer o creare uno speciale menu di navigazione.

Il file di layout theme.liquid è applicato al template file 404.liquid di default, ma questa impostazione predefinita può essere facilmente modificata. Innanzitutto create una copia del file theme.liquid all'interno della cartella del layout del tema e rinominatela come 404-layout.liquid.

Ora potete tranquillamente rimuovere dal file di layout gli elementi superflui (header, footer, ecc.), modificare l'H1 e personalizzare tutto ciò che volete (come i title tag). Una volta che sarete soddisfatti di questo file di layout alternativo, potrete utilizzare i logic tag di Liquid per collegare il file di layout con il file template.

Per renderizzare la pagina 404 con questo particolare file di layout, dovrete aggiungere il tag Liquid {% layout "404-layout" %} in cima al file template 404.liquid. Quindi ad esempio il vostro template 404.liquid potrebbe avere questo aspetto:

Ora, ogni cambiamento che apportate al file 404-layout.liquid verrà applicato alla pagina 404. Consultate il nostro Centro Assistenza per maggiori informazioni sui template 404.

2. Immagine di sfondo personalizzata sulle pagine di errore 404

Uno dei metodi più efficaci per identificare online un marchio è la grafica semplice; e l'immagine di sfondo è diventata una caratteristica standard delle pagine 404. Per ottenere l'effetto di un'immagine a tutto schermo potete usare il CSS, assegnando un'immagine di sfondo specifica alla pagina 404.

La proprietà background-image vi permette di collocare un'immagine sotto il resto degli elementi della pagina. Potreste anche impiegare il CSS per collocare più immagini sullo sfondo, il che può risultare utile quando si tratta di inserire un logo sopra lo sfondo.

La prima cosa da fare è caricare l'immagine desiderata su Shopify, da Impostazioni > File. In questo modo verrà generato un URL univoco dove è memorizzata l'immagine.

Pagine di errore 404: file

Poi passate al foglio di stile del tema e usate:

  • "class" o "ID" dell'opening container della vostra pagina 404.liquid come selettore
  • e proprietà CSS background-image e URL come valore

Il risultato potrebbe avere questo aspetto:

3. Barra di ricerca sulla pagina di errore 404

La barra di ricerca per trovare subito dove andare è una delle funzionalità più comuni ed efficaci delle pagine di errore 404. Per includere una barra di ricerca nella pagina 404 del vostro cliente, potete creare un modulo HTML con l'attributo action impostato su /search. In questo modulo, deve essere incluso un inserimento di testo con l'attributo name impostato come q. Ecco un semplice esempio:

Per definire l'aspetto della vostra pagina potete modificare il CSS definendo i valori del margine, dello spazio intorno ai contenuti, ecc. Ecco ad esempio come appare il box di ricerca nella pagina di errore 404 del mio negozio di prova:

Pagine 404: barra di ricerca

4. Sezione dedicata alla call-to-action

Si possono indirizzare gli utenti a una pagina o collezione specifica quando arrivano sulla pagina 404. Un pulsante di call-to-action personalizzabile è il modo ideale per ottenere questo risultato.

Aggiungendo una sezione statica che offre questa possibilità, garantirete ai vostri clienti un maggiore controllo sul negozio.

Per prima cosa, dovete creare un nuovo file Liquid vuoto nella cartella delle sezioni del tema, con il nome 404-call-to-action.liquid. Quindi aggiungete questo codice al file:

Successivamente, dovrete includere questa nuova sezione nel vostro file template 404.liquid nel punto dove desiderate che appaia il pulsante di call-to-action. Utilizzate il tag del tema Liquid {% section "404-call-to-action" %} per includere questa sezione. Nel mio caso il file template 404.liquid ha questo aspetto:

Ora, quando aprite l'editor del tema e caricate una pagina inesistente, vedrete un'opzione per modificare il pulsante di call-to-action. Le modifiche apportate con l'editor del tema da questo momento si applicheranno a qualsiasi pagina di errore 404.

Pagine 404: pulsante

Esempi di pagine errore 404 divertenti e originali

Ormai creare pagine di errore 404 personalizzate è la prassi. Consente di presentare il proprio brand nella migliore luce possibile, indirizzando i visitatori verso le pagine più importanti del sito.

Liberate la creatività quindi e impostate le vostre pagine di errore 404 in modi originali. Non è necessario essere divertenti a tutti i costi, piuttosto è importante essere coerenti con il proprio brand, il posizionamento e i valori.

Ecco alcuni esempi di pagine di errore 404 che potranno ispirarvi.

1. Velasca

Pagina 404 Velasca

Utilizzando l'umorismo con il riferimento al Monopoli, Velasca trasmette un messaggio divertente che neutralizza il senso di disagio quando si atterra su questa pagina di errore. Le opzioni di navigazione sono semplici, per evitare qualsiasi confusione. È presente un messaggio con le indicazioni per “riprendere la strada giusta” e un floating link sulla sinistra per entrare in contatto con l'azienda.

Scorrendo verso il basso, compare l'invito a iscriversi alla newsletter per ottenere il 10% di sconto sul primo ordine. Questo è un buon incentivo per i visitatori e un modo per trasformare l'errore 404 in un acquisto.

2. Depuravita

Depuravita pagina 404

Depuravita adotta un approccio semplice, per non confondere gli utenti: il messaggio di errore, un pulsante ben evidente per tornare alla homepage, il menu di navigazione e un floating link per contattare l'assistenza.

I più curiosi, scorrendo la pagina, saranno in grado di visualizzare un'anteprima dei prodotti e il feed di Instagram. Indubbiamente l'aggiunta di contenuti below the fold è una buona idea per diminuire il bounce rate e coinvolgere gli utenti.

3. Classic Boats Venice

Classic Boats Venice pagina 404

Ecco un esempio di pagina di errore 404 minimal, che fornisce all'utente un percorso chiaro e senza distrazioni verso l'homepage.

Minimal, ma solo in apparenza... Perché a sorpresa scorrendo la pagina verso il basso appare una landing page completa di tutto.

Classic Boats Venice pagina errore 404 below the fold

Contatti, unique selling proposition e modulo di iscrizione alla newsletter. Ci sono anche i link agli ultimi blog post, completi di anteprima delle immagini. Con una soluzione di questo tipo, è possibile coinvolgere gli utenti senza rinunciare alla chiarezza.

4. Wear Me

Wear Me pagina errore 404

Wear Me sa che l'utente potrebbe cliccare sul link di un prodotto non più disponibile e atterrare sulla pagina 404. Quindi spiega l'errore in termini semplici, incoraggiando alla scelta di un nuovo prodotto.

È molto utile mostrare sulla pagina alcuni prodotti consigliati in modo da offrire ai visitatori delle alternative, come fa questo brand.

Pagina 404? Non è un errore

Insomma, c'è una grande opportunità dietro ogni pagina 404 "not found". Non deve essere necessariamente un errore.

Questi sono solo alcuni dei modi per perfezionare la pagina standard di errore 404 di Shopify. E vi incoraggio a creare le pagine 404 tenendo conto delle caratteristiche uniche dei vostri clienti.

Pensando fuori dagli schemi, potrete offrire ai vostri clienti l'opportunità di trasformare una potenziale perdita in un risultato positivo. Con le pagine di errore 404 potrete addirittura aiutarli a incrementare le vendite. Sicuramente i vostri clienti vogliono che il loro brand si distingua in ogni punto del percorso di acquisto. Quindi, non trascurate le pagine di errore.

Speriamo davvero che, con l'aiuto di questo articolo, sarete in grado di dare un valore aggiunto ai vostri progetti!

Avete sperimentato diversi stili per sviluppare delle pagine di errore 404 funzionali e divertenti? Condividete le vostre esperienze nei commenti.


Articolo originale di Liam Griffin, tradotto e adattato da Maria Teresa Cantafora.

 

Errore 404: domande frequenti

Errore 404 cosa significa?

Errore 404 è la schermata che appare al posto del vostro sito quando il server non riesce a trovare un documento o un file richiesti da un utente. Fondamentalmente, è un messaggio di errore che segnala una pagina che non esiste.

Come risolvere errore 404?

Se si scopre che una pagina è stata cancellata o spostata per errore dando così origine a un errore 404 si può semplicemente ripristinarla nella sua posizione originale.
In altri casi invece il contenuto potrebbe non essere più valido o pertinente - in questi casi è opportuno effettuare dei Redirect 301, un altro tipo di codice che segnala al server di reindirizzare il traffico su una pagina differente.

Argomenti: