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.

16 réponses à “CSS et SEO: Les bienfaits du CSS pour le Search Engine Optimization

  1. 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 » ???

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

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

  4. 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 *