▷ PAGE 404 SHOPIFY

Dans cet article, je vais vous expliquer comment modifier et personnaliser la page d'erreur 404 de Shopify pour obtenir plus de ventes.

▶︎ Erreur 404 - Explications

Lorsque vous naviguez sur Internet, il arrive que l'un des messages suivants apparaisse :

1. Page non trouvée

2. Erreur 404

3. 404 file not found

4. 404 page not found

5. The requested URL was not found in this serveur

6. 404 fichier introuvable

7. HTTP 404

8. HTTP 404 Not Found

9. 404 File or Directory Not Found

Ce message indique une erreur qui est renvoyée par votre site internet et quel que soit le CMS (Content Management System : Système de gestion de contenu) que vous utilisiez : Shopify, Wordpress, etc...

Cela signifie que la page demandée lors de la saisie des mots clés est introuvable, et donc qu’elle n’existe pas.

Il est également possible que la page de votre site web ait été censurée par les moteurs de recherche ou que les résultats de la recherche montrent une page que vous avez supprimée ou renommée dans votre boutique et qui est toujours indexée.

Cette page web en erreur ne peut pas être explorée, ou n’a tout simplement pas été indexée par les moteurs de recherche.

Par conséquent votre nombre de visites risque de diminuer fortement.

Dans mon guide PDF pour le référencement naturel de Shopify, vous trouverez également des informations complémentaires sur cette erreur à ne pas négliger.

Si vous avez sur votre boutique Shopify une erreur 404, il est impératif de corriger cette erreur car Google va retarder l'exploration de votre site ainsi que sont classement (popularité) car cette erreur va influencer les fichiers Sitemap et Robots.txt, Balises, Tags, Mot-clés, etc... et les liens internes (maillage).

Cette correction peut être effectuée par votre Webmaster ou avec la procédure ci-dessous par vous-même.

▶︎ Que signifie le chiffre 404 ?

1. Le premier 4 indique une mauvaise adresse URL

2. Le dernier 4 signale le problème d’accès à l’adresse URL recherchée

▶︎ Origine de cette erreur

Que ce soit par une erreur involontaire lors de la modification de l’URL de l'une des pages de votre site ou par des liens rompus sur votre site web, il est inévitable que les visiteurs de votre boutique arrivent parfois sur des pages d'erreur 404. En fait votre page est toujours indexer par Google, Bing, Yahoo, etc...

Chaque page liée à votre nom de domaine et étant indexée par google (crawl) doit faire l'objet d'une attention particulière. L'URL ne doit pas être modifiée à la légère, elle doit soit être désindexée sur les moteurs de recherche, soit redirigée vers une autre page. La redirection de la page est l'option la plus courante.

Ce sera le sujet de ma prochaine formation sur la gestion des redirections d'URL dans Shopify.

Si le fait de voir une page 404 n'est pas une action habituelle, cela ne signifie pas pour autant que le résultat final doit être un client perdu. C'est ce que l'on appelle l'expérience utilisateur.

Cette page est l'occasion de promouvoir votre site avec un message positif. Vous pouvez par exemple faire preuve d’humour afin de motiver l’internaute pour qu’il reste sur votre site et surtout ait envie d’aller plus loin.

Vous devez tenir compte de cette page sur votre site Shopify.

Inclure une page d'erreur 404 agréable, adaptée à vos produits et efficace pour motiver vos clients à aller plus loin et continuer leur visite sur votre site.

En associant des appels à l'action (CTA), des zones de recherche et des images créatives et amusantes, vous pouvez créer des pages 404 efficaces et transformer une mauvaise expérience en événement positif.

▶︎ Les meilleures pratiques pour "404 page"

Une bonne page 404 doit :

1. indiquer qu'une erreur s'est produite

2. permettre une navigation claire vers une page plus appropriée

3. être cohérente avec votre marque

4. créer des liens hypertextes vers des pages de destination internes à votre site

Pour mieux comprendre l'utilité des liens hypertextes, je vous invite à lire mon article sur ce sujet, qui vous expliquera en détail quel est leur utilité et comment les mettre en place. Vous y trouverez également une vidéo de formation complète : Comment créer un lien hypertexte.

Cela à également un impact en termes de référencement naturel SEO, puisqu'une page bien conçue, avec des liens utiles, réduira le taux de rebond de votre boutique, et la mise en place d'un argumentaire positif ou drôle peut augmenter le temps passé sur votre site.

Pour votre information, sachez que le taux de rebond (Bounce Rate) est le taux de visiteurs qui quittent votre boutique sans avoir navigué sur d'autres pages. Il est donc nécessaire de veiller à ce que ce taux soit le plus bas possible.

Le service d'assistance de Google donne des conseils très éclairants pour optimiser les pages 404. Les informations se trouve sur cette page :

https://developers.google.com/search/docs/advanced/crawling/custom-404-pages?hl=fr

Même avec un modèle 404 personnalisé, il est toujours important de vérifier si les liens d'un site ne sont pas rompus, afin de minimiser le risque que les clients soient mal dirigés.

▶︎ Comment détecter les erreurs 404 ?

Pour corriger les erreurs 404, vous devez tout d'abord savoir où elles se trouvent !

Si vous disposez d'un compte Google Search Console, vous pouvez commencer à utiliser cet outil gratuit dont je vous ai mis le lien ci-dessous :

1. Console Google : https://search.google.com/search-console

La console de Google est un outil gratuit pour détecter vos pages en erreur 404

Allez sur la zone "Index" sur la gauche, sélectionnez "Couverture", puis sur la zone inférieur droite, consultez la zone "Détails".

Si vous avez des pages en erreur 404, elle apparaîtront ici.

Voici quelques outils pour tester vos pages dans le but d'identifier et de corriger rapidement cette erreur 404 sur votre shop :

1. Link Checker de W3C : https://validator.w3.org/checklink

2. Dead Link Checker : https://www.deadlinkchecker.com

3. Semrush : https://fr.semrush.com

▶︎ Une pratique ignorée

La création d’une page 404 performante est une pratique ignorée par la majorité des utilisateurs de Shopify, ce qui induit une perte de clients.

Bien au contraire, vous devez optimiser cette page pour présenter vos produits et services sous leurs meilleurs jour possible, tout en renvoyant les visiteurs vers votre page principal afin d'obtenir plus de clients.

▶︎ Vous avez besoin d'aide !

Je vous accompagne dans votre projet avec mes prestations de services individuelles et personnalisées

Plus qu'une simple formation, une prestation avec un véritable suivi personnel de votre projet Shopify

EN SAVOIR PLUS

▶︎ Exemple d'une page 404 attrayante

Voici quelques exemples de pages d'erreur 404 bien conçues, qui pourront vous inspirer pour optimiser votre propre page :

Humoristique

Comme sur le site de VMA Self Défense Online

L'humour est une excellente approche commerciale pour votre boutique en cas de page inexistante

ou de l'éducation nationale

L'approche de la pqge 404 par l'éducation natianale est très explicite

Informatif

Site d'information du gouvernement français

Une page simple avec un groupe de réflexion

Simpliste

Voici un exemple avec la page de google

Le robot Google pour répondre à une erreur 404

▶︎ Comment personnaliser votre page Shopify - Erreur 404 page ?

Lorsque vous consultez la page 404 par défaut de votre thème, vous remarquerez qu'elle est très simpliste et n'encourage pas l'internaute à poursuivre sa visite ! 

Une page vide de contenu qui ne donne pas envie d'aller plus loin...

Réfléchissez d’abord à la manière dont vous voulez personnaliser votre page d’erreur afin d'augmenter vos ventes, ou de récupérer les E-mails de vos clients.

Il est important de savoir quel est votre objectif lorsque un client arrivera sur cette page :

1. Faire une offre commerciale

2. Récupérer un email

3. Transférer sur votre page d’accueil

4. Un appel téléphonique

5. Un lien vers un autre site

6. Télécharger un E-book gratuit

7. Télécharger une formation gratuite

▶︎ Exemple d'utilisation d'un CTA sur la page 404

Si je prends l’exemple d’un bouton d'appel à l’action, cela pourrait rediriger votre clients vers :

1. une collection spécifique

2. un produit spécifique

3. une zone de recherche

Cela permettra à vos clients de trouver facilement le contenu qu’il recherche.

Cette page 404 est une chance pour vous de communiquer avec eux, et pourquoi pas d’ajouter une note d’humour comme je l’ai fait sur le site de SEO 5 EUROS.

Dans mon cas, j'ai opté pour une note d'humour afin que l'internaute poursuive sa visite sur mon site. De cette façon, je réduirai le taux de rebond sur mon site, ce qui sera un signe positif pour Google.

Ainsi, en créant une page efficace,  vous redirigerez les visiteurs vers un contenu de valeur.

▶︎ Vidéo de Formation sur la personnalisation de la page 404

Formation complète sur la procédure à suivre pour modifier et optimiser la page 404

▶︎ Un accompagnement privé !

Je vous accompagne dans votre projet avec mes prestations de services individuelles et personnalisées

Des prestations à la carte pour votre boutique

EN SAVOIR PLUS

▶︎ Sauvegarde du thème avant modification de la page 404

1. Pourquoi faire une sauvegarde du Thème

Lorsque vous modifier le code de votre site Shopify, vous pouvez faire des erreurs. Celles-ci peuvent entraîner des messages d'erreur susceptibles de perturber gravement le fonctionnement et le temps d'accès de votre boutique.

Si ce type de problème survient, une sauvegarde préalable de votre thème va vous permettre de revenir à l'état initial pour supprimer les modifications que vous avez apportées et donc corriger vos messages d'erreur.

Veuillez noter que lorsque vous installez une application sur votre plateforme Shopify, l'application changera les codes de votre thème, et lorsqu'elle est supprimée, certains codes seront toujours présents. Dans ce même cas, la sauvegarde vous permettra de revenir à l'état initial.

Il est donc préférable de sauvegarder votre thème avant de modifier le code de celui-ci ou d'installer une nouvelle application.

De cette façon, vous n'aurez pas de code parasite sur votre thème, ce qui peut à longue ralentir les temps d'accès à votre site, voire générer des erreurs après la désinstallation de l'application.

1. Comment faire une sauvegarde du thème

Avant de commencer à personnaliser votre thème, je vous recommande d'en faire une copie de sauvegarde. Sur Shopify le terme utilisé est "dupliquer".

La procédure est simple et rapide, il vous suffit de la suivre étape par étape sur ma vidéo de formation : Comment faire une sauvegarde avant modification du thème.

Avant de modifier votre page 404, faites une sauvegarde de votre thème.

Vous pouvez effectuer un maximum de 20 sauvegardes.

Si vous souhaitez en faire une autre, vous devrez supprimer une de vos sauvegardes existantes.

▶︎ La page 404 par défaut

Par défaut, le fichier de mise en page theme.liquid est appliqué au fichier modèle 404.liquid, mais cela peut être facilement modifié.

Voici le template par défaut de la page 404.liquid :

<div class=“page-width">
<div class="empty-page-content text-center">
<h1>{{ 'general.404.title' | t }}</h1>
<p>{{ 'general.404.subtext' | t }}</p>
<p>
<a href="/" class="btn btn--has-icon-after">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
</p>
</div>
</div>

Suppression des marges de haut et bas de page

Avant modification

<div class="empty-page-content text-center">

Après modification

<!--  <div class="empty-page-content text-center"> -->

Comment centrer tous les éléments de la page

Avant modification

<div class="empty-page-content text-center">

Après modification

<div style="text-align: center;">

Ne pas oublier d'ajouter </div> à la fin du bloc concernée.

Comment insérer une image

<img src="URL DE VOTRE IMAGE" alt="BALISE POUR LE RÉFÉRENCEMENT SUR GOOGLE IMAGE" style="float: none;" />

Comment insérer une image avec un lien hypertexte

<a href="URL DE DESTINATION" title="INFO BULLE DE VOTRE IMAGE"><img src="URL DE VOTRE IMAGE" alt="BALISE POUR LE RÉFÉRENCEMENT SUR GOOGLE IMAGE" style="float: none;" /></a>

Comment insérer une ligne d'espace

<br>  à la suite d'une zone texte

<br><br>  à la suite d'une zone image

Comment insérer la barre de recherche Shopify

Une barre de recherche pour une fuite rapide est l'une des caractéristiques les plus courantes et les plus efficaces d'une page 404. Pour inclure une barre de recherche dans la page 404 de votre client, vous pouvez créer un formulaire HTML dont l'attribut action est défini sur /search. Dans ce formulaire, il faut inclure une entrée de type texte avec un attribut name défini à q.

<form class="search" action="/search">

<input type="text" placeholder="LIBELLÉ DE LA ZONE DE RECHERCHE" name="q" value="{{ search.terms | escape }}"  />

<input type="submit" value="LIBELLÉ DU BOUTON " />

</form>

Comment ajouter une zone de texte

<p>VOTRE TEXTE</p>

<h1>VOTRE TEXTE</h1>

Idem pour les balises h2 à h6

<div>VOTRE TEXTE</div>

Comment ajouter une zone de texte avec lien hypertexte

<a href="URL DE DESTINATION" title="INFO BULLE DE VOTRE LIEN"><p> VOTRE TEXTE</p></a>

Comment mettre tous les textes de votre page avec la même taille

À saisir au début de votre page de code

<div style="text-align: center; font-size: 18pt;">

À saisir en fin de votre page de code

</div>

Comment modifier le texte par défaut

Découvrez dans cette vidéo comment modifier le texte par défaut de votre page 404 Shopify

Comment mettre le texte en gras, italique ou souligné

<!--  Insertion de texte en gras--> 

<p><strong>François LAJOIE</strong></p>

 

<!--  Insertion de texte italique--> 

<p><em>Fondateur de SEO 5 EUROS</em></p>

 

<!--  Insertion de texte souligné--> 

<p style="text-decoration: underline;">Fondateur de SEO 5 EUROS</p>

Comment mettre une taille de caractère spécifique sur du texte

Voici un exemple avec une taille de 16pt

<h2 style="font-size: 16pt;">VOTRE TEXTE ICI</h2>

Ajouter une section d'appel à l'action

Si vous souhaitez diriger votre visiteur vers une page ou une collection spécifique lorsqu'il arrive sur une page d'erreur 404, je vous conseille d'utiliser un bouton d'appel à l'action personnalisé.

Vous allez ajouter un section dite "statique" sur votre page qui permettra au visiteur d'accéder à un lien spécifique.

Ce bouton "CTA" est fortement recommandé car les liens hypertextes sur une phrase ou moins mots sont de moins en moins utilisés par les internautes. 

Vous devez d'abord pour créer ce bouton d'appel à l'action commencer par créer un nouveau fichier Liquid vide dans le dossier "Sections" de votre thème.

Vous pouvez par exemple appeler ce lien 404-CTA.liquid. Le radical est 404, car nous travaillons sur la page 404 et il sera plus facile de le retrouver en cas de modification.

Commencez par supprimer les anciens codes, puis il ajoutez simplement le code suivant :

<div id="section-cta">
<a href="{{ section.settings.link }}" class="btn btn--has-icon-after" id="btn-404">{{ section.settings.linktext }}{% include 'icon-arrow-right' %}</a>
</div>

{% schema %}
{
"name": "Call to action Ebook SEO",
"settings": [
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": " JE VEUX VOTRE EBOOK SEO GRATUIT"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Il vous suffit maintenant de personnaliser les textes en rouge.

Ensuite, vous devrez inclure cette nouvelle section dans votre fichier modèle 404.liquid, à l'endroit où vous souhaitez que le bouton d'appel à l'action apparaisse.

Vous devrez utiliser un tag du thème Liquid pour inclure cette section :

{% section "404-CTA.liquid" %}

Veillez surtout à saisir le même nom que le fichier .liquid que vous avez créé.

Ensuite, vous ouvrez Boutique en ligne, Personnaliser et vous sélectionnez la page 404, vous verrez une zone pour le lien du bouton et une zone pour la modification du libellé du bouton.

Il ne vous reste plus qu'à tester votre bouton CTA.

▶︎ Le résultat final

Voici un exemple de page 404 avec la page du site de SEO 5 EUROS

Page de code dans "Templates" "404.liquid" associée à cette page :

<div class="page-width">
<div style="text-align: center; font-size: 18pt;">

<!-- <div class="empty-page-content text-center">-->

<img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/Erreur-404.png?v=1606816781" alt="Oups !" style="float: none;" />

<br><br>

<h1>{{ 'general.404.title' | t }}</h1>

{{ 'general.404.subtext' | t }}

<br><br>

<p><strong>Mais avant d'aller plus loin, je vous propose de télécharger mes guides gratuits !</strong></p>

<p >J'ai créé ces deux guides pour tous ceux qui souhaitent optimiser leur <strong>site E-Commerce Shopify</strong> et leur <strong>Chaîne YouTube</strong> par la mise en œuvre d'une stratégie de référencement naturel (SEO) et de techniques marketing efficaces.</p>

<a href="https://seo5euros.fr/pages/telechargez-vos-guides-gratuits" title="Téléchargez vos Ebook Gratuits"><img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/ebook-youtube-pdf-2020.png?v=1606639414" alt="Ebooks SEO SHOPIFY & YOUTUBE" style="float: none;" /></a>

<br /><br>

<p>Pour télécharger votre <strong>Guide du référencement naturel SEO SHOPIFY</strong>, il vous suffit de vous rendre sur le lien ci-dessous :</p>

{% section "404-CTA-EBOOKSEO" %}

<br>

<img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/guide-seo-2020.png?v=1606633121" alt="Guide SEO Shopify 2020" style="float: none;" />

<p>et votre <strong>Guide Youtube</strong>, cliquez sur le lien ci-dessous :</p>

{% section "404-CTA-EBOOKYT" %}

<br>

<img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/Livre-youtube-pdf-2020.png?v=1606632912" alt="Guide YouTube PDF 2020" style="float: none;" />

<br /><br>

<p>Vous pouvez même si vous le souhaitez télécharger les deux !</p>
<p>Bonne lecture, à tout de suite...</p>

<img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/Francois-seo-5-euros.png?v=1606465941" alt="François SEO 5 EUROS" />

<p><strong>François LAJOIE</strong></p>
<p><em><strong>Fondateur de SEO 5 EUROS</strong></em></p>

<br />

<p style="font-size: 14pt;"><strong><span style="text-decoration: underline;">PS :</span> </strong>Autre chose, vous voulez voir des vidéos de formations sur YouTube...</p>
<p style="font-size: 14pt;">Alors abonnez-vous à ma chaîne YouTube, <strong><a href="https://www.youtube.com/seo5euros/?sub_confirmation=1" title="GO, Je m'abonne..." style="color: #ff2a00;">en cliquant ICI ou sur le lien ci-dessous</a>.</strong></p>

<a href="https://www.youtube.com/seo5euros/?sub_confirmation=1" title="GO, Je m'abonne..."><img src="https://cdn.shopify.com/s/files/1/0275/5910/0473/files/seo-5euros-chaine-youtube.png?v=1597025257" alt="SHOPIFY SEO APP" style="float: none;" /></a>

<br><br>

<a href="{{ routes.root_url }}" class="btn btn--has-icon-after">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>

</p>

</div>
</div>

Page de code dans "Sections" "404-CTA-EBOOKSEO.liquid" associée à cette page :

<div id="section-cta">
<a href="{{ section.settings.link }}" class="btn btn--has-icon-after" id="btn-404">{{ section.settings.linktext }}{% include 'icon-arrow-right' %}</a>
</div>

{% schema %}
{
"name": "Call to action Ebook SEO",
"settings": [
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "JE VEUX VOTRE EBOOK SEO GRATUIT"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

▶︎ En résumé

Ce ne sont là que quelques-unes des façons dont vous pouvez améliorer la page d'erreur 404 standard de Shopify et je vous encourage à concevoir vos pages en fonction des caractéristiques uniques de vos clients.

Les clients apprécieront le fait que vos produits ou services se distinguent à chaque étape du processus.

Il ne faut pas négliger cette page d'erreur. 

▶︎ Cet article vous a plu ?

Postez un commentaire et découvrez sur ma chaîne YouTube des tutos et des formations gratuite pour Shopify afin d'augmenter et optimiser le trafic sur votre boutique.

Je poste régulièrement des vidéos de formations et articles de blog pour booster vos ventes.

À tout de suite,

François - Fondateur de SEO 5 EUROS

✅ Découvrez ma page Facebook SEO 5 EUROS

✅ Découvrez ma page Instagram SEO 5 EUROS

🔎 Téléchargez votre Guide Shopify pour le Référencement Naturel SEO