Blogs Shopify

Page d’erreur 404 et SEO : comment gérer les erreurs 404

Page d’erreur 404 et SEO_comment gérer les erreurs 404

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 page d’erreur 404, vous avez probablement cliqué sur le bouton retour de votre navigateur, ou carrément quitté le site que vous souhaitiez initialement explorer.

Mais avez-vous réellement compris ce qui s’est passé ?

Et surtout, quel sentiment ce message d’erreur a-t-il généré en vous ?

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 pour leurs clients en cherchant à garantir l’optimisation du SEO. Car tôt ou tard, certains visiteurs atterriront sur des pages qui afficheront une « erreur 404 » dans votre site e-commerce, ou celui de votre client (si vous êtes un développeur). Si la 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, d’autant plus que le message d’erreur « 404 not found » peut parfois être affiché en anglais s’il s’agit de la langue par défaut de votre serveur.

D’où l’intérêt de créer des pages d’erreur 404 personnalisées pour votre site e-commerce ou celui de vos clients, qui expliquent au visiteur ce qui s’est passé dans un langage simple, et qui lui fournissent toutes les indications nécessaires pour se remettre sur la bonne voie avec un minimum d’efforts — et continuer l’exploration de votre site dans la bonne humeur. Un visiteur qui atterrit sur une page d’erreur 404 ne doit donc pas systématiquement s’en aller avec un sentiment de frustration ou de confusion.

Les pages d’erreur 404, si elles sont personnalisées, vous donnent ainsi l’occasion de fournir de l’aide à travers un message personnalisé qui rassure le visiteur ; et vous évitent en fin de compte un impact négatif potentiel en matière de SEO, d’expérience client, et de conversion.

En combinant appels à l’action clairs, barres de recherche, navigation intuitive et visuels divertissants dans une page d’erreur 404 personnalisée, les e-commerçants et les développeurs peuvent créer des pages d’erreur qui non seulement se fondent dans le site e-commerce, mais qui convertissent également une expérience potentiellement négative en une expérience positive et bénéfique pour le SEO, les conversions, et le chiffre d’affaires.

Dans cet article, nous passons en revue les points clés à retenir sur le thème des pages d’erreur 404. Nous examinons également certains très bons exemples de pages d’erreur 404 personnalisées desquelles vous pouvez vous inspirer au moment de concevoir la vôtre pour sauver la mise en matière de SEO et d’acquisition de prospects.

Vous possédez une boutique Shopify ? Nous vous expliquons également dans cette ressource comment créer des pages 404 personnalisées pour avoir plus de contrôle sur l’expérience utilisateur. Ou êtes-vous peut-être un développeur spécialisé dans Shopify ? Nous vous expliquons aussi comment inclure des pages d’erreur 404 personnalisées dans le thème de vos clients pour créer un filet de sauvetage SEO.

Erreur 404 : Définition

Que signifie exactement l’erreur 404 ? En termes simples, l’erreur 404 est une erreur qui est retournée par le serveur HTTP lorsque le visiteur atterrit sur une page introuvable dans un site web. Essentiellement, une page 404 est une page 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 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 ».

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

En matière de SEO, une page 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 réparer mes erreurs 404 ?

Même en créant une mise en page 404 personnalisé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.

Dans cette optique, voici certains outils de détection des liens internes brisés à passer en revue :

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

S’éloigner des pages 404 génériques est devenu aujourd’hui une tendance bien établie en SEO, puisque les marchands cherchent à mettre en avant leur marque sous son meilleur jour même lorsqu’une page d’erreur s’affiche — tout en redirigeant les visiteurs vers le site principal. Voici certains exemples de pages d’erreur 404 particulièrement bien personnalisées qui peuvent vous inspirer au moment de concevoir des pages véritablement uniques pour votre site e-commerce ou vos clients.

Merci Handy

Mercy Handy erreur 404

La boutique Merci Handy utilise l’humour et une mise en page personnalisée pour tenter de rassurer les visiteurs et ne pas perdre leur confiance. Le message est rédigé avec un langage de tous les jours, propre à la personnalité de la marque qui se veut très proche de ses clientes et clients. Mercy Handy tente de faire comprendre de façon amusante que le contenu n’existe pas.

Des instructions claires sont également fournies pour dissiper toute confusion, puisque l’utilisateur est invité à retourner à la page d’accueil en cliquant sur un appel à l’action très clair, ou à contacter le support en cliquant sur un lien fourni qui redirige vers la page de contact du site.

 

Bonature Shop

Bonature Shop

La marque Bonature Shop utilise de façon efficace les couleurs dans sa page d’erreur 404 personnalisée. En effet, ces couleurs permettent d'intégrer la page 404 à l'identité visuelle de la marque.

La couleur verte du logo est également utilisée pour le bouton d’appel à l’action dans le but de créer un sentiment de continuité dans l’esprit du visiteur. La page est très aérée dans sa conception et très agréable à parcourir, un grand plus pour retenir et rassurer un utilisateur qui pourrait se sentir déstabilisé.

Bonature Shop ajoute également une section pour l’abonnement à la newsletter afin de tenter de capturer l’adresse e-mail du visiteur au cas où il y aurait un risque qu’il s’en aille, convertissant ainsi la page d’erreur 404 à la réputation plutôt problématique en un canal d’acquisition de prospects.

Et pour terminer, afin de réduire davantage le risque de perdre le visiteur, une intégration de messagerie via Messenger a également été ajoutée, fournissant l’occasion de poser des questions par le biais d’un canal très familier pour la plupart.

Himawari

Himawara erreur 404

Himawari est un bon exemple de page 404 où le message d’erreur est transmis de façon probablement plus compréhensible à travers de grandes icônes amusantes et un formatage très explicite.

Le formatage et les icônes peut ainsi être particulièrement efficaces pour réduire au maximum les efforts que le visiteur doit fournir pour comprendre ce qui se passe sur la page d’erreur 404.

Evolve Skateboards

erreur 404 Evolve Skateboards

La page d’erreur 404 d’Evolve Skateboards fournit suffisamment d’outils et d’informations au visiteur pour lui permettre de retrouver son chemin rapidement. Le texte informe sur la situation de façon claire. Il est possible de continuer à visiter la boutique en cliquant sur le lien fourni, ou de faire directement une nouvelle recherche grâce à la barre de recherche intégrée.

En outre, Evolve Skateboards ne manque pas d’afficher une forte preuve sociale sur la page en affichant un badge de satisfaction client et en permettant la consultation des avis clients via un bouton prévu à cet effet. Un bouton flottant d’assistance est également fourni aux utilisateurs qui pourraient être encore confus.

Les Créatifs Parisiens

Creatifs Parisiens erreur 404

La page d’erreur personnalisée des Créatifs Parisiens est un exemple à suivre lorsqu’il s’agit de dissiper la sensation de vide qui caractérise les pages d’erreur 404 génériques. La page est très compacte dans sa conception. On remarque une absence d’espaces blancs prédominants.

Directement en dessous de la barre de recherche, deux colonnes accueillant respectivement les liens vers les articles les plus récents et les catégories les plus consultées servent à remplir l’espace de façon utile pour ne donner aucune chance au visiteur de se sentir dérouté. Finalement, la barre latérale qui accueille un grand logo et une jolie bannière graphique tient bien compagnie et renforce l’impression d’être sur une page totalement normale faisant partie intégrante du site.

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.

Par exemple, un bouton d’appel à l’action pourrait 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 page theme.liquid est appliqué au fichier du template 404.liquid — mais cela peut facilement être modifié. La première étape consiste à créer une copie de votre fichier theme.liquid dans le dossier de mise en page (« layout ») de votre thème, puis à la renommer 404-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 template 404.liquid. Ainsi, votre template 404.liquid pourrait ressembler à ceci :

Désormais, toute modification apportée au fichier 404-layout.liquid sera appliquée à la page 404. Consultez notre centre d'aide pour 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-image vous 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.

url

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 page 404.liquid comme sélecteur ; puis utiliser la propriété CSS background-image et 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’action action attribute défini sur /search. Dans ce formulaire, une entrée de type texte doit être incluse avec un attribut de nom name attribute dé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 fichier 404.liquid de votre template, dans la position où vous souhaiteriez que le bouton d’appel à l’action apparaisse. Vous allez devoir utiliser la balise de thème Liquid {% section "404-call-to-action" %} pour insérer cette section. Dans mon cas, le template 404.liquid ressemble à 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.

Pagine 404: pulsante

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 :


Créez une boutique en ligne dès aujourd'hui !

Bénéficiez d'un essai gratuit de 14 jours, sans engagement.


Which method is right for you?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 conseils !

Sujets: