Note : Ce guide n’est plus pertinent à l’heure actuelle, aussi je vous engage à chercher des articles plus récents sur ce blog. Essayez par exemple de suivre les liens sur les tags, à gauche.
Ce guide est destiné aux utilisateurs de WordPress qui pensent avoir optimisé leur blog - ou qui désirent le faire - mais qui ne connaissent pas bien les règles du référencement, de la sémantique, ou bien des temps d’affichage.
Autant de points que je me propose de traiter dans ce guide. Je prendrais comme cas d’étude le présent blog, car il correspond à l’aboutissement de mes expériences en matière de développement web.
Structure d’une page propre
Commençons par vérifier que notre page (x)html est bien définie.
1. Déclarez le bon doctype.
Utilisez la liste du w3c. Je recommande l’xhtml 1.0 strict :
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Dans la foulée, précisons aussi la balise html :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"></html>
2. Remplissez correctement l’entête (head) de votre page.
Ne gardez que l’indispensable :
-
Le titre principal de la page : title
-
Les 4 link :
-
favicon
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> -
feuille de style .css
<link href="style.css" rel="stylesheet" type="text/css" /> -
fil RSS
<link rel="alternate" type="application/rss+xml" title="fil RSS" href="http://site.com/feed/" /> -
xml-rpc (généré par wordpress)
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://nophysic.com/xmlrpc.php?rsd" />
-
-
les 4 meta :
-
keywords et description, nous reviendrons sur ces deux balises dans le chapitre sur la SEO.
<meta name="keywords" content="mots clés" /> <meta name="description" content="description" />
-
content-type, choisissez l’utf-8 et vous n’aurez jamais de problèmes d’accents et autres horreurs.
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> -
content-language, son intérêt est discuté, cependant je la recommande pour faire les choses bien.
<meta http-equiv="content-language" content="fr-fr" />
-
Travail de la SEO (Search Engine Optimisation)
Lorsque le googlebot visite une page, il cherche à en déterminer le contenu. Pour cela, il cherche les titres de la page, dans un ordre défini par la pertinence du titre, et non par sa taille.
1. La balise title est le titre le plus significatif de la page.
Étant donné que le contenu de cette balise défini la nature de la page, il est important que chaque page/article/rubrique du blog ait un titre différent, qui le définit. De plus, le titre de l’article doit être placé avant le titre du blog.
exemple:
<title>Guide Ultime Pour un Blog Wordpress Efficace | DarkClouds</title>
2. La balise h1 est le second titre le plus important dans une page.
Une erreur classique est de mettre le titre/logo de son blog dans cette balise: on se retrouve alors avec “DarkClouds” comme mot clé privilégié sur tous les articles du blog, or ceux-ci ne parlent quasiment jamais du blog lui-même. On préférera par conséquent mettre le titre de l’article dans cette balise.
3. Les balises h2 et h3 sont souvent inversées.
En partant du même raisonnement que précédemment, il est logique de donner plus d’importance à des sous-titres dans article, qu’aux liens d’une colonne latérale, ou au liens d’un menu.
4. Les balises meta keyword et meta description définissent la nature de la page.
Elles doivent donc avoir un contenu différent et propre à chaque page.
- keywords, contient une liste de mots clés qui pourraient servir à définir votre page. Cette balise est en désuétude.
- description, très importante puisqu’elle correspond au para-texte affiché dans les résultats de recherches Google
Solution : utiliser le plugin All in One SEO Pack
5. Proposer un sitemap xml.
Un sitemap permettra aux moteurs de recherche d’indexer correctement les différentes pages de votre blog.
Solution : utiliser le plugin Google Sitemaps
6. Guider les visiteurs venu de moteurs de recherche.
Ces visiteurs viennent à la recherche d’un certain type de contenu, présentez le leur.
Solution : utiliser le plugin Landing Sites
7. Évitez à tout prix les contenus dupliqués.
Le plugin All in One SEO Pack s’occupe déjà de mettre des rel=”nofollow” sur les pages qui regroupent des liens, telles que les pages d’archives, les catégories, les auteurs, les dates, etc. Pour aller plus loin, on redirigera les liens http://www.site.com/ vers http://site.com/ (ou l’inverse), de façon a ce qu’une page donnée n’ai qu’une seule url.
Solution : utiliser le plugin WWW Redirect
Optimisation des temps d’affichage coté visiteur
Le code source de WordPress permet aux pages d’être générées très rapidement, malgré la complexité des opérations. L’interprétation du php abouti donc rapidement à l’envois au client d’une page html.
C’est à ce stade que nous allons intervenir pour augmenter - parfois de façon spectaculaire - la vitesse d’affichage du blog. Les techniques suivantes sont le fruit du travail d’une équipe de chez Yahoo!, vous pouvez donc les appliquer les yeux fermés, it works.
1. Le code css doit être placé dans une feuille de style externe, avec la balise link.
Pas de @import, pas de feuille de style interne.
2. Le javascript doit être placé le plus bas possible dans le corps de la page.
Si possible, placez le juste avant la balise de fermeture du body. Lorsqu’il est chargé, il stoppe tous les chargements d’images/scripts en parallèle; le mettre en fin de page permet ainsi de gagner jusqu’à plusieurs secondes de temps de chargement !
3. Diminuer le nombre de requêtes http.
Fusionnez les scripts, les feuilles de styles, réduisez le nombre d’images nécessaire pour un même résultat.
exemple: le haut de ce blog - menu compris - n’est constitué que d’une seule image. Il n’utilise qu’une seule feuille de style, et le javascript est agglutiné dans un seul fichier, placé en bas de page.
4. Compressez le code.
- pour le javascript, passez par Packer;
- pour le css, je recommande CSS Optimiser qui est très bien fait, et paramètrable;
- de plus, pensez à utiliser le module de compression zlib d’Apache. Celui-ci gère reconnait le navigateur, et lui compresse les fichiers s’il accepte la compression (tous les navigateurs récents l’acceptent).
5. Compressez les images.
Pas de secret ici, on ouvre PhotoShop et on regarde si on peut baisser la qualité de ses jpg sans perte de qualité notable. Sur ce blog, la plupart des images sont des jpg optimisés en qualité 80%.
Message express à l’auteur