Google et Bing adorent le HTML5 sémantique, c’est donc excellent pour le SEO ! Cet article est un guide simple pour les balises HTML5 sémantiques que les rédacteurs web devraient utiliser pour mieux communiquer avec Google et Bing. Puisque vos concurrents ne mettent probablement pas en pratique ces astuces, l’utilisation correcte de balises HTML5 sémantiques dans votre contenu vous propulsera au-dessus de la mêlée en 2018 et au delà. Donc, lisez la suite...
Pour bien structurer vos pages web en utilisant le HTML5 sémantique, lisez cet article.
Qu’est-ce que le HTML5 sémantique ?
Si vous vous y connaissez un peu en HTML, vous savez que les balises HTML sont (la plupart du temps) utilisées pour le côté visuel du contenu. Ces balises indiquent au navigateur comment afficher le contenu sur la page.
Mais, certaines balises HTML5 transmettent des informations sémantiques... Elles donnent un contexte au mots qu'elles contiennent.
Voici les balises les plus utiles que vous devez connaître pour le HTML5 sémantique :
Continuez à lire cet article pour apprendre à utiliser ces balises HTML5 correctement.
Balises H1 à H6 = Titres
Tout le monde connaît les balises <h>. Elles structurent votre contenu - elles divisent votre texte en sous-thèmes et sous-sous-thèmes. Le <h1> décrit le thème traité par l’article dans son ensemble.
Ensuite, les autres balises <h> sont utilisées pour hiérarchiser les sous-thèmes. Chaque <h2> est un sous-thème du thème général (la balise parente <h1>). Chaque <h3> est un sous-thème du <h2> auquel il appartient, donc un sous-thème du sous-thème. Et ainsi de suite.
Les balises <h> sont incroyablement puissantes, car elles identifient les sous-thèmes du contenu, leurs importances relatives, et les rapports qu’ils entretiennent entre eux. Beaucoup d’informations sémantiques sont communiquées via les balises <h>. Ça vaut la peine de prendre le temps de bien s’en occuper.
Malheureusement, beaucoup de pages web ne respectent pas la sémantique des balises <h>, souvent pour des raisons de mise en page. Par exemple, passer directement d’un <h1> à un <h3>, parce que « ça fait plus beau », est une mauvaise idée ! Ne le faites pas.
Utilisez les balises pour représenter la structure sémantique du contenu plutôt que son apparence.
Utilisez le CSS pour contrôler l’aspect visuel des textes.
Conseil : Bien que les balises aillent du H1 au H6, il est très rare que l’on utilise les balises <h> au delà de <h4>. Quand vous atteignez le H4, posez-vous la question : "Est-ce que mon article couvre trop de sous-thèmes ? Ne serait-il pas mieux de découper le sujet en plusieurs articles ?".
Utiliser les balises <h> de manière sémantique – un exemple :
Important ! La couleur, la taille, et la disposition horizontale du texte dans l’exemple ci-dessus n’a aucune incidence sur la signification sémantique des balises.
Sémantiquement, le HTML ci-dessous est exactement la même chose !
Gardez à l’esprit tout au long de cet article que l’aspect visuel du texte contenu dans les balises HTML5 n’affecte pas la signification sémantique que ces balises transmettent aux moteurs de recherche.
Balise STRONG = Important
J’ai fourni 2 exemples de présentation. Le design du texte à l’intérieur des balises n’est pas lié à la sémantique de la balise strong.
Si un ou plusieurs mots ont plus d’importance que les autres dans la phrase, utilisez la balise <strong>.
Pour le SEO, bien qu’il soit très tentant de mettre des balises <strong> autour de tous vos mots clés, ne le faites pas. Une utilisation exagérée de ces balises dilue l’effet et déclenchera les filtres de spam. Utilisez cette balise modérément et à bon escient.
Balise EM = Accentuation
Le design du texte à l’intérieur de la balise n’est pas lié à la sémantique de la balise <em>.
Si un ou plusieurs mots doivent être lus avec un appui d'intonation pour que la phrase ait plus de sens, utilisez la balise <em>.
En lisant cette phrase à haute voix, vous insisteriez davantage sur les mots « ou plusieurs ».
Un lecteur d’écran insistera avec sa voix (de robot) là où il rencontrera cette balise.
Balise MARK = Importance accrue dans le contexte
Le design du texte à l’intérieur de la balise n’est pas lié à la sémantique de la balise mark.
Elle est utilisée pour marquer (ou souligner) le texte afin d’attirer l’attention du lecteur du fait de sa pertinence par rapport à l’activité actuelle de l’utilisateur / le contexte. Par exemple, souligner une réponse courte à une question.
Balise DEL = Texte supprimé, Balise INS = Texte inséré
Balise DEL = Texte qui a été supprimé après la publication initiale.
Balise INS = Texte qui a été inséré après la publication initiale.
Ici, j’ai changé d’avis sur ma cuisine préférée après un voyage en Thaïlande :)
Vous pouvez l’utiliser pour indiquer les mises à jour et les modifications. utilisez <ins> en combinaison avec <del>.
Balise ABBR = Abréviation / Acronyme
On peut afficher le texte de la manière que l’on veut. La signification de la balise <abrr> ne change pas.
Cette balise est peu utilisée, mais elle est très utile pour la désambiguïsation. L’ambiguïté est un problème immense pour Google et Bing, donc cette balise est très puissante. Insérer cette balise autour du mot « FFF » indique explicitement que l’on parle de la Fédération Française de Football (et non pas du Fédération Française de Fonck, par exemple).
Balise CITE = Citation
Encore une fois, on peut afficher le texte de n’importe quelle manière. La signification sémantique de la balise cite ne change pas.
Le texte contenu dans la balise <cite> représente le nom d’une personne ou le titre d’un œuvre (exemples :
un livre, un article, un essai, un poème, une partition, une chanson, un scénario, un film, une émission télé, un jeu, une sculpture, une peinture, une production théâtrale, une pièce, un opéra, une comédie musicale, une exposition, etc.)
Dans l’exemple ci-dessus, nous précisions explicitement que nous parlons du célèbre roman.
Balise BLOCKQUOTE = Citation longue
Utilisez la balise <blockquote> pour les citations. Si la citation est courte, il vaut mieux utiliser la balise <q>.
Info : <blockquote> devrait contenir une balise <cite> pour indiquer la source originale. Vous pouvez mettre <cite> à l’intérieur de la balise <blockquote> (invisible pour le lecteur), soit afficher un texte identifiant de manière visible la source originale (avec un lien, de préférence). J’ai illustré les deux possibilités ici.
Plus d'infos chez Jacques Martinet
Balise Q tag = Citation courte
La balise <q> est plus appropriée pour les citations courtes. Les navigateurs entourent généralement les textes <q> de guillemets. Si la citation s’étend sur plusieurs lignes, il vaut mieux utiliser la balise <blockquote>.
Balises FIGURE et FIGCAPTION = Élément illustratif
La balise <figure> est utilisée pour un contenu média qui fait partie du flux naturel du contenu texte qui l’entoure. Pour nous, cela veut dire des photos, des cartes et des graphiques. Vous pouvez ajouter une légende au-dessous ou au-dessous de l’image : placez-la simplement entre des balises <figcaption> à l’intérieur des balises <figure>, comme indiqué ci-dessus.
Balises UL et OL = Listes
Le choix de <ul> ou <ol> ajoute une signification sémantique à la liste.
Même si elles ne relèvent pas strictement de la sémantique, les listes ordonnées et non ordonnées mérite largement leur place dans cet article. Elles sont structurées et donc très simples à digérer et à comprendre pour Google et Bing.
Ne vous trompez pas :
<ul> = pas d’indication d’ordre
<ol> = l’ordre (dans ce cas ma préférence) est explicite
Quoi, pas de balises B I U S ???
Les balises B I U S = Superflues à tout point de vue.
Toujours valides, ce sont des balises HTML sémantiquement inutiles. Elles n’apportent aucun bénéfice SEO.
La balise HTML dont on abuse le plus (et inutile) : <b>
La première erreur (et la plus commune) est d’utiliser du gras comme astuce SEO pour « booster » un mot clé. Ça ne marche pas.
La balise HTML la plus déroutante : <i>
L’italique est également proposé comme astuce SEO pour « booster » un mot clé. Ça ne marche pas non plus.
La balise HTML qui induit le plus en erreur : <u>
Le soulignement est utilisé parfois comme astuce SEO pour « booster » un mot clé. Ça ne marche pas. En plus, ça ressemble à un lien.
Les balises <i> <b> <u> <s> n’apportent aucune valeur SEO.
Elles sont superflues.
Dans 99 % des cas, une des balises sémantiques HTML5 décrites dans cet article est plus appropriée et doit être utilisée à la place
HTML5 et accessibilité
Beaucoup d’aspects du HTML5 sémantique au service du SEO correspondent tout simplement à de bonnes pratiques pour l’accessibilité (lecteurs d’écran pour les malvoyants) : <alt>, <title>, <em>, <strong>…
Google est essentiellement aveugle, donc tout balisage HTML5 destiné à l’accessibilité aidera également Google (et votre SEO).
Mon conseil : penser à l’accessibilité quand vous construisez vos pages.
Conclusion
L’implémentation correcte du HTML5 sémantique est déjà extrêmement importante et elle le deviendra encore davantage dans les années à venir. Google et Bing (et les autres moteurs de recherche Qwant, DuckDuckGo, Lilo, etc.) ne peuvent pas comprendre à 100% la sémantique de votre contenu. Ils ont besoin de votre aide. Pour citer HTML5 Rocks :
Plus que l'on fait du bon balisage sémantique du contenu, plus ça sera facile de le traiter pour les robots.
Pour le moment, la plupart des rédacteurs de contenu web n’ont pas la moindre idée de l'implémentation correcte des balises HTML5 - ils utilisent trop souvent les (mauvaises) balises non sémantiques. Prenez une longueur d'avance : implémentez correctement les balises HTML5 sémantiques ci-dessus.
Conseil bonus : WordPress et le HTML5 sémantique
Excellente nouvelle pour les utilisateurs de WordPress - dans l'éditeur de texte, l’essentiel est fait pour vous :
Il suffit :
-
rédiger le texte directement dans WordPress en utilisant les boutons de formatage par défaut
OU
-
copier/coller le texte de votre logiciel de traitement de texte (Word, OpenOffice, Google Docs, Pages...) sans formatage et appliquer ensuite le formatage de l’éditeur de texte WordPress.
.png)