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.
Facile à configurer, il suffit de demander une clef sur le site d’akismet et de la rentrer dans le menu extensions puis configuration akismet.
All in One SEO Pack : optimiser votre référencement (étape 1)
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
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
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.
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.
Yet Another Related Posts Plugin : Lier vos articles
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
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
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
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
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
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
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.
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’auteur … le 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 :
Jeu de briques
Snake
Pacman
Bubble