CSS et SEO: Les bienfaits du CSS pour le Search Engine Optimization

De manière générale, les robots des moteurs de recherche fonctionnent sur le même principe: parcourent les pages et les stockent dans une base de données qu’ils utiliseront, par la suite, pour positionner les pages grâce à différents algorithmes dans les pages de résultats. Bien que les algorithmes peuvent changer entre les moteurs de recherche, la manière dont ils scannent une page est sensiblement la même.
Les robots des moteurs de recherche ne lisent pas vos pages de la même façon que vous pourriez le faire. Les feuilles de style CSS peuvent vous aider à améliorer la structure de vos pages et aider votre stratégie SEO.

CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
Source Wikipedia

Mis à part la qualité de votre contenu, qui doit être votre priorité, l’une des clés du SEO (Search Engine Optimization) est une bonne structure de vos pages et l’organisation de votre contenu. En comprenant comment les moteurs de recherche « voient » vos pages, vous serrez en mesure d’optimiser la structure de vos pages.
Les robots des moteurs de recherche vont analyser votre code source, et non le résultat que peuvent voir les utilisateurs. Voyons comment les feuilles de style peuvent aider votre SEO.

La première chose que voit un moteur de recherche se situe dans le haut du code source de votre page. En structurant vos pages de manière a ce que le contenu important se retrouve le plus haut possible dans le code source peut jouer un rôle dans votre stratégie SEO. Il suffira de repositionner les blocs à l’aide d’une feuille de style pour obtenir le résultat désiré.
De cette manière, le premier contenu textuel que Google verra sera le contenu inséré dans une balise H1, un titre etc…

< body >
< div id =  » contenu_principal  » >
< div class = « contenu » id = « principal » >
< h1 >CSS et SEO< /H1 >…


< /div>
< !–Pied de page– >
< div id= « footer » >


< /div >

< /div >
< !–En Tete– >
< div id= »header » >
… < img src= « url_bannière.jpg » >
< /div >
< /body >

Avec le CSS, vous pouvez organiser votre code pour que les moteurs de recherche voient le contenu pertinent avant le contenu moins important (Sidebar, navigation, bannière…) indépendamment du lieu où il apparaît sur la page.

Une autre méthode d’utiliser le CSS pour aider votre référencement est de remplacer certaines bannières par du vrai texte. De nombreux site utilisent des mots clés dans une bannière sous forme d’image. Au lieu de cela, il serait relativement aisé d’utiliser le CSS pour positionner le texte devant une image de fond. L’aspect final sera sensiblement le même à la différence près que les moteurs de recherche arriveront à lire le slogan.

Une bannière pouvant facilement être remplacée par du CSS pour aider le SEO

Comme vous le voyez, cette bannière pourrait sans problème être remplacée par une balise
< div > dans laquelle nous définirions une image de fond au dessus de laquelle nous positionnerons une version textuelle du slogan (et même du nom du site) avec une feuille de style.

Alors que le CSS a été largement adoptée pour rendre les pages Web plus rapides à se charger et à modifier, cette « technologie» offre aussi quelques avantages pour le SEO.

  1. SEInsights a laissé un commentaire sur 8 janvier 2010 at 21 h 35 min

    CSS et SEO: Les bienfaits du CSS pour le Search Engine Optimization http://bit.ly/8kWMYs #CSS

  2. Julien ringard a laissé un commentaire sur 8 janvier 2010 at 22 h 54 min

    RT @eMarketing_fr: CSS et SEO: Les bienfaits du CSS pour le Search Engine Optimization http://bit.ly/8kWMYs

  3. le floch michael a laissé un commentaire sur 8 janvier 2010 at 23 h 47 min

    CSS et SEO: Les bienfaits du CSS pour le Search Engine Optimization http://tinyurl.com/ya2ugbw

  4. orangium a laissé un commentaire sur 9 janvier 2010 at 3 h 28 min

    RT @eMarketing_fr: CSS et SEO: Les bienfaits du CSS pour le Search Engine Optimization http://bit.ly/8kWMYs

  5. Laurent Desprez, Expert SEO a laissé un commentaire sur 9 janvier 2010 at 14 h 04 min

    Bonjour

    cela fait un moment que je prêche la bonne parole sur cette partie.

    l’expertise SEO couvre un ensemble de métier technique, marketing, éditoriaux, stratégie etc.

    Laurent

  6. desprez a laissé un commentaire sur 9 janvier 2010 at 15 h 13 min

    CSS // SEO
    Vous connaissez surement le site, voici un de leur dernier article que je vous conseille http://bit.ly/5to86T #SEO #veille #CSS

  7. ActuaRef a laissé un commentaire sur 10 janvier 2010 at 3 h 32 min

    Bon article. Merci 🙂

    Il est vrai que placer le contenu avant les menus ou bannieres est plus pertinent. Cela va t’il durer ? google ne sait ‘il pas que les menus sont en général avant le contenu ? A terme, ne peut il prendre ça pour du « grugeage » ???

  8. Virginie Clève a laissé un commentaire sur 10 janvier 2010 at 14 h 13 min

    Le CSS : un point important pour l'optimisation technique SEO de vos templates http://bit.ly/6v9tQk (via @1ere_position)

  9. Joëlle Petit a laissé un commentaire sur 10 janvier 2010 at 15 h 18 min

    RT @largow: Le CSS : un point important pour l'optimisation technique SEO de vos templates http://bit.ly/6v9tQk (via @1ere_position)

  10. le floch michael a laissé un commentaire sur 11 janvier 2010 at 10 h 00 min

    CSS et SEO: Les bienfaits du CSS pour le Search Engine Optimization http://bit.ly/5YAikQ

  11. P-F a laissé un commentaire sur 11 janvier 2010 at 11 h 02 min

    RT @Mikiweb: CSS et SEO: Les bienfaits du CSS pour le Search Engine Optimization http://bit.ly/5YAikQ

  12. Nicolas a laissé un commentaire sur 11 janvier 2010 at 11 h 44 min

    Bonjour,
    Ces méthodes destinées à privilégier le référencement SEO vont à l’encontre de l’accessibilité du Web. Certes les CSS permettent aujourd’hui de dissocier le positionnement à l’écran de l’ordre du code source, mais de telles méthodes rendent incompréhensible la navigation au sein du site, pour des utilisateurs d’aides techniques (personnes non-voyantes), ou bien pour les utilisateurs naviguant au clavier. Les tabulations au clavier sont alors incohérentes, les contenus étant dans un ordre illogique (la navigation étant à la fin du code source par exemple), et pour les internautes non-voyants, la navigation au sein du site est fortement compromise, voire impossible. Mais l’article est intéressant, bien entendu.

    • SEInsights a laissé un commentaire sur 13 janvier 2010 at 12 h 57 min

      Merci Nicolas pour ton commentaire. Il est vrai que l’accessibilité est un point important que tout site web devrait prendre en considération.
      Je me permets de t’envoyer un mail.

  13. Blog referencement a laissé un commentaire sur 12 janvier 2010 at 20 h 50 min

    J’ai fait des tests et par exemple positionner un menu en bas du contenu html alors qu’il est toujours positionné en haut de page grâce par ex à du css en « position absolute » ne semble pas donner un avantage significatif, toutes choses égales par ailleurs.
    Mais bon c’est avec des petits ruisseaux que l’on fait des fleuves 🙂
    Ton article est juste, mais aujourd’hui il faut de plus en plus faire attention à la sur-optimisation notamment pour des domaines récents; et donc ne pas tomber dans l’excès inverse.

  14. Bulle Interactive a laissé un commentaire sur 13 janvier 2010 at 23 h 00 min

    Les bienfaits du CSS pour le Search Engine Optimization http://tinyurl.com/ya2ugbw

  15. Blog Propulsr a laissé un commentaire sur 6 février 2010 at 11 h 46 min

    Sur la bannière je suis d’accord que l’ajout des mot clés lisible peux aider du point de vue référencement.

    Par contre, le CSS pour organiser l’ordre d’apparition du contenu, je rejoindrai ParadiSEO : impact légèrement positif car Google et les autres moteurs travaillent énormément sur la reconnaissance de « blocs » composants la page donc, a priori, à la pondération.

Laisser un commentaire

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