Les pages d’erreur 404, nous en avons tous déjà aperçues ; que ce soit sur Google, un site e-commerce, un blog, ou même un réseau social.
Si vous avez déjà été confronté à une erreur 404, vous avez probablement cliqué sur le bouton "retour" de votre navigateur.
Cette expérience utilisateur problématique doit être prise en compte par les e-commerçants ainsi que les développeurs qui conçoivent des sites e-commerce. Car tôt ou tard, certains visiteurs atterriront sur des pages qui afficheront une « erreur 404 » et si cette page d’erreur 404 affichée par défaut par votre serveur n’est pas personnalisée, les visiteurs pourraient facilement être déroutés, surtout si le message d’erreur « 404 not found » est affiché en anglais.
D’où l’intérêt de créer despages d’erreur 404 personnaliséesclaires et concises.
Découvrez donc dans cet article, tout ce qu'il vous faut savoir sur les erreurs 404 et ainsi optimiser votre site web.
Qu'est-ce qu'une erreur 404 ?
Qu'est-ce qu'une erreur 404 ? En termes simples, l’erreur 404是一个误差est retournee le serveur HT不相上下TP lorsque le visiteur atterrit sur une page web introuvable dans un site web. Essentiellement, une page 404 est une page web qui n’existe pas. L’erreur s’affiche généralement avec le message « Page non trouvée » ou « Page introuvable » (ou « page not found » en anglais, s’il s’agit de la langue par défaut du serveur).
La page d’erreur 404 est donc une page web qui sert à expliquer au visiteur que le contenu qu’il recherche n’est pas disponible — soit parce qu’il n’existe « pas », soit parce qu’il n’existe « plus ».
Pourquoi une page web est-elle introuvable ?
Parmi les causes qui pourraient faire qu’un visiteur se retrouve sur une page oùle « contenu n’existe PAS », on pourrait citer par exemple une URL mal saisie dans le navigateur. Si un internaute tente d’accéder directement à une page dans votre site en la saisissant dans le navigateur, il suffirait qu’il oublie une lettre ou qu’un mot soit mal écrit pour qu’il se retrouve sur une page qui affiche une erreur 404.
Par exemple, « www.votreboutique.com/page-de-produi » au lieu de « /page-de-produit ».
L’erreur de frappe peut également venir des symboles qui servent à structurer l’URL, comme le slash (/), ou le tiret du 6 (-). Un symbole manquant, en plus, ou dans la mauvaise position conduira la plupart du temps le visiteur vers une page d’erreur 404.
Par exemple, « www.votreboutique.com/pagede-produit » au lieu de « /page-de-produit ».
Parmi les causes qui pourraient faire qu’un visiteur se retrouve sur une page oùle « contenu n’existe PLUS », on pourrait citer les liens internes brisés ou « morts ». Il s’agit dans ce cas de liens qui redirigent vers des URL que vous avez supprimées et qui ne sont plus actives. Par exemple, la page d’un produit devenu obsolète que vous avez supprimée ; la page d’un jeu-concours qui a pris fin et que vous avez supprimée ; ou encore la page d’une promotion éclair que vous avez organisée par le passé et qui a pris fin. Lorsque vous supprimez des pages sans rediriger les liens qui pointent vers celles-ci, le visiteur atterrit sur une page d’erreur 404 s’il clique sur ces liens brisés étant donné que le contenu n’est plus disponible.
Pages d’erreur 404 non personnalisées et SEO : les risques
Enmatière de SEO, une page d'erreur 404 non personnalisée présente un inconvénient majeur dans le sens où elle risque d’augmenter le taux de rebond ; de diminuer le nombre moyen de pages vues par session ; et de diminuer le temps moyen passé sur le site.
Taux de rebond
Le taux de rebond est un indicateur de performance SEO qui vous indique combien de visiteurs quittent votre site depuis la même page d’atterrissage, sans avoir consulté aucune autre page. Ainsi, si un visiteur atterrit directement sur une page d’erreur 404 non personnalisée, il est fort probable qu’il quitte directement votre site. Un tel comportement risque ainsi d’augmenter votre taux de rebond, et de nuire par conséquent à votre classement SEO.
Nombre moyen de pages vues par session
Le nombre moyen de pages vues par session est un indicateur servant à suivre le nombre moyen de pages vues par les visiteurs qui consultent votre site. Naturellement, plus un visiteur consulte de pages, plus le signal de la bonne qualité de votre contenu est fort — ce qui plait particulièrement aux moteurs de recherche dont la priorité est de présenter le contenu le plus pertinent possible. Lorsqu’un utilisateur tombe sur une page d’erreur 404 non personnalisée, vous aurez deviné qu’il risque de quitter votre site sans l’explorer pleinement. Ce qui conduit à diminuer le nombre moyen de pages vues par session, avec un impact probablement négatif sur le classement SEO.
Temps moyen passé sur votre site
Le temps moyen passé sur un site est également un facteur de classement SEO pris en compte par l’algorithme des moteurs de recherche. Plus le temps moyen passé sur votre site est élevé, plus Google considère que votre contenu apporte de la valeur. Mais en atterrissant sur une page d’erreur 404 non personnalisée, le visiteur risque de quitter votre site prématurément. Ce comportement, s’il est fréquent, risque de faire baisser le temps moyen passé sur votre site et de nuire par conséquent au SEO.
Comment corriger les erreurs 404 ?
Meme en creant一个协定en 404 personnali web页sée, il reste tout de même important de passer au crible votre site pour détecter les liens brisés, afin de minimiser en premier lieu la probabilité qu’un visiteur atterrisse sur une page d’erreur. Que vous soyez un e-commerçant qui maitrise le HTML ou un développeur, vous pouvez utiliser certains outils qui permettent de rapidement identifier les liens brisés pour les rediriger ou les supprimer — ce qui permet de réparer les erreurs 404 connexes. La réparation des liens internes brisés ou « morts » contribuera par ailleurs à optimiser votre maillage interne et facilitera l’indexation de vos URL par les moteurs de recherche.
Pages 404 personnalisées : bonnes pratiques pour les créer
Une page 404 efficace doit indiquer qu’une erreur s’est produite, fournir une navigation claire vers une page plus pertinente, et être cohérente avec l’identité visuelle de la marque. Et comme vous vous en doutez maintenant, une page d’erreur 404 bien conçue qui contient des liens utiles peut contribuer à réduire le taux de rebond. Et le contenu engageant ou divertissant qu’elle intègre peut même augmenter le temps passé sur-site en retenant les visiteurs plus longtemps.
Même l’équipe de support de Google conseille la création de pages 404 personnalisées et fournit des bonnes pratiques à suivre en la matière dans son guide :Créer des pages d'erreur 404 personnalisées.
Exemples de pages 404 personnalisées
Afin de vous aider à créer votre page web d’erreur 404, voici quelques exemples de boutique Shopify ayant fait preuve d’originalité pour la leur.
Shanty Biscuit
On en attendait pas moins de la marque de biscuits personnalisables Shanty Biscuit. Avec un ton toujours léger et humoristique sur son site comme sur ses réseaux sociaux, la marque se devait de créer une page d’erreur 404 à son image. Elle l’a fait en ajoutant un petit clin d’œil en photo à l’aide d’un biscuit personnalisé affichant le message « ERROR 404 : BISCUIT NOT FOUND ».
La vie est belt
Voici un exemple de page web d’erreur 404 simple et efficace. La marque La vie est blet a choisi d’afficher un « OUPS » plutôt que le classique message « ERREUR 404 ». Une idée certes sobre mais qui fonctionne parfaitement.
Flowrette
La marque Flowrette, a, de son côté, pris le parti facilité la navigation à ses utilisateurs. Ainsi après avoir ajouté le message d’erreur 404 « Oups, quelque chose ne fonctionne pas » elle a choisi d’ajouter deux boutons d’appel à l’action (« page d’accueil » et « nos bouquets ») permettant à ses utilisateurs de retrouver facilement leur chemin.
Personnalisations applicables aux pages 404 Shopify
Si vous personnalisez un thème pour un client, l’utilisation d’une page 404 définie par défaut peut être une solution pratique, tant que vous utilisez un thème approuvé de notre Boutique de thèmes.
Toutefois, il est judicieux de considérer les avantages que pourraient présenter les pages 404 personnalisées, puisqu’une page d’erreur 404 soigneusement conçue pourrait offrir des opportunités intéressantes aux clients (les marchands) en matière de génération de ventes.
比如,联合国溥敦d 'appel l 'action我们rediriger les visiteurs vers une gamme de produits déterminée ; et une barre de recherche pourrait leur permettre de trouver facilement le contenu dont ils ont besoin. Une page 404 offre également aux propriétaires de sites e-commerce une occasion unique d’interagir avec leur audience et d’améliorer l’image de leur marque en injectant un peu d’humour par le biais de visuels pertinents. Comme nous l’avons vu plus haut, une page 404 divertissante peut dissiper une situation problématique et rediriger les visiteurs vers un contenu à forte valeur.
Avec ces points à l’esprit, voici quelques instructions pour personnaliser les pages 404 pour vos clients.
1. Configurer le chargement d’un nouveau modèle de page 404
Très souvent, une page 404 aura une apparence distincte par rapport aux autres pages du site. La création d’un fichier alternatif de mise en page pour l’erreur 404 est utile si vous souhaitez donner une apparence clairement distincte à cette page de destination. Vous pouvez par exemple supprimer le pied de page ou créer un menu de navigation différent.
Par défaut, le fichier de mise en pagetheme.liquidest appliqué au fichier du template404.liquid— mais cela peut facilement être modifié. La première étape consiste à créer une copie de votre fichiertheme.liquiddans le dossier de mise en page (« layout ») de votre thème, puis à la renommer404-layout.liquid.
Maintenant, vous pouvez facilement supprimer des éléments du fichier de mise en page dont vous n’avez pas besoin, comme l’entête ou le pied de page ; ajuster le titre H1 de la page ; et personnaliser tout le reste à votre guise, y compris les balises titre. Une fois que vous serez satisfait de ce nouveau fichier de mise en page, vous pourrez utiliser les balises Liquid logic pour lier ce fichier « layout » avec le fichier du template.
Afin de faire en sorte que la page 404 se charge avec ce nouveau fichier de mise en page, il faudra ajouter la balise Liquid{% layout "404-layout" %}en haut du fichier du template404.liquid. Ainsi, votre template 404.liquid pourrait ressembler à ceci :
Désormais, toute modification apportée au fichier404-layout.liquidsera appliquée à la page 404.Consultez notre centre d'aidepour avoir plus d'informations sur les templates 404.
2. Ajouter une image de fond personnalisée aux pages 404
Si vous êtes un développeur, l’une des façons les plus efficaces de refléter l’image de marque de votre client consiste à utiliser des visuels simples. L’ajout d’une image de fond aux pages 404 est ainsi devenu une pratique courante. Pour obtenir l’effet d’image en plein écran, il est possible d’utiliser le CSS pour attribuer une image de fond personnalisée à la page 404.
La propriétébackground-imagevous permet d’insérer une image sous le reste des éléments de la page. Vous pourriez même utiliser le CSS pour superposer plusieurs images sur un fond, ce qui peut se révéler utile si vous souhaitez par exemple combiner des logos avec l’arrière-plan.
La première étape consiste à importer l’image de votre choix sur Shopify, dans Paramètres > Fichiers, ce qui génèrera une URL unique où l’image sera stockée.
Ensuite, il faudra accéder à la feuille de style du thème et utiliser la classe de conteneur ou l’ID d’ouverture de votre page404.liquidcomme sélecteur ; puis utiliser la propriété CSSbackground-imageet l’URL en tant que valeur. Cela ressemblera à ceci :
3. Ajouter une barre de recherche à la page
La barre de recherche est l’une des fonctionnalités les plus courantes et les plus efficaces d’une page 404. Pour inclure une barre de recherche dans la page 404, vous pouvez créer un formulaire HTML avec l’attribut d’actionaction attributedéfini sur/search. Dans ce formulaire, une entrée de type texte doit être incluse avec un attribut de nomname attributedéfini sur q. Un exemple basique de cela est montré ci-dessous :
Pour personnaliser l’apparence de ce code sur votre page, vous pouvez ajuster le CSS, en définissant des valeurs pour la marge, pour le remplissage, etc.
4. Ajouter une section d’appel à l’action
Parfois, le propriétaire du site e-commerce pourrait vouloir rediriger le visiteur vers une page ou une gamme de produits déterminée, une fois que ce dernier atterrit sur une page 404. Un bouton d’appel à l’action personnalisable se révèlera très utile pour rediriger un visiteur vers une page stratégique. D’où l’intérêt d’ajouter une section statique où l’appel à l’action permet à l’e-commerçant de reprendre le contrôle sur l’expérience utilisateur dans la page 404.
D’abord, il faut créer un nouveau fichier Liquid vide dans le dossier des sections de votre thème, appelé404-call-to-action.liquid. Ensuite, ajoutez ce code au fichier :
Vous devez ensuite inclure cette nouvelle section dans le fichier404.liquidde votre template, dans la position où vous souhaiteriez que le bouton d’appel à l’action apparaisse. Vous allez devoir utiliser labalise de thème Liquid{% section "404-call-to-action" %}pour insérer cette section. Dans mon cas, le template404.liquidressemble à ceci :
Maintenant, si vous ouvrez l’Éditeur de thème et que vous chargez une page qui n’existe pas, vous verrez une option pour modifier le bouton d’appel à l’action. Les changements que vous apportez dans l’Éditeur de thème s’appliqueront maintenant à toute page d’erreur 404 que vous créez.
Page d’erreur 404 personnalisée et SEO
À ce stade, vous aurez compris que c’est en personnalisant votre page d’erreur 404 que vous pourrez sauver la mise en matière de SEO. Votre référencement ne sera pas négativement affecté si vous rassurez le visiteur et que vous lui fournissez suffisamment d’options claires pour continuer à explorer votre site. Il est par ailleurs essentiel de penser en premier lieu à réparer les pages d’erreur 404 qui résultent de liens internes brisés détectables avec les outils partagés plus haut.
Mais réalisez que l’utilité d'une page 404 personnalisée va au-delà de l’aspect SEO, puisque l’idéal serait que vous convertissiez cette page d’erreur en un canal d’acquisition de prospects — et pourquoi pas en un canal de vente.
Pensez-vous avoir maintenant tous les outils nécessaires pour créer une page d’erreur 404 personnalisée destinée à protéger votre SEO ? Partagez vos commentaires ci-dessous.
Lecture conseillée :
Creez一个boutique en ligne dès aujourd'hui !
Bénéficiez d'un essai gratuit de 14 jours, sans engagement.
FAQ sur la page erreur 404
错误404是什么什么?
Pourquoi faut-il personnaliser sa page 404 ?
Comment corriger l'erreur 404 ?
Article publié par Aleks Ignjatovic
Aleks est la rédactrice en chef du blog de Shopify en français. Elle est responsable du marketing de contenu et de la localisation pour les marchés francophones chez Shopify.
Article original : Liam Griffin
Traduction : Mehdi Chakir
Vous souhaitez contribuer au blog de Shopify en français ? Lisez nos委员会!