Référencer son blog WordPress

<ul »>

  • 1 — Corriger les défauts de base pour améliorer l’optimisation
  • 2 — Optimiser son thème WordPress

Comme le disait Niou142 en commentaire :

on regarde le thème :ok il est joli. Mais finalement qui regarde le code source ?

Moi… parce que le code source c’est essentiel pour le référencement, et les défauts les plus courants sont parfois extrêmement pénibles à corriger (surtout quand il s’agit d’un thème à options avec des fonctions imbriquées, et que vous devez partir à la pêche dans quarante fichiers pour corriger un marquage défectueux).

Des structures sémantiques incorrectes

C’est le défaut le plus courant, celui que j’appelle la « titrite aigüe », qui est le plus souvent de la flemme (enfin je ne sais pas… je ne comprends pas, j’avoue ce qui peux passer par la tête de certains créateurs de thèmes).

Bref, une structure sémantique correcte, avant Html5, c’est un H1, un morceau de texte, des H2, des bouts de textes, éventuellement des H3, et tout ça à peu près équilibré.

La seule chose que HTML5 change profondément, c’est la possibilité de mettre plusieurs H1 sur une page. Néanmoins, personnellement, je reste extrêmement circonspecte devant le surcroit de complexité que cela apporte, y compris au niveau de la structure sémantique, et je m’en tiens encore à une bonne vieille pyramide de titres H1, H2, H3 qui structure le contenu unique et pertinent de la page (et pas de la sidebar).

Pour le choix d’un thème, mon outil préféré est donc l’extension Web Developper pour Firefox, qui permet d’afficher la hiérarchie des titres d’une page… et de hurler d’horreur en voyant le nombre de thèmes qui commencent par un H3 pour le slogan, par exemple, parce qu’ils ont compris que le H1 doit être unique, donc on ne met pas de H-​​quelque chose sur le titre du blog, même sur la page d’accueil, et on se rattrape sur les éléments de l’en tête.

Ou les thèmes qui mettent le titre des articles en H2, l’extrait en H3 et le « lire la suite » en H5 ou H6, histoire de…

Comment évaluer si le thème va être facile à modifier ?

Il faut aller voir le fichier CSS. Si les formatages portent sur les classes et les ids, il sera très facile de remplacer rapidement tous les titres superflus par des divs, des p ou ce qui « fait sens » selon la page.

En revanche si le formatage est aussi attaché au niveau de titre, là il va falloir rajouter des classes… et le travail commence à être important.

Concrètement ?

Si tout le formatage du <h1 id= »branding »> est lié à l’id, <div= »branding »> aura exactement la même apparence.

Si, paradoxalement, le css est bien fait et que la structure sémantique est pourrie parce que le concepteur du thème à bien utilisé les cascades », il y a sans doute une partie du formatage qui vient des différentes propriétés du H1, il va falloir :

  • créer une classe supplémentaire (typiquement chez moi rph1 pour « remplace h1 ») et lui attribuer tous les éléments utiles du H1
  • modifier le marquage en <div id= »branding » class= »rph1″>
  • ou bien remettre toutes les propriétés utiles sur l’id branding

Ce qui peut faire pas mal de boulot, surtout dans les thèmes complexes qui répartissent les css sur plusieurs fichiers, ou utilisent des skins…

L’oubli des attributs alt

Eh oui, ça peut paraître la base, mais les attributs alts sont parfois oubliés, ou les titles pour les liens (qui ne servent pas au référencement, mais à l’accessibilité).

Cela vient essentiellement des thèmes qui oublient d’utiliser the_​post_​thumbnail en s’accrochant à leur vieux Timthumb (malgré tous les défauts de ce script). Si toutes les fonctions WordPress génèrent bien le alt des images et le title des liens, ce n’est pas le cas des thèmes qui ne les utilisent pas.

(Est-​​ce que j’ai déjà dit qu’il ne fallait pas réécrire les fonctions WordPress ? )

Là encore, Web Developper vous permet de voir en un clin d’oeil si les alts sont bien renseignés. En cas de alt « vides » il est plus difficile de savoir, est-​​ce que les données du thème sont incomplètes, ou est-​​ce que le développeur a mal optimisé ?

L’infinite scroll

J’ai des trucs auxquels je suis profondément allergique. L’infinite scroll en fait partie, et j’ai donc décidé de le mettre dans la liste des défauts d’optimisation rédhibitoires.

En tant qu’utilisateur, je n’ai aucune idée de combien de temps je vais devoir scroller pour arriver « au bout », ou « à ce que je cherche, ah oui le truc qu’il a publié il y a un mois ».

(Vous remarquerez d’ailleurs que souvent ce sont des thèmes hyper minimalistes, sur lesquels il n’y a pas de sidebar, voir pas de menu complet, donc pas d’accès direct à une archive de catégorie… eh les mecs, le rouleau de papyrus, ça date d’il y a plus de 4.000 ans, et depuis on a inventé le livre et la pagination…)

En tant que « Google », je n’en sais rien, mais ces thèmes sont généralement plus long à charger que les thèmes normaux, et je doute qu’ils soient aussi bien vus qu’un bon vieux site normal. (D’ailleurs si quelqu’un a des infos…)

Donc comment choisir un thème bien optimisé ?

Installer WebDevelopper et vérifier ces points. On peut y rajouter un petit coup de YSlow, mais la vitesse de chargement est difficile à estimer dans un environnement de démonstration.

Poser des questions au développeur genre « y a t-​​il des répertoires qui doivent être en chmod 777 pour que le thème fonctionne ? » (non ce n’est pas du ref, mais ça débusque les Timthumb et autres scripts dangereux. Si hack is baad, 777 is apocalypse).

Et dernière chose, ne pas oublier que les thèmes sont présentés avec de super belles images de démonstration. Il existe une fonction très utile dans WebDevelopper, dans le menu images, c’est la désactivation. Cela permet de bien prendre conscience de la grille du thème, et de ne pas se laisser séduire par de très belles photos, sous licence CC ou vendues par Fotolia, généralement, et qui ne seront pas les vôtres !

WebDevelopper pour Firefox permet de désactiver les images

(La palette utilisée dans la vignette de cet article est une icone sous licence « Linkware » libre d’utilisation sous réserve d’un lien vers HADezign.com )

Que pensez-vous de cet article ?
Super0
Bien0
Bof0
Nul0
Poster un commentaire