• 40 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Concepts de base d'un site « SEO-Friendly »

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Construire un site web c'est passionnant, car cela passe par plein d'étapes différentes ! L'une d'elles est la conceptualisation. On se demande quelles technologies on va utiliser sur son site et pourquoi. C'est donc ici que nous allons réellement parler de votre site web pour la première fois, et nous agirons sur sa conception. Pour rappel, dans toute cette seconde partie du tutoriel, nous ne parlerons que de la conception et de l'optimisation de vos propres pages web.

Lorsque vous développez votre site, ne le faites jamais à la vue de Google. En effet, nous savons depuis le chapitre précédent que le réflexe de Googlebot est de traiter votre contenu de manière à l'indexer… Si la version en développement de votre site est accessible sur Google, elle sera bien sûr positionnée, ce qui est très négatif pour les raisons que vous imaginez. Agissez donc toujours en amont de votre projet, et ne déployez que lorsque votre site est tout beau, car il est plus difficile après de redresser la barre. ;)

Un site web, du code HTML

Image utilisateur

À l'exception des sites en Flash dont nous parlerons plus tard, un site web n'est vraiment rien d'autre qu'un ensemble de pages HTML qui sont liées entre elles grâce à la magie des liens. HTML va donc avoir une importance capitale dans votre référencement.

Nous allons nous focaliser ici sur le contenu de la balise<body>. Pour le contenu de la balise<head>il faudra attendre encore un peu, car c'est plus complexe.

Le langage HTML

Baliser, c'est aider le Googlebot

Le HTML ressemble beaucoup au XML, et pour cause ! Son rôle est simplement de vous aider à créer du contenu web cohérent. Nous savons que le code HTML sera lu par Googlebot et qu'il aura une importance capitale ; il faut donc produire un beau code. Lorsque vous avez appris HTML, on vous a forcément fait un topo sur l'histoire de la validité du code des pages web sur le W3C validator. En effet, un code valide est un code qui se référence bien. Produire un beau code source garantit une lecture optimale pour le Googlebot, qui sera plus à même de repérer les informations importantes de vos pages web. Commencez donc par créer un site qui soit propre dans son code, et ne vous lancez pas dans la création de sites web si vous n'avez pas de bases solides en HTML et CSS.

Les balises HTML ne signifient pas toutes la même chose

Chaque balise a sa signification, et chacune permet de comprendre la page web. Une certaine balise peut représenter un titre, une autre une image. De la même manière que les balises ne signifient pas toutes la même chose, les informations qu'elles contiennent ne sont pas les mêmes, et elles n'auront pas le même impact sur la manière dont Googlebot va indexer votre contenu. Par exemple, il comprendra que ce qu'il y a dans<strong>représente un texte plus important qu'un texte dans une balise<span>.

Ainsi, Google sera plus à même de faire apparaître votre site web plus haut pour la recherche « tarte aux pommes » si cette expression se trouve dans une balise<strong>plutôt que dans une balise<span>qui, elle, n'a pas vraiment de signification. Ceci dit, ça, c'est vraiment dans l'absolu… :-°

Les balises de titre

Ces balises sont certainement les plus importantes de toutes, et vous devrez travailler leur contenu le plus possible. Vous les connaissez, il s'agit des balises<h1>à<h6>. Dans votre stratégie de référencement, vous ne devrez jamais négliger l'importance de ces balises.

Votre<h1>est votre titre de premier niveau, c'est donc le titre le plus important de la section<body>. C'est le titre que le visiteur verra en premier sur votre page web, et il est censé représenter à lui seul l'intérêt de votre page. La dernière norme de HTML, baptisée HTML5, introduit de nouvelles balises permettant de structurer vos contenus. La balise<section>en fait partie et, comme son nom l'indique, elle permet de définir plusieurs sections dans une page web. La balise de titre<h1>est destinée à être le titre d'une section ; vous pouvez donc avoir plusieurs<h1>par page web, pourvu que ces titres fassent partie de sections.

Ainsi, on peut trouver aussi bien 50<section>avec<h1>qu'une seule balise<section>avec un seul<h1>dans une page web. Tant que cela a du sens au niveau du contexte de votre page web et de la sémantique HTML5, Google ne vous en tient pas rigueur. Toutefois, organisez correctement vos pages web !

Si vous ne savez pas ce qu'est une balise<section>ou comment l'employer, vous pouvez toujours relire le tutoriel de HTML5 du Site du Zéro. Les sites web se font aujourd'hui en HTML5 ; vous êtes donc vivement invités à vous mettre à niveau. :)

Les cas <strong> et <em>

Les balises<strong>et<em>sont également d'une importance capitale dans votre code HTML, simplement parce qu'elles permettent de mettre en exergue des expressions que vous jugez importantes, et qui constituent par extension l'intérêt de votre page web. Utilisez ces balises avec modération, et ne mettez pas en valeur 95 % de vos textes avec celles-ci. Googlebot est très perfectionné : s'il voit une balise<strong>, il va considérer l'information qu'elle contient comme importante. Ne faites donc pas n'importe quoi avec ces balises.

Les textes des liens (Anchor text)

Nous verrons dans la suite de ce cours que les liens constituent un enjeu très important dans votre stratégie de référencement. Cependant, nous pouvons déjà énoncer qu'il est bon de produire des liens corrects sur vos pages web. Les liens se construisent en HTML grâce à la balise<a href="lien">text</a>.

Dans l'attributhref="", vous devez renseigner la page web visée avant de pouvoir donner un texte au lien juste avant la fermeture de la balise<a>. Googlebot, lui, explore les liens. Aussi, le texte de votre lien constitue pour lui l'information la plus accessible pour savoir ce qui se trouve de l'autre côté du lien. Détaillez donc bien le contenu de la page du lien dans le texte, afin d'aider Googlebot à mieux s'y retrouver : vous avez des points à y gagner !

L'attribut alt des images

Si vous jetez un œil au code que vous pouvez voir dans la section "Une question d'ergonomie", vous verrez que j'ai renseigné un attributalt=""aux images. Ne pas le renseigner entraîne des pénalités pour votre référencement. Il s'agit là d'une règle fondamentale d'accessibilité. Chaque fois que vous utiliserez une balise<img />, celle-ci devra comporter un attribut alt. C'est une erreur que l'on voit souvent et qui peut-être très facilement évitée.

Ratio contenu/HTML

Pour en finir avec ces règles fondamentales de SEO avec HTML, sachez que vos pages devront respecter un certain ratio Contenu/HTML pour avoir le plus de chances de plaire à Google. Ainsi, lorsque Google va venir analyser vos pages, il faudra qu'au moins 15 % de la source de la page soit du contenu pur et non pas des balises HTML. Le contenu est ce qu'il y a de plus important aux yeux de Google. Considérez donc cette limite comme la limite minimale : plus le ratio est élevé, mieux c'est.

Propreté générale du code HTML
Image utilisateur

Il faut essayer de produire des codes sources qui passent la validation du W3C, ou au moins qui soient potables, sinon un jour le web ne ressemblera vraiment plus à rien. Travaillez bien vos codes sources et faites le nécessaire afin d'arriver à un bon équilibre entre la page vue par le visiteur et la masse de code source analysée par Google. Plus votre page sera complexe, plus votre code source le sera aussi, et plus Google devra batailler avec vos balises pour indexer votre contenu, l'organe principal de votre site.

Vous n'imaginez pas toutes les horreurs que l'on peut trouver sur le web ; entre les balises qui sont un mélange de BBCode, d'HTML5 et de (x)HTML, sans compter les pages qui se finissent par</head>… Par pitié, ne vous lancez pas dans la création de sites sur le web si vous ne connaissez pas ces standards ! Mettez-vous à niveau avant de continuer ce cours si vous ne vous sentez pas d'attaque. Le tutoriel HTML5/CSS3 du Site du Zéro est parfaitement adapté aux débutants.

Une question d'ergonomie

J'espère vous avoir sensibilisés à l'importance de votre code HTML. Parlons maintenant d'ergonomie. Il va de soi que votre site doit être ergonomique : s'il est un fait qui a peu changé au cours de l'histoire du web, c'est la nécessité d'une mise en page claire et lisible. On aura beau dire tout ce que l'on veut, les sites web actuels, et depuis déjà un bon moment, sont formatés sur un modèle identique.

Ergonomie de base d'un site

Un modèle utilisé partout sur le web

Un site s'articule la majorité du temps sur une structure à 3 niveaux. Dans un premier temps, on trouvera le header avec éventuellement un logo fixé au sommet de toutes les pages via une feuille de style. Au bas de ce header, se trouve généralement le centre de la page, lui-même divisé en deux parties qui sont le menu et le contenu. Finalement, au bas de la page, on trouve un footer. Celui-ci ayant pour unique tâche de boucler la boucle, il est généralement chargé des mentions légales du site et autres liens de contact.

Un code source HTML de base

Voici ce que pourrait être le code source HTML5 de base d'une page web moderne. Au passage, vous êtes vivement encouragés à toujours utiliser les dernières versions des standards web.

<!DOCTYPE html>
<!-- La section <head>. Nous aurons l'occasion d'en parler plus tard dans le cours ! -->
<head>
    <title>Le titre de ma page</title>
    <meta charset='utf-8' />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" href="images/favicon.ico" />
</head>

<!-- Mise en page classique avec le header, le corps, et le footer ! Les balises structurantes de
HTML5 sont employées. -->
<body>
    <div id="site">
       <header>L'entête de mon site ! Et bientôt, il y aura une bannière ou un logo ici !</header>
       <nav id="menu">
             <ul>
                <li>Élément de menu 1</li>
                <li>Élément de menu 2</li>
                <li>Élément de menu 3</li>
                <li>Élément de menu 4</li>
                <li>Élément de menu 5</li>
                <li>Élément de menu 6</li>
                <li>Élément de menu 7</li>
             </ul>
       </nav>
       <section>
             <article>
                <h1>Le titre de mon article ;)</h1>
                <p>
                 Salut, voici le contenu de ma page web <img src="img/image.png" alt="Une image" />
                </p>
             </article>
       </section>
       <footer>
             <p>
                 Le contenu de mon pied de page, mention légale, etc.
             </p>
       </footer>
    </div>
</body>
</html>

Ce modèle de base est celui que l'on a tendance à enseigner partout. Ainsi, le cours de HTML5 du Site du Zéro vous enseignera également cette mise en page de base, de la même manière que le site W3Schools, une sorte de Site du Zéro anglais. :)

Les quelques innovations qui ont été apportées à ce modèle de base au fil des ans se comptent sur les doigts d'une main. La plus connue est probablement celle de l'ajout d'un menu horizontal à proximité du header du site, uniquement permise par les avancées technologiques en matière d'écrans qui ne cessent de s'agrandir et de proposer de meilleures résolutions. Autant vous dire que les internautes sont plutôt habitués à cette mise en page sobre mais terriblement efficace.

Être en accord avec la mission de Google !

La mission de Google est d'organiser et de rendre accessible au plus grand nombre l'information sur internet, et plus particulièrement sur le web. Les internautes étant habitués depuis plus de 20 ans à ce type de mise en page, c'est tout naturellement de cette manière que Google indexe le mieux votre contenu. Ainsi, vous avez tout intérêt à opter pour ce type de mise en page, qui se veut ergonomique et qui représente vraiment quelque chose dans l'esprit d'un visiteur. :)

Question d'ergonomie : le temps passé sur le site

Google est capable de déterminer combien de temps vos visiteurs passent sur votre site. Vous aurez donc à cœur de faire en sorte que vos visiteurs passent le plus de temps possible sur vos pages web, cela vous rapportera des points pour le SEO. Plus vos visiteurs resteront sur vos pages, mieux elles seront référencées sur Google. Opter pour une mise en page ergonomique, c'est aussi un moyen d'être sûr que le visiteur ne fuira pas dès l'arrivée sur votre site.

La règle d'or des 600 px : ergonomie et référencement

Une règle d'or

À moins d'accéder à votre site via une ancre dans l'URL, le visiteur démarrera toujours sa navigation au sommet d'une page, à hauteur de son header, Le reste de la page étant généralement accessible grâce à un scroll. C'est pourquoi, d'un point de vue ergonomique, tout doit être dit dans les 600 premiers pixels de votre page web. J'explique tout de suite ce concept.

Comparons votre site web à un journal
Image utilisateur

Je vais comparer votre site web à un journal replié, tel que celui vous pouvez lire chez vous en buvant votre café le matin. Comme on peut le voir, ce journal est replié sur lui-même. Il faut reconnaître qu'un journal c'est assez gros et pas forcément très évident à tenir en main et à lire. Ainsi, les marchands de journaux se sont rendu compte que pour pouvoir attirer le regard des clients, il fallait plier le journal de telle sorte qu'il paraisse petit et facile à prendre en main. Cela permet en plus un gain de place conséquent sur les étagères.

Les journaux sont pliés de manière à ce que la une soit toujours visible pour le client. Cela va lui donner forcément beaucoup plus envie de lire le journal et donc de l'acheter, puisque généralement dans la une, on a un titre et une introduction avec une belle image bien représentative... Bref ! En voyant la une, on sait directement de quoi l'article va parler, et on va avoir envie de le lire jusqu'au bout sans pour autant voir l'intégralité de l'article. Comme quoi, une bonne accroche, c'est très important.

Eh bien sur le web c'est un peu pareil. Votre une, ce sont les 600 premiers pixels de chacun de vos articles. À la manière de la une d'un journal : vous DEVEZ absolument travailler correctement le début de votre article, pour qu'il soit accrocheur. D'un point de vue typographique et ergonomique, le visiteur aime avoir un gros titre, une introduction de quelques lignes décrivant globalement la problématique de l'article, et ensuite : on se lance. Une fois qu'on arrive au bout de cette accroche, on déplie le journal ; sur le web : on scroll. :)

Un autre Eye Tracking

Voyez également cette autre étude réalisée cette fois-ci par Useit, qui ressemble beaucoup au triangle d'or de Google. Il s'agit du même concept de « carte » : un Eye Tracking, porté cette fois-ci sur un article sur le web (voir la figure suivante).

Un Eye Tracking illustrant la règle des 600px.
Un Eye Tracking illustrant la règle des 600px.

Vous pouvez voir facilement où va se poser le regard de votre visiteur en regardant cette image : au sommet de celle-ci, sur les 600 premiers pixels de l'article. J'imagine que vous avez compris où je voulais venir, non ? Travaillez vos 600 premiers pixels. C'est vraiment très important !

La philosophie d'indexation de Google à travers les 600 px

La règle des 600 px répond à une question d'ergonomie et de confort pour votre visiteur. Cependant, au-delà, elle correspond exactement à la philosophie de référencement de Google vis-à-vis de vos visiteurs. Pourquoi ? Parce que Google, lors de l'indexation, va considérer votre site comme une sorte de journal et va se pencher sur la une de votre article : les 600 premiers pixels. Elle est très importante d'un point de vue SEO, étant donné que, pour Google, un mot qui se trouve au début de l'article est bien plus important qu'un mot se trouvant à la fin de cet article. Le début de l'article correspond bien sûr aux 600 px.

Un autre conseil que je peux vous donner. Il n'est pas rare de voir sur le web des sites dont le footer est occupé par un système de tags. Pour ce genre de système, je dis non, non et non. Il n'est rien de plus inutile que de charger son pied de page de mots-clés, si l'on considère la règle d'or que je vous ai donnée plus haut. Les mots se trouvant au bas de la page n'ont presque aucune valeur en comparaison de ceux se trouvant en haut de la page. Les systèmes de tags sont donc complètement dénués d'intérêts dans les footers. Préférez les systèmes de footer classiques pour votre site. Quelque chose de joli et de bien géré qui finira bien votre page visuellement, en proposant quelques ouvertures avec des liens sur d'autres contenus. Dites-vous que vous n'avez pas à réinventer la roue. :)

Pensez à votre visiteur !

Trop de webmasters ne le font pas, et pourtant... la plupart du temps, c'est quand même à son visiteur que l'on veut plaire, non ? Nous allons ici tenter d'avoir un peu d'empathie et de nous glisser dans la peau du visiteur de notre site web, et voir ce qu'il en attend. Google sait que votre contenu est avant tout destiné aux visiteurs, et il fonde ses algorithmes d'indexation sur cette idée !

Performances, performances, performances !

Un site qui plaît est un site qui va vite

Une idée fausse a souvent été de croire que pour plaire à son visiteur, l'essentiel était d'être le plus original possible dans tous les aspects visuels du site. Pourquoi cela ? Un début de réponse pourrait être que le design est la première chose que le visiteur voit et que, par conséquent, il doit être le plus original possible... Ceci est en très grande partie faux, dans le sens où originalité rime souvent avec complexité, lourdeur, et lag à l'affichage.

Pour se démarquer des autres par son design, on a forcément tendance à rechercher dans le plus complexe : carrousels, animations Flash et une centaine d'images reliées à la CSS. Or, c'est une véritable catastrophe pour le visiteur qui, lui, ne recherche pas l'originalité, mais le confort... Le confort d'un visiteur se trouve dans l'optimisation des temps de chargement de votre site. Un site qui répond vite est un site qui attire. Lorsque vous demandez quelque chose, vous aimez généralement que la chose vous arrive vite entre les mains, non ? Pour le visiteur c'est pareil, lorsqu'il va cliquer sur votre lien Google, il veut vite obtenir ce pour quoi il est venu : l'information, et pas le design.

Ceci a vraiment une importance dans la manière dont Google va indexer vos contenus. Je vous propose cet article (EN) paru en 2010sur le blog officiel de Google dédié aux webmasters. Vous y verrez que Google apprécie davantage votre site si celui-ci est rapide pour le visiteur.

Accélérez vos temps de chargement !

Après cette petite sensibilisation, vous vous demandez très probablement comment on optimise les temps de chargement. Je me propose de vous donner quelques exemples. Bien que je ne puisse pas détailler de fond en comble toutes les façons d'optimiser les temps de chargement de vos pages web – il faudrait pour cela passer en revue toutes les technologies – je vais vous indiquer en quelques points les démarches, en vous conseillant quelques documentations.

Utilisez des sprites CSS

Pour chaque image qui compose votre site web, une requête HTTP doit être gérée par le serveur pour l'afficher au visiteur. Votre article comportera peut-être 10 images, plus 10 images supplémentaires appartenant au design... soit 20 requêtes HTTP pour un seul article. Si l'on multiplie tout cela par le nombre de pages vues par chaque visiteur de votre site... cela devient vite affolant. :D

L'idéal au niveau des CSS, pour améliorer les temps de chargement, est donc de ne pas utiliser d'images pour composer votre design. Les designs « full CSS » s'afficheront extrêmement vite et auront une place toute particulière dans le cœur de votre visiteur et dans celui de Google. C'est quelque chose qui est tout à fait possible et qui commence à se faire de plus en plus sur le web. Cependant, il faut avoir un certain niveau en CSS et être un vrai créatif pour donner quelque chose de bon. L'alternative à cela est d'utiliser des sprites CSS (voir la figure suivante).

Les sprites CSS de plusieurs grands sites, dont Google
Les sprites CSS de plusieurs grands sites, dont Google

Les sprites CSS, c'est l'art de compiler toutes les images qui composent votre site web en une seule. Ensuite, dans votre CSS, vous n'aurez qu'à afficher cette image et à la positionner pour que l'élément graphique que vous souhaitez s'affiche bien à hauteur de la <div> sur laquelle vous travaillez. Ainsi, ce n'est plus 100 requêtes HTTP qui vont servir à récupérer toutes vos images, mais une seule. Des économies énormes pour votre serveur.

Pour information, le Bootstrap Twitter a été construit grâce aux sprites CSS. En effet, il est composé de classes CSS3 très développées qui donnent un excellent rendu, et les quelques petites icônes que le framework propose sont gérées par des sprites. Il constitue en cela une bonne base pour commencer un site.

Placez convenablement vos codes JavaScript !

JavaScript est un langage généralement utilisé pour les pages web. Malgré des idées reçues, JavaScript est un langage vraiment puissant qui vaut le détour. Il s'exécute côté client, ce qui signifie que votre serveur n'a pas à l'interpréter. C'est déjà un bon point : c'est au moteur JavaScript de votre navigateur de le gérer.

JavaScript est puissant, mais il est généralement mal utilisé. Vous pouvez choisir soit d'en mettre directement dans votre page web, ce qui est bien souvent une mauvaise solution pour la lisibilité de votre code source par Google et vous-mêmes, soit de le placer dans un fichier qui portera l'extension .js que vous prendrez soin de rattacher à votre page web grâce à la balise script :

<script src="fichier.js"></script>

Vous devez inclure un JavaScript soit au tout début de votre page, dans la balise<head>, soit à la toute fin, juste avant la fermeture de la balise <body> avec </body>, cette dernière solution étant de loin la meilleure. Ceci est très important, car du JavaScript chargé en plein milieu d'une page web alourdira inutilement l'ensemble. Ainsi, il est préférable de charger le JavaScript juste avant la fermeture de la balise <body>, car alors le contenu du site sera entièrement chargé quand JavaScript entrera en jeu. Je vous encourage à aller sur le cours de JavaScript du Site du Zéro, qui devrait vous aider à bien comprendre cette technologie.

Vos requêtes SQL
Image utilisateur

Le cours de PHP/MySQL sur le Site du Zéro est introduit par ces lignes : "Blogs, réseaux sociaux, pages d'accueil personnalisables... Depuis quelques années, les sites web ont gagné en fonctionnalités et sont devenus dans le même temps de plus en plus complexes."

C'est tout à fait exact ! Votre site n'est plus le simple code source HTML et les 50 lignes de CSS qu'il pouvait être autrefois. Aujourd'hui, c'est une véritable machine intelligente qui fonctionne silencieusement tous les jours de l'année. Quel que soit le langage employé, c'est tout un univers de variables et de fonctions qui s'articulent... mais aussi de requêtes SQL.

On commence à plutôt bien se connaître vous et moi, aussi je pense que vous avez commencé à remarquer que j'adore les statistiques et les chiffres. Savez-vous qu'un site web utilisant une base de données est en moyenne 5 fois plus lent qu'un site uniquement construit sur des fichiers ? Ça paraît fou, et pourtant... Si l'on peut difficilement se passer de bases de données, tant elles sont importantes pour avoir un site un minimum intéressant, on peut toujours réduire les temps de chargements en diminuant le nombre de requêtes SQL, en les optimisant, et en fournissant des index aux tables.

Couplez tous ces conseils avec toutes les indications sur l'ergonomie que je vous ai données précédemment, et cela devrait donner quelque chose de convenable en termes de temps de chargement.

Google et l'empathie

Pensez à vos visiteurs, pas aux robots

Google donne pour conseil aux webmasters de ne pas chercher à travailler le référencement mais de toujours proposer un contenu et un site qui plaisent aux visiteurs, avant de chercher à plaire au robot. Gardez toujours cette idée en tête, mais n'oubliez jamais d'intégrer une dimension SEO à vos développements (au sens large) de sites web.

Je ne cherche par ailleurs à vous imposer aucune mise en page ou contrainte. C'est votre site et vous en faites ce que vous voulez. Retenez simplement qu'un carrousel en header est plus beau qu'un logo, mais qu'il demande aussi plus de code HTML, code que Googlebot considère comme relativement peu intéressant à côté de votre vrai contenu. En outre, cela va lui compliquer la vie plus qu'autre chose, en plus de faire baisser votre ratio code/contenu. :)

  • Un site web se conçoit en HTML avant tout, et de préférence en HTML5. Vous avez intérêt à avoir le code le plus propre possible.

  • Ne négligez jamais vos balises de titre et jouez sur l'importance de vos expressions pour faire ressortir l'intérêt de votre contenu.

  • Un mot en haut de page est plus important qu'un mot en bas de page.

  • Dans la mesure du possible, optez pour un site web fondé sur le modèle ergonomique de base !

  • Un site qui se charge vite est un site qui plaît.

Exemple de certificat de réussite
Exemple de certificat de réussite