Guide SEO

Développement Web

Réalisé par: BENAMAR Samar

élève ingénieur en génie
informatique à l'ENIT

2020 - 2021
Sommaire:

Introduction 01

Le référencement naturel 02

Les bases du SEO 03

Amélioration de la structure du site 05

Optimisation du contenu 09

S'accorder avec les crawlers 13

SEO pour les mobiles 15

Les bases du SEO en JavaScript 17

Amélioration de la vitesse d'un site 19

01. Introduction: /01

L'optimisation des moteurs de recherche consiste souvent à apporter

de petites modifications à certaines parties de votre site Web.
Considérés individuellement, ces changements peuvent sembler être
des améliorations progressives, mais lorsqu'ils sont combinés à
d'autres optimisations, elles peuvent avoir un impact notable sur
l'expérience utilisateur de votre site et ses performances dans les
résultats de recherche organique.
Vous êtes sans doute déjà familiarisé avec la plupart des sujets
abordés dans ce guide, car il s'agit d'ingrédients essentiels à toute
page Web, mais vous n'en tirez peut-être pas le meilleur parti.
Nous tenons à dire que vous devez avant tout baser vos décisions
d'optimisation et avant tout sur ce qui est le mieux pour les visiteurs
de votre site. Ils sont les
consommateurs de votre contenu et utilisent les moteurs de
recherche pour trouver votre travail.
Si vous vous concentrez trop sur des ajustements spécifiques pour
obtenir un classement dans les résultats organiques des moteurs de
recherche, vous risquez de ne pas obtenir les résultats escomptés.
L'optimisation des moteurs de recherche consiste à mettre votre site
en valeur pour qu'il soit visible dans les moteurs de recherche mais
vos véritables consommateurs finaux sont vos utilisateurs, pas les
moteurs de recherche.
02. Le référencement naturel: /02

2.1 Généralités:

Le référencement naturel SEO, est un ensemble de techniques visant à acquérir du

trafic (des visiteurs) depuis les résultats "gratuits" ou "organiques" des moteurs de
recherche. Il consiste à augmenter la quantité et la qualité du trafic vers votre site
Web grâce aux résultats organiques des moteurs de recherche .
C'est tout le SE (moteur de recherche) du référencement.
La partie O du référencement - l'optimisation - est l'endroit où les personnes qui
écrivent tout ce contenu et le mettent sur leurs sites devinent ce contenu et ces
sites afin que les moteurs de recherche puissent comprendre ce qu'ils voient et les
utilisateurs qui arrivent. via la recherche aimeront ce qu'ils voient.
L'optimisation peut prendre plusieurs formes. Il s'agit de s'assurer que les balises de
titre et les méta descriptions sont à la fois informatives et de la bonne longueur
pour pointer des liens internes vers des pages dont vous êtes fier.

L'optimisation des moteurs de recherches sert à:

Obtenir plus de trafic
Obtenir une image d’expert
Étendre son image de marque
Obtenir de nouveaux clients
Recruter des collaborateurs

2.2 SEO On-page et SEO Off-page:

On appelle SEO On-Page , tout ce qui correspond à l'optimisation du contenu, entre

autres :
L'optimisation technique du site : son accessibilité, sa vitesse, sa version mobile
(responsive) ;
La mise en place d'une structure technique optimisée SEO (titres, images,
contenus) que nous verrons plus tard ;
La création de contenu reprenant vos mots-clés et respectant la structure du site.
Le SEO Off-Page correspond à la recherche et la création de partenariats, dans le but
de créer des liens vers votre site.
 /03
2.3 Les principaux KPI à suivre:

Le suivi de votre positionnement

Les visites organiques et la part de trafic

Le temps de chargement mobile

Le contenu dupliqué

Le taux de rebond et la durée des visites

L’indexation des pages

Les domaines référents et backlinks

2.4 White Hat vs Black Hat:

Il existe deux types de SEO :

Le SEO dit "White Hat", que vous êtes en train d'apprendre. Il vise à respecter les guidelines
de Google et à être le plus efficace possible sur le long terme malgré les changements
d'algorithme ;
Le SEO dit "Black-Hat", que nous ne traiterons pas ici : il s'agit de techniques visant à "
tromper" les moteurs de recherche pour arriver plus vite en première place. Vous en avez
sûrement déjà entendu parlé : créer des centaines de liens sur les forums, écrire du texte
blanc sur fond blanc, etc.

Google est assez intelligent pour relever ces pratiques et lutte activement contre, en mettant
à jour ses algorithmes.
03. Les bases du SEO: /04

3.1 Création de titre de pages uniques et précis:

Les balises de titre sont une indication

importante pour aider les moteurs de
recherche à comprendre le sujet de
votre page.
C'est le facteur de classement le plus
important pour le référencement et il
doit contenir les principaux mots-clés
visés par votre page. Figure 3.1 Le titre de la page d'accueil de site
Il faut s'assurer qu'il n'y a qu'une seule
balise titre par page et que les balises
de titre comportent de 50 à 60
caractères.
Les mots du titre sont mis en
caractères gras s'ils apparaissent
dans la requête de recherche de
l'utilisateur.
Cela peut aider les utilisateurs à
reconnaître si la page est Figure 3.2 La page d'accueil s'affiche avec le
si la page est susceptible d'être titre sur la première ligne
pertinente pour leur recherche

3.2 Utilisation de la méta-balise "description":

Les descriptions doivent être uniques et contenir le mot-clé principal.

la description doit comporter moins de 156 caractères et être pertinente par rapport au
sujet de votre site Web (figure 3.1).
Google met en évidence les mots-clés que vous avez entrés dans la méta description de
chaque URL qui apparaît dans les résultats de la recherche. Rédigez une méta description
en utilisant des synonymes des termes utilisés dans le titre Google (figure 3.2).

3.3 Autres méta-balises:

Chaque page doit avoir son propre ensemble de métadonnées ; ce n'est qu'un des
éléments qui aident les moteurs de recherche à mieux comprendre comment la structure
du site web est construite.
<meta keywords=""> - une série de mots-clés que vous jugez pertinents pour la page en
question
<meta viewport=""> - donne au navigateur des instructions sur la manière de contrôler les
dimensions et le cadrage de la page.
<meta charest=""> - définit un jeu de caractères
<meta author=""> - définit l'auteur d'une page
04. Amélioration de la structure de site /05

4.1 Améliorer la structure des URLs:

L'URL d'une page doit expliquer le contenu du site Web.

Il doit être facile à comprendre et indiquer aux moteurs de recherche et aux humains
l'objet de la page (figure 4.1).
L'URL doit comporter moins de 115 caractères, mais plus il est court, mieux c'est.

Figure 4.1 Format du URL et référencement

Eviter:
d'utiliser des URL longues avec des paramètres et des ID de session inutiles
de choisir des noms de pages génériques comme "page1.html
d'utiliser des mots-clés excessifs comme "baseball-cards-baseballcards.htm".

Fournir une seule version d'une URL pour atteindre un document:

Privilégiez l'utilisation et la référence à une seule URL dans la structure et les liens internes
de vos pages pour empêcher les utilisateurs d'établir un lien vers une version d'une URL et
les autres d'établir un lien vers une version différente
(ce qui pourrait diviser la réputation de ce contenu entre les URL). Si vous constatez que
des personnes accèdent au même contenu via plusieurs URL, la mise en place d'une
redirection 301 des URL non préférées vers l'URL dominante est une bonne solution.
Vous pouvez également utiliser l'URL canonique ou l'élément de lien rel="canonical".
si vous ne pouvez pas effectuer de redirection.

4.2 Utiliser les balises canoniques:

Elle sert à indiquer à Google la page principale à indexer lorsque celle-ci peut avoir
plusieurs URL (ex https://monsite.com/page et https://www.monsite.com/page), ou que
d’autres pages avec du contenu très similaire existent, et que vous ne souhaitez pas voir
indexées :
<link rel="canonical" href="https://monsite.com/page" />

Exemples d’utilisation:
Vous êtes propriétaire d’un site Internet de vente de vêtements : exemple-vente-
vetements.fr
 /06

Vous vendez, entre autres, des robes bleues. Elles sont accessibles par deux chemins
différents pour permettre à vos visiteurs de filtrer par couleur ou par type de vêtement :
exemple-vente-vetements.fr/vetements-bleus/robes-bleues ;
ET exemple-vente-vetements.fr/robes/robes-bleues.
Ces pages sont exactement les mêmes, mais elles sont nécessaires.
Vous mettez donc en place une balise canonique sur ces deux pages :
<link rel="canonical" href="https://exemple-vente-vetements.fr/vetements-bleus/robes-
bleues" />
Pour montrer à Google que vous souhaitez que cette page soit utilisée comme page
principale pour l’indexation. Vous ne serez donc pas pénalisé par du contenu dupliqué.

4.3 Faciliter la navigation de votre site:

La navigation d'un site Web est importante pour

aider les visiteurs à trouver rapidement le contenu
qu'ils souhaitent. Elle peut également aider les
moteurs de recherche à comprendre le contenu
que le webmaster juge important. (figure 4.2)
Utiliser les fils d'Ariane pour faciliter la tâche des
utilisateurs. Le fil d'Ariane est une rangée de liens
internes situés en haut ou en bas de la page
(figure 4.3) qui permet aux visiteurs de revenir
rapidement à une section précédente ou à la page
d'accueil. De nombreux fils d'Ariane ont la page la
plus page la plus générale (généralement la page
racine) comme premier lien, le plus à gauche, et
énumèrent les sections plus spécifiques sur la Figure 4.2 La structure du

droite. répertoire pour un site web

Figure 4.3 Liens en fil d'Ariane apparaissant sur

une page d'article plus profonde d'un site.

Préparez deux sitemaps: un pour les utilisateurs (figure 4.4), un autre pour les
moteurs de recherche (figure 4.4). Les sitemaps ne sont que de simples
répertoires de toutes les pages qui se trouvent sur votre site. les visiteurs n'ont pas
besoin de les voir, mais les moteurs de recherche les utilisent ainsi pour indexer
rapidement et complètement votre contenu.
 /07

Figure 4.4 Exemples d'un plan de site HTML et d'un plan de site XML

Il s'agit généralement d'un simple fichier au format xml, rss ou tst, et c'est en fait un plan
que les moteurs de recherche peuvent analyser pour voir toutes les pages de votre site
Web d'un seul coup d'œil.
C'est important car les moteurs de recherche comme Google et d'autres classent les
pages de votre site et non le site lui-même. Leurs robots d'exploration s'appuient sur les
plans de site pour comprendre votre contenu et orienter les utilisateurs qui recherchent ce
contenu dans votre direction, ce qui est particulièrement important pour les grands sites
Web comportant de nombreuses pages, surtout si votre structure n'est pas très bien
organisée ou reliée, s'il n'a pas beaucoup de liens externes ou s'il est tout nouveau, mais
même pour les sites plus anciens qui sont assez simples, bien reliés et organisés, ne pas
avoir de sitemap revient à se tirer une balle dans le pied car il n'y a pas d'inconvénient à en
avoir un, seulement des avantages.
Un plan de site bien structuré contient les URL de toutes les pages de votre site classées
dans l'ordre de la plus importante (la page d'accueil) à la moins importante ainsi que les
liens entre ces pages et si vous apportez des modifications à votre site, assurez-vous de
mettre à jour votre plan de site en conséquence pour le garder à jour.
 /08
Il arrive parfois que les utilisateurs arrivent sur une page qui n'existe pas sur votre site, soit
en suivant un lien brisé ou en tapant une mauvaise URL. Le fait de disposer d'une page 404
personnalisée (figure 4.5) qui guide gentiment les utilisateurs vers une page fonctionnelle
de votre site peut améliorer considérablement leur expérience. page fonctionnelle de votre
site peut grandement améliorer l'expérience de l'utilisateur. Votre page 404 doit
probablement comporter un lien vers votre page racine et peut également fournir des liens
vers du contenu populaire ou connexe sur votre site. Google fournit un widget 404 que
vous pouvez intégrer à votre page 404 pour l'alimenter automatiquement avec de
nombreuses fonctionnalités utiles. Vous pouvez également utiliser les Outils pour les
webmasters de Google pour trouver les sources des URL qui provoquent des erreurs "non
trouvées".

Figure 4.5 Exemple d'une page non trouvée personnalisée

05. Optimisation du contenu: /09

5.1 Offrir un contenu et des services de qualité

La création d'un contenu convaincant et utile influencera le référencement d'un

site. Les utilisateurs savent reconnaître un bon contenu lorsqu'ils le voient et
voudront probablement diriger d'autres utilisateurs vers lui. Le contenu doit
retenir l’attention des internautes, crédibiliser votre marque, établir une relation
de confiance et améliorer le positionnement de vos pages dans les résultats de
recherche.

Google accorde de plus en plus

d'importance aux mots-clés placés dans
un contexte, aux questions et aux
expressions composées de plusieurs mots.
Il vaut mieux privilégier les mots-clés de
longue traîne (figure 5.1) lorsque l'on
commence une optimisation SEO. D'une
part, ces mots-clés sont moins
concurrentiels, ce qui vous permettra
d'être plus rapidement dans les premières
positions. D'autre part, même si leur trafic Figure 5.1 Les mots-clés de courte
est moins important, ils vous rapporteront traine et de langue traine

des prospects plus qualifiés !

Google AdWords propose un outil de

mots-clés (figure 5.2) très pratique qui
vous permet de découvrir de nouvelles
variations de mots-clés et de voir le
volume de recherche approximatif pour
chacune d'entre elles. De même, les Outils
pour les webmasters de Google vous
fournissent les principales recherches pour
lesquelles votre site apparaît et celles qui
ont conduit le plus d'utilisateurs à votre
d'utilisateurs vers votre site.

Figure 5.2 L'outil de mots-clés de

Google AdWords
5.2 Rédiger un bon ancre de lien: /10
Un ancre de lien approprié permet de transmettre facilement le contenu lié.
L'ancre de lien est le texte cliquable (figure 5.3) que les utilisateurs verront à la
suite d'un lien, et est placé dans la balise d'ancrage <a href="..."></a>.
Ce texte indique aux utilisateurs et à Google quelque chose sur la page vers
laquelle vous établissez un lien.

Figure 5.3 Cet ancre de lien décrit précisément le

contenu d'une page

Il faut éviter donc de mettre des ancres de lien telles que "ici" ou "en savoir plus".
et de suroptimiser les ancres de liens, en utilisant toujours la même.
Google découvrirait que la création des liens "non organiques" et pourrait
pénaliser ses sites.

5.3 Optimiser l'utilisation des images:

Les images peuvent sembler être un

composant simple de votre site, mais
vous pouvez en optimiser l'utilisation.
Toutes les images peuvent avoir un
nom de fichier et un attribut "alt"
distincts.
L'attribut "alt" permet de spécifier un
texte alternatif pour l'image si elle ne
peut pas être une raison quelconque.

Au lieu d'avoir des fichiers d'images répartis

dans de nombreux répertoires et sous-
répertoires sur votre domaine, envisagez de
consolider vos fichiers d'images dans un
seul répertoire (figure 5.4). Cela simplifie le
chemin d'accès à vos images.
Utilisez des types de fichiers couramment
pris en charge - La plupart des navigateurs
prennent en charge le format JPEG, GIF, PNG
et BMP. Il est également judicieux que
l'extension de votre nom de fichier
Figure 5.4 Les images sont stockées
corresponde au type de fichier. dans un seul répertoires "images"
 /11
Compressez les images car elles sont
l'une des principales causes d'un lent
chargement d'un site Web. Il existe
plusieurs outils de compression des
images en ligne.
Adaptez la taille de vos images à leur contenant
L’erreur la plus commune est de mettre des images trop grandes par rapport à
leur contenant, et ensuite de les adapter grâce à du CSS.

En clair, il faut éviter de mettre une image de 2 500 px sur 3 800 px dans une
<div> de 500 px sur 500 px, et d’imposer le redimensionnement en CSS. Plus une
image est grande, plus elle est lourde et donc longue à télécharger pour le
navigateur. Il est par conséquent indispensable de la redimensionner avant de la
mettre sur votre site.

Vous pouvez également la recadrer pour enlever les parties superflues de l’image,
et donc réduire encore plus sa taille et son poids.

Si vous décidez d'utiliser une image comme lien, le fait de remplir son texte "alt"
aide Google à mieux comprendre la page vers laquelle vous vous dirigez.

Évitez d'écrire un texte alt excessivement long qui serait considéré comme du
spam et d'utiliser uniquement des liens image pour la navigation de votre site

Un fichier Image Sitemap peut fournir à Googlebot des informations

supplémentaires sur les images présentes sur votre site. Sa structure est
similaire à celle du fichier Sitemap XML de vos pages Web.

5.4 Utilisez les balises d'en-tête de manière appropriée:

Les balises d'en-tête (à ne pas
confondre avec la balise HTML
<head> ou les en-têtes HTTP)
sont utilisées pour présenter la
structure de la page aux
utilisateurs. Il existe six tailles de
balises d'en-tête, en
commençant par <h1>, la plus
importante, et se terminant par Figure 5.5 La balise <h1></h1> et <h2></h2>

<h6>, la moins importante.

 /12

Étant donné que les balises d'en-tête rendent le texte qu'elles contiennent plus
grand que le texte normal de la page, c'est un indice visuel pour les utilisateurs que
ce texte est important et peut les aider à comprendre quelque chose sur le type de
contenu qui se trouve sous le texte de l'en-tête.
Plusieurs tailles d'en-têtes sont utilisées afin de créer une structure hiérarchique
pour votre contenu, ce qui permet aux utilisateurs de naviguer plus facilement
dans votre document.

<h1></h1>: Ne dépassez pas 80 caractères dans la mesure du possible. Veillez à

n'avoir qu'une seule balise par page
<h2></h2>: De préférence, 70-80 caractères.
06. S'accorder avec les crawlers : /13

6.1 Utilisez efficacement le fichier robots.txt :

Il s'agit d'une étape importante dans la publication de tout site web car ce fichier
indique aux moteurs de recherche ce qu'ils doivent indexer sur un site et ce qu'ils
ne doivent pas indexer, les pages auxquelles ils doivent accéder et celles qu'ils
doivent ignorer (figure 6.1), ce qui inclut un contenu privé ou des éléments inutiles
qui consommeraient de la bande passante et augmenteraient le temps de
chargement sur le serveur sans raison valable.
Ce fichier, qui doit être nommé "robots.txt", est placé dans le répertoire racine du
site (figure 6.2).
L'absence de ce fichier génère également des erreurs dans le journal d'apache
lorsque les robots des moteurs de recherche demandent un fichier robot et n'en
trouvent pas.

Figure 6.1 Exemple de fichier robot.txt

Figure 6.2 L'adresse d'un fichier robot.txt

Il existe d'autres moyens d'empêcher le contenu d'apparaître dans les résultats de

recherche comme
L'ajout de "NOINDEX" à votre balise <meta name = "robots", content = "noindex">
L'utilisation de .htaccess pour protéger les répertoires par un mot de passe,
L'utilisation de Google Webmaster Tools pour supprimer le contenu qui a déjà
été exploré.

6.2 Attention au rel="nofollow" pour les liens :

Le fait de définir la valeur

de l'attribut "rel" d'un lien
sur "nofollow" (figure 6.3)
indique à Google que
Figure 6.3 Exemple de lien à ne pas
certains liens de votre site
suivre par Google
ne doivent pas être suivis
ou de transmettre la
réputation de votre page
aux pages liées.
 /14
Quand cela peut-il être utile ?
Si un site possède un blog sur lequel les commentaires publics activés, les liens
contenus dans ces commentaires pourraient transmettre la réputation aux pages
non désirées.
Les zones de commentaires de blog sur les pages sont très sensibles aux
commentaires spam. (figure 6.4)

Figure 6.4 Un spammeur de commentaires laisse un message sur l'un de

nos blogs afin d'obtenir une partie de la réputation de ce site

Le Centre d'aide aux webmasters

propose d'autres conseils pour éviter
le spam de commentaires spam,
comme l'utilisation de CAPTCHA et
l'activation de la modération des
commentaires (figure 6.5)

Figure 6.5 Un exemple de CAPTCHA utilisé

sur le service de blog de Google.

Une autre utilisation du nofollow est lorsque vous écrivez du contenu et que vous
souhaitez référencer un site Web, mais que vous ne voulez pas lui transmettre votre
réputation sur ce site.
Si vous êtes intéressé par le nofollow de tous les liens sur une page, vous pouvez
utiliser "nofollow" dans votre balise robots, qui est placée à l'intérieur de la balise
<head> du code HTML de cette page. (figure 6.6)

Figure 6.6 Cette fonction permet de ne pas

suivre tous les liens d'une page.
07. SEO pour les mobiles: /15

7.1 Avertir google pour les sites mobiles :

Avoir un site web adapté aux mobiles est un élément essentiel de votre présence
en ligne. Lors des dernières années, l'indexation de google s'est vraiment
concentrée sur la promotion des sites web adaptés aux mobiles et ceux qui ne le
sont pas seront moins bien classés dans la recherche google. Il est donc très
important de mettre en œuvre cette convivialité mobile.
La plus grande partie de l'optimisation de la convivialité mobile se fera dans le
fichier CSS, où vous utiliserez des requêtes média pour présenter votre site Web
différemment sur tous les appareils.

Les 3 méthodes à suivre pour avoir un site compatible mobile :

Responsive Web Design (design adaptatif) :

(figure 7.1)
le même code HTML est affiché sur la même
URL quel que soit l’appareil utilisé : ordinateur,
tablette, téléphone mobile ou navigateur non
visuel. Toutefois, le design s’adapte selon la
taille de l’écran, par exemple l’agencement
des blocs ou la présence d’un menu ou d’une
barre latérale.
Pour le référencement, il faudra s’assurer de
servir le même code à Googlebot qu’aux Figure 7.1 Design incompatible
internautes, et ne pas bloquer de ressources (gauche) et Design compatible
à Googlebot (JS, CSS, images). Dans ce cas, (droite) mobiles

la détection de la compatibilité mobile se

fera toute seule sans soucis.

Dynamic Serving (diffusion dynamique) : (figure 7.2)

utilise la même URL quel que soit l’appareil utilisé, mais génère une version
distincte du code HTML pour les différents types d’appareil selon les
informations dont dispose le serveur au sujet du navigateur (cloaking selon
le User Agent). L’avantage sur le Responsive Design est de pouvoir alléger
la taille des fichiers téléchargés par les appareils mobiles.
Pour le référencement, il faut signaler à Googlebot qu’il existe une version
dédiée aux appareils mobiles, afin qu’il envoie bien sa version Googlebot
for smartphones. Ceci se fait par l’envoi d’un entête HTTP « Vary ».
 /16

Figure 7.2 Diffusion dynamique

URL distinctes (site mobile sur une URL spécifique) :

un code HTML distinct est affiché sur chaque appareil et sur des URL
distinctes (par exemple le site mobile se trouve sur m.example.com tandis
que le site desktop se trouve sur www.example.com). Cette configuration
essaie de détecter le type d’appareil de l’internaute, puis le redirige vers la
page appropriée à l’aide de redirections HTTP et de l’en-tête HTTP « Vary ».
Pour le référencement, il faut signaler à Googlebot les différentes URL par le
biais d’annotations.

Vérifiez que Google peut reconnaître vos URLs mobiles

Une fois que Googlebot-Mobile a parcouru vos URL, ensuite il vérifie si chaque URL
est affichable sur un appareil mobile.
Les pages qui ne sont pas consultables sur un téléphone mobile ne seront pas
incluses dans l'index des sites mobiles (bien qu'elles puissent être incluses dans
l'index du Web normal).
Cette détermination est basée sur une variété de facteurs, dont l'un est la
déclaration "DTD (Doc Type Definition)".
Vérifiez que la déclaration DTD de vos déclaration DTD de vos URL adaptées au
mobile est dans un format mobile approprié, tel que XHTML Mobile ou Compact
HTML (figure 7.3).

Figure 7.3 Un exemple de DTD pour les appareils mobiles

08. Les bases du SEO en JavaScript: /17

Googlebot traite les applications Web JavaScript en trois phases principales :

1. Exploration
2. Affichage
3. Indexation

Lorsque Googlebot extrait une URL de la file d'attente d'exploration via une requête
HTTP, il vérifie d'abord si vous en autorisez l'exploration. Googlebot lit alors le
fichier robots.txt. Si l'URL est marquée comme non autorisée, Googlebot n'envoie
pas la requête HTTP pour cette URL et ignore cette dernière.

Googlebot analyse ensuite la réponse pour les autres URL dans l'attribut href des
liens HTML, puis ajoute les URL à la file d'attente d'exploration. Pour empêcher la
découverte de liens, utilisez le mécanisme nofollow.

Gardez à l'esprit que l'affichage côté serveur ou le pré-affichage est

recommandé, car il permet aux utilisateurs et aux robots d'exploration d'accéder
à votre site plus rapidement. De plus, tous les robots n'utilisent pas forcément
JavaScript.

8.1 Éviter les erreurs 404 dans les applications à page unique :

Dans les applications à page unique affichées côté client, le routage est souvent
mis en œuvre du côté du client. Dans ce cas, l'utilisation de codes d'état HTTP
adéquats peut se révéler impossible ou difficilement applicable. Pour éviter les
erreurs de type "erreur 404" lors de l'affichage et du routage côté client, optez
pour l'une des stratégies suivantes :
Utilisez une redirection JavaScript vers une URL pour laquelle le serveur répond
avec un code d'état HTTP 404 (par exemple, /not-found).
Ajoutez une balise <meta name="robots" content="noindex"> aux pages
d'erreur à l'aide de JavaScript.

Voici un exemple de code si vous optez pour la redirection :

 /18
Voici un exemple de code si vous optez pour une balise noindex :

8.2 Utiliser les balises Meta pour les robots avec précaution :
Vous pouvez empêcher Googlebot d'indexer une page ou de suivre des liens via
une balise Meta pour les robots. Par exemple, l'ajout de la balise Meta suivante en
haut de la page empêche Googlebot d'indexer cette dernière :

Vous pouvez utiliser JavaScript pour ajouter une balise Meta pour les robots à une
page ou pour modifier son contenu. L'exemple de code suivant montre comment
remplacer la balise Meta pour les robots par un code JavaScript pour empêcher
l'indexation de la page active si un appel d'API ne renvoie pas de contenu.
09. Amélioration de la vitesse d'un site: /19

9.1 Compresser les ressources :

En compressant vos pages web et CSS avec Gzip, vous pouvez réduire
considérablement le temps de chargement de votre site. C’est certainement la
méthode de compression la plus efficace, qui permet de réduire le nombre de
demandes HTTP et le temps de réponse, et ce jusqu’à 70 %.

En activant la compression Gzip, les fichiers de votre site web seront

automatiquement compressés dans un fichier ZIP. Cela réduira leur taille et
augmentera la vitesse de chargement de votre site. Une grande partie de la
bande passante sera économisée, et le temps de chargement des pages sera
par conséquent amélioré.

Exemple de paramétrage GZIP pour un serveur Apache 2

Il suffit d’ajouter le code suivant à votre fichier .htaccess si vous souhaitez

compresser du texte, JavaScript, HTML, CSS ou XML :

Il faut également ajouter la compatibilité avec les anciens navigateurs :

 /20

Si vous ne paramétrez pas correctement l’appel à vos fichiers JavaScript, ils

bloqueront l’affichage de la page jusqu’à ce qu’ils soient complètement chargés.
Deux cas peuvent alors se présenter à vous :

cas n° 1, vous utilisez le JavaScript pour sublimer votre page ou pour modifier
le HTML une fois celui-ci chargé, par exemple l’utilisation de jQuery. Dans ce
cas, pas besoin de bloquer l’affichage de la page. Mieux vaut l’afficher au plus
vite pour ne pas faire attendre vos visiteurs ! Dans ce cas, il vous suffit
d’ajouter “async” ou “defer” dans vos balises script :
exécution asynchrone async <script async src=""></script>. Si l’ordre
d'exécution n’a pas d’importance et que les scripts peuvent être exécutés
dès qu’ils sont disponibles, préférez la méthode asynchrone,
exécution différée defer <script defer src=""></script>. Si l’ordre des scripts
est important, et qu’ils doivent être exécutés une fois le HTML
complètement chargé, préférez la méthode différée ;
cas n° 2, C’est le JavaScript qui permet d’afficher votre contenu, comme dans
le cas des framework JS. Nous traiterons ce cas dans la troisième partie du
cours !
Lorsqu'un visiteur de votre site consulte une page pour la première fois, le cache
navigateur est vide. Son navigateur va donc télécharger les éléments de la page
et les sauvegarder dans un espace temporaire.

La prochaine fois qu’il visitera cette même page, son navigateur n’aura pas à
retélécharger toutes les informations. Ceci permet donc un gain de temps
significatif pour charger la page !

Voici les autres types de cache que vous pourriez mettre en place :

le cache au niveau de votre base de donnée. Si votre application ou votre site

web effectuent beaucoup de requêtes vers une base de données, il peut être
pertinent d’installer un cache de requête pour les informations qui ne
changent pas souvent ! Ceci implique de stocker le résultat de certaines
requêtes pour diminuer l’utilisation de la base de données et gagner en
performance ;
le cache au niveau de votre application : vous pouvez également installer un
cache au niveau de votre serveur, par exemple en utilisant nginx ou varnish.
Dans tous les cas, n’oubliez pas : il ne faut mettre en cache que des informations
qui ne changent pas souvent !
9.2 Paramétrer le cache navigateur : /21

Pour avertir le navigateur des fichiers à mettre en cache et de la durée de celui-

ci, vous allez paramétrer les en-têtes HTTP de vos ressources :
l'en-tête Cache-Control définit l'âge maximum d'une ressource (en
secondes), c’est-à-dire la durée maximum pendant laquelle cette ressource
est valable ;
l'en-tête Expires est utilisée pour spécifier un moment précis (une date) où la
ressource n'est plus valide.

Exemple
Prenons à nouveau pour exemple un serveur Apache, qui est la technologie la
plus utilisée chez les hébergeurs. Le paramétrage de ce cache va se situer dans
votre fichier .htaccess. Voici ci-dessous le code à ajouter :
Code à ajouter pour l'en-tête Cache-Control

Code à ajouter pour l'en-tête Expires

 /22

9.3 Appuyez-vous sur un Content Delivery Network :

Un RDC, réseau de diffusion de contenu (ou CDN qui est le terme le plus utilisé)
est un réseau mondial de serveurs proxy (des serveurs qui servent
d'intermédiaire), qui permet d'accélérer le traitement des données pour les
utilisateurs finaux.

Les CDN sont utilisés pour améliorer l'expérience globale de l'utilisateur et fournir
un réseau plus efficace.

Les avantages d’un CDN sont nombreux, et notamment pour le SEO :

amélioration de la vitesse de chargement des pages et donc amélioration de
la crawlabilité de votre site ;
traitement des charges de trafic élevées pour éviter à votre serveur de crasher
blocage des spammeurs ;
amélioration de votre couverture serveur, et donc de la vitesse de votre site.

Choisissez un thème (et un “builder”) rapide

La plupart des CMS vous permettent d’installer un thème (un design préconçu
pour vous faciliter le travail) et/ou un theme builder, qui permet de créer vos
pages en faisant “glisser-déposer” des éléments déjà préconstruits.

Voici les choses que vous devez absolument vérifier lorsque vous choisissez un
thème et un builder :

le thème doit être rapide. Il ne doit pas comporter trop d’animations CSS ni de
JavaScript qui bloquent l’affichage. Vous pourrez trouver ces informations
dans la description du thème. De plus, la plupart des thèmes propose une
version de démo en ligne, dont vous pourrez tester la vitesse grâce à Pingdom
ou GTmetrix ;
le thème doit respecter les bonnes pratiques SEO. Par exemple, pas de H1
multiples dans la page ;
le thème builder ne doit pas alourdir considérablement le temps de
chargement de vos pages. Faites un essai sur une page de votre site avec ou
sans, pour comparer les résultats.
Le souci de beaucoup de builders est qu’ils rajoutent énormément de code HTML
“inutile” dans les pages.
 /23
Éliminez les plugins et les ressources inutiles
Tous les CMS proposent une fonctionnalité d’installation de plugins / modules /
extensions.

Ces plugins vous permettent de ne pas avoir à coder certaines fonctionnalités,

par exemple des formulaires de réservation ou de paiement.

Attention, ces plugins peuvent être très utiles, mais également fortement alourdir
votre site s’ils sont de mauvaise qualité, et rajouter des failles de sécurité.
De manière générale, si vous avez des plugins installés que vous n'utilisez plus ou
que vous jugez inutiles, vous devez les désactiver et les supprimer. Vous pouvez
facilement identifier les plugins qui ralentissent votre site web en les désactivant
manuellement, puis en mesurant les performances du serveur. En supprimant les
plugins inutiles, vous pouvez considérablement améliorer le temps de
chargement de votre page.

Cependant, sachez que leur nombre n’est pas le seul facteur déterminant. Vous
pouvez avoir une cinquantaine de plugins et toujours disposer d’un site web plus
rapide. Le nombre de plugins est pris en compte, certes, mais leur qualité l’est
davantage.

Par exemple, les plugins de partage sur les réseaux sociaux peuvent affecter
considérablement le temps de chargement de votre page. Par conséquent, vous
pouvez envisager de développer vous-même ou de faire développer des boutons
de réseaux sociaux dans le code source du thème de votre site web. Évitez ces
plugins et, de manière générale, ceux qui chargent beaucoup de scripts.

9.4 Réduire les requêtes HTTP :

Une requête http, c'est quand quelqu'un tape votre url dans son navigateur et
appel votre serveur pour demander un fichier (comme une page de votre site
web) et le serveur lui envoie ce fichier demandé. Cela a lieu pour tous les fichiers
nécessaires à la création de la page web.
La plupart des sondages sur le sujet indiquent que les gens s'attendent à ce qu'un
site web se charge en moins de 2 secondes et que si le chargement d'un site web
prend plus de trois secondes, 40 % des utilisateurs, soit près de la moitié,
sauteront le pas et abandonneront le site.
L'utilisation de sprites CSS qui consiste à combiner plusieurs images en une seule
et à utiliser CSS pour l'appeler, éliminant ainsi les multiples requêtes HTTP qui
seraient normalement nécessaires, c'est la meilleure solution pour les images de
fond, les boutons, les logos.
 /24

Par exemple, disons que nous avons quatre éléments de menu sur notre site,
chacun avec une image différente. Au lieu de 4 requêtes HTTP pour amener ces 4
images, nous pouvons créer un sprite avec les 4 images, les diviser en une grille
de 4 colonnes et décaler l'index de chacune d'elles pour indiquer au navigateur
où la placer. De cette façon, une seule requête HTTP est nécessaire pour faire
apparaître le contenu de la feuille de sprite.
L'utilisation d'URIs de données pour intégrer des images dans votre HTML ou CSS
au lieu d'avoir un lien vers une source d'image externe qui nécessiterait une autre
requête http pour l'envoyer et l'obtenir
L'utilisation de CDN= content delivery network est l'utilisation d'un réseau de
serveurs pour héberger le contenu et le réseau enverra les données du serveur le
plus proche à l'utilisateur, il est même possible d'utiliser plus d'un CDN.