Optimiser son blog wordpress pour le référencement

Publié le 17 décembre 2010 par Mandonnaud

Voici un regroupement d’optimisations que j’ai réalisées sur un blog installé sous wordpress. Le but étant d’améliorer le référencement naturel, la vitesse d’affichage des pages et l’expérience utilisateur des visiteurs. J’ai reparti les optimisations en trois catégories les extensions, les configurations et les ajouts au thème.

Pour information le blog référent que j’ai mal mené est www.laure-illustrations.com le ptit blog d’une illustratrice jeunesse : Laure Phelipon. Avec une moyenne de 20 messages et 2500 visiteurs par mois, il est présent dans les premières places sur google pour la recherche « illustratrice »

Le choix des extensions wordpress (plugin)

J’ai essayé d’en limiter le nombre au maximum, en gardant uniquement celles qui ne pouvaient pas être mises en dure dans le thème, car les plugins c’est bien mais trop c’est trop.

Akismet, protection contre le spam dans les commentaires

(A-kiz-mit) n. Probablement la meilleure façon dans le monde pour vous protéger du spam web.

Voila comment se définit ce service, présent à l’installation de wordpress depuis pas mal de temps, il vous évitera une quantité de spams coté commentaire. Très utile, 300 spams évités en six mois sur mon blog référent, surtout que certains vicieux robots s’amusent à copier coller des commentaires (en rajoutant juste un lien qui va bien) pour tromper votre vigilance.

Facile à configurer, il suffit de demander une clef sur le site d’akismet et de la rentrer dans le menu extensions puis configuration akismet.

Télécharger Akismet

All in One SEO Pack : optimiser votre référencement (étape 1)

En terme de référencement parmi les choses qui comptent, il y a le titre de la page (balise title) et la méta description, elles doivent être unique pour chaque page et bien réfléchi.
Le titre doit comporter les principaux termes abordés dans le post et surtout il sera, sur les moteurs de recherche, la phrase d’accroche pour que vos futurs visiteurs viennent vous voir !
La description, de moins en moins apparente dans les moteurs, permet d’en dire un peu plus sur le contenu de l’article.
Dans les grandes lignes voila se que permet de renseigner All in One SEO pack.

Télécharger All in One SEO Pack

Google XML Sitemaps : Plan du site pour les robots et donc le référencement

Je n’ai pas trouvé (encore) de solution sans passer par un plugin pour avoir un sitemap complet de tous les billets et pages du site (catégorie, archive). Google XML sitemaps réalise ça très bien en proposant diverses options comme la possibilité de donner des « notes » d’importance à chaque page ou de rajouter des pages en dur manuellement. La page de configuration est simple mais néanmoins complète. N’hésitez pas à vous inscrire sur Google Webmaster pour voir comment Google digère votre sitemaps.

Télécharger Google XML Sitemaps

Subcribe to comments : Proposer un abonnement au commentaire à vos visiteurs

Un outil qui m’a semblé indispensable est de permettre au visiteur de suivre les commentaires, ça leur permet de suivre une conversation sur le sujet ou de ne pas louper la réponse à leur question. Sucribe to comments c’est donc donner une raison à vos visiteurs de revenir et leur proposer les outils pour le faire facilement. Subcribe to comments permet, en plus, à chaque visiteur de gérer ces abonnements.

Coté configuration, vous devez pour les blogs francophones, traduire les trois phrases utilisées par le plugin

Télécharger Subcribe to comments

WP – PageNavi : Ajouter une pagination avec blog

Le plugin ajoute en bas de la page d’accueil et des pages d’archives une pagination.
Je l’ai vraiment apprécié sur différent site : quand on arrive sur un nouveau blog, offrir la possibilité de pouvoir fouiner dans les précédents posts facilement, incite vos visiteurs à voir votre contenu et facilite la recherche de message récent.

Côté configuration quelques petits réglages bienvenus et une possibilité très bien vue de ne pas charger de CSS complémentaire.

Télécharger WP – PageNavi

WP Super Cache : Mettre en cache vos pages pour optimiser l’affichage

Un blog comme WordPress demande pas mal de calcul pour le serveur, avoir un bon cache permet un gain de temps au niveau de l’affichage et de faire souffler vos serveur. Grossomodo WP Super Cache sauvegarde une version html de chaque  page.  Sachant que google a annoncé utiliser le temps d’affichage d’une page dans son algorithme de recherche, le cache fait aussi parti de la démarche d’optimisation pour le référencement.

Télécharger WP Super Cache

Yet Another Related Posts Plugin : Lier vos articles

Une règle pour un site web est de ne jamais amener votre visiteur devant un mur (une page qui ne propose pas d’aller voir autre chose) sinon vous perdez vos visiteurs. YARPP permet de palier au problème en vous économisant pas mal de temps. Il sélectionne d’autres articles sur le même sujet et les affiches à la suite de vos articles.  Ainsi vos visiteurs qui viennent de lire le billet sur un sujet qui les intéressent pourrons continuer ça visite sur le même thème.

Le plugin est très complet : il permet de gérer les endroits où vous souhaitez afficher les liens, de modifier l’affichage et même de configurer l’algorithme de sélection d’article !

Configuration de wordpress

Des sous domaines pour améliorer la vitesse d’affichage

Une première configuration à apporter est la création de deux sous domaine, l’un hébergera vos médias, l’autre votre fichier css et JavaScript. Les navigateurs limitent le nombre de fichier qu’il télécharge en même temps par sous domaine/domaine.  Diffuser vos sources en plusieurs sous domaine permettra au visiteur de charger en parallèle plusieurs contenus et donc un gain de temps (ultra conseillé par google).

La création et configuration d’un sous domaine se fait depuis le site de votre hébergeur.

Pour mon test j’ai fait pointer un sous domaine média vers le dossier wp-content/uploads/ en configurant WordPress pour utiliser cet url pour le fichier upload et un sous domaine source vers le dossier contenant mon css et le js.

Pour l’instant je n’ai pas trouvé la bonne parade pour que WordPress utilise la bonne url pour mes images, j’ai donc remplacé les urls avec une fonction maison dans mon fichier fonction.php (j’en parlerai plus tard)

Regrouper et compresser vos fichiers css et js

Dans les extensions que j’ai détaillées ci dessus, WP PageNavi ajoute son propre CSS mais une option permet de le désactiver, ce que je serai trop vous conseiller et de mettre le contenu de se css dans votre propre fichier.

En effet moins il y aura de fichier css mieux ça sera car le chargement d’un grand css est plus rapide que celui de quatre css.

L’optimisation maximum consiste aussi à compresser votre css, comprendre : utiliser un fichier css sans espace, sans retour à la ligne, en enlevant le dernier point virgule.

Bien sur avoir un fichier CSS comme ça serait complètement contre productif, il existe donc des scripts qui permettent de faire cette manipulation à votre place pour que vous gardiez vos css propre.

Pour cette étape je vous conseille l’article sur le site seebz.net qui vous propose deux très bons fichiers php (un pour le CSS et l’autre pour le JS) avec la possibilité de regrouper plusieurs fichiers directement.

Cela dit cette fonction ne fait pas de miracle, n’hésitez pas à optimiser avant vos css, je ne rentrerai pas dans les détails ici, juste un exemple #sideBar .box est plus lent que juste .boxSideBar

Il va de soit que ce que vient de dire pour le css marche pour le js, je n’ai personnellement pas utilisé l’équivalent pour compresser le JS, j’ai téléchargé les scripts externe en version compressés que j’ai mi bout à bout dans le même fichier en rajoutant mes appels maison à la fin.

Ajouter des fonctionnalités directement dans le thèmes (sans plugin)

Quelque base, je vous conseil d’utiliser un fichier loop.php pour votre thème. Le but est de regrouper tous les affichages d’articles dans un seul fichier php, je vous donne pour exemple mon fichier loop (cliquer pour voir le code).

Avoir une seule page qui affiche le billet en entier

Il y a deux avantages à ne pas afficher le contenu complet de vos billets sur la page d’accueil.

Le premier c’est que cela permet un suivi, vous allez pouvoir connaitre avec précision le nombre de personne qui ont regardé votre article.

Le second c’est le référencement : vous allez éviter de dupliquer votre contenu dans plusieurs pages de votre site ! Une duplication divisera d’autant votre efficacité.

Pour se faire je conseille l’utilisation de la balise more pour séparer l’accroche du contenu.

PS : penser à définir une belle url pour cette page, avec des mots importants pour votre référencement et qui ne soit pas forcement identique avec le titre, profitez-en pour utiliser des synonymes.

Afficher le poste avec un lien meilleur que « voir la suite »

En terme de référencement les liens on aussi une place très importante, le texte qui compose le lien vers votre page est censé la définir. On est alors d’accord que « voir » « suite » ne vas pas définir votre article. Pour se faire j’ai utilisé les informations complémentaire de WordPress, pas vraiment adapté pour cette utilisation elle reste quand même la façon la plus simple au moment de la rédaction.

Coté PHP cliquer pour voir la rustine

Améliorer l’affichage du contenu et les retours à la ligne

Après avoir essayé plein d’extensions dont aucune n’a su me satisfaire, j’ai décidé de faire ma propre version qui va réaliser de jolie balise p et uniquement aux endroits adéquate. Mais surtout qui me permet de contrôler l’affiche finale.

J’ai aussi rajouté la « balise » [BR] qui permet de forcer un retour à la ligne.

Voir l’extrait du code

RSS avec feedburner pour suivre vos abonnements et en proposer par mail

Je vous conseille pour votre file RSS d’utiliser FeedBurner afin de pouvoir suivre le nombre de personne qui l’utilise. De plus se service de Google propose aussi de gérer un abonnement par mail à vos visiteurs en ajoutant juste un formulaire d’inscription dans le thème.

J’ai aussi choisi de ne pas distribuer mon post en entier dans le file RSS de mon site témoin car je l’ai inscrit sur pas mal de site qui utilise mon flux RSS (Facebook, Wikio …) se qui permet une visibilité accru mais qui à une tendance à dupliquer votre contenu est donc votre site perd en crédibilité par rapport au moteur de recherche et même à vous faire black lister de Google. Du coup j’ai rajouté une fonction au fichier fonction.php afin de mettre dans le fil rss uniquement le résumé de mon article avec deux lien, une vers la suite de l’article et l’autre vers l’accueil du blog.

Voir le code à mettre dans fonction.php

Facebook, Twitter mais avec un affichage temporisé en JavaScript

Élément presque incontournable les réseaux sociaux proposent tous leurs api magiques, permettant à leurs utilisateurs de facilement partager votre page avec leurs amis. Très utiles, mais à vous de bien étudier les réseaux indispensables pour votre blog et ceux qui ne le sont pas. Les quelques apis que j’ai essayées sont facilement intégrable en dur dans le thème mais en partant du principe qu’elles multiplient le nombre de fichier externe au site (js, css, img) j’ai réfléchi une façon de les afficher uniquement quand les utilisateurs les voient. Sur mon blog référent, l’accueil affiche une dizaine d’articles, grâce au code suivant Facebook se charge uniquement quand l’utilisateur arrive à sa hauteur.

Coté HTML dans la page loop, je génère uniquement l’url de Facebook.

Coté JavaScript, je lance l’affichage au moment voulu.

Yoxview pour afficher vos images en grand

Les lightbox sont devenus incontournable pour profiter des images en version « haute définition », parmi l’énorme catalogue d’application disponible mon choix c’est arrêté sur Yoxview avec une jolie finition. L’arrivée se fait avec un zoom qui part de la miniature, la transition entre plusieurs images se fait un jolie recadrage animé.

Télécharger Yoxview

Coté Javascript, le code de lancement

Google annalytique

Très rapide à faire mais à ne pas oublier, à la fin de votre fichier JavaScript copier le code de google analytique pour avoir accès à vos statistiques détaillées, utile pour voir l’impacte des dizaines d’heures d’optimisations et des centaines d’heures de rédactions.

Google annalytique

L’organisation HTML pour optimiser le référencement

La balise H1 dans chaque page est très important, l’erreur fréquente avec l’utilisation de WordPress est d’avoir le nom du blog toujours en h1 sur toutes les pages. Il vaut mieux garder cette mise en page uniquement pour la page d’accueil ! Les pages archives devraient avoir en h1 le nom de la catégorie, de la date, de l’auteurle résultat des recherches devraient avoir les mots rechercher et la page article « le titre de l’article ».
Éviter en titre de la page d’accueil, « le blog de X » mais plutôt « le blog qui vous parle des derniers lettre de l’alphabé »

Article en rapport :