Cours réalisation sites web référencement

Préalables à la création d'un site bien référencé

Motivations et présentation générale du site

quel est le thème du site ?
quels services seront fournis ?
quels sont les objectifs du client ? (vendre son produit ? se faire connaître ?)
quels sont les avantages (commerciaux, humains, financiers, marketing, communication) ? les risques ? les économies ?

Public visé

quel type de public ?
qu'attend l'internaute ? quels sont ses besoins ?
référencement quels mots-clefs tapés dans un moteur de recherche doivent amener sur le site ?
référencement dans quels annuaires doit-on être présent ? sous quelle rubrique ?
référencement à quels sites proposer un échange de liens ?
quelles sont les personnes ou organismes à prévenir lors de la sortie du site ? dans quelles régions géographiques ?

Sites concurrents

quels sont les sites proposant des services comparables ? quelles sont les différences ?
référencement quels mots-clefs ont utilisés ces sites ? en partageons-nous ? comment se différencier ?

Pages et organisation du site

quelles seront les pages types ?
quelle sera leur apparence graphique ?
quels seront les liens entre les pages ? quelle sera la profondeur du site ?
quels sera le contenu des formulaires ?

Stockage des données du site

Si nous voulons séparer le contenu de la forme, la première étape consisté à dissocier les informations présentées par le site des pages HTML elles-mêmes.

nature de l'information à stocker ? modélisation / schéma des données ?
utilisation d'une base de données ? de fichiers XML ? autre solution de stockage ?
modalités d'interation avec l'utilisateur ? interrogation ? mise à jour ? liens avec les formulaires HTML ? quel public a le droit d'utiliser quel formulaire ?

Principes de mise en œuvre du site

Assurer l'accessibilité du site aux humains et aux robots

W3C, normes et optimisation

Le Web est régi par un organisme mondial : le World Wide Web Consortium (W3C). Le respect des normes du W3C est le meilleur moyen d'assurer la bonne visualisation des pages du site par l'ensemble des navigateurs.

La première ligne du document doit donc spécifier la norme qu'il suit et plus précisément, la document type declaration (DTD) qu'il respecte. Par exemple,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Quiconque appose sur une page du web un logo du type :
« Cette page est optimisée pour le navigateur X »
est quelqu'un qui semble souhaiter revenir
à l'époque préhistorique d'avant le web,
lorsque l'on avait très peu de chances de pouvoir
lire un document écrit sur un autre ordinateur,
un autre traitement de texte, ou un autre réseau.
Tim Berners-Lee, Technology Review, Juillet 1996.

On peut trouver sur certaines sites la mention « optimisé pour Internet Explorer » (par exemple...), qu'en penser ?

Par une politique d'optimisation de site, un webmaster signifie simplement qu'il ne souhaite pas suivre les recommandations du W3C et, de fait, exclut certains visiteurs. Sur ce sujet, il est possible de lire : « Pas de bellaminettes pour les sites optimisés pour IE » par Bruno Bellamy.

CSS : les feuilles de style

Dans le paradigme qui consiste à dissocier fond et forme, les feuilles de style permettent de gérer la forme, les fichiers HTML se réduisant au contenu sans indication de mise en page. Une conséquence est qu'il devient possible de fournir plusieurs apparences (à travers plusieurs feuilles de styles CSS) pour une même page HTML. En particulier, on peut envisager des feuilles de style pour chaque média : écran, imprimante, synthétiseur vocal, etc.

référencement La dissociation fond/forme permise par les CSS permet également aux robots des moteurs de recherche de se concentrer sur le contenu sans être perturbés par les indications de mise en forme. Ainsi ces robots indexent le contenu des pages HTML, sans jamais considérer les feuilles CSS éventuellement associées.

Cependant, même si beaucoup de progrès ont été faits, les navigateurs n'intègrent pas de la même manière l'ensemble des spécifications du W3C sur les feuilles de style. Il est donc raisonnable de tester l'apparence des pages sur un maximum de navigateurs.

Enfin, signalons un mouvement qui accompagne la multiplication des supports (ordinateurs avec toute sorte d'écrans, téléphones, tablettes, etc.) : responsive web design. Ici, il s'agit d'avoir une seule feuille de style qui va interagir avec le matériel et s'adapter en conséquence.

Exécution de programmes sur le navigateur-client

Citons tout d'abord Java et Flash qui permettent des animations riches dans les pages HTML. Ces langages nécessitent l'installation de plugins par le visiteur, ce qui signifie que l'on n'a pas accès au conteu de prime abord. De plus, ces plugins ne sont pas disponibles sur toutes les plateformes.

L'alternative est le langage JavaScript. Il est présent sans installation supplémentaire sur tous les navigateurs et comme il est en cours de normalisation par le W3C, c'est le même JavaScript que nous trouvons sur tous les navigateurs. Embarqué dans le code HTML et exécuté par les navigateurs, JavaScript permet une grande interaction avec le contenu HTML de la page. Enfin, associé à HTML5 et en particulier à sa balise canvas JavaScript permet (ou permettra) de concurrencer Flash. Pour plus d'informations, voir par exemple ce cours sur JavaScript.

référencement Enfin, indiquons que ces langages sont difficilement interprétés par les robots d'indexation, il convient donc de ne pas placer dans le code des programmes des informations qui devraient être retrouvées par les robots. Par exemple et pour cette raison, les sites entièrement en Flash sont à proscrire.

Poids des pages

On conseille souvent de limiter le poids des pages à 50 ko. Cependant, cette recommandation date d'une période de l'histoire du web où il existait des lignes très lentes, sur lesquelles il fallait garantir tout de même qu'une page s'afficherait en quelques secondes au plus. À l'heure de l'ADSL et de la fibre, cette recommandation n'a plus lieu d'être. Même sur les téléphones portables, le réseau est rapide dans la plupart des lieux.

référencement Cependant, on peut vouloir encore limiter le poids des pages pour optimiser le référencement du site : livrer des pages lourdes peut ralentir le serveur web, ou au moins le faire apparaître comme lent, et dans tous les cas les échanges réseaux seront bien ralentis. Dans ces conditions, les robots d'indexation vont diminuer la fréquence de leurs visites pour ne pas surcharger le serveur. Ainsi, un webmaster qui souhaite des visites fréquentes des robots et une détection rapide de ses mises à jour du contenu, aura a cœur de servir rapidement ses pages, et donc de les alléger.

Cohérences graphique et navigationnelle

L'écriture et le respect d'une charte graphique est impérative. D'abord pour l'identité du site : l'utilisateur ne doit pas avoir l'impression de quitter le site lorsqu'il change simplement de rubriques. Cela passe par l'écriture d'une feuille de style CSS partagée par toutes les pages du site.

Ensuite, pour faciliter l'apprentissage du site : l'utilisateur doit retrouver la même organisation et le même aspect sur toutes les pages.

Et aussi...

Garantir un accès rapide à n'importe quelle page du site, éviter les arborescences trop profondes, ne pas hésiter à multiplier les liens transversaux.
Proposer un plan du site, c'est-à-dire une page reprenant toutes les pages du site et laissant deviner son organisation.
référencement Pour les robots d'indexation, un tel plan fournira un point d'entrée pour chacune des pages du site, même si l'une d'elles n'est par exemple accessible qu'à travers un formulaire pour une recherche spécifique.
Idéalement, proposer un moteur de recherche interne au site.
Éviter les menus trop denses, pas plus de 6 ou 7 liens par menu.

Faciliter l'animation et la maintenance du site

Pistes :

Déléguer le respect de la charte graphique à une feuille de style et à des procédures d'affichage dans un langage comme PHP, par exemple.
Organiser le contenu dans une source unique : une base de données ou un fichier XML.
Se donner les outils nécessaires pour l'administration : envoi de mails automatiquement, formulaires HTML et scripts PHP associés pour intervenir sur la base de données.

À faire régulièrement dans le cadre de la maintenance du site :

améliorer/actualiser le contenu ;
rechercher d'éventuels liens morts ;
vérifier le bon état de marche des scripts du site.

Et encore...

Ne pas utiliser les frames sur le web : elles empêchent les utilisateurs de poser des signets sur les pages du site et les moteurs de recherche proposeraient les pages sans les cadres de navigation.
Éviter de changer la couleur des liens, les gens se sont habitués au bleu et il est déstabilisant de parcourir un site où les liens sont d'une autre couleur, a fortiori si ils ne sont pas soulignés.
Ne pas souligner autre chose que des liens.

Préciser dans l'en-tête de chaque page le codage utilisé :

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">

Finalement, valider toutes les pages HTML du site et les feuilles de style, par exemple en utilisant des vérificateurs automatiques.

Référencement d'un site web (SEO et SERP)

SEO pour search engine optimization : on parle de référencement naturel ou référencement organique, en excluant liens sponsorisés, liens payants et autres comparateurs de prix. Cela regroupe les techniques d'optimisation de serveurs web, sites web et pages web et contenu en vue d'améliorer le référencement par les moteurs de recherche.

Principes des moteurs et de leurs robots

L'indexation du web est réalisée par des programmes automatiques que l'on appelle souvent des robots. Un tel robot accède à une page et l'indexe c'est-à-dire qu'il en extrait des informations et les stocke dans une base de données qui sera ensuite utilisée par le moteur de recherche lorsqu'une requête lui sera soumise. En même temps, il extrait les liens contenus dans ce document, ces liens lui servent ensuite à découvrir de nouvelles pages.

Les détails de la phase d'indexation et en particulier les éléments qui interviennent dans l'évaluation d'une page ne sont en général pas divulgués par les moteurs de recherche. D'une part ces détails sont cachés pour des raisons propres à la stratégie de ces acteurs du web. D'autre part, ils différent d'un moteur à l'autre et sont changeants dans le temps !

Il nous semble donc vain de s'attacher au fonctionnement d'un moteur particulier, nous nous intéressons par contre à ce qui peut aider, de manière générale, un robot à extraire automatiquement une information sémantique d'une page web... avec la contrainte de ne pas dégrader la qualité du contenu pensé pour les visiteurs humains.

pagerank ? parcours aléatoire, probabilité d'arriver sur une page...

Optimiser le contenu pour l'indexation par les robots

Tout d'abord les points négatifs à combattre :

la réplication de contenu, c'est-à-dire reprendre un contenu déjà présent sur une autre page du web,
un serveur web lent,
la présence de liens morts,
des méta-données trop longues,
les mêmes mots clefs répétés de nombreuses fois,
des mots indiqués comme clefs mais qui n'apparaissent pas dans le contenu,
des mots qui apparaissent dans le contenu mais dans une couleur identique à celle du fond (pour être invisibles à l'utilisateur humain).

Autres points auxquels il faut accorder du soin et qu'un robot peut prendre en compte dans son analyse :

les mots de l'url du document (utiliser de l'url rewriting si nécessaire) ;
les informations présentes dans l'en-tête du document ;
le contenu et la structure du document, en particulier les mots placés dans les balises sémantiques ;
le fait que le document a subi une modification depuis sa dernière visite ;
les liens existants vers ce document depuis d'autres pages du web.

À propos des balises dites sémantiques... la recommandation est d'utiliser les balises HTML à bon escient. Par exemple, le titre de la page devrait être encadré par la balise H1, les sous-titres par des H2, etc. Cela indique clairement aux robots que les mots apparaissant dans ces balises sont particulièrement significatifs. Cette information est perdue si l'on utilise par exemple une balise FONT incluse dans un tableau pour mettre en page les titres.

Il s'agit donc d'utiliser en priorité les balises qui précisent la nature du texte encadré et d'abandonner celles qui n'indiquent que la mise en forme du contenu. À titre indicatif, voici une partition raisonnable des balises HTML :

balises sémantiques :
- h1 h2 h3 h4 h5 h6 ;
- table tr th td (si les tableaux ne sont pas utilisés pour faire de la mise en page !) ;
- ol ul li ;
- em strong kbd ;
- form input textarea select option ;
- map area ;
- p a img ;
- div span (avec une classe associée).
balises de mise en forme :
- font ;
- b i tt u s ;
- big small ;
- br center.

Précisons que cette classification dépend surtout de l'utilisation que l'on fait des balises. Ainsi, les balises table tr th td sont considérées comme sémantiques lorsqu'elles décrivent un tableau de valeurs, mais pas si elles ne sont utilisées que pour permettre une mise en page particulière.

Enfin, signalons les nouvelles balises introduites par HTML5 : section, article, nav, aside, etc. permettent d'indiquer explicitement à un robot la nature d'un contenu.

Finalement, il s'agit d'écrire les documents dans HTML sémantique et d'utiliser des feuilles de style CSS pour décrire leur apparence.

Si un site doit être multilingue, il est recommandé de ne pas mélanger plusieurs langues dans une même page, mais plutôt de démultiplier les pages, avoir autant de pages que de langues. Cependant, il faut suite préciser la langue utilisée dans chaque page, comme suit :

<meta http-equiv="Content-Language" content="fr" />

et spécifier la relation entre toutes ces pages, par exemple :

<LINK TITLE="version anglaise" REL="alternate" TYPE="text/html"
      HREFLANG="en" HREF="index.en.html">

Optimiser le contenu pour le rendu par les moteurs de recherche

Outre la phase d'indexation, un autre point est important, celui du rendu des réponses par le moteur de recherche.

On parle de SERP pour search engine results page. Il s'agit, toujours dans le cadre du SEO, de spécifiquement optimiser la présentation de nos pages par les moteurs de recherche.

La balise TITLE apparaissant dans l'en-tête permet de donner un titre au document. Ce titre est repris par les moteurs de recherche pour proposer les pages résultats de la requête.

Il s'agit de décrire le sujet abordé de manière assez concise. Gardez à l'esprit que ce titre sera également utilisé pour renseigner les signets des visiteurs et observez à partir de quelle longueur les moteurs de recherche tronquent les titres.

Attention : avoir deux TITLE identiques pour deux pages différentes sur un même site est assimilé à de la duplication de contenu.

La balise META a une utilisation plus générale : elle possède deux attributs, NAME et CONTENT, le premier étant un mot désignant ce dont on va parler et le second le descriptif lui-même. Sa syntaxe est :

Le tableau suivant reprend les informations les plus souvent utilisées :

NAME	CONTENT
description	Un résumé de la page qui pourra être repris par le moteur de recherche pour présenter le document aux utilisateurs.
keywords	Les mots-clefs pour le document.
author	Le nom de l'auteur de la page.
reply-to	L'adresse mail de l'auteur de la page.
robots	Des instructions pour le robot parmi : `index, follow, all, noindex, nofollow, none`.
revisit-after	Le temps après lequel le robot doit revenir, par exemple `7 days`.

Et un exemple pratique d'utilisation de cette balise :

<meta name="description" content="Comment référencer son site auprès des
                                  moteurs de recherche et des annuaires.">

<meta name="keywords" content="référencement, moteurs, site, web, 
                               balises meta, supports de cours">

<meta name="author" content="Fabien Torre">

Aujourd'hui seuls la description et la directive robots sont réellement prises en compte par les robots des moteurs de recherche. À nouveau, chaque description de page devrait être unique sur un même site, et celle-ci est reprise sur la page de résultats de moteurs.

Finalement, on peut ajouter des métadonnées liées ou à destination des réseaux sociaux :

Google et Google+,
Facebook et l'open graph protocol,
les Twitter cards.

Dialoguer avec les robots pour le référencement

...pour leur signaler ce qu'ils peuvent faire et ne doivent pas faire.

Ce dialogue peut passer par les fichiers suivants : sitemap et sitemapindex, .htaccess et robots.txt.

indiquer aux robots ce qu'ils doivent indexer

Comme dans le cas multilingue, en cas de versions multiples d'un même document, indiquer quelle est la page à référencer à partir des autres versions :

<link rel="canonical" href="..." />

Créer un fichier sitemap regroupant toutes les urls du site à visiter.

Puis un fichier sitemapindex pointant le fichier sitemap et enfin pointer ce sitemapindex à partir du fichier robots.txt.

dire aux robots les pages qui ont bougé ou ont disparu

En utilisant les codes du protocoles http, ceux qui nous intéressent dans le cadre du référencement d'un site web :

301 Moved Permanently
403 Forbidden
404 Not Found
410 Gone

Dans le cas d'un déplacement, il faut indiquer la nouvelle adresse de la page pour que les robots puivent suivre.

On peut placer ces informations dans le fichier .htaccess, en utilisant de l'url rewriting si nécessaire.

Il est aussi possible de produire ces codes à partir d'un langage comme php.

cacher aux robots ce qu'ils ne doivent pas indexer

Cacher ce qui doit l'être et éviter les risques de duplication.

Dossiers à ne pas indexer (archives par exemple) (robots.txt ou .htaccess).

noindex/nofollow (html, métadonnées ou attributs de liens), coupe le pagerank (html), obligatoire pour les liens saisis par formulaire...

sécuriser les scripts php pour ne répondre que dans les paramètres autorisés (les robots essayent au hasard...), sinon provoquer une erreur 404.

Fixer l'ordre des paramètres passés sur l'url.

N'utiliser qu'un domaine et canoniser son nom.

Cacher les scripts dont l'url est réécrite. par rewrite rules.

Accélérer les visites des robots et donc le référencement

Servir rapidement pour permettre aux robots de revenir souvent et d'indexer l'ensemble du site, dont les nouveautés, le plus rapidement possible.

soulager le serveur web

Comment accélérer un serveur web ?

Limiter l'utilisation de php/sql,
ou coder efficacement en php/sql,
se protéger des robots aspirateurs agressifs (robots.txt ou .htaccess),
mise en cache sur le serveur web des codes php compilés (apc),
... et des gros objets déjà calculés (apc).

diminuer le trafic réseau

Méthodes :

Mettre en cache chez le client les contenus statiques (images, css, etc.),
en définissant leurs dates d'expiration (.htaccess),
compresser à la volée certains fichiers (configuration du serveur web ou .htaccess),
n'avoir qu'une image pour l'ensemble du site (technique css des sprites).

soulager le robot

Donner le codage utilisé pour que le robot n'ait pas à deviner... pas dans l'entête html comme c'est courant mais dans l'entête http ! Par exemple en php, on dira :

header("Content-type: text/html; charset=utf-8");

Obtenir des liens pour améliorer le pagerank

importance du texte dans la balise A,

échange de liens.

S'inscrire dans les annuaires...

Les fichiers sitemap peuvent également être directement déclarés auprès des moteurs de recherche principaux.

Vérifications du site et évaluations du référencement

Le site remplit-il les objectifs initiaux ? le contenu est-il bien approprié à la cible choisie ?
Le site est-il bien référencé par les moteurs de recherche ? est-il proposé pour les mots-clefs choisis ? est-il présent dans les annuaires et sites désignés comme importants ?
quel est le volume de traffic sur le site ? que viennent y chercher les visiteurs ? le trouvent-ils ? comment utilisent-ils la navigation proposée ?
quelles sont les pages les plus regardées ? quels sont sites qui envoient le plus de visiteurs ? quels chemins suivent les utilisateurs à travers le site ? si un moteur interne est présent, quelles sont les recherches effectuées ?
pas de liens morts, scripts en état de marche.

Vérifier le contenu et tester le serveur web

Tests techniques du site et des pages :

valider auprès du w3c,
regarder le fichier error.log,
diagnostiquer (extensions firebug ou web developper),
tester rapidité (extension firebug/pagespeed).

Simulations :

observer avec lynx,
se faire passer pour un robot ou quelqu'un d'autre (extensions firefox).

Retours des robots : outils de suivi de Google, Bing, etc.

s'inscrire, avoir un compte,
installer un fichier d'identification.

Connaître les mots-clefs, l'origine et le parcours des visiteurs

Lors d'une transaction HTTP un bon nombre d'informations sont fournies au serveur par le client. Ces informations peuvent être retrouvées dans le fichier de logs du serveur ou être stockées par exemple dans une base de données à chaque requête sur une page dynamique.

Ces éléments autorisent le calcul de différents indicateurs qui pourront être rassemblés sur une page générée automatiquement : soit une page de statistiques d'accès au site visible de tous, soit une page servant de tableau de bord aux administrateurs du site.

Comment observer ?

regarder le fichier access.log (programmation/regexp),
ou directement pendant les visites avec php/sql,
outils : Google analytics, eStat, XiTi, Piwik, etc.

Quoi regarder ?

page de provenance des visiteurs, où l'on dit quoi,
depuis quelle recherche dans quel moteur, mots recherchés,
intention du visiteur et parcours sur le site.

Variables php :

$_SERVER['REMOTE_ADDR']     // adresse ip du visiteur
$_SERVER['HTTP_USER_AGENT'] // agent utilisé
$_SERVER['HTTP_REFERER']    // page précédente

Machines accèdant au site

Compter les machines différentes qui font des requêtes sur le site peut-être un bon indicateur du nombre de personnes qui fréquentent le site.

Il faut tout de même prendre garde à repérer et écarter de ces calculs, les robots qui viennent indexer les pages du site. Cependant, dénombrer ces robots a un intérêt en soit : déterminer si les moteurs de recherche jugés interessants ont bien connaissance de l'existence du site et y envoient leurs robots.

Origines des visiteurs

Quelles sont les pages externes sur lesquelles les utilisateurs empruntent un lien vers le site ? Repérer ceux qui nous en amènent beaucoup, ainsi que leurs thématiques.

Parmi ces pages menant au site, on devrait trouver des moteurs de recherche, ce qui nous amène aux indicateurs suivants.

Recherches amenant au site

À nouveau, nous déterminons les moteurs de recherche qui nous référencent.

Dans l'adresse d'origine, toujours lorsqu'il s'agit d'un moteur de recherche, on va retrouver l'expression recherchée par l'utilisateur. Il est intéressant de regarder les mots les plus souvent cherchés et qui conduisent au site. Il est enrichissant également de confronter ces mots à la liste de mots-clefs établie lors du cahier des charges du site.

Pages consultées

Établir un classement des pages du site, éventuellement suivant la langue. Observer les pages les moins consultées, comprendre leur manque de succès et y remédier.

Cette analyse peut également être menée sur des rubriques entière du site plutôt que les pages isolément.

Utilisateurs

S'il y a une identification, faire des statistiques sur les utilisateurs, leurs habitudes de navigation, etc.

Observer les robots et le résultat de l'indexation

Mesurer le travail des robots :

regarder le passage des robots et les urls laissées dans les logs,
faire des recherches dans google en évitant la personnalisation.

Pour désactiver la personnalisation, avant tout :

effacer les cookies,
paramétrer son compte google pour ne pas garder d'historique,
paramétrer son navigateur en mode navigation privée.

... puis sur une page de résultats Google :

enlever toute clef apparaissant sur l'url,
y ajouter le paramètre &pws=0.