Comment optimiser sa page 404 sous WordPress.

Il y a quelques années, j’avais fait un tutoriel pour modifier sa page 404 sous WordPress, mais depuis les choses ont bien changées. La page 404 est devenu une page importante à ne pas sous-estimée, pour guider voir aiguiller un visiteur et pour éviter tout simplement de le perdre.

L’erreur 404 est le code erreur d’une requête web n’aboutissant pas, soit parce que la page n’existe plus, soit parce qu’elle aura été renommée ou tout simplement que le lien n’était pas bon.

Une page d’erreur 404 peut être pour certains sites une page très fréquentée (jusqu’à quelques pourcents des pages vues totales). Voilà pourquoi elle se révèle être un élément stratégique à ne pas négliger dans toute démarche d’optimisation d’un site web.

Autant de raison qui joue en la faveur de l’optimisation de cette page. Parce qu’il est en effet possible de modifier l’affichage par défaut de cette page sous WordPress, qui n’est pas très sexy d’origine.

Voici ci-dessous une page d’erreur 404 classique :

optimiser_page_404_1

Les pages 404 des thèmes WordPress.

Généralement chaque bon thème WordPress dispose d’un fichier 404.php, qui affiche le strict minimum, donc avec un peu d’imagination et de temps on peut personnaliser cette page.

Voici le contenu (code source) classique d’une page 404 sous WordPress :

<?php get_header(); ?>
<div id= »content » class= »archive »>
<span id= »map »><a href= »<?php echo get_option(‘home’); ?>/ »>Home</a> &raquo; Error 404</span>
<h2 class= »title »>Error 404 – Not Found</h2>
<p>Ooops, We cannot find you the page you are looking for. You may try to search our site for another keyword or use the navigational tools in this website.</p>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ce code affiche juste un message d’erreur et garde l’aspect graphique de votre template. Pas terrible.

Dans WordPress vous pouvez directement éditer le fichier 404.php dans Apparence → Thème → Editeur → Modèle pour l’erreur 404.

Comment optimiser votre page d’erreur en 4 points.

  • Point 1 : Optimiser le texte de la page et prévenir l’administrateur du site. Rajouter donc le texte suivant (libre à vous de le modifier comme bon vous semble)
<h1 class="error404_title"> Whoops! Il y a peut-être quelque chose de cassé</h1>
<div class="clear"></div>
<h2 class="error404_text"> ☠ Page non-trouvé ☠</h2>
Pour cet exemple, j’utilise le thème Backstreet. Donc j’ai utilisé des classes spécifiques à ce thème. Pour voir les classes utilisées vous pouvez éditer le fichier .css de votre thème et pour vous faciliter la recherche des classes utilisées, je vous conseille d’utiliser Firefox et sa fonction Examiner l’élément.

optimiser_page_404_2

En utilisant l’inspecteur, j’ai pu déterminer que la classe debutpagnination était utilisée. Pratique.
Ensuite en cas d’erreur, cela peut être pratique d’être averti, pour connaître la page qui bug. Ce script PHP permet d’envoyer un mail au webmaster du site.

<div>
 <p class="error404_content_text">Vous
 <?php
 $adminemail = get_option('admin_email'); #Adresse email de l'administrateur WordPress
 $siteweb = get_bloginfo('url'); #URL du site Web
 $nomdusiteweb = get_bloginfo('name'); #Nom du site Web
 if (!isset($_SERVER['HTTP_REFERER'])) {
 #Mesage à l'utilisateur
 echo "avez essayé de vous rendre sur "; #construction du message
 $message404 = "Tout n'est pas perdu!";
 } elseif (isset($_SERVER['HTTP_REFERER'])) {
 #Proposition de solutions à l'utilisateur et envoi d'une alerte mail à l'administrateur
 echo "avez cliqué sur le lien <code>";
 #Construction de l'alerte admin
 $messageerreur = "Un utilisateur a essayé de se rendre sur $siteweb"
 .$_SERVER['REQUEST_URI']." et a reçu une erreur 404 (page non trouvée). ";
 $messageerreur .= "Ce n'était pas sa faute, il faut donc intervenir sur cet incident.
 Url d'origine ".$_SERVER['HTTP_REFERER'];
 mail($adminemail, "Erreur 404 pour ".$_SERVER['REQUEST_URI'],
 $messageerreur, "From: $nomdusiteweb <noreply@$siteweb>");
 $message404 = "Un administrateur a été averti de cet incident.";#L'alerte mail admin a été envoyé
 }
 echo " ".$siteweb.$_SERVER['REQUEST_URI']; ?></code>
 mais cette page n'existe plus ou a été déplacée. <?php echo $message404; ?> Vous pouvez revenir en arrière en cliquant sur le bouton "Précédent" de votre navigateur ou essayer une des ces solutions :
 </p>
 </div>

Voici pour l’instant ce que cela donne à l’écran :

optimiser_page_404_3

  • Point 2 : Insérer un formulaire de recherche

Afin de proposer à votre visiteur une alternative, nous allons maintenant insérer un formulaire de recherche dans notre page, grâce au code suivant :

<h2 class="post-text"><li>Effectuer une recherche :</li></h2>
 <!-- Begin Search Header -->
 <div class="search-text">
 <form id="search" action="https://quick-tutoriel.com/" method="get">
 <div>
 <input id="s" type="text" onblur="if (this.value == "") { this.value = ""; }" onfocus="if (this.value == "") { this.value = ""; }" value="" name="s"></input>
 </div>
 <div><button id="searchbutton" type="submit"></button></div>
 </form>
 </div>
 <!-- End Search Header -->
  • Point 3 : Proposer à votre visiteur de parcourir les catégories de votre blog.

Une autre solution consiste à proposer en plus à votre malheureux visiteur, une liste déroulante avec toutes vos catégories. Insérer ce code dans votre page :

<h2 class="post-text"><li>Parcourir les catégories :</li></h2>
 <form action="<?php bloginfo('url'); ?>/" method="get">
 <div class="error404_liste_deroulante">
 <?php
 $select = wp_dropdown_categories('show_option_none=Sélectionner une catégorie&show_count=1&orderby=name&echo=0');
 $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
 echo $select;
 ?>
 <noscript><div><input type="submit" value="View" /></div></noscript>
 </div>
 </form><!-- listecategories -->

Si un utilisateur sélectionne une catégorie, la page associée aux catégories s’affichera.

  • Point 4 : Insérer un lien vers la page d’accueil.

Si les 2 solutions ci-dessus ne conviennent pas à votre visiteur, il pourra toujours revenir facilement sur la page d’accueil de votre blog. Insérer ce code :

<center><h2 class="post-text"><li><a href="https://quick-tutoriel.com/">Se rendre sur la page d'accueil</a></li></h2></center>
Afin d’améliorer la mise en forme de ma page j’ai utilisé un tableau pour placer correctement mes différentes options de recherche. Mais j’ai aussi, pour améliorer le design, ajouter une image en haut de page.

Voici le code entier de ma page d’erreur 404 :

<?php get_header(); ?>

<p style="text-align: center;"><a href="https://quick-tutoriel.com/?attachment_id=10264" rel="attachment wp-att-10264"><img class="alignnone wp-image-10264" src="https://quick-tutoriel.com/wp-content/uploads/erreur_404_2.jpg" alt="erreur_404_2" width="629" height="207" /></a></p>

<h1 class="error404_title"> Whoops! Il y a peut-être quelque chose de cassé</h1>
<div class="clear"></div>
<h2 class="error404_text"> ☠ Page non-trouvé ☠</h2>

<div>
 <p class="error404_content_text">Vous
 <?php
 $adminemail = get_option('admin_email'); #Adresse email de l'administrateur WordPress
 $siteweb = get_bloginfo('url'); #URL du site Web
 $nomdusiteweb = get_bloginfo('name'); #Nom du site Web
 if (!isset($_SERVER['HTTP_REFERER'])) {
 #Mesage à l'utilisateur
 echo "avez essayé de vous rendre sur "; #construction du message
 $message404 = "Tout n'est pas perdu!";
 } elseif (isset($_SERVER['HTTP_REFERER'])) {
 #Proposition de solutions à l'utilisateur et envoi d'une alerte mail à l'administrateur
 echo "avez cliqué sur le lien <code>";
 #Construction de l'alerte admin
 $messageerreur = "Un utilisateur a essayé de se rendre sur $siteweb"
 .$_SERVER['REQUEST_URI']." et a reçu une erreur 404 (page non trouvée). ";
 $messageerreur .= "Ce n'était pas sa faute, il faut donc intervenir sur cet incident.
 Url d'origine ".$_SERVER['HTTP_REFERER'];
 mail($adminemail, "Erreur 404 pour ".$_SERVER['REQUEST_URI'],
 $messageerreur, "From: $nomdusiteweb <noreply@$siteweb>");
 $message404 = "Un administrateur a été averti de cet incident.";#L'alerte mail admin a été envoyé
 }
 echo " ".$siteweb.$_SERVER['REQUEST_URI']; ?></code>
 mais cette page n'existe plus ou a été déplacée. <?php echo $message404; ?> Vous pouvez revenir en arrière en cliquant sur le bouton "Précédent" de votre navigateur ou essayer une des ces solutions :
 </p>
 </div>
 
<CENTER><TABLE BORDER="0"> 
 <TR> 
 <TH> 
 <h2 class="post-text"><li>Effectuer une recherche :</li></h2>
 <!-- Begin Search Header -->
 <div class="search-text">
 <form id="search" action="https://quick-tutoriel.com/" method="get">
 <div>
 <input id="s" type="text" onblur="if (this.value == "") { this.value = ""; }" onfocus="if (this.value == "") { this.value = ""; }" value="" name="s"></input>
 </div>
 <div><button id="searchbutton" type="submit"></button></div>
 </form>
 </div>
 <!-- End Search Header --> 
 </TH> 
 <TH> 
 <h2 class="post-text"><li>Parcourir les catégories :</li></h2>
 <form action="<?php bloginfo('url'); ?>/" method="get">
 <div class="error404_liste_deroulante">
 <?php
 $select = wp_dropdown_categories('show_option_none=Sélectionner une catégorie&show_count=1&orderby=name&echo=0');
 $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
 echo $select;
 ?>
 <noscript><div><input type="submit" value="View" /></div></noscript>
 </div>
 </form><!-- listecategories -->
 </TH> 
 </TR> 
</TABLE></CENTER>

<center><h2 class="post-text"><li><a href="https://quick-tutoriel.com/">Se rendre sur la page d'accueil</a></li></h2></center>

<?php get_footer(); ?>

Ce qui donne en graphique :

optimiser_page_404_4

De plus en plus de thèmes, comme Backstreet propose dans l’administration du thème la possibilité de modifier directement la page d’erreur 404.

Malheureusement la plupart du temps, les modifications sont minimes. Si vous voulez vraiment personnaliser votre page 404, il va vraiment falloir mettre les mains dans le camboui.

Voici un exemple mails que vous recevrez si une erreur 404 est détectée sur votre blog :

optimiser_page_404_7

Enfin vous auriez aussi pu afficher la liste des meilleurs articles ou le sitemap du blog, bref les possibilités sont infinies.

Source: http://magazineduwebdesign.com

That’s All.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *