Vous êtes ici : Miss SEO Girl » Articles invité » Massacrez-vous votre référencement ? Vérifiez que vous ne vous tirez pas une balle dans le pied !

Massacrez-vous votre référencement ? Vérifiez que vous ne vous tirez pas une balle dans le pied !

Article invité rédigé par Marie-Eve.

En discutant avec un copain ingénieur, je me suis rendue compte que les rôles de l’HTML et du CSS sont assez méconnus.

Voici donc pour vous un petit rappel de base…essentiel pour votre référencement !

HTML, ce langage sémantique

HTML permet de structurer votre contenu de façon sémantique, c’est à dire en lui donnant du sens. Du sens pour le lecteur mais aussi du sens pour Google et autres robots qui peuplent le paysage.

Prenons un exemple simple : un titre.

Pour l’écrire dans une page, j’ai deux solutions :

Rien à faire de HTML !

1ère solution, je l’écris comme une ligne de paragraphe, puis, grâce à mon éditeur wysiwyg, je lui donne une apparence de titre (grande taille, gras, souligné…).

Vos visiteurs n’y verront que du feu et prendrons bien ça pour un titre, la lecture du texte ne sera pas perturbée.

Par contre, Google ne le considèrera pas comme un titre, mais bien comme un paragraphe quelconque (Google ne voit pas l’apparence, il ne voit que l’HTML) : adieu le poids de vos mots-clefs judicieusement placé dans un “titre” ! Adieu référencement !

HTML, mon sauveur

2ème solution (et la seule à retenir) : utiliser la balise HTML “h2” (ou h3, h4…en fonction du niveau d’importance de votre titre).

De cette façon, vous faites coup double triple : d’une part, le navigateur l’affichera automatiquement comme un titre (et oui, lui aussi lit l’HTML), c’est à dire en gras et en grande taille.

Du coup, vos visiteurs sont contents : ils comprennent bien qu’il s’agit d’un titre et la lecture du texte n’est pas perturbée.

Enfin, Google comprend qu’il s’agit d’un titre et valorise les mot-clefs contenus dans le texte.

Le rêve ! 🙂

J’ai pris ici l’exemple d’un titre, mais cela reste valable quelque soit la balise employée. Aux yeux de google : un paragraphe n’est pas une liste à puce, un lien n’est pas un titre, une image n’est pas une iframe !

Bref, Google appelle un chat un chat, et vous ne lui ferez pas croire qu’il s’agit d’un chien en le costumant habilement.

Et le CSS dans tout ça ?

CSS justement, va vous permettre de donner l’apparence que vous voulez aux éléments définis en HTML.

Fatiguée de voir vos listes à puces comme ceci ?

Décorez-les comme vous voulez, CSS est fait pour ça !

On peut même aller beaucoup plus loin :

Et oui, un menu n’est rien d’autres qu’une liste à puce. Les listes s’appliquent aux collections d’éléments de même nature, qu’ils soient ordonnés (liste numérotée) ou non-ordonnés (liste à puce).

Le menu de navigation d’un site web se situe donc bien dans cette catégorie, QU’IMPORTE que son apparence ne soit pas celle d’une liste !

  • Valeur sémantique = HTML = liste de liens : donc balise HTML à employer = “ul” et “li”
  • Aspect visuel = CSS = en ligne sans puce : on modifie l’apparence dans le code CSS.

Conclusion

Vous avez à présent bien saisi la différence entre HTML et CSS. HTML gère le fond, et CSS la forme.

Cette différence est capitale pour respecter un grand principe du web pour une meilleure accessibilité : la séparation du contenu et de la forme. Pourquoi est-ce important ?

Imaginons que demain, vous vouliez adapter votre site aux smartphones, il vous suffira de créer un fichier CSS qui gère l’apparence de votre HTML sur ce périphérique. Votre “ancien” fichier CSS continuera d’être utilisé normalement par les navigateurs d’ordinateur, tandis que le nouveau ne sera lu que par les mobiles.

Comment auriez-vous fait si le fond et la forme étaient confondus ?

Retrouvez encore plus d’astuces pour utiliser HTML et CSS de façon optimale, et améliorer votre référencement dans ma formation “Initiation à HTML et CSS”.

Qui est Marie-Eve ?

Développeur web depuis 2009 et ancienne ergothérapeute, mon envie de rendre les autres autonomes m’a amenée à m’orienter vers la formation. Depuis, j’exerce en centre de formation, et à domicile sous mon propre numéro de formateur. J’enseigne la programmation web, mais mon domaine favori est d’apprendre aux entrepreneurs à créer leur site vitrine et/ou leur blog professionnel, passion que je partage sur mon blog Les Doigts dans le Net.

Please wait...

23 réflexions au sujet de « Massacrez-vous votre référencement ? Vérifiez que vous ne vous tirez pas une balle dans le pied ! »

  1. Merci pour cet article. Ça me rappelle un truc qui m’est arrivé sur un site. Le développeur avait mis des h1 partout, des h2 sur des trucs qui avait besoin de h4.. c’était mal organisé. Du coup, on a pris trente minute et une fois mes recommandations appliquées, il a fallu mois d’une semaine à google pour le passer de la 9e à la deuxième place juste après le site officiel… même moi ça m’avait surpris..

  2. Merci pour cette intro nécessaire !

    Petit bémol pour ne pas “laisser croire” qu’il suffit d’un fichier CSS pour rendre son site compatible sur tous les types de lecteurs… Le Responsive Design est une tendance qui mélange HTML, CSS et JavaScript, et proposer un site vraiment “adaptative” est souvent un travail de longue haleine (je parle bien d’un site qui se “dégrade” gracefully, pas d’un simple hack).

    Ne pas oublier non plus que tous les navigateurs ne sont pas égaux devant l’implémentation et l’interprétation des standards, et que d’ailleurs HTML5 n’est toujours pas un standard…

    Ceci étant dit, il est nécessaire de s’y mettre !

  3. Les demandes clients sont de plus en plus poussées vers le responsive, et adapter un site en responsive n’est pas donné à tout le monde, j’y ai mis les mains par curiosité, je dois dire qu’à mon humble niveau j’ai trouvé la tâche assez complexe (je n’imagine même pas pour un gros design).

    Content de voir Marie-Eve nous parler d’optimisation design 🙂 Je me souviens que tu étais venu nous parler de création il y a maintenant 1 an sur Cree1site.

  4. Bonjour, bien sur j ‘en suis à mes débuts en html & css mais je trouve surprenant que de h2 on passe directement à h4 (sur prestashop)
    De plus ,existe t il des tuto pour adapter mon site aux mobiles sans faire appel à un webmaster…

  5. Je ne compte plus le nombre de comparaisons que j’utilise pour sensibiliser au besoin de baliser le contenu de chaque page. ^^

  6. @Thomas : en effet, une telle efficacité est surprenante. Comme quoi, les titres sont hyper-importants!

    @Sprite : oui, j’ai simplifié pour l’exemple, mais le responsive ne s’arrête pas qu’à la feuille de style (c’est quand même une bonne partie).

    @Rodrigue : le temps passe vite, un an déjà. Je ne m’en étais pas rendue compte ! Va falloir que je revienne 😉

    @Delphine : ça c’est bizarre, tu es sûre que tu n’as pas de h3 ? SI vraiment c’est le cas, je ne pense pas que ce soit dû à Presta mais plutot au développeur de ton thème.

    @pokoeur : Je ne suis pas “formée” spécifiquement au SEO mais à la programmation web (même si HTML et CSS ne sont pas vraiment des langages de programmation web). Et comme le référencement et le html-css sont liés, je parle de ce lien, mais non, je ne suis pas experte SEO, loin de là ! Quand à votre 2ème question, je dirais 2 ans, plus une éternelle mise à jour des connaissances et une pratique régulière.

    @Guillaume : et oui, pas évident de faire passer cette notion !

    Merci à tous pour vos réactions et vos retours sur cet article.

  7. Bonjour. La balise h1 reste quand même plus importante que la h2 dans le référencement? non?
    Pour Delphine: Je sais que l’on peux passer de h2 à h4 sans souci mais pas de h4 à h2 bien sur.
    Pour pokoeur: Le référencement est en constante évolution, google va nous pondre un nouvel algorithme dans pas longtemps, appelé Colibri. Faut s’adapter en permanence, la formation est continue !

  8. Bonjour,

    Quand je vais dans l’interface d’administration worpress et que je sélectionne:
    “titre 1 ou titre 2 ou titre 3” etc est-ce que cela correspond au langage HTML que Google va prendre en compte comme un titre avec une valeur ajoutée éventuelle pour des mots clefs sur ces titres?

  9. Très bon article comme toujours avec Marie Eve! Simple, efficace et didactique… Comme ses formations d’ailleurs. A part ça Marie Eve, ta formation HTML et CSS m’a permis de lancer mon modeste projet en ligne: http://www.apprenti-webmaster.com

    Dis moi ce que tu en penses. Qu’est-ce que tu changerais? C’est évidemment encore en chantier…

    Signé un client satisfait ^^

  10. Bonjour,
    Excellent article qui (re)cadre bien la frontière entre HTML et CSS.

    J’ajouterais que de manière plus générale, et dans le cas de l’éditeur Visuel (wysiwyg) de WordPress, il faut respecter ces quelques règles:

    – Ne jamais modifier la mise en forme du texte (sauf exceptions) directement dans l’éditeur. Autrement cela viendra surcharger la mise en forme gérée automatiquement par le CSS, et ne correspondra plus à la charte graphique du site.

    – Ne jamais formater un texte en Titre 1 dans le corps de l’article. En effet, une seule balise H1 est conseillée par article pour un meilleur référencement.
    Et normalement WP met automatiquement le titre de l’article en H1. Donc utiliser seulement des Titres à partir du format .

    – Le bouton “B” ne sert PAS qu’à mettre du texte en gras ! Il sert d’abord à souligner l’importance d’un ou plusieurs mots, notamment les mots-clés (mais sans en abuser). L’apparence en gras n’est qu’une conséquence visuelle. On peut d’ailleurs changer cette apparence en CSS.

    Enfin voilà, je suis encore en phase d’apprentissage sur HTML/CSS, il y a donc beaucoup d’autres choses à dire…

  11. Cet article est un très bon rappel de la différence entre le HTML et le CSS ainsi que de leurs utilités! C’est vrai qu’il est toujours bon de rappeler les bases lorsque l’on voit certains sites très mal fait avec des balises à la place des ou autre absurdité!
    C’est une très bonne initiative cet article, merci à toi Marie-Eve!

  12. Je trouve que HTML 5 apporte une vraie place à la sémantique (je pense aux balises section, article, nav, header, footer, ..).
    Avant avec HTML4, cette notion était quasiment inexistante. Certes comme c’est mentionné il était possible de structurer un minimum mais l’aspect semantique uniquement prend du sens avec cette dernière version.
    Jerome@creation de sites internet en essonne Articles récents..WordPress en local avec Instant WordPressMy Profile

  13. Un rappel utile pour les débutants, bien cerner le rôle de chaque langage est primordial.

    Je rejoins Jérôme pour dire que les nouvelles balises apportées par HTML5 qui permettent de structurer le contenu de manière encore plus cohérente et facilement compréhensible qu’avec HTML4.

  14. Alors comme ça vous nous faite suivre 🙂 ça fait un peu drôle de réagir sur ton billet en dehors de http://lesdoigtsdanslenet.com/ mais ça entre dans tes nouvelles résolution non? et avoir de nouveau lecteurs ne peut qu’être bénéfique !
    J’ai tous compris pour le HTML, par contre en CSS je piétine encore mais bon je suit, la preuve que je t’ai suivi jusqu’ici ! 🙂

  15. Très bon article comme d’habitude! Je dois dire que je suis assez d’accord avec le fait de ne pas négliger le Html, depuis que j’ai moi même compris l’importance des balises H1, H2 et des strong je dois dire que j’obtiens de bien meilleures résultats dans les Serps 🙂
    Pour ce qui est du css et des balises et je gère encore un peu mais j’apprends vite!

  16. La structuration des contenus via des balises dites sémantiques est importante et vous avez raison d’insister sur ce point précis. Dans un même ordre d’idée, pour de l’optimisation SEO sur site (donc pas question de backlinks) peut être auriez vous pu évoquer la nécessité d’une bonne structuration du site afin de faciliter le travail à Googlebot. On ne dira jamais suffisamment les méfaits d’une arborescence mal pensée !

  17. Il ne faut pas oublier que tout bon CMS qui se respecter (WordPress, Spip…) établie des corrélation entre la mise en forme et balise HTML. Un titre de paragraphe accentuée sous wordpress correspond généralement à une balise html h1, h2, ou h3… 🙂

Laisser un commentaire

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

CommentLuv badge

Les liens des commentaires peuvent être libérés des nofollow.