qwanturank

Qu'est-ce que le HTML5 sémantique ?

Si vous en savez un peu sur le HTML, vous saurez que les balises HTML sont (principalement) utilisées pour formater le contenu - ces balises indiquent au navigateur comment afficher le contenu sur la page. Ils ne donnent aucune indication sur le type de contenu qu'ils contiennent ou sur le rôle que ce contenu joue dans la page. HTML5 sémantique corrige cette lacune en définissant des balises spécifiques pour indiquer clairement le rôle joué par le contenu qu'elles contiennent. Ces informations explicites aident les robots / robots d'exploration comme Google et Bing à mieux comprendre quel contenu est important, qui est une filiale, qui est pour la navigation, etc. En ajoutant des balises HTML sémantiques à vos pages, vous fournissez des informations supplémentaires qui aident Google et Bing à comprendre les rôles et l'importance relative des différentes parties de votre page. Ce guide suppose une compréhension de base de l'ajout de HTML à une page. Si tout cela commence à devenir un peu écrasant, prendre du recul et consulter un guide d'introduction HTML serait utile. Exemples: balises div et span. Non sémantique / générique. Ce sont des exemples d'éléments HTML non sémantiques. Ils servent uniquement de détenteurs pour indiquer au navigateur comment le contenu doit être affiché. Ils ne donnent aucune information sur le rôle que le contenu qu'ils contiennent joue sur la page. Exemples de balises sémantiques. Ce sont des éléments sémantiques. Pour filtrer les lecteurs et les robots des moteurs de recherche, chaque élément définit le rôle du contenu contenu dans leurs balises.

Pourquoi dois-je utiliser des balises HTML5 sémantiques ?

Pour les utilisateurs voyants, lorsqu'une page est bien conçue visuellement, il est facile d'identifier d'un coup d'œil les différentes parties d'une page Web. Les en-têtes, les menus et (espérons-le) le contenu principal sont tous immédiatement visibles visuellement. Imaginez maintenant que vous êtes aveugle. Les robots (araignées) de Google et de Bing sont, sinon aveugles, gravement malvoyants. Pour eux, les indices visuels sont incroyablement difficiles à voir et à comprendre - ils ont besoin de votre aide. Si vous pouvez communiquer avec succès à Google et à Bing quelle partie de la page est l'en-tête, qui est le pied de page et laquelle est destinée à la navigation, ils vous en remercieront. Plus important encore, en leur disant quel est le contenu le plus important, vous leur donnez une instruction explicite pour hiérarchiser ce contenu. Pour les utilisateurs aveugles ou malvoyants qui s'appuient sur des lecteurs d'écran pour décrire verbalement ce qui se trouve sur une page, une bonne utilisation des éléments sémantiques HTML5 permettra aux lecteurs d'écran de communiquer plus précisément votre contenu en rendant le visuel audible. Il est essentiel d'adopter cette nouvelle version de HTML afin de rendre votre contenu accessible à tous les visiteurs potentiels du site. Voici notre page. HTML5 sémantique est l'un de ces petits détails en apparence qui se trouvent au cœur de l'indexation et qui sont souvent sous-estimés. Le HTML5 sémantique implémenté avec précision donne un grand coup de main aux algorithmes d'indexation utilisés par Googlebot et Bingbot. Cela leur donne une meilleure compréhension (et une confiance en leur compréhension) de votre contenu, ce qui les aide à mieux indexer votre contenu, ce qui contribue à vos efforts de référencement. Entrée du moteur de recherche Fabrice Canel de Bing a déclaré dans une apparition sur mon podcast que c'était le cas - les pages avec HTML5 sémantique correctement implémenté ont un avantage en SEO par rapport à celles qui ne le font pas. Martin Splitt de Google l'a confirmé lors du SEJ Summit en juin 2020. Lorsque Googlebot et Bingbot stockent les pages analysées dans leur index, ils ajoutent une riche couche d'annotations. C'est cette couche annotative que les algorithmes de classement utilisent pour rechercher et extraire le contenu de pages Web individuelles. Une annotation plus riche et plus précise permet une meilleure trouvabilité et augmente les chances que tout élément de contenu donné soit pris en compte pour le classement par les algorithmes. Ainsi, l'utilisation correcte du HTML5 sémantique donne à votre contenu un avantage dans le processus sélectif qui est à la base du classement. Cela augmente les chances que les algorithmes de classement sélectionnent votre contenu en tant que candidat pour le classement en premier lieu.

Certains des sujets sémantiques HTML5 que nous aborderons

Structure des balises sémantiques HTML5

Exemples de balises HTML sémantiques:, et . Il existe de nombreuses autres balises HTML5 sémantiques qui peuvent être utilisées (par exemple

et ), mais dans cet article, je ne regarde que les balises HTML sémantiques dont vous aurez besoin pour diviser le contenu de la page en ses parties de base. Les balises HTML5 suivantes peuvent être utilisées à la place de des balises pour diviser le contenu de votre page en parties identifiées, chacune remplissant un rôle spécifique. Comme vous pouvez l'imaginer, des machines comme Googlebot et Bingbot ADORENT cela. Tags HTML5 sémantiques que nous utiliserons dans cet article. Vous verrez des exemples plus tard, mais un bref aperçu de ceux-ci serait:

  • Élément d'en-tête - Le L'élément définit le contenu qui doit être considéré comme les informations d'introduction d'une page ou d'une section.
  • Élément Nav - Les liens du menu de navigation principal seraient tous placés dans un étiquette. Mais les sous-menus de navigation ailleurs sur la page peuvent également en obtenir un.
  • Balise principale - Le corps d'une page doit aller dans le tag - pas les barres latérales et la navigation principale. Il ne devrait y en avoir qu'un par page.
  • Élément article - Le L'élément définit un contenu autonome pouvant se tenir indépendamment de la page ou du site sur lequel il se trouve. Par exemple, un article de blog.
  • Élément de section - En utilisant est un moyen de regrouper le contenu à proximité d'un thème similaire. Une balise de section diffère d'une balise d'article car elle n'est pas nécessairement autonome.
  • Élément de côté - Une L'élément définit un contenu moins important. Il est souvent utilisé pour les barres latérales - des zones qui ajoutent des informations complémentaires mais pas vitales.
  • Élément de pied de page - Vous utiliseriez à la base d'une page ou d'une section. Il peut inclure des informations de contact et une navigation sur le site.
  • Cette délimitation claire et l'attribution explicite des rôles à chaque partie du contenu rendent la page beaucoup plus claire et plus facile à indexer correctement pour Google et Bing. NB Puisque ces balises se comportent toutes exactement comme Mots clés; ils peuvent simplement remplacer les s dans la page sans affecter la mise en page. Dans de nombreux cas, la mise en œuvre de HTML5 sémantique peut être aussi simple que de trouver la bonne paire de et et les remplacer.

    Confirmation de Bing

    Fabric Canel, responsable de l'équipe Bingbot, a confirmé que le HTML5 sémantique est d'une grande aide pour eux dans une interview incroyablement perspicace pour mon podcast Discovering, Crawling, Extracting et Indexing at Bing.

    Exemples de HTML5 sémantique

    Exemple HTML5 super simple et sémantique:

    Ici, nous avons simplement défini le rôle que joue chaque partie de la page. Lorsque vous commencez à appliquer HTML5, c'est un endroit sûr pour commencer - en-tête, nav, main, footer. Exemple super simple avec les éléments les plus importants: en-tête, pied de page, nav et main. Il est préférable d'avoir une implémentation super simple qui est 100% correcte, plutôt qu'une implémentation complexe qui est incorrecte. Une implémentation inexacte envoie des signaux contradictoires et déroutants, ce qui ne fera qu'empirer les choses, pas les améliorer. 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; vous trompez, et vous pourriez créer plus de problèmes que vous n'en résolvez !

    Exemples HTML5 plus complexes

    Utilisation de sections et d'articles:

    Ici, nous avons fait une hiérarchie au sein de notre contenu principal. Il y a un article complet qui identifie le contenu central dans la balise principale. Cela donne un aperçu du sujet de cette partie de la page. Dans cet article, nous avons plusieurs sous-sujets qui développent le sujet principal identifié par les sections imbriquées. Notez que le design (les blocs orange) ne sont pas utilisés pour définir les zones sémantiques de la page. Notez que le design (les blocs orange) ne sont pas utilisés pour définir les zones sémantiques de la page. Ils sont la conception de la page - pour les humains. Cela semble un peu déroutant mais montre bien que la mise en page de la conception HTML et HTML5 sémantique ont des rôles distincts. Dans le monde réel, le balisage sémantique suit souvent la disposition plus que cet exemple. Règle générale: une section fait partie d'autre chose. Un article est sa propre chose. Notez également qu'ici j'ai ajouté une section de navigation au pied de page. Logiquement, tout comme l'en-tête, le pied de page contient des éléments de navigation.

    Mis à part

    Ici, nous avons ajouté deux éléments de contenu directement liés à l'article principal de contenu. En utilisant les côtés, nous indiquons que le contenu associé (à part) est facultatif. La section principale du contenu peut être montrée sans le (s) côté (s) et toujours être comprise.

    Mis à part indirectement

    Un aparté ne doit pas être une barre latérale à côté du contenu principal. Il peut également être utilisé pour les blocs en dessous du contenu principal contenant un titre, du texte et un lien vers une autre page Notre version finale d'une page balisée avec les balises HTML5. Ici, nous avons identifié un contenu indirectement lié à la page en dehors de l'article principal du contenu. Avec cette implémentation correcte de HTML5 sémantique, nous indiquons que le contenu dans le côté n'est pas directement lié à l'article principal. Surtout ici, nous avons explicitement identifié une grande partie du contenu non critique qui peut être exclu en toute sécurité de la prise en compte par les algorithmes de classement. Cela signifie qu'ils peuvent se concentrer sur le contenu important dans ce étiquette. Nous venons de faciliter considérablement le travail de l'algorithme d'indexation et des algorithmes de classement. Structurer une page Web avec HTML5 sémantique de cette manière suffit pour la plupart des besoins et fournit déjà un avantage concurrentiel en SEO.

    Conseils utiles

    Section vs article

    Il y a beaucoup de discussions à ce sujet. Il n'y a pas de règle fixe concernant les sections et les articles, et leur mise en œuvre est assez flexible. Ils sont plus ou moins les mêmes et peuvent être utilisés de manière interchangeable la plupart du temps. La chose la plus importante est d'être logique et cohérent sur votre site; Googlebot et Bingbot ADORENT absolument la cohérence. Astuce personnelle: J'ai trouvé que l'imbrication de sections à l'intérieur d'un article de contenu est logique pour une machine, mais aussi pour un humain (le code HTML sera plus facile à lire pour le développeur).

    Éléments imbriqués

    Les éléments peuvent imbriquer d'autres éléments. Par exemple, un article peut avoir son propre, ,

    (comme vu ci-dessus), et même (les liens d'ancrage sont un bon exemple). Je n'ai pas donné d'illustration de cette «super imbrication», et il y a une raison à cela ... Il est rare qu'une page Web nécessite un HTML5 structurel-sémantique aussi détaillé. Si la page devient aussi complexe à organiser, elle ne fonctionnera probablement pas bien en SEO, et vous voudrez presque certainement diviser le contenu en plusieurs pages. Comme mentionné ci-dessus, à des fins de référencement, vous devez vous concentrer sur la fourniture d'une page avec une structure solide et simple.

    Ce qu'il ne faut PAS faire avec HTML5

    Juste un avertissement - j'ai vu de nombreux sites utilisant la conception visuelle comme guide pour leur mise en œuvre HTML5. Comme vu ci-dessus, ce n'est pas pour cela que HTML5 sémantique est conçu. HTML5 sémantique n'est pas pour le design. Cet exemple (étonnamment typique) duplique simplement la disposition visuelle. Pire qu'inutile, cela indique que la page contient 4 sujets différents, plutôt qu'un sujet et 3 sous-sujets. Fournir explicitement des informations trompeuses à Googlebot et Bingbot aura un impact négatif sur leur compréhension et entravera la richesse et la précision de leurs annotations, rendant ainsi votre contenu plus difficile à trouver par les algorithmes de classement (voir ci-dessus). Aidez Googlebot et Bingbot, et ils vous aideront 🙂

    Prochaines étapes ?

    HTML5 sémantique est un moyen incroyablement puissant pour communiquer à Googlebot et Bingbot le rôle que joue chaque partie de votre page. Et lorsqu'ils ont une compréhension précise de cela, ils peuvent annoter plus précisément votre contenu lorsqu'ils le stockent. Ce qui ne semble peut-être pas un gros problème. Mais une annotation riche et précise des robots est ce qui rend le contenu facilement accessible pour chaque algorithme de classement: lien bleu de base, extrait en vedette, les gens demandent également, images, vidéos, etc. Quelle que soit la fonctionnalité SERP que vous visez, HTML5 sémantique vous donne la tremplin pour rivaliser.

    Les trois piliers de l'optimisation du moteur de réponse

    Compréhension

    La compréhension est l'un des trois piliers d'une stratégie de référencement à long terme qui réussira dans un monde où nous devrons optimiser pour les moteurs de réponse. Si vous voulez qu'une machine comprenne, vous devez communiquer clairement et efficacement. HTML5 sémantique est un moyen très efficace à votre disposition pour communiquer efficacement avec ces machines. Le balisage structuré du schéma en est un autre. Voici un article à ce sujet.

    Crédibilité

    Le deuxième pilier est la crédibilité. Il y a aussi beaucoup de choses que vous pouvez faire pour améliorer votre crédibilité. E-A-T est le pilier central ici. Regardez ce webinaire pour en savoir plus.

    Délivrabilité

    Le troisième pilier est la délivrabilité. Si Google ne peut pas fournir votre contenu à ses utilisateurs, ou s'il pense que votre site ne fournira pas le contenu de la manière attendue par ses utilisateurs, il ne proposera jamais votre contenu comme réponse à la question de son utilisateur (ou solution à son problème). Comprendre + Crédibilité + Délivrabilité = stratégie gagnante.

    Communication + crédibilité + délivrabilité

    Tous les SEO (et AEO) se résument à la communication, la crédibilité et la délivrabilité. Je continuerai à écrire régulièrement ici sur SEMrush sur les techniques pour améliorer votre communication, votre crédibilité et la délivrabilité de votre contenu avec Google et Bing (au fait, Bing est sur le point de faire un grand retour). Veuillez partager vos réflexions sur cet article dans la section commentaires ci-dessous, mais n'hésitez pas à publier vos questions sur la communication, la crédibilité et la délivrabilité dans le référencement; vos questions aideront à définir les priorités de ce que je devrais écrire.

    En conclusion: un rappel d'un bon balisage sémantique HTML5 pour le référencement

    La structure, les rôles, l'importance relative et la hiérarchie sont des choses que les humains comprennent souvent instinctivement dès la conception / mise en page. Utiliser correctement les balises HTML sémantiques correctes à la place de facilite simplement cette même compréhension pour les machines.

    Quels sont-ils et comment les utiliser!

    S’abonner
    Notifier de
    guest
    0 Commentaires
    Inline Feedbacks
    View all comments