1. Optimisation du code HTML recommandations SEO fvrier 2010

2. Optimisation du code HTML - Sommaire

Gnralits

• Format de page gnrique

• Structure dURL optimises

Head et metas de la page

Code HTML du corps de la page

Optimisation des temps de chargement

HTML, Javascript et Webdesign

3. Gnralits Format de page gnrique

Format de page gnrique

Eviter les frames / iframe

Pour viter les problmatiques de duplication de contenu, la rgle suivante est primordiale: A chaque document/contenu web correspond une URL unique

Pas de ncessit dtre en HTML ou XHTML strict.En revanche un code valide, prsentant le moins de tableaux possible (idalement full CSS) est privilgier.

4. Gnralits Structure dURL optimises

Structure dURL optimises

Une bonne URL permet didentifier o on se trouve dans le site au premier coup dil. Privilgier les URLs courtes de type:

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

La saisie du domainehttp://ndd.tld/dans la barre dadresse doit rediriger en 301 vershttp://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 sparateur doccurrence plutt que lunderscore:

http://www.ndd.tld/mot-clef.html plutt quehttp://www.ndd.tld/mot_clef.html

5. Gnralits Structure dURL optimises

Structure dURL optimises (2)

Rcrire les URL possdant de nombreux paramtres:

http://www.ndd.tld/file-a-b-c-d-e-f.html

plutt que

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

Eviter de plus les sous-rpertoires virtuels pour chaque paramtre :

http://www.ndd.tld/param1/param2/param3/.../ma-page.html

Proscrire tant que possible lutilisation de variables de session passes en paramtre dans les URLs (nous dtaillerons plus tard lutilisation dune META canonical pour contourner ce genre de problme)

6. Optimisation du code HTML - Sommaire

Gnralits

Head et metas de la page

• Meta title et description

• Autres metas

• Rel canonical

Code HTML du corps de la page

Optimisation des temps de chargement

HTML, Javascript et Webdesign

7. Head et metas de la page Meta title et description

Meta title et description

La balise doit comprendre environ 65 caractres (ce qu'affiche Google)

La balise doit tre place derrire la charset qui elle se trouve juste aprs . Vrifier que le serveur envoie le mme jeu de caractres que celui dclar 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 dprcie mais pourra toujours aider pour certains moteurs de recherche. Il ny a pas de contre-indication quant lutilisation dautres balises META dans le header mais elles ne seront pas utiles pour le rfrencement. La balise META description est souvent employe dans le snippet des rsultats de recherche, de la qualit de rdaction de cette META description dpend beaucoup le taux de clic vers vos pages

8. Head et metas de la page Autres Metas

Autres metas

Prvoir nanmoins de crer un compteWebmaster Tools sur Google , ou dajouter votre site votre compte existant, il vous faudra ensuite ajouter une balise meta (fournie par Google) qui vous permettra de valider votre site

et pourront tre utiliss, surtout si le serveur nest pas en France.

Exemple de header gnrique (hors DOCtype...) :

titre de la page

9. 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 :

10. Optimisation du code HTML - Sommaire

Gnralits

Head et metas de la page

Code HTML du corps de la page

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

• Format des liens

• Elements visuels de la page

Optimisation des temps de chargement

HTML, Javascript et Webdesign

11. Code HTML du corps de la page Balises: Hn, bold, italic, div, paragraphes,

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

Dune manire gnrale, lutilisation de balises smantiques appropries est un vrai plus.

Ce dont il faut vrifier la prsence dans vos pages et ladquation avec le rfrencement naturel:

• H1 (1 seul H1 par page est ncessaire)

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

• Le contenu texte doit tre positionn le plus haut possible dans votre code source, il doit tre inclus dans des balises

  paragraphes pour bien signifier o se trouve votre contenu texte. Si votre texte est long, pensez ajouter des intertitres de type

  pour segmenter votre contenu, amliorer la lisibilit et augmenter votre densit de mots-cls. Ces intertitres devraient de faon optimale rpter les mots-cls prsents dans votre

12. Code HTML du corps de la page Balises: Hn, bold, italic, div, paragraphes,

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

Fil dAriane (dans vos pages internes), chaque niveau darborescence, mme virtuels

13. Code HTML du corps de la page Balises: Hn, bold, italic, div, paragraphes,

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

Ce dont il faut vrifier la prsence dans vos pages et ladquation avec le rfrencement naturel:

• Le nombre de liens internes doit tre limit (100 URL semble raisonnable, voir 150 200 pour une page daccueil)

• Les liens vers les catgories principales du site doivent tre inclus de mme que celui vers la page daccueil

• Recensez les pages dont le rfrencement ne vous apportera pas devisites cibles(CGV, page contact, ), les liens vers ces pages doivent inclure un attribut nofollow:

CGV

14. Code HTML du corps de la page Format des liens

Format des liens

Ne jamais laisser apparatre le index.php ou index.html dans lURL, y compris pour la racine. Les liens de retour a laccueil doivent tre crit de cette manire:

Eviter les liens relatifs, inclure pour cela lURL du site dans vos liens ( http://www.ndd.tld/ )

Inclure les liens en absolu sur vos pages permettra aussi dviter que les robots ne crawlent les pages du HTTP en HTTPS et gnrent de la duplication de contenu

Eviter les liens en javascript / flash (ou remplir le contenu alternatif)

15. Code HTML du corps de la page Format des liens

Format des liens (2)

Concernant les URLs de tracking qui passent un code origine, ils peuvent gnrer de la duplication de contenu:http://www.ndd.tld/ ethttp://www.ndd.tld/?variable=XXX sont deux URL diffrentes qui correspondent un mme contenu.

Les liens passant les codes tracking pourront tre crits de cette manire:

Utiliser

si toute lURL doit tre modifie

16. Code HTML du corps de la page Format des liens

Format des liens (3)

Les liens des balises ne sont pas suivis. Il est possible dutiliser lquivalent en CSS si vous avez de longues listes de destinations par exemple (nous dtaillerons 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)

Privilgier des URL courtes et viter davoir des arborescences dURL plus de 2 rpertoires

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

17. Code HTML du corps de la page Elments visuels de la page

Elments visuels de la page

Tenter dinclure au maximum les mots-cls viss dans le nom de vos images: vacances-club.gif

L'attribut alt de vos images doit tre prsent systmatiquement

18. Optimisation du code HTML - Sommaire

Gnralits

Head et metas de la page

Code HTML du corps de la page

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 contrle doptimisation de chargement de page

HTML, Javascript et Webdesign

19. Optimisation des temps de chargement Portions de page recurrentes et AJAX

Portions de page recurrentes et AJAX

Il est frquent de rencontrer des pages contenant un code source trs long et dont certaines portions de page, telle que le code source dun moteur de recherche, seront rptes de page en page.

Ces portions de page ne contribuent pas lamlioration de votre densit de mots-cls par page et pourraient mme noyer votre contenu dans un code trop dense.

2 cas de figure soffrent vous pour grer ce genre de situation :

Faire linclusion de votre code via un iframe

Faire linclusion de votre code par un appel AJAX (http://www.voyages-sncf.com/moteur de recherche )

Linclusion AJAX vous permet ventuellement de prsenter une icone de chargement pendant que le code source inclure est tlcharg

Lutilisation de cette technique prsente 2 avantages :

Lamlioration du temps de chargement de votre page principale

Lamlioration de la densit des mots-cls utiles par rapport au poids gnral de la page

20. Optimisation des temps de chargement Gestion des images

Gestion des images

La gestion des images de votre page sentend de 2 faons :

Les images prsentes directement dans la page

Les images dont un clic sur une vignette permet dobtenir une version agrandie de celle-ci (nous aborderons la gestion de ces images dans un exemple donn dans le chapitre 5)

Pour les images prsentes dans la page, il est important de faire trs attention leurs poids : pensez g nrer dynamiquement vos images, retaillez et mettez les au format avec des librairies telles que GD2 ou ImageMagick de faon rduire le poids de vos images de faon certaine

Eviter tant que possible lutilisation de height et width pour forcer laffichage dune image des proportions infrieurs celles de limage que vous avez charg. (Attention, cela ne dispense pas de prciser les dimensions de limage gnre)

Dans certains cas, il peut aussi savrer intressant dutiliser des solutions telles que les chargements diffrs dimages ( Lazy loading :http://www.appelsiini.net/projects/lazyload)

21. Optimisation des temps de chargement Optimisation des fichiers

Optimisation des fichiers CSS et JS et compression gzip

Evitez tant que possible lutilisation 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 diffrents tlcharger, 1 fichier CSS et 1 fichier JS tant le mieux dans labsolu

Une fois vos styles runis en 1 fichier, passez les dans un outil de compression de faon rduire le poids du fichier (http://refresh-sf.com/yui/ //Page Speed extension FF )

Faite de mme pour le fichier JS

Vrifiez enfin que votre serveur permet lenvoi de fichier au format gzip pour que le poids des fichiers envoys soit encore plus lger et que cela contribue de faon notable rduire lutilisation de la bande passante de votre serveur.

22. Optimisation des temps de chargement Outils de contrle doptimisation

Outils de contrle doptimisation de chargement de page

Page Speed, Yslow :

23. Optimisation des temps de chargement Outils de contrle doptimisation

Outils de contrle doptimisation de chargement de page (2)

Performances de site, Google Webmastertools

24. Optimisation du code HTML - Sommaire

Gnralits

Head et metas de la page

Code HTML du corps de la page

Optimisation des temps de chargement

HTML, Javascript et Webdesign

Rappel

Les galeries dimages

Les menus accordons etselect full css

Lesdiv par onglets

Travailler sur la facilit dutilisation ,liens big target

25. HTML, Javascript et Webdesign Lesdiv par onglets

Rappel

Pour rappel, le Javascript nest pas interpret par les moteurs de recherche (ou du moins lest trs peu).

Une utilisation raisonnable vous permet de bnficier de nombreux avantages contrairement lide reue du facteur bloquant de lutilisation de Javascript en rfrencement,

Faisons un petit tour dhorizon

26. HTML, Javascript et Webdesign Les galeries dimages

Les galeries dimages

Le problme des galeries dimages est bien souvent le poids dune page qui charge un nombre consquent dimages dun poids relativement important.

Choisir une galerie dimage qui prsente une vignette sur laquelle il faut cliquer afin dobtenir une plus grande version via AJAX permet de rduire le chargement initial de la page de faon importante.

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

Ici, une seule grande image est charge

27. HTML, Javascript et Webdesign Les select full css

Les select full css

Les menus accordons

Ici, nous travaillons sur l'intgration de plus de contenu dans un espace restreint et travaillersur des fondamentaux du rfrencement en ne pnalisant pas l'aspect graphique et l'exprience utilisateur pour autant,

28. HTML, Javascript et Webdesign Lesdiv par onglets

Lesdiv par onglets

Encore un exemple sur l'intgration de plus de contenu dans un espace restreint,

29. HTML, Javascript et Webdesign Lesdiv par onglets

Travailler sur la facilit dutilisation, les taux de conversion, les taux de rebond l'aide d'intgrations de fonctionnalits JS, moteur Ajax,...

30. HTML, Javascript et Webdesign Liens big target et intrt SEO

Liens big target

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

Lancre de lien na pas ici besoin dtre applique sur le

Read more...

Il peut tre appliqu directement dur le titre du bloc,

Vous gagnez ainsi en pertinence sur lancre de votre lien

31. Prsentation deRESONEO

Cr il y a 5 ans,RESONEOest un cabinet deconseil en stratgieet en marketing pour le e-business qui runit aujourdhui prs de 40 consultants spcialiss sur Internet et les nouvelles technologies.

Notre approche consiste envisager Internet de faon trs globale, ainsi que son articulation avec les autres leviers de cration de trafic ou de notorit, et ceci dans une dmarche trs axe sur la mesure et le ROI.

RESONEOralise des missions d audits stratgiques et marketinget accompagne ses clients dans la mise en uvre oprationnelle des recommandations dans les domaines suivants :

• Rfrencement naturel

• Achat de liens sponsoriss

• Social media marketing

• Gestion de rputation en ligne

• Tracking et mesure

• Amlioration de la conversion

32. Prsentation deRESONEO

Organisme de formation agr ,RESONEOintervient dans une vritable 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 lapproche commerciale du media Internet.

Quelques rfrences clients

• GENERALI

• MEDIATIS

• MSN

• THOMAS COOK

• PIERRE ET VACANCES

• VSC

• WEEKENDESK

• ACCOR

• LEXPRESS / LEXPANSION

• PRICE MINISTER

• CENTER PARCS

• VOGICA

33. Merci de votre attention

Votre interlocuteur

• Gilles Tran :[email_address]