Une page 404 personnalisée sur Webflow ne demande ni routage manuel ni création d’une nouvelle page nommée 404. Webflow intègre une page utilitaire 404 que vous personnalisez directement dans le Designer, sous Pages > Utility Pages, puis que vous publiez comme n’importe quelle page statique. Vous modifiez cette page utilitaire système sur place : vous ne la remplacez pas et vous ne lui attribuez pas de nouveau slug.
Le déroulé de base, sur lequel tous les guides s’accordent :
Une fois publiée, Webflow affiche automatiquement ce design dès qu’un visiteur arrive sur une URL inexistante, sans aucune règle d’hébergement supplémentaire pour la 404 elle-même. Maintenant que vous savez où elle se trouve et comment procéder, passons à la configuration détaillée dans le Designer.
L’introduction a résumé le chemin à suivre. Voici la séquence complète, clic par clic, dans le Designer tel qu’il se présente aujourd’hui.
Ouvrez le Designer. Depuis votre Webflow Dashboard, ouvrez le site et entrez dans le Designer.
Ouvrez le panneau Pages. Cliquez sur l’icône Pages dans la barre d’outils de gauche, la barre verticale qui regroupe aussi les panneaux Add, Navigator, CMS et Ecommerce.
Repérez Utility Pages. Faites défiler tout en bas de la liste des pages. Vous verrez la section Utility Pages, avec deux entrées présentes par défaut : Password Page et 404 Page.
Modifiez la page 404. Cliquez sur « 404 Page » pour charger son canvas. La version par défaut contient une section simple, un titre, un bloc de texte et un bouton. Vous pouvez conserver cette structure et en réécrire le contenu, ou tout sélectionner et supprimer pour repartir de zéro.
Reconstruisez la mise en page. Depuis le panneau Add, glissez un Section > Container, puis ajoutez :
Ajoutez un CTA vers l’accueil. Glissez un Button, sélectionnez-le, ouvrez les Element Settings (icône engrenage) et réglez Link Type sur Page > Home. Vos visiteurs disposent ainsi d’un retour évident. Ajoutez des liens secondaires sous forme de liens texte ou de link block si vous souhaitez mettre en avant vos pages populaires.
Enregistrez et publiez. Le Designer enregistre automatiquement votre travail toutes les 10 secondes. Quand vous êtes prêt, cliquez sur « Publish » en haut à droite et publiez vers vos domaines. La page modifiée devient immédiatement votre modèle de 404 en ligne.
Dans le Designer classique comme dans la nouvelle interface de l’espace de travail, la navigation est identique : l’icône Pages se trouve dans la barre d’outils de gauche et Utility Pages reste épinglé tout en bas. Les icônes diffèrent légèrement, mais le libellé « Utility Pages » n’a pas changé.
Une fois la page construite et publiée, c’est son design qui détermine si vous retenez le visiteur ou si vous le perdez. Une page 404 personnalisée sur Webflow efficace annonce la situation en langage clair, du type « Cette page n’existe pas », propose un bouton bien visible vers la page d’accueil et deux à trois portes de sortie vers des zones à forte valeur : le blog, les tarifs ou la recherche interne. Cette combinaison transforme une impasse en choix de navigation plutôt qu’en rebond. Webflow formule d’ailleurs l’objectif de la même manière : dire clairement à l’utilisateur que la page n’existe pas et ce qu’il peut faire ensuite, avec des recommandations sur les pages d’erreur 404 personnalisées qui privilégient la clarté sur les traits d’esprit.
Les bonnes pratiques se résument à quatre décisions :
Avant de cloner un template, vérifiez trois points : la mise en page s’adapte-t-elle proprement à 320px et à 1280px, tous les éléments interactifs sont-ils accessibles au clavier avec un focus visible, et pouvez-vous remplacer votre typographie et vos couleurs sans reconstruire les symbols.
Une page 404 qui se limite à un « Page introuvable » générique, sans aucun lien fonctionnel, est une opportunité de conversion perdue. Incluez toujours au moins un lien de retour vers le site.
Le design ne sert à rien si la page ne se comporte pas réellement comme une 404 : encore faut-il vérifier le code de statut renvoyé.
Une page 404 soignée ne vaut rien si le serveur ne renvoie pas réellement un statut 404. Votre page 404 personnalisée sur Webflow doit renvoyer un véritable code HTTP 404, aussi bien sur votre sous-domaine de staging .webflow.io que sur votre domaine personnalisé connecté. Si elle renvoie un 200 OK à la place, il s’agit d’une soft 404, que Google signale comme une erreur : la page ressemble à une 404 pour les visiteurs, mais annonce un succès aux robots d’exploration.
Google Search Central décrit la soft 404 comme le cas où un serveur web répond par un 200 OK pour une page qui n’existe pas, au lieu du 404 Not Found approprié ; sa documentation déconseille cette pratique, car elle désoriente les utilisateurs et gaspille le budget de crawl.
La page utilitaire 404 de Webflow est censée renvoyer une vraie 404, mais vous devez le vérifier après chaque publication :
/this-page-should-not-exist-123. Cliquez sur la requête du document et vérifiez que le statut affiche bien 404.Domaine de staging vs domaine personnalisé : Le staging vit sur votre sous-domaine yoursite.webflow.io. La fenêtre Publish du Designer vous laisse publier sur le staging uniquement, sur le domaine personnalisé uniquement, ou sur les deux. Si vous testez sur un hôte alors que vous avez publié sur l’autre, vous verrez une ancienne 404 ou la 404 par défaut de Webflow.
Éléments de collection CMS : Lorsque vous supprimez ou dépubliez un élément CMS, son URL /collection/item-slug doit renvoyer une 404. Si l’élément est encore en Draft ou si vous n’avez pas republié le CMS après l’avoir archivé, Webflow peut continuer à afficher le template avec un contenu vide et renvoyer un 200, ce qui crée une soft 404. Republiez toujours le CMS après une suppression.
Interaction avec les redirections 301 : Les entrées définies dans Webflow Hosting > Advanced publishing options > 301 Redirects sont prioritaires. Une règle trop large comme /(.*) -> / ou /blog/(.*) -> / intercepte les 404 et redirige vers l’accueil avant même que la page 404 puisse s’afficher. Auditez vos règles de redirection dès que vous ajoutez une règle fourre-tout ; gardez des redirections explicites et relisez le guide de configuration des redirections 301 pour éviter les boucles.
| Symptôme | Cause probable | Comment le vérifier | Solution |
|---|---|---|---|
| Le contenu de la 404 personnalisée s’affiche mais le statut est 200 OK | Soft 404 - le template renvoie un 200 | L’onglet Network des DevTools affiche 200 pour le document ; le vérificateur de statut affiche 200 ; Search Console signale une Soft 404 | Republiez l’intégralité du site, vérifiez que l’hébergement sert bien la page utilitaire ; supprimez tout code personnalisé qui écrase le statut |
| La 404 fonctionne sur .webflow.io mais pas sur le domaine personnalisé (ou l’inverse) | Publication sur un seul domaine ; DNS non connecté | Testez la même URL invalide sur les deux hôtes ; vérifiez les cases cochées dans la fenêtre Publish | Publiez à la fois sur le staging et sur le domaine personnalisé ; vérifiez que le domaine personnalisé est bien "Connected" dans les paramètres Hosting |
| L’URL d’un élément CMS supprimé affiche un template vide au lieu d’une 404 | Élément archivé en Draft ou CMS non republié | Le panneau CMS indique le statut Draft pour ce slug ; l’URL répond encore en navigation privée | Passez l’élément en Archived, supprimez-le, puis publiez le CMS ; ajoutez une redirection 301 explicite si l’URL doit pointer vers la collection parente |
| Les URL invalides redirigent vers la page d’accueil, la 404 n’apparaît jamais | Une redirection 301 fourre-tout comme /(.*) -> / masque les 404 | Vérifiez la présence de motifs trop larges dans Site Settings > Hosting > Advanced > 301 redirects | Supprimez la règle fourre-tout ou restreignez-la à des chemins explicites |
Les propriétaires de sites Webflow qui modifient leur page 404 personnalisée sans jamais publier le site, qui laissent le texte et l’image d’exemple par défaut, ou qui la mettent en ligne sans lien vers l’accueil continuent de servir un état d’erreur inachevé sur leur domaine personnalisé en ligne. Une page 404 personnalisée Webflow n’est vraiment terminée que lorsqu’elle est publiée à la fois sur le sous-domaine de staging webflow.io et sur le domaine personnalisé connecté, qu’elle ne contient plus aucun contenu par défaut et qu’elle offre au visiteur une direction claire.
HarperFlow publie des articles hautement structurés, avec FAQ, tableaux de données et blocs de réponse directe, qui répondent aux exigences de citation des moteurs de recherche IA. En auditant et en améliorant votre contenu en continu grâce à l’analyse des réponses IA, HarperFlow aide votre site à bâtir une autorité et une visibilité de long terme, qui survivent aux stratégies dépendantes de la publicité.
Checklist finale avant de considérer que c’est terminé :
Une page 404 personnalisée qui fonctionne est un élément modeste mais concret de la santé technique de votre site. Des outils comme HarperFlow, qui maintiennent un blog Webflow techniquement structuré et publié en continu, jouent un rôle complémentaire. Ils ne corrigent pas le routage des 404, mais ils aident le reste de vos fondations éditoriales à rester cohérent.
Ne considérez la page 404 comme terminée que lorsqu’elle passe à la fois une revue de design et une vérification du code de statut en ligne, dans une nouvelle session de navigateur — et non dès l’instant où elle semble finie dans le Designer.
Non, Webflow n’autorise qu’une seule page utilitaire 404 par site. Vous modifiez l’unique page présente dans Utility Pages, et elle est servie pour toutes les URL introuvables. Si vous avez besoin d’indications par dossier, ajoutez sur cette page unique des liens ou des textes conditionnels qui pointent vers le blog, la boutique ou la documentation.
Vous ne pouvez pas réellement supprimer l’entrée utilitaire 404, seulement son contenu. Si vous videz le canvas et le laissez vide, Webflow servira quand même cette version vide comme page 404. Conservez la page et reconstruisez sa mise en page plutôt que d’essayer de la supprimer.
Aucune configuration de slug n’est nécessaire. Vous ne créez pas /404 ni /not-found comme page statique classique. Vous ouvrez Utility Pages et cliquez sur "404 Page" : elle est déjà reliée au template système et se publie sans routage manuel.
Oui, vous pouvez ajouter des Collection Lists au canvas de la 404 comme sur n’importe quelle page statique. Cela permet de mettre en avant vos articles ou produits populaires et de réduire les rebonds. Pensez à republier les éléments CMS après vos modifications, afin que les URL d’éléments supprimés renvoient bien une 404 au lieu d’un template vide.
Vous n’avez probablement publié que sur un seul hôte. Webflow vous permet de publier uniquement sur le staging yoursite.webflow.io, uniquement sur le domaine personnalisé, ou sur les deux. Ouvrez Publish, cochez les deux destinations, puis testez la même URL introuvable, par exemple /this-page-should-not-exist-123, sur chaque hôte.
Oui, la page 404 accepte les mêmes éléments que les autres pages, y compris Lottie, les images et les blocs embed. La mise en forme se gère dans le panneau de droite, qui regroupe le panneau Style, le panneau Element settings, le panneau Style manager et le panneau Interactions. Testez le focus clavier et vérifiez qu’aucun script ne remplace le code de statut.
Oui. Une règle large comme /(.*) pointant vers / ou /blog/(.*) pointant vers /blog prime sur la page utilitaire 404 et redirigera avant que la 404 puisse s’afficher. Gardez des redirections explicites et évitez les motifs fourre-tout. Vérifiez vos règles dans Hosting > Advanced publishing options > 301 Redirects.
Ouvrez Chrome DevTools > Network, activez Preserve log, puis visitez /this-page-should-not-exist-123. La requête du document doit afficher 404. Vérifiez aussi avec un outil de contrôle des statuts HTTP et consultez les rapports Soft 404 dans Google Search Console, sous Pages : ils signalent les pages qui renvoient 200 alors qu’elles devraient renvoyer 404.