Comment créer une page 404 sur Blogger ?

Je vous parlais récemment de l'intérêt d'avoir une bonne page 404 sur son blog, pour orienter ses visiteurs (et les moteurs de recherche) s'ils sont confrontés à une page d'erreur. Savez-vous que vous pouvez créer une page 404 personnalisée sur un blog gratuit Blogger ? Peu de blogueurs le savent et pourtant, c'est tout-à-fait possible de personnaliser sa page d'erreur 404 sur cette plateforme !

Je vais vous expliquer comment procéder pas à pas dans ce tutoriel.

La page 404 par défaut de Blogger

Sur Blogger, quand un visiteur entre une URL qui n'existe pas ou suit un lien brisé, la page 404 obtenue se limite à un simple message, avec quelques liens vers des articles.

Ce n'est pas catastrophique en termes d'expérience utilisateur car on permet à l'internaute de poursuivre son parcours sur le site s'il le souhaite. Néanmoins, vous avez peut-être envie de personnaliser un peu plus le message, d'inclure une image, etc.

Personnaliser la page 404 sur Blogger

Blogger vous permet de personnaliser votre page 404 en utilisant le langage HTML. Pas de souci si vous ne le maîtrisez pas car la méthode que je vous donne va vous permettre d'effectuer le travail sans coder !

Elle se déroule en deux étapes : la création du message d'erreur personnalisé... puis son ajout dans les paramètres de Blogger.

Créer le message d'erreur 404 personnalisé

Allez simplement dans le menu Articles puis cliquez sur le bouton "Nouvel article".

Vous pouvez rédiger le message de votre choix et ajouter une image si vous le souhaitez pour personnaliser l'univers graphique de votre page 404. Voici un exemple sur l'ancienne interface de Blogger :

Et le même exemple avec la nouvelle interface de Blogger :

Je vous conseille de prévoir aussi l'ajout d'un moteur de recherche sur la page 404. Ainsi, vous facilitez la tâche du visiteur égaré… et vous limitez le risque qu'il s'en aille tout de suite !

Si vous souhaitez ajouter un moteur de recherche, écrivez par exemple FORMULAIRE dans votre texte, à l'endroit où vous voulez faire apparaître le moteur, ça vous aidera pour la suite du tuto ! Ça vous permettra de repérer facilement dans le code à quel endroit insérer le moteur de recherche.

Ensuite, nous allons récupérer le code HTML correspondant à ce que vous venez de créer !

Sur l'ancienne interface de Blogger, il suffit de cliquer sur "HTML" dans la barre d'outils Blogger pour basculer vers l'éditeur HTML :

Sur la nouvelle interface de Blogger, cliquez sur le petit signe représentant du code en haut à droite :

Copiez tout le code qui s'affiche.

Nous allons pouvoir passer à la deuxième étape du tutoriel !

Créer le message Page Introuvable personnalisé

Ça se passe dans le menu Paramètres > Préférences de recherche, au niveau de la partie "Erreurs et redirections". Cliquez sur "Modifier" au niveau de la ligne "Message 'Page introuvable' personnalisé".

Copiez dans le champ qui s'affiche tout le code obtenu lors de la première étape du tutoriel.

Si vous voulez ajouter un moteur de recherche, remplacez le mot FORMULAIRE (très facile à repérer, même au milieu du code !) par ceci :

<form id="searchThis" action="/search" style="display:inline;margin:10px auto;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Rechercher sur ce blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Chercher" type="submit" /></form>

Ça donne ce genre de rendu :

Et sur le blog... voilà le message d'erreur 404 :

Il se peut que vous rencontriez un problème d'affichage de l'image car Blogger indique parfois des dimensions par défaut... qui peuvent faire sortir l'image du "cadre" de l'erreur 404. Dans ce cas, remplacez les valeurs de hauteur (height) et de largeur (width) par celles-ci :

• data-original-height=" "
• data-original-width="90%"
• height=" "
• width="90%"

Ça signifie que l'image occupera 90% de l'espace disponible en largeur et que sa hauteur s'adaptera automatiquement pour préserver les proportions.

Voilà ! C'est tout simple à mettre en place et c'est toujours un plus pour votre blog !