Depuis quelques années, beaucoup des clients choisissent d'investir du temps et des ressources dans la conception de leur page d'erreur 404.
L'objectif est simple : fournir aux visiteurs une information pertinente, tout en positionnant sa marque, malgré l'erreur de contenu ou de navigation.
Pour télécharger gratuitement notre modèle
Voici l'exportation JSON de notre modèle de page 404 compatible pour votre
Divi Theme Builder, tel que nous utilisons sur NickoLabs.com.
Vous pourrez l'enregistrer et l'importer dans votre propre Divi Theme Builder.
Qu'est-ce qu'une erreur 404?
Notre collègue d'Affluences a très bien décrit ce qu'est une erreur 404 dans son article de blog. Il va même dans le détail des impacts sur votre SEO et comment les réparer. Si toutefois nous devions le résumer le tout à l'extrême, une erreur 404, c'est lorsque le serveur web n'arrive pas à trouver la ressource demandée pour diverses raisons.
Tutoriel : Comment construire manuellement votre modèle de page d'erreur 404 avec Divi?
Votre hébergeur web vous fournit probablement déjà un modèle de base. Par exemple, Litespeed/cPanel fournit des pages d'erreurs par défaut (dont la 404, ainsi que les autres). WordPress a aussi sa propre version de base, avant même que celle de votre thème ne soit prise en compte.
Dans le thème Divi, il est très facile de créer sa propre page d'erreur 404 et vous pouvez simplement la bâtir en utilisant les outils inclus en quelques étapes faciles.
1. D'abord, naviguez dans votre Administration WordPress > Divi > Theme Builder. En français, ça devrait ressembler un peu à ceci dans une installation WordPress.
La capture d'une installation WordPress et la position des options du constructeur de thème de Divi
2. Deuxièmement, depuis ces options, vous pouvez Ajouter un nouveau modèle, en le construisant, puis en précisant dans les Paramètres du modèle qu'il s'agit d'une Page 404. Si vous avez télécharger mon JSON, vous pouvez aussi l'importer directement via l'icone en haut à droite.
Une capture de l'étape cruciale de la création du modèle de page d'erreur 404
3. Finalement, il ne vous reste qu'à personnaliser votre modèle de page d'erreur 404 en ajoutant un corps personnalisé (ou un "Custom Body"). Cela vous affichera l'éditeur visuel du thème et vous permettra de construire votre modèle bien à vous.
Pour l'illustrer, sur le modèle de page d'erreur 404 de NickoLabs, nous avons choisi de faire un clin d'œil à ceux qui aiment bien regarder comment sont construits nos sites en affichant en fond du code source HTML.
C'est efficace, car on comprend immédiatement qu'on n'a pas atteint la destination désirée!
Une capture de l'éditeur visuel sur la page 404 de NickoLabs.com
Optionnel : Aller plus loin en traçant les pages d'erreur 404 dans Fathom Analytics
Si des erreurs 404 sont générées, il est toujours bien de chercher à les résoudre. Pour nous faciliter cette tâche, nous ajoutons généralement un bloc de code générant un événement dans Fathom Analytics, notre système de suivi des visiteurs, afin de savoir quelle URL a été visité.
Source : La documentation de Fathom Analytics
<script>
window.addEventListener('load', () => {
const path = window.location.pathname;
fathom.trackEvent('404: ' + path);
});
</script>Ainsi, dans vos événements Fathom, vous pourrez retrouver quelles URL 404 ont été visitées, et les corriger par la suite.
Et vous, avez-vous un modèle ou un design de page 404 préféré?
Au cours de nos recherches, nous sommes tombés sur plusieurs pépites, parfois même des mini-jeux. Par exemple, la page d'erreur 404 du site Discord.com cache également un mini-jeu.
Si vous en avez des particulièrement intéressantes, envoyez-les-nous!