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.

Ligne décorative

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.

Erreur 404 sur Blogger - Message par défaut
Erreur 404 sur Blogger – Message par défaut

Ce n’est pas catastrophique en termes de référencement et 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 :

Message d'erreur 404 personnalisé
Message d’erreur 404 personnalisé

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.

Page 404 avec moteur de recherche sur Blogger
Page 404 avec moteur de recherche sur Blogger

Ensuite, nous allons récupérer le code HTML correspondant à ce que vous venez de créer ! Il suffit de cliquer sur « HTML » dans la barre d’outils Blogger pour basculer vers l’éditeur HTML :

Basculer vers l'éditeur HTML sur Blogger
Basculer vers l’éditeur HTML sur Blogger

Copiez tout le code qui s’affiche.

Code HTML de la page 404 sur Blogger
Code HTML de la page 404 sur Blogger

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é ».

Message Page introuvable personnalisé
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 :

Code HTML de la page 404 sur Blogger
Code HTML de la page 404 sur Blogger

Et sur le blog… voilà le message d’erreur 404 :

Rendu de la page 404 sur Blogger
Rendu de la page 404 sur Blogger

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 !


Poster un commentaire

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

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

2 commentaires sur “Comment créer une page 404 sur Blogger ?

  • Christine

    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.

    Répondre à Christine
    • Marlène

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

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.