Optimiser son blog wordpress pour le référencement

WordpressVoici 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. Au mois octobre 2013, le blog était à 5 300 visiteurs unique par mois au début 2013 et toujours autant bien placé dans les moteurs de recherche. Suite à heureux événement, l’activité est moins soutenu donc diminution des visites et du placement.

Chaque étape est expliqué en vidéo (création encours 5 vidéos sur 14), tout est expliqué et détaillé (installation, configuration et utilisation)

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, leurs utilisations ralentissent l’affichage de la page et la vitesse est un critère important du référencement.

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.

Spam ennemie du référencementVoila 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, 552 spams évités en deux semaines (octobre 2013) 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.

Le but du spam ? améliorer leur référencement en plaçant leur lien sur le plus de site possible et par la même pourrir le votre.

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

Explication en vidéo du plugin Akismet

WordPress SEO by Yoast : l’outils complet pour le travailler le référencement

Titre & métas

Google Yahoo Bing : les moteurs de rechercheEn 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.

Sitemaps XML : 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). Mais WordPress SEO réalise ça très bien en proposant diverses options pour choisir le contenu présent dans le sitemap

Mais aussi réseaux sociaux, analyse et autre fonctionnalité

WordPress SEO permet également de :

  • compléter les métas (donné caché) avec des informations utile pour les réseaux sociaux,
  • proposer des pistes pour optimiser le contenu pour le référencement d’un terme,
  • connecter facilement les outils de webmaster des grands moteurs de recherche,

Voila dans les grandes lignes se que permet de renseigner WordPress SEO par Yoast

Vidéo sur l’installation et l’utilisation du WordPress SEO

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

Les commentaires : un contenu mise à jourUn 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.

En favorisant les commentaires, vous amenez vos visiteurs à poser des questions ou à débattre et donc à enrichir le contenu et à le mettre à jour régulièrement. Et une page actualisé souvent c’est bon pour votre référencement.

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

Télécharger Subcribe to comments

Configuration et explication en vidéo

WP – PageNavi : Ajouter une pagination avec blog

PaginationLe 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. Il faudra donc copier le contenu CSS du plugin pour l’intégrer au votre.

Télécharger WP – PageNavi

Explication du choix et mise en place en vidéo

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

Je conseil de finir par l’installation de cette extension.

Yet Another Related Posts Plugin : Lier vos articles

Le plein de lien pour facilité le référencementUne 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 et de modifier l’affichage.

L’extension Yet Another Related Posts Plugin

Installation et explication en vidéo de l’extension

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

La duplication un ennemis du référencementIl 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.

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

Il faut comprendre que les titres (H1 H2 …) doivent être comme un sommaire sur le contenu d’une page, le premier étant le titre du contenu global puis les titres de second niveau découpant l’article en x partie et les titres h3 découpant cette partie en x bout. Le visiteur choisi de lire en fonction des titres, lui permettant d’aller plus vite vers se qu l’intéresse.

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é ».

Il faut donc modifier le thémes pour qu’il respecte cette hierachie. Toutes les étapes en vidéo (le 23 octobre)

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

Feedburner pour les RSS

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é.

[MAJ octobre 2013] Le plugin jquery Yoxview n’est plus à jour et ne fonctionne plus avec les versions récentes de Jquery et certain navigateur !

Télécharger Yoxview

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

Configuration de wordpress

 

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

Des sous domaines pour une page rapide

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 (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.

Il faut utiliser la fonction suivante (dans le fichier functions.php de votre théme) pour déclarer l’url

update_option('upload_url_path','http://medias.le-pret-a-surfer.com/');

Regrouper et compresser vos fichiers css et js

Compression des fichiers CSS et JSDans 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.

 

Explication en vidéo

Rédaction

Étiquettes : , ,

3 Comments

Commenter

XHTML: You can use these tags:' <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © 2017 Le pret a surfer All rights reserved.
Desk Mess Mirrored v1.4.4.1 theme from BuyNowShop.com.