Vous avez peut-être déjà entendu parler de "balises SEO", des morceaux de code censés aider les moteurs de recherche à bien comprendre votre site. On entend parfois ce terme au sujet des balises title et meta description mais aujourd'hui, je vais vous parler des balises h1, h2 et suivantes !
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 SEO h1 h2 et autres dans vos contenus !
Dans cet article
Une balise SEO 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 ont pour fonction première de hiérarchiser les informations : ce sont les balises h1, h2, h3, h4, h5 et h6.
Elles se présentent sous cette forme :
<h1>Ceci est un gros titre</h1>
Pendant très longtemps, on a considéré qu'il fallait à tout prix inclure les mots-clés stratégiques ciblés par la page dans ces balises SEO, afin que la page puisse être bien référencée.
Par exemple, si vous écriviez un article sur le "gâteau au chocolat", il fallait absolument faire apparaître le terme "gâteau au chocolat" dans la balise h1 et la balise h2.
Aujourd'hui, on continue souvent à fonctionner ainsi par habitude mais Google a rappelé que l'analyse n'était pas si "mécanique". Le moteur de recherche se sert surtout des balises SEO pour guider l'interprétation d'une page : mieux comprendre de quoi elle parle, pour pouvoir mieux orienter les internautes vers le contenu qui saura les aider.
John Mueller de Google a ainsi expliqué :
"Je pense que de manière générale, on donne un peu trop d'importance aux balises de titre dans le sens où c'est très facile de se laisser entraîner dans de nombreuses discussions théoriques sur ce que devraient être des balises de titre optimales.
Nous utilisons bien les titres en matière de recherche, mais nous nous en servons pour mieux comprendre le contenu des pages.
[...] Bien entendu, il existe une forme de lien entre le fait que Google comprenne mieux mon contenu, et le fait que je sois mieux positionné sur les requêtes que je trouve pertinentes. Parce que lorsque l'on écrit du contenu en ayant pour objectif qu'il soit bien référencé - ce que vous faites sans doute, le fait que [Google] soit capable de mieux comprendre ce contenu aide un peu.
Ça ne veut pas dire que d'un seul coup, votre page va se retrouver n°1 sur des requêtes compétitives juste parce que vous avez considérablement aidé Google à comprendre votre contenu.
Ceci étant dit, je pense que c'est utile d'examiner les titres sur une page mais ne vous laissez pas trop absorber par tous ces détails et ces variations. A la place, essayez plutôt de trouver un moyen de faciliter la compréhension du contenu par les gens et par les scripts, ainsi que le contexte des choses sur vos pages".
Autrement dit, bien structurer vos articles est important parce que ça favorise une bonne compréhension... mais ce n'est pas une "recette de cuisine" où il faut suivre telle et telle règle au pied de la lettre pour être bien référencé !
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 :
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.
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 SEO, j'utilise donc l'expression "balises SEO" dans mon titre h1. C'est purement de la logique :)
- 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...
Encore aujourd'hui, beaucoup de référenceurs choisissent de n'utiliser qu'une seule balise h1 par page afin de faire ressortir "le grand thème" dont il est question.
Les autres balises SEO : balises 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 "Balises SEO : comment bien utiliser le h1, h2 pour le référencement ?". Il informe visiteurs et moteurs de recherche qu'il est question de ces balises SEO.
- J'aborde ensuite le sujet sous deux angles différents : la définition des balises en question ("Une balise SEO 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 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. Il manque une étape dans le raisonnement, ce n'est donc pas bon pour la logique de 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 concernant l'importance de tel ou tel titre.
Enfin, ayez des balises SEO uniques - La même balise h1 ou h2 n'est pas censée apparaître à plusieurs endroits de votre site. Ça signifie qu'il ne faut pas utiliser ces balises pour mettre en forme un titre présent sur plusieurs pages (le titre d'un widget, d'un menu, etc).
A retenir sur les balises de titre en SEO
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 comme les visiteurs à 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 !
Merci pour cette mini formation sur balise SEO. Si je comprends bien les balises sont en réalité des titres, sous-titre et sous sous-tritre…
Bonjour Charles, oui, c’est cette logique-là :) Une logique qui se traduit dans le code de la page, à travers les balises.
Bonjour, j’ai bien compris votre article, mais où peut-on définir ces balises sur WordPress ?
Bonjour Océane, elles sont en partie définies par le thème choisi (le créateur d’un thème WordPress leur donne par défaut une certaine mise en forme, par exemple, décide qu’il met tel ou tel type de balise sur telle ou telle zone de la page)… et on peut, en rédigeant un article, y faire appel (WordPress appelle ça « titre 2 » pour le h2, titre 3 pour le h3, etc, dans l’éditeur de texte).
Bonjour Marlène,
je m’interroge sur la pertinence du h1 utilisé pour le logo. Sur la homepage c’est très bien, mais sur les autres ? Sur mon site, le logo est en effet dans une balise h2 sur les pages secondaires, ce qui entraîne une mauvaise hiérarchie des titres. Qu’en pensez-vous ? Que faire ?
Merci.
Hello Hélène, sur les pages internes du site il ne doit à mon sens y avoir aucune balise hn sur le logo ou le nom du site, ces balises servent alors exclusivement au contenu (h1 sur le titre du contenu, h2 sur les sous-titres, etc).
Je vois que vous êtes sur WordPress, n’hésitez pas à consulter mon article sur l’optimisation de ces balises pour WordPress.
J’étais de ces blogueurs qui utilisaient les titres comme mise en forme, ou qui n’utilisaient pas les titres car je n’aime pas ceux de mon thème … J’ai un boulot énorme d’optimisation des balises sur mon blog, merci beaucoup pour cet article !
Tu es loin d’être la seule à faire ça… je le vois même encore chez des développeurs professionnels dans mon travail ;) J’ai beau marquer en rouge, en gras, souligné, encadré qu’il ne faut jamais utiliser ces balises pour de la mise en forme, par exemple comme titre de widget répété sur toutes les pages, je me retrouve toujours avec quelques bêtises qui traînent :)
Bonjour,
Merci pour cet article, j’ai une incompréhension que je n’arrive pas à résoudre…
J’ai compris à quoi server les balises H1 H2 H3,… mais je n’arrive pas à comprendre si pour une balise H2 il faut qui y est a l’intérieur de cet balise du contenu avec des mots clés ou bien si il faut juste que ce soit un titre comme « Description » et après la balise le contenu ? (pour un site e-commerce)
Quelle est la bonne formule ?
1er cas : Description et ensuite le contenu
2ème cas : Description Cette tasse à café en porcelaine de couleur blanc vernie s’accordera parfaitement avec vos set de table…
Merci d’avance pour votre aide.
Damien.
Hello, il faut utiliser les balises Hn (h1, h2, h3, etc) pour inclure des mots-clés pertinents. Ces balises ne doivent pas servir pour indiquer des éléments récurrents (typiquement, « Description » est un terme récurrent que l’on va retrouver sur toutes les pages produit => pas de balise hn).
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…
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.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.
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.
J’ai fait le test des balises sur mon blog et c’est bon ;) merci encore. Bonne journée
cela n’a jamais été aussi clair!! merci
Merci à toi pour le message !
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 !
Merci Ornella, j’espère que ça te servira !
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 !
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é :)
Petite question, est-ce que le titre principal dans wordpress est automatiquement un H1 ? Où faut-il l’indiquer ?
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 :)
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 !
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 !
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
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 !
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é!
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.
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.
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 !
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 :)
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 ;)
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;}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
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.
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 ?
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.
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 !
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).
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 :)
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 !
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
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 !
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 ;-)
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.
@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?
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 :)
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).
Grave, non, tu aurais pu ne jamais t’en apercevoir ;)
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.
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.
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.
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?
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 !
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.
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 !
Tu es une perle ! Ça ira pour l’anglais ;-)
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 !
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 » ;)