Checklist d'un site avant sa mise en ligne (et juste après)

Des écrans d'ordinateurs (les sites) et le flux de la matrice binaire à grand coup de bits (la mise en ligne)
Fabien Branchut a écrit et publié cet article le .

Quels sont les éléments à contrôler juste avant la mise en ligne d’un site web ? Et ceux juste après la mise en ligne ?

On veut souvent aller vite car pressé de voir son bébé en ligne et c’est la cata à coup sûr : un robots.txt qui empêche vos pages d’être indexées par les moteurs, le système de paiement qui foire, le formulaire de contact qui n'envoie pas l’e-mail, etc. C’est du vécu, croyez-moi !

Profitez donc de cette checklist pratique que je mettrai régulièrement à jour.

Checker un site AVANT sa mise en ligne

  • Nom de domaine
    • Pointage DNS à l’avance Vous avez certainement déjà réservé le nom de domaine de votre site, mais avez-vous pensez à le faire pointer vers l'adresse IP du serveur de production pour que le nom de domaine soit prêt au moment de sa mise en ligne ? La propagation DNS peut en effet parfois prendre jusqu'à 72 heures. Pensez également aux autres noms de domaine sur lesquels vous comptez faire des redirection.
  • Fonctionnalités
    • Tester toutes les fonctionnalités C'est la partie la moins marrante, surtout si votre site possède de nombreuses fonctionnalités : site communautaire, boutique en ligne... Il faut pourtant tester toutes les fonctionnalités de A à Z !

      Astuce : N'hésitez-pas à faire participer des personnes de confiances, si possible qui ne connaissent pas le projet. Vous serez surpris du nombre de bugs qu'ils découvriront, sans parler des problèmes de compréhension et d'ergonomie.
    • Tester le formulaire de contact Une erreur fréquente est de mettre son site en ligne avec le formulaire de contact qui envoie le message au développeur au lieu du webmaster.

      Astuce : Tester chaque champ avec des caractères spéciaux, des sauts de lignes, beaucoup de caractères...
    • Tester les fonctionnalités sur les principaux navigateurs Ces tests navigateurs doivent être réalisés principalement si vos fonctionnalités sont majoritairement développées en JavaScript. Chaque navigateur possède parfois ses petites spécificités et votre code JavaScript peut fonctionner sur un navigateur mais pas sur un autre (histoire de faire chier le monde).
      • Chrome
      • Firefox
      • Internet Explorer
      • Safari
  • Apparences
    • Favicon Sans importance pour certains, primordial pour d'autres, le favicon est pour moi la cerise sur le gâteau. Ce petit icône de 16 x 16 pixels s'affiche dans l'onglet des navigateurs et permet à l'internaute de reconnaître en un coup d'oeil sur quel site il se trouve, sans devoir lire de texte.

      Astuce : J'utilise ce petit site pour générer mes favicon. Au fur et à mesure que vous dessinez votre favicon, vous avez un rendu directement dans l'onglet du navigateur en temps réel.
    • Responsive design Tester chacune de vos pages-types avec différentes largeurs de votre fenêtre de navigateur, mais également différentes hauteurs, notamment si vous avez des éléments qui suivent le scroll de l'internaute.
      • Desktop
      • Tablette
      • Laptop
      • Smartphone
    • Tester l’affichage sur les principaux navigateurs Les navigateurs sont devenus de plus en plus respectueux des standards HTML et CSS. Il subsistent toutefois toujours des différences ici et là qu'il faut contrôler (surtout si vous utilisez du code un peu trop en avance sur son temps).
      • Chrome
      • Firefox
      • Internet Explorer
      • Safari
    • Impression des pages J'avoue ne pas tester fréquemment l'affichage de l'impression de chaque page-type, mais cela peut s'avérer utile pour certains projets.
  • Moteurs de recherche
    • Balises <title> Primordial pour le référencement (naturel ou pas d'ailleurs), chaque balise title doit être différente par page. N'oubliez-pas de la vérifier sur chaque page-type, surtout celles dont les balises title sont générées dynamiquement (spinning et compagnie).
    • Balises <meta> description Pas (ou peu) utile pour être mieux positionné dans les moteurs de recherche, la meta description peut inciter l'internaute à
    • Fichier sitemap.xml Ça sert encore ?
    • Index et Noindex Vérifiez que vos pages importantes possèdent une balise meta robot en INDEX. Combien de fois j'ai vu des pages d'accueil en NOINDEX (notamment sous Wordpress).

      Astuce : Le contenu de certaines pages n'intéressent pas les moteurs de recherche, notamment la pagination des listes de résultats (page 2, 3, 4...) que vous pouvez qualifier en NOINDEX (Attention ! Pas en nofollow !).
    • Fichier robots.txt Ajoutez dans ce petit fichier texte destiné principalement aux robots des moteurs de recherche les pages et fichiers de votre site que vous souhaitez et ne souhaitez pas voir dans leurs index. En savoir plus sur le fichier robots.txt
    • Tester en tant Googlebot Si vous utilisez des techniques de cloacking pour Google ou d'autres moteurs, vérifier bien qu'ils "voient" bien ce que vous souhaitez. Je vous conseille d'utiliser le plugin de Firefox User Agent Switcher pour simuler le user agent Googlebot.
  • Réseaux sociaux
    • Balises OG Principalement utilisé par Facebook (et d'ailleurs créé par Facebook), l'Open Graph permet à Facebook de mieux "comprendre" la page d'un site, notamment quand vous collez une URL dans une publication Facebook. Facebook ira alors extraire dans les balises OG de votre page les infos nécessaires à son affichage sur Facebook.
      • og:title
      • og:type
      • og:url (canonical)
      • og:site_name
      • og_description
      • og:image
      • og:local
    • Balise Google+
      • Balise Publisher N'oubliez pas d'afficher sur toutes les pages de votre site la balise "publisher" qui permet de définir à quelle fan page Google votre site correspond. Cette balise s'intègre entre les balises <head></head> de cette manière : <link href="https://plus.google.com/117512708363138193101" rel="publisher" />.
      • Balise Authorship A ne pas confondre avec la balise "publisher", l'authorship n'est pas renseigné sous la forme d'une balise mais plutôt sous la forme d'un lien. Par exemple, pour ce billet, l'authorship est indiqué avec le lien <a href="https://plus.google.com/+FabienBRANCHUT">Fabien Branchut</a>.
    • Liens vers les fans pages Vérifiez bien que les icônes Facebook, Google+ et Twitter pointent bien vers les pages idoines.
  • Navigation
    • Liens brisés Il arrive parfois qu'on supprime des pages de test sans pour autant avoir pensé à supprimer les liens qui pointent vers elles. Faîtes bien le tour du site pour débusquer tous les liens brisé.
    • Page 404 Vérifier que la page 404 est personnalisée et qu'on y retrouve la navigation afin de suggérer l'internaute de poursuivre sa visite sur le site. Vérifiez que l'en-tête HTTP retourne bien le code 404.

      Redirection 301 : pour des raisons SEM ou tout simplement ergonomique, vous pouvez remplacer célèbres erreurs 404 par des redirections 301 vers la page d'accueil.
    • Le lien sur le logo Le retour en page d'accueil en cliquant sur le logo du bandeau du site est devenu un standard ergonomique. Mais n'en profitez-pas pour supprimer la rubrique "Accueil" du menu de navigation, ce n'est pas évident pour tout le monde de devoir cliquer sur le logo pour aller sur la page d'accueil.
  • Contenu
    • Orthographe, la grammaire et la conjugaison Corrigez autant que possible les fotes fautes d'orthographe car des pages truffées de fautes finissent par décrédibiliser un site web, son auteur et son activité.
    • Textes et images de test Vérifiez que vous n'avez pas laissé trainer du faux-texte (lorem ipsum) ou des images inappropriées.
    • Mentions légales En plus de vérifier que la page existe bien, vérifiez son contenu qui peut provenir d'un vieux copier/coller à partir d'un ancien site.
  • Securité
    • Accès interdits aux répertoires Pour interdire de voir l'intégralité des fichiers d'un répertoire, ajoutez dans votre .htaccess la ligne suivante : Options -Indexes

Merci d’avance de me suggérer d’autres points manquants.

Checker un site APRÈS sa mise en ligne

  • Navigation
    • URL avec et sans www Si l'URL officielle de votre site est http://www.example.com, pensez à faire une redirection 301 de http://example.com vers http://www.example.com (ou l'inverse si vous n'aimez pas les www). Une chose est sûre, les 2 URLs (avec et sans www) ne doivent pas coexister pour éviter le duplicate content par les moteurs de recherche.
    • URL avec d’autres sous-domaine Faîtes en sorte que si on tape votre URL avec n'importe quel sous-domaine http://blablabla.example.com, il y ait une redirection 301 vers votre URL officielle (avec ou sans www, en fonction de ce que vous avez décidé).
    • URL avec d’autres noms de domaine Si vous avez réserver d'autres noms de domaine comme http://example.info, http://example.net, http://example.org... N'oubliez-pas de les rediriger en 301 vers votre adresse officielle http://example.com
    • Liens brisés Même si vous avez confirmé l'absence de liens brisés avant la mise en ligne du site, vous n'êtes pas à l'abris de quelques liens "en dur" qui possèdent toujours l'adresse de développement (qui normalement aboutissent à une pageforbidden, enfin j'espère).
    • Page 404 Vos 404 fonctionnent toujours ?
    • Vérifier la propagation DNS Si vous changer de serveur et/ou d'IP, vous devez configurer les DNS de votre nom de domaine, puis testez la propagation DNS avec whatsmydns.net.

      Astuce : Si sur votre ordinateur vous ne voyez toujours le nouveau site en ligne, c'est certainement que les caches de vos DNS sont activés. Dans ce cas ouvrir une commande Windows et tapez ipconfig /flushdns.
  • Fonctionnalités
    • Config en mode "production" Si votre système ou CMS propose une configuration du contexte "en production" ou "en développement", alors n'oubliez-pas de l'activer.
    • Config de pagination Il arrive parfois de régler la pagination à 1 résultat par page lors des développements afin de visualiser les boutons de paginations pour travailler les CSS. N'oublier de la modifier une fois en ligne à 5, 10 ou davantage.
    • RE-Tester toutes les fonctionnalités Oui, c'est chiant ! Mais il faut le faire absoluement car il est possible que les configurations du serveur de production soit légèrement différentes de celle du serveur de développement, provoquant des dysfonctionnements. De même, certaines fonctionnalités comme le système de paiement doit être testé impérativement sur le serveur de production en faisant un petit achat, mais un achat réel, avec une vraie CB !
    • RE-Tester le formulaire de contact Juste au cas où ! ;-)
  • Statistiques et reporting
    • Tag analytic N'oubliez-pas d'intégrer le tag Google Analytics ou GetClicky... pour pouvoir analyser les statistiques de fréquentation du site.
    • Webmaster tools Ajoutez votre site sur le Google Webmaster Tools afin de profiter de l'analyse de votre site par le moteur : trafic de recherche, index Google, problèmes de sécurité, exploration, apparence dans les SERPs. Si vous utilisez déjà le tag Google Analytics, vous pouvez confirmer auprès de Google Webmaster Tools que vous êtes bien le webmaster du site.
    • Monitoring Si vous suivez le bon fonctionnement de votre site et les performances de votre serveur, n'oubliez-pas d'installer vos sondes et d'activer vos services.
    • Suivre ses objectifs de mots-clés Si vous souhaitez suivre de prêt votre référencement naturel, vous avez certainement déja défini des objectifs de mots-clés. Pour ma part, j'utilise le site français Ranks.fr qui permet de suivre facilement l'évolution des positions de chaque mot-clé ciblé.
  • Performances
    • Systèmes de cache Si votre système ou CMS propose un système de cache, il est peut-être intéressant de l'utiliser pour réduire le temps d'affichage des pages ?
    • Vitesse d’affichage des pages Il existe de nombreux systèmes externes qui vous indique gratuitement la vitesse d'affichage de vos pages, que ce soit coté client ou côté serveur. Pour ma part j'utilise Google PageSpeed Insights. Essayez d'obtenir une note supérieure à 80 / 100 sur desktop et mobile.
    • En-tête HTTP Vérifiez les en-têtes HTTP de chacune des vos pages-types : accueil, liste de résultats, page de pagination 2 et +, page 404 personnalisée, redirection 301... On peut parfois avoir des surprises. J'utilise l'outil en ligne RedBot.org
  • Moteurs de recherche
    • Fichier robots.txt Vérifiez que certaines pages ou fichiers ne sont pas en disallow et donc non indexables par les moteurs de recherche.
  • Réseaux sociaux
    • Tester l’affichage des URLs de votre site dans une publication d’un réseau social
      • Facebook Copiez/collez les URLs des pages les plus importantes de votre site sur votre mur Facebook pour voir de quelles manières Facebook affichent les informations qu'il extrait de vos pages. De cette manière, vous savez comment verront les internautes qui partagent vos pages sur Facebook.
      • Google+ Procédez de la même manière sur Google+.
    • Liaison Google+ du publisher et de la fan page Si vous avez déjà ajouté la balise Google+ Publisher sur les pages de votre site (contenant l'URL de votre fan page Google+), vous devez également ajouter l'adresse de votre site sur la fan page Google+. Vous n'avez plus qu'à attendre que Gégé fasse la liaison.
  • Sécurité
    • Back-office protégé par un mot de passe Cela peut paraître évident, mais vérifier que l'accès à l'interface d'administration soit bien protégé par un mot de passe sécurisé autre que 123456 par exemple.

Merci d’avance de me suggérer d’autres points manquants.

Conclusion

Ne communiquez l’adresse de votre nouveau site qu’après avoir vérifié tous ces points :
PAS AVANT ! Je vous conseille même de le montrer en premier lieu uniquement à votre entourage et d'attendre leur retour avant de communiquer publiquement.

Même si les vérifications du bon fonctionnement de votre site web sont parfois longues et fastidieuses, prenez toujours le temps de réaliser ces contrôles, même s’il est tard, que vous avez fini vos dev à la bourre et que vous (ou votre client) ne pouvez plus attendre : ne gâcher pas des centaines d’heures de travaux pour une petite négligence !

Remerciements spéciaux

Merci à tous ceux qui ont participé à compléter cette checklist.

Auteur : Fabien Branchut

Commentaires

Flux RSS

Abonnez-vous au flux RSS de tout le blog ou uniquement Conception web.

En ce moment, je lis :

Couverture du livre : Le guide des liens sponsorisés

Le guide des liens sponsorisés :
Google AdWords en 150 questions/réponses

J'ai commencé la lecture de cet ouvrage suite à ma découverte de son auteur, Florian Marlin, dans un Podcast du célèbre référenceur français Laurent Bourrelly. Florian est un professionnel en marketing web, spécialiste en liens sponsorisés dont Google Adwords. Je dois dire que ma lecture des premières pages sont plus que prometteuses. Après un chapitre sur les bases du SEA, l'expert traite des sujets commes les stratégies SEA, l'achat de mots-clés, le ciblage des mots-clés, les annonces Adwords, les paramétrages de campagnes, le quality score, l'analyse et reporting, l'optimisation avancée... et j'en passe ! Si vous souhaitez vous lancer dans la gestion d'une (ou plusieurs) campagnes Adwords, je vous conseille cet ouvrage, principalement si vous êtes débutant ou si vous souhaitez vous perfectionner.

Fabien Branchut
Chef de projet web
Fabien Branchut - Expert en conception de sites web

Vous désirez un site performant ? Contactez-moi !

Depuis 16 ans, je conçois et réalise des sites web performants, visibles et vivants.

Devis

Parlez-moi de votre projet web, je vous dirai comment faire pour obtenir le meilleur.