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 !
Bonjour Marlène ♥, je vous en remercie pour ce super tuto ! Cependant je retrouve toujours cette fameuse page error 404 par blogger même en ayant suivi pas à pas votre tuto et en ayant modifié la page pour qu’elle soit plus jolie. Je souhaiterai savoir pourquoi cela ne marche pas ? Je vous en remercie et à très bientôt !
Hello Pauline, malheureusement « de l’extérieur » je n’ai aucun moyen de savoir ce qui n’a pas fonctionné. Il faudrait retenter la procédure expliquée dans le tuto, au cas où une étape aurait été oubliée.
Merci pour le tuto ça a marché nickel sur mon blog. Une page 404 perso c’est beaucoup mieux que la page par défaut que fournisse le service blogger
Je trouve aussi que les pages par défaut sont souvent assez peu qualitatives !
Bonjour,
J’ai fait exactement ce que vous expliquez mais à l’affichage le moteur de recherche ne s’affiche pas du tout. Je suis en mode brouillon.
Doit on mettre un texte dans le titre ?
Doit on publier cet article pour qu’il fonctionne ou autre ?
D’avance merci pour votre aide précieuse.
Bonjour, l’article n’a pas besoin d’être publié, il faut aller jusqu’au bout du tutoriel et en copier le contenu dans la zone prévue pour la page 404… sinon c’est normal que ça ne fonctionne pas ;)