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 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 des pages d’erreur 404 personnalisées claires 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 une erreur qui est retournée par le serveur HTTP 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.

erreur 404

Pages d’erreur 404 non personnalisées et SEO : les risques

En matiè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 ?

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

    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 ».

     

    Page erreur 404 Shanty Biscuit 

    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.

    Page erreur 404 La vie est belt

    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.

    Page erreur 404 Flowrette 

     

    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.


    FAQ sur la page erreur 404

    Qu’est-ce qu’une erreur 404 ?

    L’erreur 404 est une erreur qui est retournée par le serveur HTTP quand un internaute atterrit sur une page Web n’existant pas ou plus. Cette page comprend généralement le message suivant : « Page non trouvée » ou « Page introuvable ».

    Pourquoi faut-il personnaliser sa page 404 ?

    Lors de la création de votre boutique en ligne, il est important de prévoir une page 404 personnalisée. Par exemple, dans le cas où un client se rend sur la page d’un produit que vous avez supprimé de votre boutique, car vous ne le vendez plus. Si vous n’avez pas mis en place de redirection ni créé de page 404 personnalisée, cela impactera votre taux de rebond, le nombre de pages vues par sessions ou encore le temps moyen passé sur votre site.

    Comment corriger l'erreur 404 ?

    Que vous soyez e-commerçant ou développeur, il existe de nombreux outils à votre disposition comme Google Search Console ou encore SemRush qui vous permettent d’identifier vos erreurs 404 pour ensuite les corriger.

    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: