Apprenez à bien utiliser les balises h1, h2 pour le référencement


Vous avez peut-être déjà entendu parler des balises h1 h2 h3 h4 h5 h6 (oui, tout ça !) et de leur importance pour le référencement ! Mais de quoi s’agit-il exactement ? Comment utiliser ces balises en SEO ? A quoi servent-elles ? Comment les choisir et quel impact ont-elles sur le référencement ?

Dans cet article, je vais vous donner quelques conseils pour bien utiliser les balises h1 h2 et les suivantes dans vos contenus !

Une balise h1 h2… c’est quoi ?

Sur n’importe quel blog, on trouve des titres : le titre du blog, le titre des articles, le titre des widgets si vous en avez. Vous avez peut-être même des sous-titres, des sous-sous-titres…

Ces titres sont essentiels pour deux raisons :

  • Ils organisent visuellement votre contenu : qui a envie de lire une page sur laquelle toutes les informations sont au même niveau ? Personne. Avec les titres, vous aidez vos visiteurs à parcourir plus facilement vos articles : ils repèrent instantanément le sujet de l’article et son articulation logique.
  • Les titres donnent du sens à vos articles : on comprend tout de suite qu’un titre est important et qu’un paragraphe détaille davantage ce qui est dit dans le titre en peu de mots. Un titre (ou un sous-titre) permet donc de mettre en valeur les différentes idées ou les axes que vous abordez dans votre contenu.

Tout ceci va aussi se traduire dans le code de votre site. Un titre est généralement encadré par des bouts de code HTML qu’on appelle les balises. Parmi les (nombreuses) balises qui existent, certaines jouent un rôle très particulier en référencement : les balises h1 h2… jusqu’à h6 ! Elles permettent de hiérarchiser les titres les uns par rapport aux autres et se présentent sous cette forme :
<h1>Ceci est un gros titre</h1>

Comment utiliser les balises h1 h2 et suivantes ?

Il existe 6 balises hn : h1, h2, h3, h4, h5 et h6. Elles servent à faire comprendre à vos visiteurs et aux moteurs de recherche quelle importance a chaque titre dans la signification globale de la page.

Les titres encadrés par des balises h1 sont considérés comme étant les plus importants, les plus représentatifs du thème de votre page. Les titres encadrés par des balises h6 sont les moins importants.

Mettez-vous à la place de Google (vous ne ressentez pas un gros sentiment de puissance, subitement ?). Google est un robot. Tout seul, il aurait du mal à deviner de quel sujet vous parlez, quelles informations sont importantes. Grâce aux balises de titre, vous pouvez l’aider à comprendre quelle est l’articulation de votre raisonnement.

Une balise de titre permet de hiérarchiser l’information pour le lecteur et le moteur de recherche.

Vous n’êtes pas obligé d’utiliser l’ensemble de ces balises sur chaque page, tout dépend du niveau de détail de votre contenu. Un exemple visuel sera sans doute plus parlant :

Balises de titre et référencement

Si ça vous rappelle de vieux souvenirs de cours de français et de dissertation, c’est normal ;) Le principe est le même ! L’idée de fond est de structurer vos idées.

La balise h1 en SEO

La balise h1 est la plus importante. C’est elle qui va indiquer à Google quel est le thème de la page, son “grand titre”. Il faut donc lui prêter une attention toute particulière.

Les mots-clés qu’elle contient aident Google à déterminer la pertinence de votre page et son positionnement dans les résultats de recherche, elle joue donc un rôle clé en référencement.

Voici ce que l’on conseille en général :

  • Faites-y figurer le mot clé (= le sujet) principal de votre page. Par exemple, mon article parle des balises h1 h2, j’utilise donc l’expression “balises h1 h2” dans mon titre h1.
  • Un titre h1 doit rester assez court. Plus vous écrivez un titre long, plus l’information est “diluée” alors que le but de ce titre est de faire comprendre de quoi parle la page.

Si vous ne savez pas du tout comment trouver le bon mot clé pour votre page, n’hésitez pas à consulter mon article qui explique comment choisir ses mots clés pour le référencement.

Aujourd’hui, les évolutions du langage HTML autorisent un webmaster à placer plusieurs balises h1 sur une même page, à condition de bien savoir ce qu’il fait ;) Si votre page est découpée en plusieurs sections (à l’aide d’une balise HTML <section>), vous pouvez avoir une balise h1 par section

Matt Cutts, cadre chez Google, l’a expliqué dans une vidéo tout en recommandant d’utiliser les h1 avec la plus grande parcimonie. Vous pouvez vite égarer le moteur de recherche, qui ne saura plus distinguer ce qui est vraiment important sur la page.

Par conséquent, beaucoup de référenceurs choisissent, encore aujourd’hui, de n’utiliser qu’une seule balise h1 par page. C’est aussi le choix que j’ai fait sur ce blog.

Les autres balises, de h2 à h6

Les autres balises s’organisent ensuite par rapport à cette balise h1 : si le titre de votre article est en h1, les sous-titres seront en h2… et si à l’intérieur de chaque sous-titre vous avez des sous-sous-titres à indiquer, ils seront en h3…

Par exemple, dans cet article :

  • J’ai utilisé une balise h1 pour mon gros titre “Apprenez à bien utiliser les balises h1, h2 pour le référencement”. Il informe Google qu’il est ici question de balises h1 h2.
  • J’aborde ensuite le sujet sous deux angles différents : la définition des balises en question (“Une balise h1 h2… c’est quoi ?”) et la façon de les utiliser au mieux (“Comment utiliser les balises h1 h2 et suivantes ?”). Pour ces deux angles, j’ai utilisé des balises h2.
  • La partie “Comment utiliser les balises h1 h2 et suivantes ?” est plus complexe que les autres, j’ai donc eu besoin de la diviser en plusieurs sous-parties pour vous parler de la balise h1 et des autres balises. Pour ces sous-sous-titres, j’ai utilisé des balises h3.

3 conseils pour un bon balisage en SEO

Évitez les sauts de niveau – Vous devez éviter de passer directement d’une balise h1 à une balise h3 par exemple… ou d’utiliser une balise h2 alors qu’il n’y a pas de balise h1 sur la page.

N’utilisez pas ces balises pour mettre en forme le texte “normal” : les balises hn doivent vous servir pour les titres mais ne les utilisez pas pour le contenu lui-même (exemple : pour mettre du texte en gras).

C’est une erreur très fréquente : souvent, chaque balise a un “look” bien défini dans votre thème : par exemple, la balise h1 correspond à un titre très gros et gras, la balise h2 est un peu plus petite… et beaucoup de blogueurs considèrent donc que les balises h1 h2 ont un simple rôle de “mise en forme”. Qu’elles jouent juste sur le rendu du texte.

En réalité, elles jouent aussi sur l’interprétation du texte car en choisissant telle ou telle balise, vous envoyez en réalité un message aux moteurs de recherche concernant l’importance de tel ou tel titre.

Enfin, ayez des balises uniques – La même balise h1 ou h2 n’est pas censée apparaître à plusieurs endroits de votre site.

A retenir sur les balises de titre en référencement

Que faut-il retenir de tout ça ? Que ce balisage permet de hiérarchiser les titres d’une page, du plus important (avec la balise h1) au moins important (jusqu’à la balise h6). Vous pouvez ainsi aider les moteurs de recherche à comprendre la signification de vos pages web : le sujet que vous abordez, les angles que vous choisissez, etc. Une aide précieuse pour le référencement !

Il existe des outils en ligne pour tester les balises de titre et voir si elles sont bien optimisées. Par exemple, celui de Webrankinfo vous permettra d’analyser les balises hn d’une page et vous donnera quelques conseils simples pour les optimiser.

Si vous avez un blog WordPress et que vous pouvez modifier le code de votre thème, je vous conseille cet article complémentaire sur le balisage sur WordPress. J’explique plus en détail comment utiliser les balises h1 h2 sur cette plateforme !

Si vous avez des questions ou que certains aspects de l’article ne vous paraissent pas très clairs, je vous invite à poster un commentaire !

Poster un commentaire

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

50 commentaires sur “Apprenez à bien utiliser les balises h1, h2 pour le référencement

  • Elodie

    Bonjour et merci pour cet article très intéressant ! J’ai un gros problème que je n’arrive pas à régler. Je n’ai pas de balise H1 sur mon blog WordPress, mes titres d’articles sont automatiquement en H2. Comment faire pour modifier cela ? J’ai beaucoup cherché mais ne trouve actuellement aucune réponse sur le web…

    Répondre à Elodie
    • Marlène

      Bonjour Elodie, il faut modifier la façon dont le thème est codé, c’est du langage PHP. En gros, le principe est de créer des conditions dans le thème : SI on est sur tel type de page, ALORS il faut afficher tel type de balise autour du titre. SINON, on affiche tel type de balise.

      Les fichiers à modifier dépendent de la façon dont le thème est construit mais il faut repérer les endroits où le code <php the_title(); ?> apparaît (il peut y avoir des éléments à l’intérieur des parenthèses). C’est ce code the_title qui contrôle l’affichage du titre d’un article ou d’une page sur WordPress… et c’est donc autour de ce code qu’il faut faire apparaître les balises de son choix.

      Répondre à Marlène
  • Angelilie

    Bonjour Marlène,
    ton article est très intéressant sur les balises h1, h2 pour moi qui débute dans le blogging. J’ai un blog sur WordPress. com est j’aimerais savoir si la balise h1 se trouve, par défaut, sur le titre de mes articles, n’ayant pas accès au CSS , je ne peux pas voir par le code. Je mets dorénavant un sous-titre en balise h2 pour apporter une description aux photos que je poste.

    Répondre à Angelilie
    • Marlène

      Hello, j’ai donné un outil dans l’article qui permet d’analyser le balisage d’une page, il te dira où sont les h1, h2, etc.

      Répondre à Marlène
    • Angelilie

      J’ai fait le test des balises sur mon blog et c’est bon ;) merci encore. Bonne journée

      Répondre à Angelilie
  • isalès

    cela n’a jamais été aussi clair!! merci

    Répondre à isalès
  • Ornella

    J’ai lu quelques uns de tes articles sur le référencement naturel, le Guest blogging, les balises de titres. c’est passionnant. Je vais appliquer tout ça dans mes prochaines publications. Merci pour tous les tuyaux !

    Répondre à Ornella
  • Charlotte

    Bonjour Marlene,
    Est-ce que tu as fais un tutoriel pour modifier les balises sur Blogger. J’ai cherché sur le site mais je n’ai pas trouvé. Est-ce que tu aurais un lien en français ? Car c’est compliqué pour moi de faire des modifications alors si c’est en anglais, je ne suis pas sûr d’y arriver .
    Merci d’avance pour ton aide !

    Répondre à Charlotte
    • Marlène

      Hello, je n’ai jamais écrit de tuto sur le sujet. J’avoue que les tutos Blogger axés “code” me demandent énormément de temps pour un retour souvent très faible de la part des visiteurs… et comme l’optimisation du référencement est limitée sur une plateforme gratuite, je délaisse aussi le sujet parce qu’à mon sens, on ne peut pas le traiter “correctement”. On peut faire quelques actions mais ça reste réduit.

      J’ai beaucoup de demandes de tuto en attente mais je note pour ça car une autre personne me l’a suggéré :)

      Répondre à Marlène
  • Aurore

    Petite question, est-ce que le titre principal dans wordpress est automatiquement un H1 ? Où faut-il l’indiquer ?

    Répondre à Aurore
    • Marlène

      Ce n’est pas toujours un H1, en fait c’est déterminé par la façon dont le thème est codé. Si le thème est bien fait, le titre d’un article est entouré d’un H1 sur la page de l’article. Si le thème est mal codé, il faut mettre les mains dans le cambouis pour corriger ça :)

      Répondre à Marlène
  • Aurélie

    Bonjour Marlène,

    Tout d’abord, merci beaucoup pour ce site bien utile, tu es mon nouveau blog de chevet ! Que je lis un peu toute la journée en réalité, m’étant depuis peu (re)lancée dans l’aventure du blogging… Quelle drôle d’idée !

    Bien que rédactrice essentiellement pour des sites web, je n’avais jamais vraiment eu à me pencher sur le référencement, laissant ça aux spécialistes, ce qui me convenait à vrai dire très bien ;)

    Tes posts et tutoriels me permettent d’entrer dans ce monde nouveau en douceur et rendent le tout un peu plus digeste. D’autant que j’ai eu la bonne idée d’opter pour Blogger qui met la date des articles en h2, leur titre en h3… Argh, tout ça est encore bien opaque pour moi !

    Bon, je retourne me promener dans ma feuille de style… Mon autre bonne idée a été de vouloir créer tout mon “design” (pas sûre qu’on puisse l’appeler comme ça :D) moi-même.

    Encore merci, à bientôt !

    Répondre à Aurélie
    • Marlène

      Bonjour Aurélie, le manque d’optimisation de Blogger me surprend toujours quand on sait que c’est la plateforme de Google… Une preuve de plus que le proverbe “les cordonniers sont les plus mal chaussés” est pertinent ;)

      Créer son design soi-même est plutôt une bonne chose même si ce n’est pas facile : on a non seulement quelque chose d’unique qu’on ne retrouvera pas chez les autres mais on apprend aussi beaucoup au fil de l’eau. J’ai créé moi-même le thème du blog et c’était mon tout premier thème WordPress. Pour la première version, j’étais partie d’un thème existant que j’avais transformé et par la suite, je l’ai intégralement recodé, je trouve ça assez gratifiant quand on arrive à obtenir ce qu’on veut !

      Répondre à Marlène
  • Sophasia

    Salut Lou,

    Comme j’ai décidé de changer le design de mon blog récemment, je m’attaque aussi aux titres par défaut sur blogger (oh joie)! J’ai vu dans les commentaires que t’avais fourni un lien vers un tuto en anglais, qui est très bien fait mais pour j’en ai découvert un autre en français: http://isteur.com/2015/05/02/changer-balises-titres-blogger/ en espérant que ça puisse aider.

    En tout cas, un grand merci pour cet article très instructif. Quand on commence un blog, on ne sait pas forcément que les balises des titres ne sont pas correctement configurées dans le code HTML et qu’il y a des répercussions sur le référencement.

    Au plaisir de te suivre!

    Sophie

    Répondre à Sophasia
    • Marlène

      Merci pour le lien, ça a l’air bien expliqué ! J’espère que ça servira à d’autres personnes :)

      J’ai lu un article passionnant sur le sujet il y a quelques temps : pourquoi les sites web ne sont pas seo-ready à leur création ? Il parle justement du fait qu’encore aujourd’hui, le référencement est souvent considéré comme une prestation “bonus” par les créateurs de sites (ça s’applique aussi aux créateurs de thèmes) et non comme un préalable indispensable !

      Répondre à Marlène
    • Sophasia

      Il est super intéressant ton article! Merci pour le partage :) Avoir eu vent de cet article dès le début et connaître ton blog avant m’auraient évité bien des bourdes!

      J’ai beaucoup aimé la comparaison avec l’hôtellerie mais le gars dit vrai en même temps. J’ai aussi été surprise du fait que les développeurs ne soient pas suffisamment armés face au SEO, pour qui ça demeure un mystère, voire subsidiaire mais en même temps, on craint toujours ce qu’on ne connaît pas.

      En voulant remettre mes balises en place, ma mise en page était fichue et comme Google n’accepte pas ma sauvegarde, obligée de rétablir le blog1 par défaut. Il faut voir le côté positif, je progresse!

      Dans mon cas, ce n’est pas dramatique sachant que je blogue pour le plaisir d’écrire et de partager mais pour les sites professionnels, on perd quand même pas mal en visibilité!

      Répondre à Sophasia
    • Marlène

      Disons que sur des secteurs très concurrentiels, toute optimisation, même minime, est bonne à prendre. D’ailleurs, au-delà du code lui-même, la plupart des gens qui sont amenés à mettre à jour les sites pro (rédacteurs, etc) ne sont pas formés aux petites optimisations élémentaires à faire sur les images par exemple.

      Répondre à Marlène
    • Sophasia

      C’est bon à savoir car ça permet d’anticiper par rapport aux balises ou le cas échéant de rectifier le tir. En tout cas, ça m’a donné une idée d’article mais pour le blabla technique, je renverrai vers ton blog.

      Répondre à Sophasia
  • Trendy-Show

    Personnellement j’ai une question. J’ai bien compris l’intérêt des balises, mais le soucis sur mon site, c’est que lorsque j’emplois les balises h2, elles mettent vraiment le texte en caractères ENORME. Donc, on peut modifier ça? Parce que du coup, je ne les emploies pas, c’est vraiment moche niveau visuel. Merci !

    Répondre à Trendy-Show
    • Marlène

      Bien sûr, tu peux les modifier dans le fichier style.css de ton thème WordPress. Tu as une ligne écrite comme ça :

      h2 { font-size: 40px; line-height: 50px; margin-bottom: 10px;}

      Il suffit de remplacer la taille actuelle de 40px par une taille plus petite de ton choix ! N’hésite pas à faire une sauvegarde du fichier style.css avant de le modifier. Comme ça, tu pourras restaurer cet original si “tu fais une bêtise” en modifiant ton code :)

      Répondre à Marlène
  • Yoann

    Tient et moi qui utilisais toujours une balise 3 après une balise une balise 1 parce que je trouvais que cela faisait “plus jolie” et que de toute façon je pensais que ce n’était qu’un élément de décor.

    Il va falloir que je revois la structure de mes articles.

    Merci pour cette article ;)

    Répondre à Yoann
    • Marlène

      Au début c’est vrai qu’on fait souvent des choix en fonction de l’esthétique alors que lorsqu’on a accès au code de son blog, on peut facilement personnaliser l’affichage de ces balises hn. Sur WordPress par exemple, dans le fichier style.css, on peut soit les personnaliser à l’échelle du blog entier, comme ça :
      h3 {font-size:1.2em;color:#880000;}

      Ou à l’échelle d’un élément précis, par exemple en ciblant uniquement les h3 situés dans un article commençant par une balise <div class="post-content">, comme ceci :
      .post-content h3 {font-size:1.2em;color:#880000;}

      Répondre à Marlène
    • Yoann

      Ca m’interresse beaucoup puisque j’aimerais beaucoup améliorer le visuel de mes article avec de belles balise comme les tiennes.

      Connaitrais tu un site où on pourrait se procurer des bouts de codes “prêt à l’emploi” d’améliorer les titres puisque je suis un néophyte complet en codage.

      J’aimerais aussi savoir comment intégrer les cases cochés à mes articles (celle que tu met pour faire des listes comme sur cet article par exemple). J’ai vu ça également sur d’autres blogs, mais j’ai pas réussi à trouver comment faire.

      Au plaisir,

      Yoann

      Répondre à Yoann
    • Marlène

      Il y a un livre qui va sortir dans moins de 2 semaines, qui s’appelle “Relooker son thème”. J’en parlerai sur le blog car il vise justement à apprendre aux débutants à personnaliser leur thème WordPress. Sinon, tu peux regarder la partie “Les titres” de cette page : Tutoriel CSS. Elle te donne des codes avec des explications pour personnaliser les balises h1 et h2. Ces codes s’insèrent dans le fichier style.css du thème (ou dans celui du thème enfant si tu as créé un thème enfant, chose qu’il faut en général apprendre très vite quand on modifie un thème WordPress existant).

      Concernant toutes les icônes que j’utilise, elles passent par la police FontAwesome que j’ai installée sur le blog. J’ai prévu de faire un tuto sur le sujet en septembre.

      Répondre à Marlène
  • AU303

    Sur blogger, je me suis rendue compte d’une autre chose : quand on met un logo en entête à la place du texte titre (ce qui est souvent le cas des blogueurs qui veulent customiser leur entête par une belle image) la balise h1 disparait.
    Ce qui fait que la home page se retrouve sans h1. Voici un billet que j’ai trouvé qui explique comment rajouter ce “manque” : http://www.mybloggertricks.com/2015/06/missing-H1-Tag-in-Blogspot-blogs.html.
    Si ça peut aider ;-)
    Pour ma part je n’ai pas rajouté les itemscope comme il le suggère pour le moment, et n’ai pas mis le h2 sur le logo quand je suis sur page index (comme il se place chronologiquement avant le h1 des titres des posts cela ne me semblait pas logique) qu’en penses tu Lou ?

    Répondre à AU303
    • Marlène

      Merci de partager de bonnes adresses !

      Sur la page d’accueil, je choisis pour ma part de mettre les titres des posts en h2 et le titre du blog en h1. Concernant les itemscopes, je m’y suis mise en début d’année sur le blog dans son ensemble (les champs les plus classiques : auteur, date de publication, etc). Il me reste à “itemscoper” toutes les critiques de livres et films :) Ça demande quand même un certain boulot mais Google a intégré les données structurées à son outil Webmaster Tools donc ça laisse entendre qu’ils prennent ça au sérieux… et de plus en plus de développeurs de thèmes se mettent aussi à les intégrer.

      Répondre à Marlène
    • AU303

      Je viens de me rendre compte que le thème que j’utilise a déjà intégré des itemscope, mais comme je ne savais pas ce que c’était 8-) ni que ça existait ! bref, ça m’a l’air ardu tout ça … En testant mon url dans Structured Data Testing Tool malheureusement ça détecte des erreurs … dommage !

      Répondre à AU303
    • Marlène

      J’ai remarqué que cet outil détectait des erreurs que Google Webmaster Tools ne détecte pas. Par exemple, l’outil me signale qu’il me manque le “headline” alors que cette absence n’est pas pénalisante aux yeux de Webmaster Tools (contrairement au balisage type “author” par exemple, signalé comme une erreur s’il est absent).

      Répondre à Marlène
  • La fille de l'encre

    Je comprends très bien l’utilisation et la logique des balises sur un billet mais quid d’une page d’accueil alors que tu as plusieurs titres dans tous les sens ?
    Comment Google fait la lecture ? sur la home complète ?
    Parce que si c’est le cas, comment différencier entre le nom de son blog, le titre de ses billets en home et les titres des rubriques sur la droite qui sont dans mon cas “articles récents” puis le nom de mes articles ?

    Suis-je claire ? J’ai comme un doute :)

    Répondre à La
    • Marlène

      Sur la home en théorie on met le nom du blog en h1 car la page d’accueil est censée refléter le blog dans son ensemble… et on met les titres des articles en h2. Sur les pages internes c’est le titre de l’article ou de la rubrique (selon le cas) qui passe au premier plan (donc en h1) tandis que le h2 sert pour les éventuels sous-titres.

      J’espère que ça t’éclaire un peu, sinon n’hésite pas à me le dire !

      Répondre à Marlène
    • la fille de l'encre

      Oui oui, c’est très clair mais lorsque sur la home, on a ce schéma, Google lit la page dans son ensemble ou par colonne ?

      Colonne centrale Colonne de droite
      Nom du blog Articles récents

      nom des articles nom des articles

      Répondre à la
    • Marlène

      Bon, je n’ai pas la prétention de lire dans l’esprit de Google mais il faut bien se dire qu’à l’arrivée, il référence une page et pas une colonne. Autrement dit, dans les résultats de recherche Google c’est une page dans son ensemble qui est classée. Je pense donc que la sémantique globale reste primordiale.

      Sur le plan technique on peut aujourd’hui (depuis HTML5) avoir plusieurs balises h1 sur une même page et donc plusieurs hiérarchies (une par section). Mais je crois qu’il faut se poser la question du “pourquoi”. La colonne apporte-t-elle un véritable plus ou sert-elle à stocker des éléments secondaires ? Mérite-t-elle sa propre hiérarchie ?

      Disons qu’en ajoutant une seconde hiérarchie, il y a plus de risque de ne pas maîtriser l’interprétation finale… Le référencement avec un seul h1, où l’on considère la colonne comme secondaire, marche encore très bien donc pas mal de référenceurs sont réticents à adopter une autre méthode sur laquelle on a finalement peu de recul :) Peut-être que c’est un tort, je vais creuser la question en tout cas !

      Répondre à Marlène
  • AU303

    Parfait ! avec le lien que tu nous conseilles pour blogger, ça marche impeccable pour mettre en h1 les titres d’articles quand on n’est pas sur la home page. Je vais pouvoir grâce à toi repenser la structure de mes pages !!! MERCI ;-)
    @Letizia : Je me suis permise de regarder sur ton blog ce qu’il en est. J’aime bien regarder pour comprendre. Les titres des widgets, plutôt qu’en caractères gras (qui n’est pas censé gérer des tailles de police) il faudrait que tu leur mettes un h3 (donc plutôt que b). Ensuite, tu spécifies dans ton skin la taille de police h3 que tu souhaites si tu la trouves trop grande. Chez toi la taille du h3 est fixée à 1.2307rem, un peu grand, mais avec une taille de 1,1rem ça devrait aller.
    Sinon, sur ta home page, tous tes articles figurent en h1, il n’en faut qu’un h1 par page normalement, il faudrait que sur cette page spécifiquement tes titres d’articles, apparaissent en h2.
    Tu me corriges si je fais erreur Lou ;-)

    Répondre à AU303
    • Marlène

      Pour ma part je ne conseille pas du tout de mettre les titres de widgets en h3. D’abord, pour une question de sémantique : la plupart du temps le contenu du widget n’a pas de lien sémantique avec la page donc n’a pas de raison valable de faire partie de sa structure hn ; ensuite, en mettant un h3 on augmente les risques de saut de niveau car tous les articles/tous les blogs ne mettent pas de sous-titres dans leurs articles, on risque donc d’avoir une structure avec un gros titre (en h1) et des widgets (en h3) => ne reflète pas le sens réel de la page.

      Pour les h1, tu as raison, dans ce cas précis les titres des articles de la home devraient être en h2 et le h1 devrait plutôt encadrer le nom du blog.

      Répondre à Marlène
    • Letizia

      @AU303 : Merci pour ton commentaire. En fait c’est la police que je trouvais pas top pour mon widget c’est pour ça que j’avais mis <b>. C’est drôle, je n’avais pas pensé à aller voir les autres et finalement, le est exactement ce que je voulais. Concernant la home page, je note cette remarque mais j’attends aussi l’avis de Lou parce que là, c’est trop d’info pour mon petit cerveau :)
      @Lou : Maintenant j’ai une question un peu bête… C’est quoi la différence entre l’utilisation d’un titre pré-formater dans mon thème et utiliser une balise <b> ? C’est une question de temps de chargement?

      Répondre à Letizia
    • Marlène

      Arf, je ne vois pas la balise à laquelle tu fais référence car elle ne s’affiche pas ! Tu parles de la différence entre un titre h3 et un titre sans balise hn dans un widget ? J’en ai dit plus dans l’une de mes réponses à ce sujet : la hiérarchie hn a vraiment un lien avec la sémantique de la page. Or, un widget n’apporte rien en général au sens de la page. Par exemple, si tu fais un article sur Paris, le fait de savoir que tu as un compte Twitter et un compte Hellocoton n’enrichit pas l’info que tu donnes sur Paris… Pas de place dans la sémantique de la page = pas de réelle raison de mettre un hn…

      Mais c’est un débat qui divise aussi les référenceurs, il y a 2 écoles :)

      Répondre à Marlène
    • Letizia

      Oups, j’ai utilisé une balise dans mon commentaire… Bon, je rechange le titre de mes widgets avec mon bon vieux b :) Merci pour les précisions. Il faudra que je me penche sur ce problème de h1 sur la home page. Vous trouvez des problèmes que je n’avais encore jamais vu :O C’est grave si je tarde un peu à faire ça? Ma page est construite automatiquement (comme vous pouvez l’imaginer).

      Répondre à Letizia
    • Marlène

      Grave, non, tu aurais pu ne jamais t’en apercevoir ;)

      Répondre à Marlène
    • AU303

      OK ! Merci pour ton correctif.
      Pour le coup j’ai du mal à comprendre pourquoi blogger n’a pas intégré tout ça dans sa façon de hiérarchiser les pages des blogs. Quand on regarde leur structure de base comme l’explique l’article en anglais, ça manque de logique … Donc du coup tu penses que les titres des widgets dans les colonnes ne devraient pas avoir de structure hn ? les miens sont en h3.

      Répondre à AU303
    • Marlène

      J’avoue que je me suis posé cette question aussi, à plus forte raison parce que Blogger appartient à Google. Ma seule explication est que c’est un projet qu’ils ne souhaitent pas pousser plus que ça : Blogger est peu optimisé, son interface n’a pas beaucoup évolué et reste très old school, il n’y a pas d’appli mobile digne de ce nom. La plateforme donne l’impression d’avoir arrêté son développement par rapport à d’autres produits et services Google en perpétuelle évolution. Pas assez rentable ?

      Pour les widgets, oui pour ma part je ne mettrais pas de balise hn sur les titres.

      Répondre à Marlène
    • AU303

      Pour ceux qui sont sous mozilla firefox, un module pratique à installer sous forme de toolbar pour mieux voir la structure hn dune page (entourer les titres deh1 à h6) : https://addons.mozilla.org/fr/firefox/addon/web-developer/ . Ce gadget fait plein d’autres choses utiles.

      Répondre à AU303
  • Letizia

    J’adore ton graphique sur les vacances, si ça ce n’est pas clair, je comprends plus rien. Par contre j’ai une autre question. Tu parles dans ton intro de widget mais tu n’abordes plus le sujet par la suite (ou alors j’ai raté quelque chose). Dans mes widgets, j’ai modifié les titres par du texte en gras et une couleur car je trouvais que la police d’écriture était vraiment trop grande… Est-ce que ça veut dire que le référencement ne fonctionnera pas pour ça? C’est important d’avoir un référencement sur les widgets?

    Répondre à Letizia
    • Marlène

      En règle générale, non justement :) Tu as choisi une très bonne option, pour ma part je n’ai pas non plus de balise hn sur les widgets mais de simples div. J’ai prévu de faire un article plus spécifiquement dédié à WordPress car j’ai reçu une question là-dessus par mail !

      Répondre à Marlène
  • AU303

    Merci pour ces explications claires. Etant chez blogger, les titres des posts que l’on publie ont systématiquement une balise h2, du coup il faut que je vois comment on peut modifier ça, il semblerait que le h1est réservé au nom du blog … Je reviens vers toi si je trouve quelquechose.

    Répondre à AU303
    • Marlène

      Dans l’idéal, il faut faire ça avec une condition qui dit “si on n’est pas sur la page d’accueil, alors il faut un h1… et si on est sur la page d’accueil il faut un h2” autour du titre des articles. Je ne sais pas si tu parles anglais, il y a un tuto ici : Optimiser les balises de titre sur Blogger. Sinon, je ferai un tuto sur le blog !

      Répondre à Marlène
    • AU303

      Tu es une perle ! Ça ira pour l’anglais ;-)

      Répondre à AU303
  • Elisabeth

    Enfin un article clair et efficace :)
    Une question quand même: pourquoi éviter de sauter des niveaux ? Quelles conséquences cela a-t-il ? Merci pour la réponse !

    Répondre à Elisabeth
    • Marlène

      Hello, merci de ton commentaire ! La véritable explication a été donnée par le W3C, organisme qui s’occupe justement des “normes” sur le web : ils écrivent très clairement parmi leurs recommandations que “les documents ne devraient pas sauter de niveau (par exemple, de H1 à H3), dans la mesure où convertir de tels documents vers d’autres représentations est souvent problématique”.

      Ils veulent dire par là que si l’ordre hiérarchique des balises n’est pas respecté, ça peut ne pas être interprété correctement dans d’autres contextes (ex : par le moteur de recherche, par un lecteur d’écran utilisé par les malvoyants, etc). Pour schématiser, sauter des niveaux crée un problème de logique… un peu comme si tu disais :
      (A) J’aime le foie gras.
      (B) Mais c’est cher.
      (C) Donc je n’achète pas de foie gras.

      S’il manquait le (B), ta phrase donnerait “J’aime le foie gras donc je n’achète pas de foie gras” ;)

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.