Pour le SEO et pour le code HTML5.
Bon : autant vous prévenir d'emblée tout ce qui va suivre est expérimental et empirique. N'étant pas codeur c'est souvent à force d'essais / erreurs que j'ai rendu mon code plus léger sans effet de bord notable pour le référencement ni pour l'impression des pages. L'objectif visé est de dépouiller le code HTML de tout ce qui est inutile.
Du côté de la feuille de styles je n'ai rien fait car aujourd'hui c'est un foutoir. J'ai dans l'idée de refondre totalement cette partie du code plus tard cet été. Donc la CSS a été totalement exclue de cette opération de nettoyage de printemps.
Si j'ouvre ce billet c'est pour partager des trouvailles mais aussi échanger avec vous, aficionados et experts du code les idées pour un code plus léger et plus performant du côté front-end.
Ces précautions épistolaires faites, passons maintenant aux aspects techniques.
Commençons par la tête du canard :
Optimisations et nettoyage de head
La balise head d'abord
Elle ne sert à rien. En HTML5, d'ailleurs, son absence n'empêche pas le passage au vert du canard sans tête au banc de W3C. Tout comme en XHTML ou en HTML4 elle ne bloque pas l'impression de la page à l'écran. Coupons donc la tête et passons aux meta.
L'encodage
J'ai eu du mal l'année dernière avec l'encodage des caractères dans la déclaration HTML5. Je me suis échiné à comprendre pourquoi quand, soudain, une diode s'est allumée quelque part au fond de ma boîte crânienne :
les navigateurs n'étaient tout simplement pas encore prêts dans l'interprétation d'HTML5. Aujourd'hui ils le sont.
Qui plus est, il y avait un bug dans le validateur HTML5 du W3C, réglé maintenant.
Pour autant est-il vraiment nécessaire de conserver la déclaration de l'encodage ? C'est un débat.
Pour ma part il n'y en a plus : je passe par le serveur. Pour les serveurs hébergés correctement ce sont ces lignes qu'on doit ajouter dans l'.htaccess :
AddDefaultCharset utf-8
AddCharset utf-8 .css .jsphp.ini :
default_mimetype = "text/html"
default_charset = "UTF-8"Pour mes CSS aussi j'ai viré @charset "UTF-8"; qui devient totalement inutile.
Et pendant qu'on est dans le serveur poursuivons dans les meta avec les favicons.
Favicons : passez par le serveur
Plutôt que par les meta :
<link rel="icon" type="image/ico" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico" type="image/ico" />.htaccess auquel on rajoute ces règles (pourvu qu'on dispose de la réécriture d'URL) :
AddType image/x-icon .ico
RewriteRule ^favicon.ico$ favicon.ico [NC,L]
RewriteRule ^apple-touch-icon.png$ apple-touch-icon.png [L]Le cas des liens
Que ce soit dans les meta ou après le body il n'est pas nécessaire pour les balises href d'indiquer le protocole http. Le lien qui précède peut donc s'écrire ainsi : //ietf.org/rfc/rfc2396.txt. Et pendant qu'on y est, supprimons le préfixe WWW qui n'est pas nécessaire non plus.
Les balises meta pour le Référencement
Le cas des balises pour la validation de sites
Vous les connaissez : ce sont ces hiéroglyphes, comme celles-ci pour Google :
<meta name="google-site-verification" content="WWwwWW_SarK0ZYCasSeT01PAuvREC0N-XxX82YyY" />Les métadonnées du Dublin Core
J'en ai mis partout pendant un moment sans constater d'intérêt particulier du trio GYM pour ces meta. Poubelle.
Les mots-clés
meta name="keywords" : Passons si vous voulez bien.
Les balises ignorées
Et inutiles donc :
<meta name="identifier-url" content="http://on-air.hiseo.fr" />
<meta name="author" lang="fr" content="Philippe Le Mesle - hiseo.fr" />
<meta name="location" content="France, FRANCE" />
<meta name="copyright" content="Copyright 2009-2010 Hiseo.fr" />Les guillemets droits
Et pour en terminer, fignolons en ôtant les guillemets droits. Toujours ? Non : si un caractère tel qu'une espace, un =, est contenu dans la chaîne il faut alors le ceindre des ". Ce qui donne pour moi :
<title>HTML5/CSS3 et autres geekeries</title>
<link rel=canonical href=http://on-air.hiseo.fr/ />
<base href=http://on-air.hiseo.fr/ />
<meta name=robots content=index,follow,noarchive,nocache />
<link rel=alternate type=application/rss+xml title=RSS href=rss-articles/ />
<link rel=stylesheet href=//assets.hiseo.fr/html5/index.css />
<meta name=viewport content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel=profile href=//purl.org/uF/hCard/1.0/ />
<link rel=profile href=//gmpg.org/xfn/11 />
<meta name=geo.placename content="Garennes sur Eure,Haute Normandie" />
<meta name=geo.position content=48.910468;1.439618 />
<meta name=geo.region content=FR-67 />
<meta name=ICBM content="48.910468, 1.439618" />Le cas de la balise Description
Sur celle-ci je n'ai pas encore d'avis tranché. Tout le monde du SEO s'accorde à dire qu'elle ne sert pas au référencement La balise meta description ne serait en effet considérée par Google que pour l'affichage dans les SERPs.
Et quand elle n'existe pas ? Eh bien on est moins emmerdés. Plus d'alertes Balises META description en double
ou Balises META description courtes
dans les GWT.
Je l'ai viré. Mais il y a peu de temps. Je n'ai donc pas encore de retour complet. Mais comme Google pioche tout seul dans le contenu pour en extraire son snippet pourquoi lui forcer la main avec cette meta ?
Commentaires :
Tu sais que tu as de la chance de ne pas avoir de patron toi !
Le seul petit truc sur lequel j'ai buté un petit peu, c'est la balise meta description.
Je sais que ça a déjà été débattu 1000 fois, mais quand même, j'ai envie d'y remettre mon grain de sel.
Donc, pour ma part, et la terre entière à tout à fait le droit de ne pas être d'accord avec moi :
- Je trouve que le snippet est important dans la SERP.
- Je pense qu'il influence le taux de clic.
- Si c'est important, je préfère le gérer moi même plutôt que de laisser faire une machine.
- N'oublions pas que c'est tout de même un peu bébête une machine.
- Alors je préfère prendre un petit peu de temps pour présenter ma page, que de le laisser au bon vouloir des processeurs de Mr GG.
En parallèle, même si la rapidité d'affichage est prise en compte par GG, je ne suis pas certain que l'on gagne quoi que ce soit en lui faisant calculer un truc plutôt que de lui servir sur un plateau.
Bien évidemment, je suis d'accord sur le fait que le contenu de cette balise ne va pas influencer le positionnement de la page.
Sinon, les autres moteurs ? Quels autres moteurs ? Je n'ai qu'un amour, c'est GG, je suis un gars fidèle, MOI Monsieur !
Sinon, alors, ces vacances ?
@ jpvincent
1/ faudra qu'on se parle du webring ces prochains jours
2/ voui
@ le sieur Sylvain
Tous tes arguments sont valables. Je les partage donc et ne recommanderais pas de faire l'impasse sur cette balise pour le site d'un client. Mais ici je m'en fous.
À part ça, mes mouches n'ont pas tant plu aux truites :-(
et concernant le peu de demandes consultations que j'ai pu recevoir pendant mon absence elles m'ont donné aussitôt l'envie de retourner à la pêche tant elles sont mal construites. Re :-(
@ Bruno : hello Bruno et merci.
Par contre sur la balise description c'est vachement osée !
Pour la méta description, je préfère l'utiliser, car je peux y placer une accroche plus commerciale que le texte utilisé par Google. Et augmenter le taux de clic, c'est bon pour la santé. ;)
Par contre, mettre une balise description ne veut pas dire que Google l'utilisera : des fois oui, des fois non...
NERD ALERT! Ou est le poster de la princess leia! Philippe, il peche la nuit, emmitouflé dans sa cape d'invisibilité d'Elf de niveau 31 et éclairé par une réplique de sabre laser!
Bon et bien je vais en rajouter une couche sur la balise description, voyez! Parce que chez moi Google ne fait QUE 75% des parts de marché et que je l'aime bien moi cette balise description et qu'en plus j'ai eu des expérience qui m'ont prouvé que la balise description pouvaient dans certains cas avoir une petite influence sur les rankings obtenu.
Voila
Non mais tu te rends compte : avec ton titre (Le Juge avec son nouveau blog Referencement en français) j'ai dû
rallonger le champ dans la BD. Tu m'en fais faire du boulot toi !
L'article était dans les tiroirs depuis avril mais j'ai pas pu le publier parce que sur la partie HTML5 j'ai eu un paquet de trucs très très curieux. En fait les moteurs d'impression des navigateurs flottent encore pas mal dans l'interprétation de balises.
Les sommaires c'est bon pour les lecteurs et c'est bon pour les moteurs. Il faut que je m'«ancre» ça dans la tête.
Effectivement Les sommaires ca aide pour les breadcrumbs apparent dans les resultats google et les snippets!
Bien vu
Je vais tester de mon côté.
Merci pour ce partage.
Par contre pour les guillemets ou enlever "http", je ne sais pas si on gagne grand chose à les enlever. On perd surtout un peu de lisibilité...