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

Optimisation du code HTML recommandations 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

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.

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

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)

Généralités
Meta title et description
Autres metas
Rel canonical

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…

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>

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” />

Généralités
Balises : Hn, bold, italic, div, paragraphes,...
Format des liens
Elements visuels de la page

Code HTML du corps de la page – 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>

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

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>

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)

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

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

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

Généralités
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

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

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 )

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.

Optimisation des temps de chargement – Outils de contrôle d’optimisation
Outils de contrôle d’optimisation de chargement de page
Page Speed, Yslow :

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

Généralités
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

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

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

HTML, Javascript et Webdesign– Les select full css
Les select full css
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
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,...

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/
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

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

Merci de votre attention
Votre interlocuteur
Gilles Tran : [email_address]

http://www.mauricelargeron.com	81
http://www.seo-camp.org	66
http://www.e-reputation.org	39
http://www.slideshare.net	28
http://e-reputation.org	17
http://www.netconfiture.com	1
http://webcache.googleusercontent.com	1
http://static.slidesharecdn.com	1
http://209.85.229.132	1
http://storify.com	1

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

by SEO Camp on Feb 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 236

Statistics

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