Cahier des charges SEO - SEO, référencement et moteurs ... · termes de SEO (Search Engine Optimization ou référencement naturel). En voici trois parmi les plus importantes :

Cahier des charges SEO - Guide Abondance © Abondance.com - Novembre 2015

! sur !1 13

Introduction - Code HTML - Structuration du contenu en balises Hn - Page d'accueil - Pages internes - Utilisation de l'extension Web Developer - Conseils généraux - Balises Title - Page d'accueil - Pages internes - Balises meta "description" - Balisage sémantique et « rich snippets » - Balises Meta "keywords" - Nom des fichiers images - Attribut ALT des images - Balises Hreflang - Balises de pagination - Conception du site - Contenus Flash et freins au référencement - Plan du site - Extension et nom de domaine - URL - Duplicate Content - Fichier Sitemap - Fichier robots.txt - Cocon Sémantique - Outils de suivi - Performances du site - Compatibilité mobile - Sécurisation du site - Gestion de l'arche - Gestion de la navigation à facettes - Validité W3C - Pages de tags - Pages de résultats du moteur interne - Plugins SEO - Désindexation du site de test - Contenu éditorial - Mise en gras du contenu rédactionnel - Possibilité d'indiquer des balises Hn dans le contenu - Maillage interne - Gestion des erreurs sur les articles non disponibles - Célébrité - Cas particulier des refontes/migrations - Redirections 301 - Sitemaps XML - Taggage Analytics - Fiches d'audit - Fiche d'audit sur les balises Hn - Fiche d'audit sur les balises Title - Fiche d'audit sur les balises meta "description" - Fiche d'audit sur les images - Fiche d'audit sur les URL - Conclusion - À propos de l'auteur - Introduction - Code HTML - Structuration du contenu en balises Hn - Page d'accueil - Pages internes - Utilisation de l'extension Web Developer - Conseils généraux - Balises Title - Page d'accueil - Pages internes - Balises meta "description" - Balisage sémantique et « rich snippets » - Balises Meta "keywords" - Nom des fichiers images - Attribut ALT des images - Balises Hreflang - Balises de pagination - Conception du site - Contenus Flash et freins au référencement - Plan du site - Extension et nom de domaine - URL - Duplicate Content - Fichier Sitemap - Fichier robots.txt - Cocon Sémantique - Outils de suivi - Performances du site - Compatibilité mobile - Sécurisation du site - Gestion de l'arche - Gestion de la navigation à facettes - Validité W3C - Pages de tags - Pages de résultats du moteur interne - Plugins SEO - Désindexation du site de test - Contenu éditorial - Mise en gras du contenu rédactionnel - Possibilité d'indiquer des balises Hn dans le contenu - Maillage interne - Gestion des erreurs sur les articles non disponibles - Célébrité - Cas particulier des refontes/migrations - Redirections 301 - Sitemaps XML - Taggage Analytics - Fiches d'audit - Fiche d'audit sur les balises Hn - Fiche

Par Olivier Andrieu Novembre 2015

Cahier des charges SEO

Check-list pour la création ou la refonte d’un site web

Les Guides Abondance


INTRODUCTION Bienvenue dans ce guide Abondance consacré au cahier des charges SEO, ayant vocation à lister tous les points à prendre en compte en termes de développement sur un nouveau site web ou lors d'une refonte.

En effet, tout projet web doit, de façon logique, se conformer à un certain nombre de règles en termes de SEO (Search Engine Optimization ou référencement naturel). En voici trois parmi les plus importantes :

Règle N°1 : Tout site web a besoin d'être visible sur les moteurs de recherche en général, et sur Google (qui représente en moyenne 93% du trafic « search » en Europe) en particulier. Ce trafic représente le plus souvent au minimum 50% du trafic total sur le site. Il semble donc absolument impossible de se passer de cette manne de visites, quelle que soit la source d’information sur laquelle vous travaillez.

Règle N°2 : Toute optimisation SEO effectuée en amont de la mise en ligne du site est bien plus efficace que si elle est réalisée en aval. Dans une période pas si éloignée que cela (mais en sommes-nous vraiment sortis ?), de nombreux sites web étaient mis en ligne sans tenir compte des moteurs de recherche, les optimisations pourtant nécessaires étant réalisées par la suite, une fois le site disponible à tous. Il s'agit clairement d'une mauvaise pratique. Les moteurs n'aiment pas les modifications massives sur un site donné. Il est important de leur fournir, dès le départ, des pages réactives par rapport à leurs critères de pertinence et de minimiser les modifications - notamment celles effectuées à l'échelle d'un site entier - par la suite.

Règle N°3 : La plupart du temps, les agences de création de site web ne livrent pas, par défaut, un site web « Google friendly ». C'est un constat évident. Très peu de sites sont créés « dans les règles de l'art SEO », et ce dès le départ. Cela peut surprendre et pourtant, il s'agit de la situation la plus souvent constatée. Voir cet article qui évoque ce sujet : http://blog.axe-net.fr/pourquoi-sites-web-pas-seo-ready-creation/ Bien sûr, certaines agences proposeront un site web parfaitement adapté aux exigences de Google. Elles existent. Heureusement. Mais elles sont rares.

Aussi, s'il s'avère nécessaire, voire indispensable, de mettre en place un cahier des charges pour la création (ou la refonte) de son site web, il sera tout aussi important d'y inclure une partie « SEO » afin d'indiquer clairement au prestataire choisi ce qu'il devra faire sur le site afin de proposer, dès le départ, des pages qui auront potentiellement une réactivité forte par rapport aux différents moteurs de recherche de la Toile. Et ne pas avoir à tout casser par la suite, comme c’est trop souvent le cas à l’heure actuelle…

Vous trouverez donc ci-après un résumé des différents points à prendre en compte pour créer un site web optimisé pour les moteurs de recherche en termes de code HTML et de conception de site. N'hésitez pas à inclure ces différents points dans vos documents et à « challenger » les différentes entreprises que vous envisagez de contacter.

! sur !2 13

http://blog.axe-net.fr/pourquoi-sites-web-pas-seo-ready-creation/


Un coup d'œil sur les sites web déjà réalisés par les sociétés que vous envisagez de contacter et une analyse de l'adéquation de leur site web (ou des sites web qu'ils ont réalisés pour leur client) par rapport au présent cahier des charges peut d'ailleurs vous en apprendre beaucoup sur leur capacité à vous aider par la suite...

Pour structurer ce guide, nous avons repris notre désormais très connue « régle des 4 C (Code, Conception, Contenu, Célébrité) » (chère aux lecteurs de nos livres « Réussir son référencement web » et « SEO Zéro Euro » chez Eyrolles : www.livre-referencement.com ou tapez « livre seo » ou « livre référencement » sur Google :-) ) afin de lister les différents points à prendre en considération dans ces quatre domaines. Bien entendu, les deux premiers « C », qui se gèrent en amont de la mise en ligne, auront la part belle dans ce document, par rapport aux deux derniers, qui seront l'objet de toutes vos attentions une fois le site disponible à tous.

Nous ne décrirons pas ici chaque point en détail (il existe de très bons livres et sites pour cela :) ). Ce guide a, avant tout, comme vocation de donner, sous la forme d'une check-list, tous les points à prendre en compte pour que votre site soit performant pour les moteurs de recherche par la suite.

Ceci dit, lorsque cela nous semblera nécessaire, nous vous fournirons des adresses d'articles complémentaires pour en savoir plus et améliorer vos connaissances sur certains points. Elles seront signalées par le pictogramme ci-contre.

Ce pictogramme indiquera, pour sa part, la méthode de mise à jour éventuelle attendue pour le point évoqué : dans le code par les développeurs, dans l'interface d'administration par les personnes chargées de la saisie et de la maintenance du contenu éditorial, etc.

Et enfin, ce troisième logo vous indiquera comment visualiser simplement le point évoqué, notamment dans votre navigateur.

Il ne nous reste qu'à vous souhaiter un bon référencement, une bonne optimisation et un bon suivi de votre projet web. Nous espérons sincèrement que ce guide y contribuera !

Olivier Andrieu [email protected]

! sur !3 13

!

!

!

http://www.livre-referencement.com

mailto:[email protected]


CODE HTML Toute optimisation de site web pour les moteurs de recherche passe bien sûr - et de façon obligatoire dans un cahier des charges SEO - par un code HTML irréprochable, proposant toutes les « zones chaudes » permettant aux Google et consorts d'identifier les mots clés et concepts principaux de vos pages.

Voici donc tous les champs à prévoir dès le départ dans votre site pour que les robots des moteurs les analysent au mieux...

Structuration du contenu en balises Hn

Page d'accueil

Elle doit proposer une structure de balises Hn cohérente et présentant, de façon générale, ce que l'on va trouver sur le site. Voici un exemple de stucturation possible (mais d'autres variantes sont tout à fait envisageables) :

H1 (5 à 7 mots descriptifs) : Nom du site et mots clés importants décrivant son activité. Elle peut être positionnée : • Soit sur du texte (par exemple une baseline) : <h1>Abondance, toute l'actualité sur le SEO et le référencement de site web sur les moteurs de recherche</h1> • Soit sur une image dont l'attribut ALT sera renseigné : <h1><img src="http://www.abondance.com/images/logo-abondance.jpg" alt="Abondance, toute l'actualité sur le SEO et le référencement de site web sur"></h1>

H2 : Peut être placée sur un petit texte (1 paragraphe, 200 à 300 signes) présentant les différents concepts du site. Il sera positionné en haut ou en bas de page. Ce texte pourra être repris dans la balise meta "description" (voir ci-après).

H3 : Différentes rubriques (mots clés importants).

H4 : Eventuelles sous-rubriques.

D'une façon générale, en lisant le contenu des balises Hn de la page d'accueil, on devra comprendre de quoi parle le site (exemple fig.1).

! sur !4 13


Fig.1. Exemple du début de la structure en balises Hn de la page d'accueil du site Abondance

(www.abondance.com). En la lisant, on comprend clairement de quoi parle le site.

Voir également les conseils généraux et l'utilisation de l'extension Web Developer (pour afficher cette structure sans se plonger dans le code de la page) ci-après.

Pages internes

Elles doivent proposer également une structure en balises Hn dont les 3 premiers niveaux (au moins) décrivent parfaitement leur contenu éditorial. Voici également un exemple de ce qu'il est possible de faire :

H1 (5 à 7 mots descriptifs) : Elle explique "de quoi parle la page ?" en reprenant des mots clés importants.

H2 : Petit texte (1 paragraphe, 200 à 300 signes) présentant sous forme de chapô un résumé de ce que dira la page.

H3 : Intertitres éventuels.

H4 : Tags, fil d'Ariane ou autre.

Toutes ces balises Hn sont conçues comme étant des "réservoirs à mots clés" visibles par l'internaute et les moteurs de recherche.

! sur !5 13


Fig.2. Exemple de la structure en balises Hn d'une page d'article du site Abondance (www.abondance.com). En la lisant, on comprend de quoi parle globalement la page.

Utilisation de l'extension Web Developer

Vous pourrez, pour visualiser les balises Hn d'une page sans plonger dans son code source, utiliser l'outil Web Developer, extension disponible sur deux navigateurs principaux (plus Opera, moins connu) : • Pour Firefox : https://addons.mozilla.org/fr/firefox/addon/web-developer/ • Pour Chrome : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm Ou taper « web developer firefox » ou « web developer chrome » sur Google, en fonction du navigateur utilisé. Non, rien sur Microsoft Explorer ou Edge, désolé :)

Cette petite barre d'outils vous fournira la structure en balises Hn de vos pages en suivant ces directives :

Sur Firefox : Pour voir les balises dans la page : Entourer > Titres (H1-H6). Cocher l'option « Indiquer les balises en entourant les éléments » auparavant. Pour voir la structure Hn : Infos > Plan du document

! sur !6 13

!

https://addons.mozilla.org/fr/firefox/addon/web-developer/

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm


Fig.3. Utilisation de l'extension Web Developer sur Firefox.

Sur Chrome : Pour voir les balises dans la page : Outline > Outline Headings. Cocher l'option « Show Element Tag Names » auparavant. Pour voir la structure Hn : Information > View Document Outline.

Fig.4. Utilisation de l'extension Web Developer sur Chrome.

! sur !7 13


L'intérêt de cette extension est qu'elle fonctionnera même sur un site en « pré-prod » (donc dans sa version de test, avant mise en ligne) et vous permettra de « rectifier le tir » auprès des développeurs si ceux-ci n'appliquent pas strictement les règles fournies dans ce document avant le lancement.

Noter également qu'elle est disponible en anglais sur Chrome et en français sur Firefox...

Conseils généraux

Vous êtes, bien sûr, libre de structurer comme vous le souhaitez vos pages grâce aux balises Hn, mais n'hésitez pas à suivre ces suggestions :

• Pour la page d'accueil, les balises Hn peuvent être positionnées n'importe où dans le code HTML (en dehors de la partie <head> du code, bien sûr).

• Pour les pages internes, gardez les balises Hn pour le cœur éditorial de la page et ne les utilisez pas dans le reste de la page (header, footer, navigation). Supprimez les balises Hn qui seraient positionnées dans le footer, le header, la navigation ou, tout simplement, pas dans le corps éditorial de la page.

Fig.5. Deux exemples de mauvaise structuration d'une contenu éditorial en balises Hn. Si vous étiez Google, comprendriez-vous de quoi parlent ces pages ?

Dans le premier cas (à gauche), la page présente des villas de luxe en Italie, dans le second cas (à droite), des motifs de broderie pour nappe.

Parfois, le métier de moteur de recherche est bien complexe... Et vous, à quoi ressemblera la structuration Hn de vos pages ?

• Proposez du contenu H1 très descriptif, sur 5 à 7 mots descriptifs en général et expliquant « de quoi parle la page ». Par « mot descriptif », on entend tout terme ayant un sens, en dehors des articles, conjonctions de coordination, bref, on ne comptera pas ici tout « mot vide » (ou « stop word » en anglais).

! sur !8 13


• On peut tout à fait indiquer plusieurs balises H1 dans une même page (le standard HTML le permet, et plus encore l'HTML5), mais il est souvent plus logique de n'en mettre qu'une (en tout cas pour la zone de contenu en HTML5), représentant le titre éditorial du document.

• Indiquez, si vous le désirez, dans une balise H2 un texte explicatif (200 à 300 signes) présentant ce qu'on va trouver dans la page (dans le site pour la page d'accueil). Ce chapô est également intéressant pour les pages de liste (exemple : listes de produits dans un site e-commerce), afin de les « nourrir » sémantiquement avec un contenu intéressant.

• Le fait de mettre un paragraphe entier en H2 n'est pas « naturel » (les balises Hn ne sont clairement pas faites pour ça à la base) mais cela fonctionne en SEO et c'est accepté par Google. A vous de voir, ensuite, si vous désirez mettre en œuvre cette possibilité. Ou pas.

• Profitez le plus possible des 6 niveaux disponibles (H1 à H6) pour structurer votre contenu éditorial. Mais il n'est pas obligatoire de proposer dans chaque page les 6 niveaux de structuration. Essayez, dans la mesure du possible, d'indiquer dans chaque page au moins les trois premiers niveaux (H1 à H3), et si possible avec du contenu statique à l'intérieur. Le contenu dynamique (pouvant changer aléatoirement ou au fil du temps) pourra être plutôt réservé aux balises H4 et suivantes si nécessaire.

• Il est toujours plus « propre » de proposer une arborescence logique pour cette structuration. Exemple :

<h1> Titre éditorial de la page <h2> Chapô <h3> Intertitre 1 <h3> Intertitre 2 <h4> Sous-titre 1 <h3> Intertitre 3 <h3> Intertitre 4 <h4> Sous-titre 2 <h4> Sous-titre 3 <h4> Sous-titre 4

Mais il est également possible de proposer un ordre différent. Par exemple si vous désirez indiquer un fil d'Ariane en h6 :

<h6> Fil d'Ariane <h1> Titre éditorial de la page <h2> Chapô

Google ne vous pénalisera pas si l'ordre de la structure Hn n'est pas naturel (ici un H6 avant un H1). Ceci dit, il est clair que ce type de travail est moins satisfaisant (moins « propre ») en termes de développement. Le choix vous appartient donc, tout comme pour le fait d'indiquer un paragraphe entier en H2 puisque ce sont des choix « contre nature ».

• Vous pouvez également « sauter » un ou plusieurs niveaux si nécessaire et passer ainsi du H3 au H5 ou au H6 sans indiquer par exemple de niveau H4. Aucun problème.

! sur !9 13


• Réservez les balises Hn pour des zones qui donnent du sens sémantique à la page et qui sont potentiellement des "réservoirs à mots clés" où vous pourrez insérer des requêtes importantes pour votre référencement.

Fig.6. Reprenons les exemples précédents : des expressions comme "Recherche", "Newsletter", "Dernière minute", "Panier", "Pour info", "Informations",

entre autres, n'apportent rien en termes de sémantique et ne devraient pas se trouver dans des balises Hn.

Tous ces champs doivent pouvoir être remplis à la main dans la zone d'administration du contenu (voir chapitre « contenu éditorial »). La plupart du temps, la zone H1 correspond à une zone appelée « Titre » (figure 7).

Fig.7. Le champ « Titre » dans la zone d'administration sera la plupart du temps automatiquement transformé en balise H1.

! sur !10 13

!


• Par expérience, les balises Hn sont le plus souvent extrêmement mal intégrées par les développeurs dans un site web à l'heure actuelle. C'est, et de très loin, l'optimisation SEO la moins bien prise en compte par les agences web à l'heure actuelle. Et c'est pourtant l'un des points principaux de l'algorithme de pertinence de Google pour ce qui est des critères « on site ». Soyez donc très vigilant sur ce point !

• Mettez-vous à la place du moteur de recherche : si, en lisant uniquement (avec Web Developer) la contenu des balises Hn d'une page, vous comprenez parfaitement de quoi elle parle, vous avez gagné. Sinon, remettez votre ouvrage sur le métier !

• Ne mettez jamais en ligne un site web tant que vos balises Hn ne sont pas parfaitement implémentées. Par expérience là aussi, moins de 5% des sites sont vraiment bien construits en termes de structuration Hn. Fournissez donc à votre site web un véritable avantage concurrentiel dès le départ !

Le reste de ce guide dans la version complète disponible sur le site de la Boutique Abondance : http://www.boutique-abondance.com/

! sur !11 13

http://www.boutique-abondance.com/


À PROPOS DE L'AUTEUR

Olivier Andrieu est âgé de 54 ans. Issu du monde de la télématique (vidéotex, audiotex), il travaille depuis 1993 sur le « réseau des réseaux » et s’est installé en tant que consultant SEO indépendant en avril 1996 (à une époque où on parlait plutôt de "référencement naturel"...).

C ré a t e u r d e l a s o c i é t é A b o n d a n c e e t d u s i t e www.abondance.com, il est basé à Heiligenstein, à proximité de Strasbourg. En près de 20 ans consacrés aux moteurs de recherche et au référencement, il a mené de nombreuses actions de conseil, d’audit et d’accompagnement de projets pour plusieurs sociétés et grands comptes français afin d’optimiser leur présence sur les moteurs de recherche mondiaux.

Le site Abondance.com propose, en plus de l’actualité quotidienne des moteurs de recherche, une lettre hebdomadaire gratuite (« Actu Moteurs »), revue de presse de l’actualité de la semaine, et une lettre professionnelle payante et mensuelle (« Recherche et Référencement ») pour ceux qui désirent aller plus loin dans la compréhension et l’analyse du monde des moteurs et du SEO.

Olivier Andrieu a rédigé une vingtaine de livres sur l’Internet, les moteurs de recherche et le référencement, dont « Réussir son référencement web », chez Eyrolles (http://www.livre-referencement.com/), considéré comme le livre de... référence du domaine (nouvelle édition 2015 disponible) et, en 2014, « SEO Zéro Euro », plus orienté pour les débutants dans ce domaine.

En mars 2011, il a également publié avec David Degrelle (PDG de la société 1ère Position), un DVD intitulé SEO : Maximiser votre référencement web chez l’éditeur Elephorm (http://www.dvd-referencement.com/). Une nouvelle version de ce DVD, remis au goût du jour, est disponible depuis le mois de mai 2014.

Il anime également de très nombreuses formations sur le référencement naturel pour plusieurs organismes, en intra comme en inter entreprise (http://formations.abondance.com/).

Enfin, il a été élu par ses pairs "Meilleur référenceur français" en février 2013, selon un classement publié par le Journal du Net : http://www.journaldunet.com/solutions/seo-referencement/le-meilleur-seo-francais/olivier-andrieu.shtml

! sur !12 13

http://www.livre-referencement.com/

http://www.dvd-referencement.com/

http://formations.abondance.com/

http://www.journaldunet.com/solutions/seo-referencement/le-meilleur-seo-francais/olivier-andrieu.shtml


Quelques références : Bayard Presse, La Croix, LCL, Radio France, France Télévisions, YesTahiti, 4 Murs, Yoopala, Mon Voyageur, Nouvel Observateur, Challenges.fr, Solutis, Groupcamp, Espaonline, Ratp, Royal Plaza, Iminent, Sprice, Cdiscount, Animaute, Allibert-Trekking, 1001 Mariages, Ocenania Hotels, Orange, Bleu Cerise, Sofinco, Solutis, Mairie de Paris, DeguiseToi, Office de Tourisme du Tarn, Glisshop, Société des Bains de mer de Monaco, INRS, Dossier Familial, Maisons de l'avenir, O2.fr, New Hôtel, Optic 2000, Camping Avenue, la France du nord au sud, Tooslog, Youscribe, Cora, Machine-outil.com, Marmara, etc.

Coordonnées :

RÉSEAU ABONDANCE 3, rue des Châteaux 67140 Heiligenstein Tél : 03 88 08 83 26 E-mail : [email protected]

SARL au capital de 10 000 euros. N° d'identification : RCS Colmar TI 520 039 942. Code APE : 7022Z. N° SIRET : 520 039 942 00013. N° TVA intracommunautaire : FR03405190919 Organisme de formation déclaré sous le numéro 42 67 04436 67 auprès de la préfecture de la Région Alsace.

Plus d’informations : http://www.abondance.com/ http://www.abondance.com/olivier-andrieu.html Twitter : https://twitter.com/abondance_com Facebook : https://www.facebook.com/abondancecom/ Google+ : https://plus.google.com/+Abondanceseo/posts

! sur !13 13

mailto:[email protected]

http://www.abondance.com/

http://www.abondance.com/olivier-andrieu.html

https://twitter.com/abondance_com

https://www.facebook.com/abondancecom/

https://plus.google.com/+Abondanceseo/posts

Documents

Cahier des charges SEO - SEO, référencement et moteurs ... · termes de SEO (Search Engine Optimization ou référencement naturel). En voici trois parmi les plus importantes :