juil 11

La mise en page utilisée à des fins SEO ou de référencement permet-elle d’améliorer le positionnement d’un site Web ?
Nous avons vu où devaient se situer les mots clés ciblés dans l’optimisation d’une page web et le balisage sémantique. Par ailleurs beaucoup pensent qu’un code propre et épuré ainsi que l’optimisation de la mise en page pourront donner plus de poids au contenu principal, le plus important pour le référencement, en diminuant le code inutile et en plaçant notamment ce contenu au début du code html d’une page.

L’utilisation de feuilles de style CSS (*) permettra de séparer le contenu de sa mise en forme et ainsi d’éviter un code lourd, souvent confus, et très laborieux à mettre à jour. De plus des pages se chargeant rapidement permettent une navigation plus fluide pour les internautes, mais aussi aux robots d’indexation de les lire et d’en indexer plus facilement le contenu; ce qui n’est pas négligeable surtout pour des pages profondes.
Les feuilles de style ou fichiers CSS peuvent être optimisés afin de placer le contenu le plus utile en terme de référencement, comme des mots clés ou des liens hypertextes, au début du code de la page. On parle souvent des 300 premiers caractères, voire des 100 premiers mots dans le code html (XHTML dans ce cas) d’une page.

Voici quelques exemples de mise en page où l’utilisation des conteneurs “div” et de la propriété CSS : “position : absolute” donnent des modèles de templates SEF (*), c’est à dire optimisés pour le référencement. Voir par exemple les templates SEO 2 colonnes et SEO 3 colonnes avec menu à gauche. A noter dans ce dernier exemple le centrage sur l’écran grâce au “text-align:center;” dans le body du css et l’utilisation de “margin: 0 auto;” dans le css du conteneur principal de la page, appelé ici “fullpage”. Dans ces deux exemples le contenu principal (conteneur avec id=”center”) se retrouve bien au début du code source html de la page, alors qu’étant placé au centre de l’écran, il se retrouverait après l’entête (header) et le menu situé à gauche dans le “flux” normal d’une page. Bien évidemment on séparera le css du fichier html, mis ensemble ici pour faciliter la compréhension du template. D’autres modèles de templates SEF gratuits sont aussi disponibles ici.

Par ailleurs même si ce n’est pas monnaie courante, il est intéressant de noter que certains web-designers sont sensibilisés au SEO, comme le prouve ce petit guide SEO [en] écrit à leur intention. Comme nous l’avons vu dans les principes de base du référencement, il est important d’intégrer les considérations SEO dès le début du développement d’un site Web, et donc dès l’élaboration de sa charte graphique.

L’utilisation de ces ressources CSS donnent d’utiles conseils sur le développement, l’analyse, la vérification, voire l’optimisation des fichiers css. N’ayant pas encore rencontré de test SEO satisfaisant montrant un avantage distinct pour un code W3C valide, je ne suis pas sûr que cette validation soit vraiment nécessaire pour un meilleur positionnement, tant que les consignes de bases, c’est à dire l’esprit du W3C, et/ou les bonnes pratiques d’Opquast, concernant notamment l’accessibilité, sont respectées.

Quant à l’évolution des moteurs de recherche, nous savons déjà que Google peut lire les feuilles de style CSS (et par exemple détecter des mots clés cachés par l’utilisation de techniques css variées - voir ressources/astuces dans l’espace membres-), mais il est intéressant de noter que Google et Yahoo ont déposés des brevets permettant à ces moteurs de recherche de mieux appréhender la mise en forme d’une page Web, sans avoir à les lire comme le font nos browsers, et notamment grâce aux espaces de séparations entre les différents blocs de contenu. Pour approfondir ce sujet lire les articles [en] The importance of page layout in SEO et Google and Document Segmentation based on visual gaps de l’excellent blog SEO de Bill Slawski : “SEO BY THE SEA” .
Le jour (proche ? : (1) ) où les moteurs de recherche identifieront à coup sûr la partie du contenu la plus importante d’une page, lui donnant plus de poids qu’à des parties répétitives comme un logo ou un titre dans un header (en-tête), ou encore des liens dans un menu ou un footer (pied de page), il ne sera peut-être plus nécessaire de chercher à placer ce contenu systématiquement en début de code, mais les conseils d’utilisation du balisage sémantique et de la séparation du contenu et de la mise en page perdureront.

Note#1 : les brevets déposés ne sont pas obligatoirement ou bien immédiatement utilisés dans les algorithmes de classement des moteurs de recherche

* voir lexique sur le référencement


Si vous venez de découvrir ce blog, lire en priorité l’article : Les principes de bases du référencement


 

Paradi-SEO logo

« Cliquer sur ce logo pour s’abonner au flux des nouveaux articles du Blog Paradi’SEO

 


promotion et referencement

Diffuser ce billet :

referencement twitter        referencement facebook       


6 commentaires pour “Référencement : optimiser mise en page et CSS”

  1. Pulkurl commentaire a écrit :

    Je pense que Google est déjà capable d’identifier les parties se répétant dans une page, il identifierait le duplicate content au sein de parties de pages d’un même site. Je ne peux pas l’affirmer, mais j’ai fait des premiers tests qui allaient en ce sens.

    D’ailleurs on peut penser que les pages qui n’ont pas beaucoup de contenus mis à part les menus / header / footer sont pénalisées par Google et cela peut donner naissance à 2 hypothèses : Google ne peut identifier le contenu d’une page ou bien il a jugé que le seul texte présent n’était pas intéressant et là dans ce cas on peut penser qu’il aurait identifier le contenu de la structure menu / header / footer.

  2. alexisurl commentaire a écrit :

    Bonjour,
    Tres bon article ! merci :)
    est il possible d’avoir les liens d’exemple de CSS :
    “Voici quelques exemples de mise en page où l’utilisation des conteneurs “div” et de la propriété CSS : “position : absolute” donnent des modèles de templates SEF (*), c’est à dire optimisés pour le référencement. Voir par exemple les templates SEO 2 colonnes et SEO 3 colonnes avec menu à gauche.”
    Les liens semblent mort… avez vous d’autres exemples ?
    merci !!

  3. Oscar a écrit :

    @ alexis : j’ai mis à jour le lien vers “modeles de templates SEF” par contre les liens directs vers les exemples 18 et 28 ne fonctionnent pas actuellement sur le blog de Michael Gray. Merci pour l’info !
    Par contre des exemples de CSS sont disponibles pour les membres de Paradi’SEO…
    @+, Oscar

  4. Blog Japonurl commentaire a écrit :

    Bonjour,
    je me demande si l’optimisation du footer est possible.
    Dans ton article, tu insistes sur l’optimisation du contenu. Effectivement, ça semble bien-sûr le plus important.
    mais 1 ans s’est écoulé depuis ton article, et est-ce que la situation a changée ?
    Sans forcément blinder le footer de mots clés, on peut peut-être essayer de l’optimiser intelligemment, non? (avec des balises “<a href…” par ex… Non?)

  5. Christophe a écrit :

    Bonjour,

    Personnellement, je pense que la mise en page peut jouer un certain rôle dans une stratégie de référencement. Ce qu’il faut retenir selon moi, c’est qu’il faut avoir une page web la plus légère possible et donc mettre le maximum du style et la mise en page dans un css. Après, si on fait ça, cela devrait suffire pour l’optimisation on-page.
    En conclusion, je pense qu’il est plus important de se concentrer sur un contenu qu’une mise en page.

  6. prestashop themeurl commentaire a écrit :

    Bonjour, merci pour votre article :) il est très intéressant et riche en conseils.

    Pour l’optimisation du fichier .css: Une fois qu’on l’a débarrassé du superflu,
    on va compresser le fichier en question.
    Attention, je vous recommande fortement de créer une sauvegarde de votre fichier au cas où vous auriez un petit tracas et surtout pour le retravailler dans le futur. Car si vous optez pour la forme la plus compact, cela devient impossible à lire.
    Donc il vous suffit ensuite de définir vos options selon vos besoins ou envies.Personnellement, il m’est arrivé de réduire le poids de certains fichier de presque 85%.
    Donc il serait dommage de s’en passer surtout vue le temps que cela prend.