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

Click here to load reader

  • date post

    21-Jun-2015
  • Category

    Technology

  • view

    3.755
  • download

    2

Embed Size (px)

description

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

Transcript of SEO: Optimisation du code HTML - Gilles Tran - SEO Campus 2010

  • 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]