Personnaliser la page "erreur 404 page introuvable" sur Blogger

By
Advertisement

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"

personnaliser la page erreur 404 page introuvable sur blogger






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".

préférences de recherches sur blogger blogspot


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

1. Une page 404 devrait reprendre le design de votre site internet : En personnalisant cette page dans les paramètres Blogger, vous êtes déjà sûr que cette page va reprendre le design de votre blog

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.


message personnalisée de la page 404 dans le cadre des messages d'état sur blogger

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>  :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<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 :

message personnalisée de la page 404 hors du cadre des messages d'état sur blogger



C. Masquer certains éléments de votre blog sur la page introuvable 


Vous pouvez aussi vous amuser à masquer certains éléments de votre blog sur la page introuvable. Ce bout de code offert par Prayag Verma de Stylify your blog peut vous être utile dans ce cas :

<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>


@+


8 commentaires:

  1. Super, merci pour ces explications claires et faciles à mettre en pratique !

    RépondreSupprimer
  2. dès que j'ai envie d'ajouter quelque chose à blogger je fais une petite recherche et hop: super héros arrive en tête dans les résultats... à force de le voir j'ai l'impression qu'il est devenu un membre de la famille :-)

    RépondreSupprimer
  3. Bonjour, j'ai essayé de recréer votre page d'erreur, mais je n'y arrive pas du tout. Après plusieurs essais, j'ai flashé. Est-ce que vos codes marcheraient sur un modèle de blog Affichage Dynamique? Merci.

    RépondreSupprimer
  4. Merci Rodney pour ton suivi de l'actu Blogger j'ai appliqué toutes vos consignes à la lettre sur mon blog couverture facebook et les résultats sont très positifs..

    RépondreSupprimer
  5. really superb information proved by admin..
    i became a huge fan of him..

    http://webresult.in/

    RépondreSupprimer
  6. Thank you so much for these helpful infos.

    RépondreSupprimer
  7. vos conseils sont d'une grande utilité. merci.
    http://expertsmlm.blogspot.com/

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT