Si vous connaissez un peu le HTML, vous savez que les balises HTML sont principalement utilisées pour l’affichage de la page - ces balises indiquent au navigateur comment afficher le contenu de la page. Elles ne donnent aucune indication sur le type et le rôle du contenu présenté.

Le HTML5 sémantique comble cette lacune en définissant des balises spécifiques pour indiquer clairement le rôle du contenu qu'elles englobent. Cette information explicite aide les machines comme Google et Bing à comprendre les rôles et l'importance relative de différentes parties de votre page.

Exemples

Balises non sémantiques / génériques :

Balises HTML5 non sémantiques

Ce sont des exemples d'éléments HTML non sémantiques. Ils servent seulement de conteneurs communiquant au navigateur comment le contenu qu'ils englobent doit être affiché. Ils ne donnent aucune information sur le rôle de ce contenu dans la page.

Voici des balises sémantiques :

Balises HTML5 sémantiques

Ces éléments définissent clairement le rôle du contenu qu’ils englobent.

Pourquoi dois-je utiliser le HTML5 sémantique ?

Pour les utilisateurs, il est généralement facile d'identifier les différentes zones d'une page web en un coup d'œil. Les en-têtes, les menus et (espérons-le) le contenu principal sont tous immédiatement apparents et évidents. Mais les bots des moteurs de recherche (les “crawlers”) sont gravement malvoyants. Pour eux, les indices visuels sont quasiment impossibles à comprendre. Ils ont besoin de votre aide.

Si vous pouvez communiquer à Google et Bing quelle partie de la page est l'en-tête, laquelle représente le footer et laquelle contient les éléments de navigation, ils vous seront reconnaissants. Il est encore plus important de pouvoir indiquer quelle partie de la page présente le message principal de votre contenu.

Page web sans balisage HTML5 sémantique

L'utilisation du HTML5 sémantique en tant que telle ne révolutionnera pas vos performances SEO (désolé !). Comme vous le savez, le succès de votre stratégie de référencement naturel dépend d’un nombre immense de petits détails. Le HTML5 et l'un de ces petits détails. Il peut aider Google et Bing à mieux interpréter votre contenu et contribuer ainsi à vos efforts de référencement.

En élargissant notre vision, on peut dire que le SEO évoluera au cours des prochaines années. La communication explicite et cohérente avec ces machines deviendra essentielle pour votre stratégie SEO / AEO (Answer Engine Optimization).

À quoi ressemble le HTML5 sémantique structurel ?

Voici quelques exemples de balises HTML sémantiques : <nav> <footer> <section>.

Il existe beaucoup d'autres balises sémantiques HTML5 qui peuvent être utilisées (par exemple, <blockquote> et <em>). Dans cet article, je me concentrerai sur les tags HTML5 sémantiques dont vous aurez besoin pour communiquer la structure de votre page (les balises HTML5 structurelles) :

Balises HTML5 sémantiques structurels

Les balises HTML5 suivantes peuvent être utilisées à la place des balises <div> pour diviser le contenu de votre page en différentes zones ayant des rôles spécifiques. Comme vous pouvez l'imaginer, les machines comme Google et Bing adorent ça.

En attribuant un rôle à chaque partie du contenu grâce au HTML5 sémantique, nous pouvons rendre la page beaucoup plus claire et plus facile à indexer pour les moteurs de recherche.

NB : Étant donné que ces balises se comportent exactement comme les balises <div>, elles peuvent simplement remplacer les <div> existants sans affecter la mise en page (visuelle). Souvent, mettre en place le HTML5 sémantique peut être aussi simple que trouver une paire correcte de <div> et </ div> et de la remplacer.

Exemples de HTML5 sémantique

Voici un exemple hyper simple de HTML5 sémantique structurelle avec les éléments les plus importants (header, footer, nav et main) :

Page Web avec simple de balisage HTML5 structurelle

Nous avons simplement défini les rôles des zones de la page. Lorsque vous commencez à appliquer le HTML5, ces zones sont le meilleur point de départ : header, nav, main, footer.

Il vaut mieux avoir une implémentation super simple et à 100% correcte plutôt qu'une implémentation complexe et incorrecte.

Une mise en œuvre simple et correcte est déjà un grand pas en avant dans votre communication avec Google et Bing. Ne soyez pas trop ambitieux. Si vous ne faites pas les choses correctement vous pouvez rendre l'interprétation de vos pages plus compliquée pour les machines !

Des exemples plus complexes

Voici un exemple plus complexe avec des sections et articles :

Note : La mise en page visuelle (les blocs oranges) n’est pas utilisée pour définir les zones sémantiques de la page.

Page Web avec balises HTML5 Section et Article

Ici, nous définissons une hiérarchie pour notre contenu principal. Il existe un article parent qui identifie le contenu le plus important de la page. Cela donne un aperçu du sujet de cette zone de la page. Dans cet article, nous avons plusieurs sous-thèmes qui développent le sujet principal, identifiés par plusieurs sections imbriquées.

Le schéma ci-dessus peut paraître un peu bizarre, mais elle démontre bien que la mise en page HTML et le HTML5 sémantique ont des rôles distincts. Dans le monde réel, le balisage sémantique correspondra probablement d’avantage à la mise en page.

Note : Dans le schéma, j'ai ajouté une section de navigation en pied de page. Tout comme l'en-tête, le pied de page contient très souvent des éléments de navigation. 

Aside associé au contenu principal

aside pertinent-html5-semantique-kalicube.png

Nous avons ajouté deux éléments de contenu directement liés à l'article principal. En utilisant des <aside>, nous indiquons que le contenu associé est facultatif. Le contenu de l'article parent peut être lu et interprété sans pour autant afficher les <aside>.

Aside non associé au contenu principal

aside-non-pertinent-html5-semantique-kalicube.png

Ici, nous avons identifié un contenu indirectement lié à la page, en dehors de l'article principal du contenu. Nous indiquons que le contenu à côté n'est pas directement lié à l'article principal.

Cela suffit pour la plupart des besoins.

Note : Un <aside> n’est pas obligatoirement une colonne située à côté du contenu principal. Il peut également être utilisé pour les zones situées en dessous où au-dessus du contenu principal.

Version finale

Balisage Sémantique HTML5 finale

Conseils pratiques

Section ou Article ?

Il y a beaucoup de débats à ce sujet. Il n'y a pas de règles strictes sur les sections et les articles, et leur mise en œuvre est assez flexible. Ils ont à peu près la même importance et peuvent être utilisés de façon interchangeable la plupart du temps.

En règle générale, une section fait partie d’un ensemble plus grand. Un article est son propre élément. J'ai trouvé qu’utiliser un article divisé en sections est logique à la fois pour une machine et pour un humain (le code HTML sera plus facile à lire pour le développeur).

Peu importe votre choix, assurez-vous d'être logique et cohérent.

Sections HTML5

Les éléments imbriqués

Chaque partie peut contenir d'autres éléments. Par exemple, un article peut avoir son propre <header>, <footer>, <h1>, et même <nav> (les ancres en sont un bon exemple). Je n'ai pas donné d’illustration de cette imbrication HTML5 avancée, car je me suis concentré sur le SEO et, d’un point de vue SEO, il n'y a aucun avantage réel à pousser la logique du HTML5 sémantique aussi loin.

Comme mentionné ci-dessus, pour améliorer votre référencement vous devriez mettre en place un balisage simple et cohérent.

Ce qu'il ne faut pas faire

Juste pour vous avertir : j'ai vu de nombreux sites utiliser le design visuel comme guide pour leur mise en œuvre HTML5. Comme on l'a vu plus haut, le HTML5 sémantique n'est pas conçu pour le design.

Page web avec mauvais balisage HTML5

Cet exemple (étonnamment courant) fait doublon avec le HTML visuel. Pire qu’inutile, cela indique aux moteurs de recherche que la page contient 4 sujets différents, plutôt qu'un seul sujet et 3 sous-thèmes. Fournir des informations trompeuses aux machines aura un impact négatif sur l'interprétation de votre page.

Que faire maintenant ?

La mise en œuvre d’un balisage HTML5 sémantique structurel sur vos pages améliorera votre communication avec Google et Bing. Ils veulent, tous les deux, comprendre votre contenu. Ils veulent que vous leur communiquiez clairement dans leur langage et que vous les informiez. Faites-le !

Communication

La communication avec les machines est l'un des deux piliers d'une stratégie de référencement à long terme qui vous permettra de réussir dans le monde de “Moteurs de Réponse”. Il y a beaucoup de choses que vous pouvez faire pour améliorer la communication. Le HTML5 sémantique en est un. Le balisage structuré Schema.org en est un autre. Découvrez mon article précédent pour en savoir plus.

Crédibilité

Le deuxième pilier de la stratégie SEO à long terme est la crédibilité en ligne. Il y a aussi beaucoup de choses que vous pouvez faire pour améliorer votre crédibilité.

communication credibility

Communication + crédibilité = stratégie gagnante

Conclusion

Les rôles, l’importance et la hiérarchie des contenus d’une page web sont des choses que les humains comprennent de façon intuitive à partir de la mise en page. En utilisant correctement les balises HTML5 sémantiques à la place des <div>, vous simplifiez le traitement de vos pages par les machines.

comparaison-visuelle-robot-kalicube.png

Je vais continuer à écrire régulièrement sur le blog SEMrush et à partager mes techniques pour améliorer le référencement sur Google et Bing.

N’hésitez pas à partager vos réflexions dans les commentaires ci-dessous, et n'hésitez pas à publier vos questions sur la communication et la crédibilité dans le référencement. Vos questions m’aideront à définir les sujets que je devrai aborder en priorité !

telechargement-1.png

Author Photo
Jason BarnardFounder and CEO at Kalicube. Jason Barnard is a digital marketing consultant who specialises in Brand SERPs and knowledge panels - The Brand SERP Guy. Company: He is founder and CEO at Kalicube - a groundbreaking digital marketing agency that pioneered the concept of exact match Brand SERPs (what your audience sees when they google your brand name). Author: Jason is a regular contributor to leading digital marketing publications such as Search Engine Journal and Search Engine Land and regularly guests on others such as Wordlift, SE Ranking, Semrush, Search Engine Watch, Searchmetrics and Trustpilot. Speaker: He speaks at major marketing conferences worldwide including BrightonSEO, PubCon, SMX series and YoastCon. Podcast host: The conversations are always intelligent, always interesting... and always fun! Guests include Rand Fishkin, Barry Schwartz, Eric Enge, Joost de Valk, Aleyda Solis, Bill Slawski... Backstory: Jason has over 2 decades of experience in digital marketing, starting in the year Google was incorporated with a site for kids that he built up to become one of the 10,000 most visited sites in the world. Why “The Brand SERP Guy”? Because Jason has been studying, tracking and analysing Brand SERPs since 2013. Conclusion: Brand SERPs are your new business card, an honest critique of your content strategy and a reflection of your brand’s digital ecosystem. Find out more https://kalicube.pro/about/
More about SEO
Sous-domaine et sous-répertoire : qu'est-ce qui est le mieux pour le SEO ?L‘un des plus grands débats qui anime le SEO est celui des partisans du sous-domaine et du sous-répertoire. Dans ce guide, nous voulons dissiper la confusion et aider à répondre aux questions à ce sujet. Nous allons nous plonger dans les considérations liées au SEO que vous devez prendre en compte pour chacun de ces choix et indiquer les cas où il est le plus judicieux d‘utiliser telle ou telle option.
14 min read
10 moyens d'améliorer votre SEO en 2021 (et de booster votre classement)Avec plus de 3,5 milliards de recherches Google par jour, pour être suffisamment bien classé et que d‘éventuels visiteurs tombent sur votre contenu, vous devrez respecter les règles du moteur n°1. L‘un des meilleurs moyens d’utiliser pleinement votre contenu est d‘améliorer vos efforts d’optimisation pour les moteurs de recherche (SEO).
17 min read
Employee advocacy ou l’art de faire parler ses collaborateursL’employee advocacy est un concept qui vise à s’appuyer sur les collaborateurs volontaires d’une entreprise pour relayer la parole de cette dernière sur leurs canaux de communication personnels (souvent ce sont les réseaux sociaux). De cette manière, le collaborateur devient ambassadeur de son entreprise et lui permet d’amplifier son message auprès de l’audience de son employé.
5 min read
Google Web Stories : un boost pour votre trafic ?Les Web Stories sont la version web des stories que l’on connaît déjà depuis plusieurs années avec Snapchat et d‘autres réseaux sociaux. Il s’agit donc d’un format qui n’est pas totalement inconnu des internautes : un format court, en plein écran, optimisé pour le mobile, mais aussi visible sur Desktop. Elles peuvent être amenées à jouer un rôle majeur pour votre référencement.
9 min read
More articles about SEO Technique
Un sitemap HTML permet aux robots des moteurs de recherche de trouver et de classer facilement les nouvelles pages de votre site, ce qui améliore le classement SEO. Le sitemap ne se contente pas d'énumérer les pages de votre site.

SEO Technique

7 min read

Le sitemap HTML : ses avantages pour le référencement et les utilisateurs

Un sitemap HTML permet aux robots des moteurs de recherche de trouver et de classer facilement les nouvelles pages de votre site, ce qui améliore le classement SEO. Le sitemap ne se contente pas d‘énumérer les pages de votre site. Il contient également des informations sur chacune d‘elles, telles que la date de création et de dernière mise à jour, ainsi que sa pertinence par rapport aux autres pages.
Olivier AmiciApr 08, 2021
L’optimisation du crawl budget est une étape souvent oubliée qui pourtant rapporte gros ! Laissez-vous guider et optimisez votre crawl budget dès maintenant !

SEO Technique

9 min read

Budget crawl : comment l’optimiser ?

Malgré son importance, la phase de crawl fait partie de ces notions à classer parmi les moins « grand public » dans le domaine du SEO. Et cela a du sens : il s’agit de l’une des optimisations SEO les plus orientées vers les robots.
Olivier AmiciApr 06, 2021
Qu'est-ce que le HTTPS

SEO Technique

13 min read

Qu'est-ce que le HTTPS : le guide complet sur le fonctionnement du HTTPS

HTTPS veut dire HyperText Transfer Protocol Secure (protocole de transfert hypertextuel sécurisé), et c‘est la version chiffrée du HTTP. Dans cet article, nous allons plonger dans l‘opposition entre le HTTP et le HTTPS, je détaillerai leur fonctionnement, et je vous montrerai comment faire en sorte que votre site survive à tout problème technique lorsque vous migrez d‘un protocole à l‘autre.
Olivier AmiciFeb 03, 2021
Comment soumettre une URL

SEO Technique

14 min read

Comment soumettre une URL ou un site web à des moteurs de recherche comme Google, Yahoo ou Bing

Si votre site n‘est pas dans l‘index de Google, il ne pourra pas être trouvé lorsqu‘un utilisateur effectuera une recherche. Dans ce guide, vous apprendrez comment soumettre votre site à Google et à d‘autres moteurs de recherche (Bing, Yahoo, Yandex et DuckDuckGo), et vous verrez d‘autres façons de faire en sorte que les moteurs le découvrent.
Jason BarnardFeb 01, 2021
La recherche sémantique

SEO Technique

16 min read

La recherche sémantique : comment impacte-t-elle vos résultats SEO ?

La recherche sémantique permet d‘obtenir des résultats de recherche de meilleure qualité et plus pertinents. Elle ajoute une nouvelle couche de complexité au SEO, nécessitant une nouvelle approche des tâches comme la recherche de mots clés et l‘optimisation du contenu. Dans ce guide, nous vous expliquons en détail ce que c‘est et comment cela fonctionne.
Olivier AmiciNov 23, 2020
Réalisation d'un audit SEO

SEO Technique

20 min read

Comment réaliser un audit SEO en 18 étapes

Il est essentiel pour le référencement de réaliser régulièrement des audits SEO afin de trouver et de corriger les problèmes qui pourraient entraver les performances de recherche organique de votre site. Dans ce guide, nous vous guidons pas à pas pour entreprendre un audit SEO simple mais efficace et identifier les problèmes que vous devrez résoudre en priorité pour relancer votre croissance.
Olivier AmiciSep 14, 2020