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
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
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
Optimisation du code HTML - Sommaire
Généralités
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
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
Optimisation du code HTML - Sommaire
Généralités
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
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
Code HTML du corps de la page – Balises : Hn, bold, italic, div, paragraphes,…
Balises : Hn, bold, italic, div, paragraphes,...
• Fil d’Ariane (dans vos pages internes), chaque niveau d’arborescence, même virtuels
12
Code HTML du corps de la page – Balises : Hn, bold, italic, div, paragraphes,…
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
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 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
Code HTML du corps de la page – Format des liens
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
Optimisation du code HTML - Sommaire
Généralités
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 contrôle d’optimisation de chargement de page
HTML, Javascript et Webdesign
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
Optimisation du code HTML - Sommaire
Généralités
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 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,
HTML, Javascript et Webdesign– Les div par onglets
Les div par onglets
28
Encore un exemple sur l'intégration de plus de contenu dans un espace restreint,
HTML, Javascript et Webdesign– Les div par onglets
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
