Les plus grands sites sont toujours remarquables par leur souci du détail. Un détail souvent sous-estimé est l'existence d'une page d'erreur 404 utile et conviviale. WordPress fournit un moyen simple de créer et de personnaliser la page d'erreur 404, mais malheureusement, la simplicité de la personnalisation ne signifie pas automatiquement l'efficacité.

Le célèbre expert SEO de WordPress, Joost de Valk (alias yoast), rapporte ses découvertes récentes de plusieurs années d’audit de sites Web. Selon ce rapport, un nombre important de sites Web audités ont eu des problèmes pour optimiser leur page d'erreur 404. Le thème WordPress par défaut (actuellement TwentyTwelve) comporte un modèle très simple pour ce cas et peu de propriétaires de sites vont au-delà.

Pourquoi c'est important?

Regardons cela du point de vue du sens commun. Quand une erreur 404 se produit-elle? Lorsque quelqu'un clique sur un lien qui doit pointer vers le contenu de votre site, mais pour une raison quelconque, il n'y a pas de page correspondante: peut-être avez-vous modifié le permalien ou supprimé la page, peut-être que le lien était juste faux. Il y a plusieurs raisons à l'erreur, mais un fait important ne peut pas être nié: le visiteur est déjà sur votre site, il est déjà intéressé par quelque chose, il a déjà fait un effort pour le trouver, alors cet effort devrait être récompensé.

L'une des règles fondamentales de l'assurance-chômage est de ne pas laisser les utilisateurs dans des impasses sans aide. Il y a toujours un bouton de retour dans le navigateur, mais voulez-vous vraiment que votre visiteur l'utilise?

Apple 404

Pomme fournit un sitemap sur leur page d'erreur 404 accompagné d'un message simple et clair.

37 Signals 404

37signaux Profitez de l'occasion supplémentaire pour présenter leurs produits et fournissez des informations de contact pour résoudre le problème.

Zurb 404

Zurb La page 404-error souligne la possibilité de les contacter avec un problème. Les concepteurs devraient résoudre les problèmes, non?

Problogger 404

Problème présente un large éventail de contenus divers à plonger dans la lecture.

Justin Tadlock's 404

Justin Tadlock Le blog utilise des fil d'Ariane pour présenter un lien vers la page d'accueil.

Création d'une page d'erreur 404 personnalisée dans WordPress

Que peut-on faire pour améliorer cette situation? Comment l'erreur peut-elle être transformée en opportunité?

À la recherche d'idées et de directives, nous pouvons consulter WordPress Codex ou Google Webmaster Guidelines comme points de départ parfaits. En fait, notre tâche principale est très simple: expliquer pourquoi une page ne peut pas être localisée et proposer des suggestions pour accéder au bon écran. De ce point de vue, nous pouvons dériver une liste de composants possibles qui créent une page 404-error parfaite:

  • un message d'erreur clair de manière simple et amicale, avec des excuses pour la gêne occasionnée;
  • l'aspect et la convivialité du reste du site avec des options de marque et de navigation claires;
  • alternatives possibles et conseils sur la façon de trouver l'information souhaitée. Un formulaire de recherche, des liens vers des contenus pertinents et / ou populaires et la page d'accueil sont toutes des solutions possibles pour cette partie;
  • un moyen de signaler une erreur si l'utilisateur le souhaite; vous pouvez fournir un e-mail de contact ou d'autres informations de contact.

À partir de cette liste, nous pouvons déterminer des astuces et des idées utiles à inclure dans un modèle d'erreur 404:

  • messages récents et / ou populaires, ou encore messages aléatoires;
  • options d'abonnement (comme RSS) en plus des coordonnées;
  • plan du site, en particulier dans le cas de petits sites;
  • des promotions ou des informations sur vos offres et services;
  • des matériaux de marque pour identifier facilement votre site et votre industrie;
  • des informations sur l'URL demandée et le contenu le plus pertinent;
  • tagcloud comme moyen rapide de placer le visiteur dans le contexte de votre site;
  • un système de notification et / ou de suivi pour détecter toute erreur 404 sur votre site.

Une chose importante à propos d'une page d'erreur 404 est un état HTTP 404 correct qui doit être servi par le serveur. Heureusement, WordPress gère cela automatiquement pour que nous puissions concentrer nos efforts sur la création de la page elle-même. Nous avons besoin du thème actif pour avoir un modèle distinct pour la page nommée 404.php. La structure simple du modèle est assez simple:

Le balisage qui crée la structure de la page doit correspondre à ce qui est utilisé par le thème actif. Alternativement, un style supplémentaire peut être fourni pour imiter cette structure. En incluant les appels standard get_header et get_footer, nous nous assurons que la page contient tous les éléments de marque et les options de navigation et que tous les scripts et styles sont correctement chargés.

Maintenant, lorsque nous avons fait les préparatifs initiaux, remplissons la page. La meilleure chose à faire pour le visiteur sur la page 404 est de deviner ce qui est réellement demandé et de fournir la correspondance la plus proche possible. Les informations sur l'URL demandée sont stockées par WordPress dans la propriété $ wp-> request . Nous pouvons analyser cette chaîne et essayer de trouver un contenu similaire basé sur les données post_name , qui stockent des informations sur les messages post et page. Si une telle recherche ne donne rien de significatif, nous pouvons essayer une recherche régulière dans le contenu des publications. Si ces efforts ne produisent aucun résultat positif, nous pouvons toujours fournir une liste de publications récentes en tant que solution de rechange.

Bien entendu, nous incluons également le message convivial, le formulaire de recherche et un lien vers la page d'accueil.

Nous allons d'abord créer des fonctions auxiliaires pour gérer certaines routines de modèles. ils pourraient être inclus dans functions.php de votre thème ou directement au début du fichier 404.php.

function frl_get_requested_slug(){global $wp;$q = $wp->request;$q = preg_replace("/(.*)(html|htm|php|asp|aspx)$/","",$q);$parts = explode('/', $q);$q = end($parts);return $q;}

La fonction frl_get_requested_slug tente d'obtenir le slug de page demandé à l'aide de l'objet $ wp global et des expressions régulières. Le code suppose que le site utilise des permaliens et que la demande se présente sous la forme appropriée.

function frl_list_posts($posts){if(empty($posts))return '';$list = array();foreach($posts as $cpost) {$title = apply_filters('the_title', $cpost->post_title);$url = get_permalink($cpost);$list[] = "
  • frl_load_error_style charge les styles personnalisés avec le modèle 404, en supposant que le fichier .css approprié se trouve dans le dossier / css du répertoire du thème actif.

    Le modèle de code que nous avons prévu comprend quatre parties: le message convivial; la recherche; la liste des articles récents; La dernière chance.

    Le message amical:

    404 Page non trouvée

    Désolé, malheureusement, nous n'avons pas pu trouver la page demandée.

    Trouvons les informations dont vous avez besoin.

    La recherche du contenu demandé:

      'any', 'post_status' => 'publish', 'name' => $ q, 'posts_per_page' => 5); $ query = new WP_Query ($ args);  // interroge les messages par slugif (vide ($ query-> posts)) {// recherche les articles $ q = str_replace ('-', '', $ q); $ args = array ('post_type' => 'any ',' post_status '=>' publier ',' s '=> $ q,' posts_per_page '=> 5); $ query-> query ($ args);} if (! empty ($ query-> posts)) :?> 

    Recherchez-vous l'une des pages suivantes?

      postes);?>

    Tout d'abord, nous effectuons une requête WordPress avec un ensemble initial d'arguments qui recherche le slug demandé dans un champ de nom de publication / page. Si nous n'obtenons aucun résultat après cela, nous remplaçons les tirets dans la chaîne demandée par des espaces et effectuons une autre requête qui recherche les mots demandés dans le contenu des articles / pages. Si nous obtenons des résultats, nous les générons à l'aide de la fonction frl_list_posts précédemment créée .

    Messages récents:

      'post', 'post_status' => 'publier', 'posts_per_page' => 5); $ query-> query ($ args); if (! empty ($ query-> posts)):?> 

    Pourquoi ne pas jeter un coup d'œil aux articles les plus récents?

      postes);?>

    Dans cette partie, nous effectuons une requête pour les 5 publications les plus récentes du blog et les affichons de la même manière que précédemment.

    La dernière chance:

    Pas bien?

    S'il vous plaît utiliser le formulaire de recherche pour essayer à nouveau ou commencer à naviguer à partir de la page d'accueil .

    . Si vous avez besoin d'aide supplémentaire, n'hésitez pas à contacter à [email protected] .

    Enfin, si aucune des options ci-dessus ne satisfait l'utilisateur, nous proposons un lien vers la page d'accueil et fournissons un formulaire de recherche.

    Prévention des erreurs 404 sur votre site

    Il semble que nous ayons fait de notre mieux pour aider le visiteur sur la page 404-error. En fait, la meilleure aide consiste à empêcher la page 404 d’être utilisée. En particulier, nous pouvons:

    • mettre en place des permaliens bien structurés dès le début du projet, il est donc peu probable qu'il faille les modifier à l'avenir;
    • surveiller les liens entrants qui sont incorrects, contacter les propriétaires des sites Web où de tels liens apparaissent, avec une demande de les corriger;
    • Prenez soin de l'ancien contenu, ne le supprimez pas jusqu'à ce qu'il soit absolument nécessaire et configurez une redirection correcte lors de la migration de la page.

    Il n'y a pas vraiment d'excuse pour que votre site ou votre blog ne dispose pas d'une page 404-error utile et conviviale. J'espère que ce guide vous a donné des conseils utiles.

    Qu'avez-vous sur votre page 404? Que trouvez-vous utile lorsque vous rencontrez 404 pages? Faites le nous savoir dans les commentaires.

    Image / vignette en vedette, image perdue via Shutterstock.