Optimiser son thème WordPress

Optimiser la structure de son thème Wordpress

Marie-Aude

J'ai fait de la compta, de la finance, du juridique, j'ai été chef de projet SAP, j'ai fait de la photo, des voyages. Depuis 2007, je fais avec amour des sites webs pour les utilisateurs, qui se référencent bien et je vous aide à acquérir du trafic pertinent.

Vous aimerez aussi...

49 réponses

  1. Arnaud dit :

    Très bon article !

    Attention aussi à tester le thème en question sur plusieurs navigateurs (surtout pour ie), ça évite d’avoir de mauvaises surprises ensuite et ça peut-être gage de qualité.

  2. Cristophe dit :

    Alors que je découvrais un site, que je ne cherchais rien à part me laisser porter par les découvertes, j’ai aimé l’infinite scroll. Je crois que je suis ainsi remonté pluss en arrière dans le temps que si j’avais dû cliquer plusieurs fois sur “page précédente” ou sur “older post”. Effectivement, ce n’est pas fait pour aller rapidement à quelque chose de précis, quand on a quelque chose de précis en tête… Ne peut-on pas combiner infinite scroll et des accès pluss direct en sidebar ?

  3. fred dit :

    J’ai un client qui va refaire son site suite à mes préconisations, par quelqu’un qui manipule wordpress mais sans réelles compétences de développement. J’avoue que je m’inquiète un peu en lisant les blogs de pro à droite et à gauche d’autant plus que je n’ai jamais travaillé sur wordpress moi-même. Merci donc pour ces posts. Et il y a tout l’aspect responsive design / html5 …

  4. Chob dit :

    Merci pour le tuyau sur les balises H1 même si la lourdeur du travail que ça représente fait peur…
    Je ne comprends pas ta réticence sur l’infinite scrolling, qui est la navigation par défaut de Facebook, Google+, Twitter ou Pinterest. Ce n’est certainement pas adapté à tous les sites, mais pour les blogs ou sites d’actus, voire certains sites e-commerce, je trouve ça largement plus “user-friendly” que les pages numérotées (qui me dit que je vais trouver ce que je cherche sur la page 2 ou la page 3 ?). C’est encore plus vrai lors d’une navigation depuis un smartphone. Pourquoi cette allergie ? ;-)

  5. Marie-Aude dit :

    Sans doute parce que je n’aime pas beaucoup ça sur Facebook, G+ ou Twitter ^^

    Mais chacun ses goûts.

    En revanche ma réserve interrogative vis à vis de l’aspect SEO reste.

  6. Yann dit :

    Bonjour,

    TimThumb, une belle faille de sécurité qui a causé du tord à beaucoup de WordPress !

    Faire du SEO sur les thèmes WP est une sinécure, et on en vient bien vite à se contenter des plugins. Et pourtant j’utilise Firebug et la web dev toolbar au quotidien !

    Quelques membres de la communauté francophone s’y sont collé pou nous si je ne m’abuse : Noviseo qui propose un thème “maison” et une optimisation du thème natif “twentytwelve”.

    Et aussi Sylvain d’Axe-Net qui livre son thème optimisé sur une base “twentyten” je crois.

  7. 4h18 dit :

    Ah les balisages… l’importance d’un thème bien codé.
    Je me suis fait avoir en début d’année avec le thème Builder. Une plaie ! Il m’a foutu en l’air une partie de mon ref nat’ !

    En cause ? Une structure sémantique indigne. Et paf !
    Donc, machine arrière, retour à mon ancien thème, et remise en place des modifications qui vont bien.

    Malheureusement, il est impossible d’avoir une idée fine de la qualité ou non de tel ou tel thème. Pour savoir, faut passer à la caisse. C’est bien là le souci :/

  8. Rodrigue dit :

    Je ne connaissais pas Web Developper mais la structure des pages, je m’y met doucement, pour optimiser le thème au maximum.

    Juste une précision, si vous faites des modif à votre thème, n’oubliez pas de créer un Child thème pour éviter de perdre des heures de travail en une mise à jour ^^

    Merci Marie Aude, après l’article chez Htitipi, un second point bien de rigueur pour optimiser mon site :)

  9. Greg dit :

    Je suis globalement d’accord avec l’article (même si j’emploie des h3 dans mes sidebars ;)), un peu plus nuancé concernant les alt vides et les title absents.

    Si par exemple je mets un lien vers mon profil avec mon avatar et mon prénom, où serait le soucis si le alt de l’avatar est vide ? Si l’on observe le lien à la façon “bot” ou d’un point de vue accessibilité, on a alors “Greg”. Maintenant si je mets le alt on aura “GregGreg”. Contreproductif donc, l’image n’apporte rien à la compréhension du lien.
    Avec ce même exemple, le title sur le lien peut en effet être utile : “Voir tous les articles de Greg”. Mais si le texte du lien est justement “Voir tous les articles de Greg”, un attribut title ne servirait à rien, le lien étant suffisamment explicite.

    Maintenant je dis ça mais je suis tout de même un adepte des title et aria-label ;)

    Merci pour l’article :)

    PS : perso je n’utilise pas WebDevelopper, je lui préfère le couple Firebug + HeadingsMap (qui m’indique d’ailleurs en rouge que “Participez à la discussion :” est un h6, sans h5 avant =D, et… Oh ! Des h3 dans la sidebar !) ;)

  10. Nicolas dit :

    Que d’honneur : être cité par la grande Marie Aude :).

    Comment faire avec Web Developper pour voir la hiérarchisation des Hn ?

    Il y a aussi une chose importante avec certains sites qui proposent des themes payants (themeforest pour ne pas les citer ^^). On ne peut pas voir le code source dans leur démo. J’en ai acheté un pour mon blog (cf lien de mon message) et c’est une catastrophe, j’ai du faire énormément de modifications :(.

  11. Li-An dit :

    Je pense que le infinite scroll est intéressant côté visiteur pour un site d’images (Tumblr en propose beaucoup) par exemple. Mais je ne l’utiliserai pas sur mon blog principal où la navigation est primordiale.

  12. Karyn dit :

    Encore un excellent article,merci pour toutes ces bonnes pratiques. y en a des astuces que je ne connaissais pas. J’ai appris pas mal de choses que je vais mettre en place rapidement, ce que je cherchais pour optimiser le thème de mon site. Amicalement

  13. Matthieu dit :

    J’avoue que c’est une vraie missions d’optimiser un thème, ça fait pas longtemps que je suis dans le bain, mais quand j’ai vu le bazar existant dans les thèmes, je me suis dit que j’allais tenter d’en développer un.

    Et justement, j’ai une question qui n’est pas souvent évoqué en terme de balisage.

    Que penses tu des balises type etc… ? Quand je me ballade sur des sites je ne les vois quasiment jamais, mais plutôt du

    D’ailleurs, je vois que ici c’est la 2eme solution qui est utilisé :).

    Matthieu

  14. Mr. Buzz dit :

    L’optimisation… Tellement chiant. Ca doit bien faire 2 mois que je boss sur le thème de remplacement de mon blog, et j’ai l’impression de tourner en rond. Quand le thème marche parfaitement, on cherche à l’optimiser, et là patatra. Chaque modification, nécessite d’en faire deux autres et ainsi de suite. J’espère que le travail fournis vaudra le coup. :s

  15. Sam dit :

    Article primordial, à diffuser à tous les acquéreurs de thème wordpress en puissance!
    Une remarque cependant sur Web Developer, je ne sais pas si c’est un bug inhérent à la version Chrome, mais il ne m’affiche plus les artibuts des Hn, il les entoure certes, mais ne dit plus si c’est un H1 ou un H5, ce qui est assez pénible, tu vois une solution à ceci?

  16. Keryan dit :

    Très bon article qui met les points sur des aspects importants à prendre en compte lors de l’acquisition d’un thème. J’ai acheté le thème Avada en novembre et ce n’est que maintenant que je l’utilise pour un nouveau site Web. Qu’en penses-tu? Je me suis fié aux nombreux commentaires positifs pour l’acheter. Il m’a l’air bien mieux mis au point que beaucoup d’autres.

  17. Romain dit :

    J’aime bien la petite référence au thème WordPress qu’il faut modifier à plusieurs endroits pour changer juste une petite chose à l’écran, je dis ça car j’en ai subit les frais il n’y a pas si longtemps. C’est là qu’on se dit qu’il vaut mieux partir d’un thème bien codé (la série des “Twenty” par exemple) et modifier le design plutôt que de modifier le code d’un thème élégant…

    Sinon, je suis assez d’accord sur le fait que le code est très important pour le SEO mais c’est peut être parce que je suis plus technicien que marketeux.

    Pas mal la page qui commence par un , je n’ai pas encore vu ce genre de thème avec WordPress mais j’avoue que c’est une perle. Malheureusement, la sémantique web n’est pas connue de tous.

    Bref, finalement, il vaut mieux prendre le temps de créer son propre thème.

  18. Jerome dit :

    Si j’ai un autre conseil à donner, c’est d’éviter les thèmes tout fait super tendance à la ThemeForest. Ils sont très beaux mais super lourd. Le code source est souvent complexe et ça prends beaucoup de temps de tout nettoyer.

  19. Keryan dit :

    Bon, disons que de nombreux thèmes du type ThemeForest sont lourds. Alors, quels seraient de bons exemples de thèmes qu’il faudrait privilégier ? Thesis ? Si vous avez de bons conseils sur ce sujet, je suis preneur.

  20. jean dit :

    en quoi le html 5 permet d’ajouter plusieurs balises h1 ?
    ca mérite un article ca, je ne comprends pas …

    La logique de structuration d’une page veut que l’on laisse 1 seule h1 ?
    Les spec de html5 prendrait elle les notions de sections en compte ?
    ca serait cool pour les sites single page …

    mais je n’ai rien vu passer a ce sujet, merci de m’éclairer, vu la galère pour les sites single page !

    Jean

  21. David dit :

    Merci article interessant. Je manipule joomla mais alors wordpress j’ai du mal. Plutôt curieux car je crois joomla est plus compliqué. Petite question qu’elle plugin est-il important de placer pour sécuriser son blog wordpress car les mien ne dure pas avant d’être hacker.

  22. Vince dit :

    Merci beaucoup pour cet article, et bien je crois que je vais devoir m’atteler à quelques optimisations sur mon thème. Et merci pour le plugin WebDevelloper, je ne connaissais pas, il va m’être bien utile !

  23. Edo dit :

    J’ai eu le malheur d’installer un thème pagelines contenant plus de 300 fichiers, un vrai bonheur quand on cherche où il faut faire une modif !

    @jean : je crois que le html5 peut avoir plusieurs h1car il y a de nouvelles balises et on peut mettre 1 h1 par section…

  24. Keryan dit :

    Il est en effet possible d’avoir plusieurs balises H1 en HTML5 qui la considère plus comme étant un titre de section que le titre de la page. Du point de vue SEO, les échos semblent favorables à son utilisation, bien sûr sans en abuser. Cependant, cette multiple utilisation ne va pas donner une image claire du sujet dont la page traite, mais bon, c’est mon humble opinion.

  25. David dit :

    Pour ma boîte j’utilise le thème responsive. Relativement propre mais aussi un poil lourd (css de 2600 lignes) et contraignant, par contre rien à dire niveau SEO. A titre perso pas de cms, c’est du tout codé à la main, j’aime bien maîtriser la chaîne de bout en bout^^.

  26. Micki dit :

    Attention aux thèmes gratuits… j’ai eu un retour d’expérience comme quoi le code d’un thème incluait un “noindex” à toutes les pages du blog. Moral de l’histoire : soulevez toujours le capot pour voir la mécanique ! ^^

  27. ouistiti dit :

    C’est tout le contraire, je n’ai jamais eu de problème avec des thèmes gratuits trouvés sur le web. Par contre en ce moment je fait une très mauvaise expérience avec un thème payant. Tout dépend de l’expérience vécu avec les thèmes. Après dire qu’on choisit un thème parce qu’il est joli, non pas forcément, je préfère nettement le personnalisé le plus possible et être contente de mon travail et d’y avoir contribuer (en général c’est mon taf :) ).

    Le langage HTML et CSS3 n’est pas trop compliqué à modifier si il y une erreur, le php c’est une autre histoire et impossible de soulever le capot avant d’avoir acheter le thème. Dilemme ….

  28. Nicolas dit :

    Est-ce que par hasard il existe une liste de thèmes fiables, plutôt simples, dont les fondations permettent de construire quelque chose de solide sans avoir les mauvaises surprises mentionnées dans ce post?

    Beaucoup de thèmes sont surchargés d’options et contiennent donc potentiellement des brèches… Pour quelqu’un qui ne maitrise pas php super bien ça devient chronophage de choisir le ‘thème idéal’.

  29. marc dit :

    haha j’ai bien aimé le coup de la “titrite aiguë” c’est vrai que pas mal de webmasters abusent des balises titles pour améliorer leur referencement onsite, mais bon attention à trop d’optimisation car google fait la chasse à l’over optimization on site :/

    pour des bon themes optimisés et surs, perso j’utilise themeforest.

  30. tery12 dit :

    Assez astucieux comme conseils. Le changement de thème est une opération très délicate. Je ne savais pas également qu’avec Html 5 on peut mettre plusieurs balises H1. Merci pour le tuyau.

  31. Ratus13 dit :

    Article très intéressant ! Je ne sais pas si je serais techniquement au point mais c’est sûr que je vais aller jeter une coup d’oeil ! Merci.

  32. Jeanfrancois dit :

    WebDevelopper est bien mais j’utilise aussi Firebug qui apporte quelque fonctionnalités supplémentaires très intéressantes. Mais bon, cque j’en dis…
    Je retiendrai de ton article ta clef d’évaluation de thème difficile à modifier. Merci!

  33. Cristophe dit :

    Oh oui ton article est génial ! Cliquez sur mon lien, c’est bien aussi !

    Blague à part, je reviens sur ce que j’ai dit le 9 avril à 12h33 à propos de l’infinite scroll. Quand je l’ai découvert, j’ai trouvé ça pas mal, intéressante cette (pour moi) nouvelle façon de découvrir un site, ça change… Mais maintenant que j’ai vu plusieurs infinite scroll, passée l’attrait de la nouveauté, je me suis lassé.

  34. Keryan dit :

    Personnellement, je n’utiliserais l’infinite scroll que pour les pages contenant uniquement (ou en grande majorité) des images, comme on peut le voir sur Google Images. Cela permettrait en effet de limiter le temps de chargement de la page. De plus, il est plus facile de retrouver une image sur une page kilométrique (suite à plusieurs infinite scrolls) que du texte. Voilà pourquoi cette option m’embête parfois sur Facebook.

  35. Laurent dit :

    A noter que j’ai épluché plusieurs thèmes Woothemes et j’ai été très surpris de voir des différences importantes entre eux, par exemple en terme de balisage.

    Alors évidemment les créateurs ne sont pas à chaque fois les mêmes, mais j’aurais pensé qu’il y avait une cohérence un peu plus forte entre différents thèmes venant du même fournisseur (je parle ici de thèmes sortis récemment), donc tu fais bien de dire qu’il faut prendre le temps de mettre les mains dans le cambouis ! Parce que Woothemes est une boîte de qualité, alors je n’ose imaginer ce que peuvent produire certains autres…

  36. christ dit :

    Bonsoir
    ales balises sémantique j’ai mis du temps a tout comprendre mais j’y suis arrivé mais voila le pingouin est passé et “Boum” la chute et quand je regarde les autres sites devant moi bin, eux la sémantique y sans foute !

  37. Didier dit :

    Effectivement la barre Web developer pour firefox est un outil pratique et indispensable pour optimiser son thème wordpress notamment aux niveau des balises sémantiques et de la désactivation des images. Web developer est particulièrement utile pour tout développeur web avec ses nombreuses et puissantes fonctionnalités comme l’éditeur de CSS et son puissant éditeur HTML.
    Merci de nous avoir fait découvrir ce puissant outil.

  38. Rémi dit :

    Bonjour,

    J’arrive peu être un peu tard dans la discussion, mais bon !
    N’étant pas un crack (loin de là) j’utilise pour ma part le thème gratuit “catch box”, est il un bon thème qui facilitera son référencement d’après vos définition ?
    Si pas terrible, avez vous un thème à proposer.

    Question n°2 ;
    Ayant mis les extraits des 10 derniers articles parut sur la page d’accueil, je me retrouve avec 10 balise H1 !
    Problème ou pas ?

    Merci d’avance
    Rémi

    • Marie-Aude dit :

      Bonsoir, les 10 H1 sur la page d’accueil sont clairement un problème… De plus, globalement il est nécessaire de corriger la structure sémantique (les H1, H2, etc) qui est mauvaise.
      c’est un défaut de base qu’on retrouve dans 95% des thèmes, ça n’en fait pas un mauvais thème. Après vous pouvez demander à un développeur (moi par exemple ^^) de vous modifier cela si vous voulez vraiment avoir un thème optimisé

  39. Rémi dit :

    Bonjour Marie Aude,

    Merci de m’avoir répondu, je vous fais part de la réponse des développeurs du thème qui me laisse septique !

    “philippe: Vous utilisez Catch Box thème construction en HTML5 et CSS3. Donc, en HTML5 chaque article peut avoir une tête de code et chaque code d’en-tête peut avoir une balise h1. Donc, ce n’est pas un problème”

    En fait lorsque lon n’est pas de la partie c’est trés difficile de se faire une idée exacte d’autant que google n’a jamais affirmé que plusieurs balise H1 est un frein sur le référencement !

    Un vrais casse tête.

    • Marie-Aude dit :

      La réponse est à la fois technique est fausse. Fausse parce que ce n’est pas spécifique à HTML5, même en HTML4 la norme W3C ne précisait pas le nombre de H1 par page. Si il y a trois ou autre ans Google avait émis une recommandation de un seul H1 par page, c’est bien que la question se posait déjà.
      Technique, parce que c’est une réponse orientée norme W3C, pas “compréhension sémantique par Google”.

      Même en considérant qu’ils ont “raison” (et je l’ai dit en début de l’article, le H1 unique par page est une option, que la plupart des référenceurs prennent, mais c’est une option), leur structure sémantique est mauvaise.

      Ainsi, si on va sur une page d’article seul, les titres des widgets sont en H3. Or, si on suit les recommandations du W3c, la sidebar devrait être une “section” avec un H1, et chaque Widget un aside avec un H3.

      En ce qui concerne votre page d’accueil vous devriez avoir le titre du blog en H1. Or, avoir tous les articles en H1 veut dire que sur la page d’accueil, le “contenu” de type “le titre du blog” a la même importance que le contenu de chaque article. Ce qui est évidemment faux, exprimé ainsi.

      La réalité : faire des structures sémantiques correctes demande plus de travail, à la fois au niveau du marquage et du css.

  40. Charlène dit :

    J’ai bien réceptionné, je prend note pour webdevelopper, et je vais voir ce que je peux faire quand j’aurai le temps de me plonger le temps, merci du conseil :-)

    à bientôt,

    Charlène.

  41. Reign dit :

    bonsoir,
    article très intéressant, cela aide dans le choix d’un bon thème, comment bien construire avec les H.
    j’aurai aimé avoir d’exemple de thème qui rentre selon vous Lumière de Lune, comme thème correcte, des thèmes de chez WP.org

    merci

    • Marie-Aude dit :

      Je vais plutôt répondre “auteurs” :)

      les thèmes de Konstantin Kovshenin sont très propres, très dépouillés aussi, mais côté code c’est un vrai bonheur. Normal, c’est un développeur Automattic ! J’utilise Expound, Semi-colon et Publish, j’ai dû les optimiser, mais cela a été une vraie partie de plaisir.

      Pareil pour les thèmes de Cyberchimps qui sont plutôt propres et faciles à customiser.

  42. sam dit :

    hello la communauté
    je viens de prendre un shoot (gentil) sur webrank info concernant compenseo.fr qui utilise un thème que j’affectionne AVADA de themeforest
    on me dit à juste titre que c’est une chierie innommable pour le référencement, à juste titre car j’ai bien du mal à le voir grimper
    alors quelles sont à ce jour les alternatives pour avoir un theme un poil riche en fonction et 100% disgeste pour Google?
    A vous lire

    • Marie-Aude dit :

      Le code… :D Avada se personnalise, se modifie, comme les autres. J’aime bien Invicta, mais même celui-là j’ai dû changer des trucs.

    • seb dit :

      Bonjour, j’envisage acheter Avada, je voulais savoir si le thème de l’admin est bien traduit en français car suis pas parfaitement bilingue et donc il me faut un thème en français impérativement pour éviter de perdre du temps…
      merci de votre réponse, cdt

      • Marie-Aude dit :

        Bonjour, ne l’utilisant pas je suis dans l’incapacité de vous répondre. Le plus simple est de poser la question à l’auteur “is your back-end translated in french ?”

  43. Bowlead dit :

    Pour répondre avec un peu de retard ;-), oui l’administration du template Avada est traduite, je l’utilise pour plusieurs sites et est nickel pour le référencement

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *