Créez des pages optimisées pour le référencement : le code HTMLAtelier animé par Gilles Tran, Consultant SEO - Agence RESONEO, gérant de la sté Interactive Promotion http://www.seo-campus.org/programme/samedi
- 1. Optimisation du code HTML recommandations SEO fvrier
2010
2. Optimisation du code HTML - Sommaire
- Code HTML du corps de la page
- Optimisation des temps de chargement
- HTML, Javascript et Webdesign
3. Gnralits 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
- 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
-
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
-
- Meta title et description
- 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
- 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...) :
9. Head et metas de la page 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
- Code HTML du corps de la page
-
- Balises: Hn, bold, italic, div, paragraphes,...
-
- 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)
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:
14. Code HTML du corps de la page 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
- 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:
- si toute lURL doit tre modifie
16. Code HTML du corps de la page Format des liens
- 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
- Code HTML du corps de la page
- Optimisation des temps de chargement
-
- Portions de page recurrentes et AJAX
-
- 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
- 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
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
- Code HTML du corps de la page
- Optimisation des temps de chargement
- HTML, Javascript et Webdesign
- Les menus accordons etselect full css
- Travailler sur la facilit dutilisation ,liens big target
25. HTML, Javascript et Webdesign Lesdiv par onglets
- 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
- 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
- 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
- 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
-
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
- 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 :
-
- Achat de liens sponsoriss
-
- Gestion de rputation en ligne
-
- 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
33. Merci de votre attention
-
- Gilles Tran :[email_address]