Comment créer une page 404 personnalisée dans WordPress (+ exemples)

Les pages 404 s'affichent lorsque les utilisateurs tentent d'accéder à des ressources qui n'existent pas, comme une URL mal orthographiée. Ou une page qui a été supprimée. Et vous pouvez créer une page 404 personnalisée dans WordPress (même si vous ne savez pas coder).

Pourquoi avez-vous besoin d'une page 404 personnalisée dans WordPress

Les pages 404 personnalisées peuvent améliorer l'expérience utilisateur en aidant les utilisateurs à trouver ce dont ils ont besoin. Et vous pouvez adapter votre page 404 pour refléter votre marque. Grâce à des éléments tels que des copies et des images personnalisées. Prenez cette page 404 par défaut : cette page n'est d'aucune utilité. Et n’oriente pas les utilisateurs dans la bonne direction via des éléments tels que des liens utiles. Ou un champ de recherche de site. Cela pourrait amener les gens à quitter votre site et à aller ailleurs. Ce qui peut augmenter les taux de rebond. La solution ? Créez une page 404 personnalisée qui reflète votre marque. Et aide les utilisateurs à se déplacer facilement sur votre site. Vous pouvez facilement rechercher et corriger les erreurs 404 à l'aide de l'outil d'audit de site de Semrush.

Comment créer une page 404 personnalisée dans WordPress

Voici trois méthodes pour créer votre propre page 404 dans WordPress :

Option 1 : Éditeur de fichiers de thème

De nombreux thèmes WordPress sont livrés avec une page 404 prédéfinie. Cependant, si vous n'êtes pas à l'aise avec PHP, un langage de script, envisagez une autre option pour créer votre page 404. Comme un constructeur de pages. Mais si vous souhaitez suivre cette voie, vous pouvez modifier votre page 404 prédéfinie à l'aide de votre éditeur de fichiers de thème. L'éditeur de fichiers de thème de WordPress est un éditeur de texte qui vous permet de modifier des fichiers pour le thème de votre site. Pour ce faire, connectez-vous à votre site. Cliquez sur « Apparence » et « Éditeur de fichiers de thème. »Votre éditeur de fichier de thème contient une liste déroulante dans laquelle vous pouvez sélectionner le thème que vous souhaitez modifier. Il contient également les fichiers de votre thème et une zone de texte avec le code de chaque fichier. Vous devez créer un thème enfant avant d'apporter des modifications à vos fichiers de thème. Les thèmes enfants sont des sous-thèmes qui conservent la conception et les fonctionnalités du thème parent (votre thème principal). Les modifications que vous apportez via votre thème enfant restent même lorsque vous mettez à jour votre thème parent. Créez donc un thème enfant pour conserver les modifications apportées à votre page 404. Vous pouvez utiliser des plugins comme le Child Theme Configurator pour créer un thème enfant en quelques clics. Ou suivez les instructions de WordPress pour créer un thème enfant sans plugin. Une fois que vous avez un thème enfant, utilisez un client FTP ou le gestionnaire de fichiers de votre hébergeur pour ajouter des fichiers à votre thème enfant. Le didacticiel suivant vous montrera comment ajouter des fichiers avec le gestionnaire de fichiers de votre site. Pour commencer, connectez-vous à votre hébergeur et localisez votre gestionnaire de fichiers. Recherchez votre fichier de 404 pages. Il se trouvera probablement sous votre dossier racine (souvent nommé « / » ou « public_html »). Ensuite aller à « contenu wp» > «thèmes» > «votre thème.» Notre exemple comporte deux fichiers de 404 pages :

  • Un fichier nommé 404.php pour le format global de la page 404
  • Un fichier nommé content-404.php qui inclut le contenu de la page 404 (comme le texte et les images)

Pour notre exemple, nous allons faire une copie du fichier content-404.php. Pour modifier le texte et les images de cette page. Double-cliquez dessus pour ouvrir votre fichier de page 404. Copiez ensuite le contenu dans un éditeur de texte brut. Comme une application de bloc-notes sur votre ordinateur. Ensuite, cliquez sur le dossier de votre thème enfant et créez-y un nouveau fichier. Nommez ce fichier du même nom que votre page 404 (dans notre cas, « content-404.php »). Ensuite, collez le code de votre éditeur de texte brut dans votre nouveau fichier et cliquez sur Enregistrer. Ensuite, modifiez le contenu de votre page 404. Par exemple, nous pourrions modifier le texte en surbrillance (ci-dessous) par quelque chose qui correspond davantage à la voix de notre marque. Après avoir enregistré vos modifications, votre page 404 personnalisée devrait désormais s'afficher lorsque quelqu'un tente d'accéder à une page qui n'existe pas.

Option 2 : Générateur de pages

Les constructeurs de pages comme Elementor, Beaver Builder et Divi Builder sont des solutions sans code pour créer une page 404 personnalisée. Bien que les créateurs de pages proposent souvent des options gratuites, vous devrez peut-être passer à la version payante pour créer une page 404 personnalisée. Voici comment créer une page 404 personnalisée avec Elementor. Tout d'abord, installez et activez Elementor Pro. Cliquez sur «Modèles » et « Générateur de thèmes. » Cliquez ensuite sur le «Ajouter un nouveau » Bouton. Une fenêtre apparaîtra. Sélectionner « Erreur 404» dans la liste déroulante et donnez un nom à votre modèle. Cliquez sur « Créer un modèle. » Vous pouvez choisir parmi des modèles prédéfinis. Ou concevez-en un à partir de zéro. Ajoutez des éléments tels que du texte, des images et un champ de recherche de site à votre page 404. Ainsi, vos utilisateurs peuvent facilement naviguer ailleurs. Publiez votre page lorsque vous êtes prêt. Assurez-vous que le menu déroulant « Inclure » indique «404 pages.» Puis clique « Sauvegarder et fermer« Votre page 404 personnalisée s'affichera désormais lorsque quelqu'un atterrira sur une URL qui n'existe pas.

Option 3 : Plug-in 404 pages

Les plugins sont une autre option pour créer une page WordPress 404 personnalisée sans code. Certains plugins à considérer sont 404page (également répertoriés sous le nom de « Smart Custom 404 ») et Colorlib 404 Customizer. Nous utiliserons le plugin 404page pour notre exemple. Installez et activez le brancher. Créez ensuite votre page d’erreur 404 en cliquant sur «Pages» > «Ajouter une nouvelle page. » Créez votre page à l’aide de votre générateur de page. Nous avons créé la page d'erreur ci-dessous avec Gutenberg, le constructeur de pages natif de WordPress. Mettez à jour le slug de l'URL (la dernière partie de l'URL) en quelque chose comme « 404 ». Publiez votre page. Puis clique « Apparence » et « Page d'erreur 404.  » Dirigez-vous vers le « Général » et sélectionnez votre page 404 dans la liste déroulante. Cliquez sur « Sauvegarder les modifications. »Votre site Web chargera désormais votre page 404 personnalisée lorsque quelqu'un accède à une page qui n'existe pas.

Exemples de pages 404 personnalisées

Voici quatre exemples de pages d’erreur 404 personnalisées pour vous inspirer :

Netflix

Netflix adapte sa page 404 aux émissions populaires avec une image en arrière-plan. Ce qui les aide à promouvoir leur produit tout en dirigeant les utilisateurs vers leur page d'accueil.

Wendy's

Wendy's inclut un jeu simple sur sa page 404. Ce qui ajoute un peu de plaisir à une page sur laquelle il serait autrement frustrant d'atterrir. De plus, cette page 404 contient des liens directement sous le jeu. Pour aider les utilisateurs à trouver ce dont ils ont besoin.

Ryanair

Ryanair s'appuie sur sa marque basée sur le voyage pour sa page 404 avec un fond d'image pertinent. Ils incluent également des liens pour aider les utilisateurs à poursuivre leur parcours.

Cadbury

Cadbury inclut des liens vers sa page d'accueil sur sa page 404, ainsi qu'un « Oh, Crumbs ! » ludique et pertinent. message. Et encourage les utilisateurs à les contacter pour leur faire savoir s'ils continuent de rencontrer des problèmes.

Meilleures pratiques pour les pages 404

Ces conseils vous aideront à créer une excellente page 404 pour votre site. Améliorer l'expérience utilisateur et potentiellement réduire les taux de rebond.

Expliquez ce qui s'est passé

Une explication rapide aide les utilisateurs à comprendre pourquoi ils ont obtenu une erreur. Ils peuvent donc résoudre les problèmes eux-mêmes. Par exemple, la page 404 de Microsoft explique que l'URL peut être mal orthographiée ou que la page n'existe plus :

Restez fidèle à la marque

Votre page 404 ne doit pas sembler déconnectée de votre site Web. Alors, injectez votre marque et votre personnalité dans votre page 404. TripAdvisor utilise un langage intelligent qui reflète leur marque sur leur page 404 :

Aidez les utilisateurs à trouver ce dont ils ont besoin

Aidez les utilisateurs à parcourir votre site en ajoutant des éléments tels qu'une barre de recherche à votre page 404 personnalisée. Ou des liens vers des pages populaires. Ou des liens vers vos meilleurs produits. De cette façon, les utilisateurs peuvent poursuivre leur voyage. Amazon inclut une barre de recherche et un lien vers leur page d'accueil dans leur page 404 (avec une image de l'un des nombreux chiens possibles) :

Comment vérifier votre site Web pour les erreurs 404

Utilisez Site Audit de Semrush pour vérifier et surveiller votre site à la recherche d'erreurs 404 indésirables. Ouvrez Site Audit, entrez votre domaine et cliquez sur «Démarrer l'audit.» Configurez l'audit du site. (Notre guide de configuration peut vous aider si vous êtes bloqué.) Cliquez sur «Démarrer l'audit du site» lorsque vous serez prêt. Vous recevrez alors un rapport décrivant l'état de santé de votre site ainsi qu'un aperçu des problèmes, des avertissements et des avis. Dans le rapport, cliquez sur «Problèmes. « Sous « Erreurs », recherchez « # pages ont renvoyé le code d'état 4XX ». Clique le « # pages» pour voir quelles pages de votre site affichent une erreur 4XX. Recherchez les pages contenant une erreur 404. Cliquez sur « Afficher les liens rompus » pour voir quelles pages renvoient à la page avec l'erreur 404. Supprimez ou remplacez ces liens rompus par un autre lien pertinent (et fonctionnel). Pour que les gens ne se retrouvent pas sur une page 404 lorsqu'ils cliquent dessus. Ainsi, les moteurs de recherche ne rencontrent pas d'erreurs d'exploration potentielles. Ensuite, décidez comment vous souhaitez aborder la page contenant l'erreur 404. Vous avez deux options :

Laissez l'erreur

Les erreurs 404 peuvent être utiles. Comme ils indiquent que certaines pages n’existent plus. Et vous souhaiterez peut-être le communiquer aux utilisateurs. Par exemple, disons que vous avez supprimé une page de produit parce que vous ne vendez plus ce produit. Vous voudriez laisser l’erreur 404 afin que les utilisateurs sachent que la page du produit n’existe plus.

Rediriger le trafic vers une nouvelle page

Les redirections, comme une redirection permanente 301, peuvent automatiquement renvoyer les utilisateurs d'une page à une autre lorsqu'ils accèdent à un lien. Vous pouvez le faire si vous remplacez une page par une nouvelle. Et vous souhaitez diriger les utilisateurs de l’ancienne page vers la nouvelle page. Imaginez que vous ayez modifié votre page À propos de example.com/about en example.com/about-us. Vous souhaiterez probablement rediriger le trafic de /about vers /about-us. Car la page existe toujours, mais elle a bougé. Et donc vous ne voudriez pas conserver la page 404.

Améliorez l'expérience de votre site Web avec une page 404 personnalisée

Créez une page 404 personnalisée pour aider les utilisateurs à trouver ce dont ils ont besoin sans aucun obstacle. Ensuite, utilisez l'outil d'audit de site de Semrush pour surveiller vos erreurs 404. Et assurez-vous que les utilisateurs ne restent pas bloqués lors de la navigation sur votre site. Essayez Site Audit gratuitement dès aujourd'hui.