Dans un précédent article, nous avions vu que Blogger nous offre maintenant la possibilité de paramétrer les préférences de recherche pour nos blogs. Parmi ces paramètres, nous avons la possibilité de personnaliser la page "Erreur 404 page introuvable".
J'aimerais donc ici vous proposer quelques astuces et conseils pour personnaliser, d'une manière efficace et agréable, les pages "Erreur 404 page introuvable" sur lesquelles les visiteurs de votre blog peuvent tomber.
1. Définition page "Erreur 404 page introuvable"
C'est quoi l'Erreur 404 et quand est-ce que la fameuse page "Erreur 404 page introuvable" peut-elle s'afficher sur votre blog ?
Sur Wikipédia, on apprend que "L’erreur 404 est un code d’erreur dans le protocole HTTP1. Ce code est renvoyé par un serveur HTTP pour indiquer que la ressource demandée (généralement une page web) n’existe pas. Certains navigateurs web affichent alors le message « 404 File Not Found » (de l’anglais signifiant « fichier non trouvé ») à destination de l’internaute."
Un visiteur de votre blog peut tomber sur une page du type « 404 File Not Found » s'il a mal saisi l'url de la page à laquelle il voulait accéder sur la barre d'adresse de son navigateur, si l'article qu'il voulait lire avait été effacé par vous, s'il y a eu erreur d'url d'un site tiers ayant établi un lien vers le votre ou encore si vous même avez mal écrit l'url de l'article de votre blog auquel vous faites référence.
2. Personnalisation de base de la page "Erreur 404 page introuvable" sur Blogger
Vous pouvez personnaliser la page "Erreur 404 page introuvable", en vous connectant sur votre compte Blogger et en allant sur "Paramètres", puis sur "Préférences de recherche".
En cliquant sur "Préférences de recherche", dans la deuxième section il est proposé de paramétrer les "Erreurs et redirections". Cliquez sur "Modifier" pour "Page introuvable personnalisée".
C'est dans la case qui va s'afficher que vous pourrez mettre votre message aux visiteurs qui tombent sur les pages 404. Vous pouvez même intégrer du html et des images pour rendre la page introuvable agréable et non frustrante pour les visiteurs.
3. Bonnes pratiques pour aménager la page 404
Sur le site Atelier Informatique, Jean baptiste nous donne ces 5 conseils pour optimiser la page 404 et profiter de l'erreur :
2. Permettre une recherche : Grâce à une barre de recherche intégrée à cette page.
3. Donner à vos lecteurs des liens et des conseils utiles : si la page n’existe plus, il peut être opportun de donner à vos lecteurs des liens vers les grands thèmes de votre site, mettre en avant les pages populaires de votre site.
4. Donner la possibilité à vos lecteurs de vous remonter l’information : un petit formulaire est une bonne approche (signaler un lien mort par exemple). On fait passer le lecteur d’un mode passif où il subit à un mode actif où il vous informe.
Vous pouvez créer un formulaire de contact pour votre blog grâce à Contactify.
5. Présenter vos excuses, traiter ce problème avec humour
4. Personnalisation avancée de la page introuvable
Maintenant que nous savons ce qu'est ce une erreur 404, les raisons qui font qu'une page 404 s'affiche sur votre blog, les étapes de base à suivre pour personnaliser la page introuvable sur Blogger ainsi que les bonnes pratiques pour aménager ladite page, voyons quelques astuces pour une personnalisation plus avancée de cette fameuse page.
A. Donner un titre à la page 404
Vous pouvez personnaliser le titre de la page 404 introuvable de votre blog, en ajoutant la balise suivante dans le code html de votre blog, juste après la balise <head> (5ème ligne au début du code html du modèle de votre blog)
<b:if cond='data:blog.pageType == "error_page"'> <title>Page non trouvée</title> </b:if>
Vous pouvez carrément remplacer la ligne suivante :
<title><data:blog.pageTitle/></title>par le code ci-après :
<b:if cond='data:blog.pageType == "error_page"'> <title>Page non trouvée</title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>
B. Changer le cadre d'affichage du message de la page 404
Normalement, après avoir paramétré votre page introuvable, le message que vous avez conçu s'affichera dans le cadre appelé "Message d'état" (Statut-message), le même cadre que celui où s'affiche les messages des pages libellés.
Vous pouvez faire que le message de la page 404 ne s'affiche pas dans le cadre des Messages d'état, en ajoutant ce code offert par Blogger pluggin dans votre modèle, juste après la balise <head> :
<style type='text/css'>
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 100%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 100%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
</style>
</b:if>
Le résultat devrait être similaire à celui-ci :
C. Masquer certains éléments de votre blog sur la page introuvable
<style type="text/css" >
body {background:white url('http://4.bp.blogspot.com/-ODAyD5JasIA/T3SaBjtBZWI/AAAAAAAADc4/Z0OOdsACbT4/s1600/10.PNG') 50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>
Dans le code ci-haut, il est indiqué que soient cachés :
- La colonne de droite : .sidebar
- Le pied de page : footer
- Le dessus du pied de page : footer-top
- L'entête : header
Il est possible que ces éléments soient nommés différemment dans le modèle de votre blog. Mais grâce à ce bout de code, vous savez comment vous pouvez retrancher certains éléments de votre page introuvable.
Bon, pour finir, vous pouvez aller jeter un coup d'oeil à une page introuvable de Blogger au bout du doigt. Et voici le code utilisé pour parvenir au résultat que vous allez voir (j'ai mis en bleu les éléments que vous pouvez modifier afin d'harmoniser avec votre blog : image, url page table des matières, url du blog et url du formulaire de contact) :
<div class="404" style="text-align:center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB2AJhNDDfPh2QbCi7L3MopZI_BzUeGPbBrFRlfTL4-TwXlkNZc_825njFetmklDgm1jRAjyYFr25APYA-UMgmoGHI1BFihxIL4A03FVa_qVXmXNkAPAh8WLQI9J4H1TIXqQgyxe2zmOzo/s320/404.png" alt="Page introuvable"/>
<h3>La page que vous cherchez n'a pas été trouvée</h3>
<p>Désolé, mais nous n'avons pas pu trouver la page que vous cherchez. Elle a peut être été effacée, modifiée ou remis temporairement en brouillon.<br/></p>
<p>Veuillez vérifier que vous avez bien écrit l'url de la page.</p>
<b>ou vous pouvez encore essayer ceci :</b><br/>
<ul>
<p><li>Allez à la <a href="http://blogger-au-bout-du-doigt.blogspot.com/2007/05/table-des-matires.html">Table des matières</a> du blog, et vérifier que l'article s'y trouve.</li></p>
<li>Utilisez le formulaire de recherche suivant pour rechercher ledit article</li>
<li>
<form action='http://blogsearch.google.com/blogsearch' method='get'>
<input maxlength='255' name='as_q' size='30' type='text' value=''/>
<input name='bl_url' type='hidden' value='http://blogger-au-bout-du-doigt.blogspot.com/'/>
<input name='btnG' type='submit' value='Chercher '/>
</form>
</li>
<p><li>Me signaler le problème via ce <a href="http://www.contactify.com/991c4"> formulaire de contact</a>.</li></p>
</ul>
</div>
@+
.png "Générateur barre sociale verticale avec boutons de partage sur réseaux sociaux")
