Download - SEO: Optimisation du code HTML - Gilles Tran - SEO Campus 2010

Optimisation du code HTMLrecommandations SEO

février 2010

Optimisation du code HTML - Sommaire

Généralités

• Format de page générique

• Structure d’URL optimisées

Head et metas de la page

Code HTML du corps de la page

Optimisation des temps de chargement

HTML, Javascript et Webdesign

2

Généralités – Format de page générique

Format de page générique

Eviter les frames / iframe

Pour éviter les problématiques de duplication de contenu, la règle suivante est primordiale : « A chaque document/contenu web correspond une URL unique »

Pas de nécessité d’être en HTML ou XHTML strict. En revanche un code valide, présentant le moins de tableaux possible (idéalement full CSS) est à privilégier.

3

Généralités – Structure d’URL optimisées

Structure d’URL optimisées

Une bonne URL permet d’identifier où on se trouve dans le site au premier coup d’œil. Privilégier les URLs courtes de type :

http://www.ndd.tld/rubrique/ma-page.html

La saisie du domaine http://ndd.tld/ dans la barre d’adresse doit rediriger en 301 vers http://www.ndd.tld/

Voici ci-joint 2 lignes à copier dans le .htaccess :RewriteCond %{HTTP_HOST} !^www.ndd.tld$

RewriteRule ^(.*) http://www.ndd.tld/$1 [QSA,L,R=301]

Utiliser le tiret du milieu comme séparateur d’occurrence plutôt que l’underscore :

http://www.ndd.tld/mot-clef.html plutôt que http://www.ndd.tld/mot_clef.html

4

http://www.ndd.tld/rubrique/ma-page.html

http://ndd.tld/

Généralités – Structure d’URL optimisées

Structure d’URL optimisées (2)

Réécrire les URL possédant de nombreux paramètres :

http://www.ndd.tld/file-a-b-c-d-e-f.html plutôt que http://www.ndd.tld/file.php?id1=a&id2=b&id3=c&id4=d&id5=e&id6=f

Eviter de plus les sous-répertoires virtuels pour chaque paramètre :http://www.ndd.tld/param1/param2/param3/.../ma-page.html

Proscrire tant que possible l’utilisation de variables de session passées en paramètre dans les URLs (nous détaillerons plus tard l’utilisation d’une META canonical pour contourner ce genre de problème)

5


Généralités

Head et metas de la page• Meta title et description• Autres metas• Rel canonical




6

Head et metas de la page – Meta title et description

Meta title et description

La balise <title> doit comprendre environ 65 caractères (ce qu'affiche Google)

La balise <title> doit être placée derrière la <meta> charset qui elle se trouve juste après <head>. Vérifier que le serveur envoie le même jeu de caractères que celui déclaré dans le code source de votre page.

Inclure une balise META description et une balise META keyword sur chaque page du site. La balise META keyword est fortement dépréciée mais pourra toujours aider pour certains moteurs de recherche. Il n’y a pas de contre-indication quant à l’utilisation d’autres balises META dans le header mais elles ne seront pas utiles pour le référencement. La balise META description est souvent employée dans le snippet des résultats de recherche, de la qualité de rédaction de cette META description dépend beaucoup le taux de clic vers vos pages…

7

Head et metas de la page – Autres Metas

Autres metas

Prévoir néanmoins de créer un compte Webmaster Tools sur Google, ou d’ajouter votre site à votre compte existant, il vous faudra ensuite ajouter une balise meta (fournie par Google) qui vous permettra de valider votre site

<meta http-equiv="Content-Language" content="fr"> et <html lang="fr"> pourront être utilisés, surtout si le serveur n’est pas en France.

Exemple de header générique (hors DOCtype...) :

<head>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />

<title>titre de la page</title>

<meta name="Description" content="description de la page" />

<meta name="Keywords" content="une dizaine d'expressions maximum" />

</head>

8

Head et metas de la page – Rel canonical

Rel canonical

Utiliser une meta canonical si vous ne pouvez pas éviter techniquement de passer des variables dans vos URL (variables de sessions par exemple)

En voici le code source :

<link rel=”canonical” href=”http://www.ndd.tld/titre-page.html” />

9


Généralités


Code HTML du corps de la page• Balises : Hn, bold, italic, div, paragraphes,...• Format des liens• Elements visuels de la page



10

Code HTML du corps de la page – Balises : Hn, bold, italic, div, paragraphes,…

Balises : Hn, bold, italic, div, paragraphes,...

D’une manière générale, l’utilisation de balises sémantiques appropriées est un vrai plus.

Ce dont il faut vérifier la présence dans vos pages et l’adéquation avec le référencement naturel :

• H1 (1 seul H1 par page est nécessaire)

• H2 (sur des intertitres ou titres de blocs de page qui comprennent vos mots-clés)

• Le contenu texte doit être positionné le plus haut possible dans votre code source, il doit être inclus dans des balises <p> paragraphes pour bien signifier où se trouve votre contenu texte. Si votre texte est long, pensez à ajouter des « intertitres » de type <h2> pour segmenter votre contenu, améliorer la lisibilité et augmenter votre densité de mots-clés. Ces « intertitres » devraient de façon optimale répéter les mots-clés présents dans votre <h1>

11


Balises : Hn, bold, italic, div, paragraphes,...

• Fil d’Ariane (dans vos pages internes), chaque niveau d’arborescence, même virtuels

12


Balises : Hn, bold, italic, div, paragraphes,... (2)

• Ce dont il faut vérifier la présence dans vos pages et l’adéquation avec le référencement naturel :

• Le nombre de liens internes doit être limité (100 URL semble raisonnable, voir 150 à 200 pour une page d’accueil)

• Les liens vers les « catégories principales » du site doivent être inclus de même que celui vers la page d’accueil

• Recensez les pages dont le référencement ne vous apportera pas de visites ciblées (CGV, page contact, …), les liens vers ces pages doivent inclure un attribut « nofollow » :

<a href="cgv.html" rel="nofollow">CGV</a>

13

Code HTML du corps de la page – Format des liens

Format des liens

Ne jamais laisser apparaître le index.php ou index.html dans l’URL, y compris pour la racine. Les liens de retour a l’accueil doivent être écrit de cette manière :

<a href="http://www.ndd.tld/" title="texte descriptif">

Eviter les liens relatifs, inclure pour cela l’URL du site dans vos liens (http://www.ndd.tld/) Inclure les liens en absolu sur vos pages permettra aussi d’éviter que les robots ne crawlent

les pages du HTTP en HTTPS et génèrent de la duplication de contenu Eviter les liens en javascript / flash (ou remplir le contenu alternatif)

14


Format des liens (2)

Concernant les URLs de tracking qui passent un code origine, ils peuvent générer de la duplication de contenu : http://www.ndd.tld/ et http://www.ndd.tld/?variable=XXX sont deux URL différentes qui correspondent à un même contenu.

Les liens passant les codes tracking pourront être écrits de cette manière :

<a href="http://www.ndd.tld/" onclick="this.href+='?origine=XXX'">

Utiliser <a href="/" onclick="javascript:open.document..." >

si toute l’URL doit être modifiée

15


Format des liens (3)

Les liens des balises <select> ne sont pas suivis. Il est possible d’utiliser l’équivalent en CSS si vous avez de longues listes de destinations par exemple (nous détaillerons cette pratique dans le chapitre 5)

Mettre au moins un lien de retour vers l'accueil sur toutes les pages du site (les liens de retour en Flash ne comptent pas…)

Privilégier des URL courtes et éviter d’avoir des arborescences d’URL à plus de 2

répertoires

http://www.ndd.tld/rubrique1/rubrique2/page.html

16

Code HTML du corps de la page – Eléments visuels de la page

Eléments visuels de la page

Tenter d’inclure au maximum les mots-clés visés dans le nom de vos images : vacances-club.gif

L'attribut alt de vos images doit être présent systématiquement

17


Généralités



Optimisation des temps de chargement• Portions de page recurrentes et AJAX• Gestion des images• Optimisation des fichiers CSS et JS et compression gzip• Outils de contrôle d’optimisation de chargement de page


18

Optimisation des temps de chargement – Portions de page recurrentes et AJAX

Portions de page recurrentes et AJAX

• Il est fréquent de rencontrer des pages contenant un code source très long et dont certaines portions de page, telle que le code source d’un moteur de recherche, seront répétées de page en page.Ces portions de page ne contribuent pas à l’amélioration de votre densité de mots-clés par page et pourraient même “noyer” votre contenu dans un code trop dense.

2 cas de figure s’offrent à vous pour gérer ce genre de situation :

Faire l’inclusion de votre code via un iframe Faire l’inclusion de votre code par un appel AJAX ( http://www.voyages-sncf.com/ moteur de

recherche )

L’inclusion AJAX vous permet éventuellement de présenter une icone de chargement pendant que le code source à inclure est téléchargé

L’utilisation de cette technique présente 2 avantages :

L’amélioration du temps de chargement de votre page principale L’amélioration de la densité des mots-clés “utiles” par rapport au poids général de la page

19

Optimisation des temps de chargement – Gestion des images

Gestion des images

• La gestion des images de votre page s’entend de 2 façons :

Les images présentes directement dans la page Les images dont un clic sur une vignette permet d’obtenir une version agrandie de celle-ci

(nous aborderons la gestion de ces images dans un exemple donné dans le chapitre 5)

• Pour les images présentes dans la page, il est important de faire très attention à leurs poids : pensez à générer dynamiquement vos images, retaillez et mettez les au format avec des librairies telles que GD2 ou ImageMagick de façon à réduire le poids de vos images de façon certaine

• Eviter tant que possible l’utilisation de height et width pour forcer l’affichage d’une image à des proportions inférieurs à celles de l’image que vous avez chargé. (Attention, cela ne dispense pas de préciser les dimensions de l’image générée)

• Dans certains cas, il peut aussi s’avérer intéressant d’utiliser des solutions telles que les chargements différés d’images ( Lazy loading : http://www.appelsiini.net/projects/lazyload )

20

Optimisation des temps de chargement – Optimisation des fichiers

Optimisation des fichiers CSS et JS et compression gzip

Evitez tant que possible l’utilisation de styles et de scripts dans votre code source, externalisez vos styles et scripts dans des fichiers à part.

Regroupez vos styles en un minimum de fichiers différents à télécharger, 1 fichier CSS et 1 fichier JS étant le mieux dans l’absolu

Une fois vos styles réunis en 1 fichier, passez les dans un outil de compression de façon à réduire le poids du fichier ( http://refresh-sf.com/yui/ // Page Speed extension FF )

Faite de même pour le fichier JS

Vérifiez enfin que votre serveur permet l’envoi de fichier au format gzip pour que le poids des fichiers envoyés soit encore plus léger et que cela contribue de façon notable à réduire l’utilisation de la bande passante de votre serveur.

21

Optimisation des temps de chargement – Outils de contrôle d’optimisation

Outils de contrôle d’optimisation de chargement de page

Page Speed, Yslow :

22

Optimisation des temps de chargement – Outils de contrôle d’optimisation

Outils de contrôle d’optimisation de chargement de page (2)

Performances de site, Google Webmastertools

23


Généralités




HTML, Javascript et Webdesign• Rappel• Les galeries d’images• Les menus accordéons et select full css• Les div par onglets• Travailler sur la facilité d’utilisation, liens big target

24

HTML, Javascript et Webdesign– Les div par onglets

Rappel

Pour rappel, le Javascript n’est pas interpreté par les moteurs de recherche (ou du moins l’est très peu).

Une utilisation “raisonnable” vous permet de bénéficier de nombreux avantages contrairement à l’idée reçue du facteur bloquant de l’utilisation de Javascript en référencement,

Faisons un petit tour d’horizon

25

HTML, Javascript et Webdesign– Les galeries d’images

Les galeries d’images

• Le problème des galeries d’images est bien souvent le poids d’une page qui charge un nombre conséquent d’images d’un poids relativement important. Choisir une galerie d’image qui présente une vignette sur laquelle il faut cliquer afin d’obtenir une plus grande version via AJAX permet de réduire le chargement initial de la page de façon importante.

Un exemple : http://benjaminsterling.com/jquery-jqgalviewii-photo-gallery/

Ici, une seule grande image est chargée

26

HTML, Javascript et Webdesign– Les select full css

Les select full css

27

Les menus accordéons

Ici, nous travaillons sur l'intégration de plus de contenu dans un espace restreint et travailler sur des fondamentaux du référencement en ne pénalisant pas l'aspect graphique et l'expérience utilisateur pour autant,


Les div par onglets

28

Encore un exemple sur l'intégration de plus de contenu dans un espace restreint,


Travailler sur la facilité d’utilisation, les taux de conversion, les taux de rebond à l'aide d'intégrations de fonctionnalités JS, moteur Ajax,...

29

HTML, Javascript et Webdesign– Liens big target et intérêt SEO

Liens big target

http://newism.com.au/blog/post/58/bigtarget-js-increasing-the-size-of-clickable-targets/

30

L’ancre de lien n’a pas ici besoin d’être appliquée sur le

Read more...

Il peut être appliqué directement dur le titre du bloc,

Vous gagnez ainsi en pertinence sur l’ancre de votre lien

Présentation de RESONEO

Créé il y a 5 ans, RESONEO est un cabinet de conseil en stratégie et en marketing pour le e-business qui réunit aujourd’hui près de 40 consultants spécialisés sur Internet et les nouvelles technologies.

Notre approche consiste à envisager Internet de façon très globale, ainsi que son articulation avec les autres leviers de création de trafic ou de notoriété, et ceci dans une démarche très axée sur la mesure et le ROI.

RESONEO réalise des missions d’audits stratégiques et marketing et accompagne ses clients dans la mise en œuvre opérationnelle des recommandations dans les domaines suivants :

• Référencement naturel• Achat de liens sponsorisés• Social media marketing• Gestion de réputation en ligne• Tracking et mesure• Amélioration de la conversion

31

Présentation de RESONEO

Organisme de formation agréé, RESONEO intervient dans une véritable optique de transfert de savoir-faire vis-à-vis de ses clients, et dispense pour de grands groupes media (Mondadori, Prisma, IP RTL, Publicis…) des formations à l’approche commerciale du media Internet.

Quelques références clients• GENERALI• MEDIATIS• MSN• THOMAS COOK• PIERRE ET VACANCES• VSC• WEEKENDESK• ACCOR• L’EXPRESS / L’EXPANSION• PRICE MINISTER• CENTER PARCS• VOGICA

32

Merci de votre attention

Votre interlocuteur• Gilles Tran : [email protected]

33