HTML5, SEO et balise main

Qu'est ce que HTML5 ?

HTML5 est la cinquième évolution du langage HTML, le système de balise omni-présent et nécessaire pour constuire des sites Internet. Cette évolution n'a pas encore été officiellement validé par le consortium W3C en version définitive. Ce processus de validation est toujours extrêmement long (les premiers travaux sur l'HTML5 ont commencé en 2004).

Par rapport aux évolutions précédentes de l'HTML/XHTML, l'HTML 5 a su garder une certaine simplicité pour être accessible aux plus grand nombre de webmaster, tout en proposant de nouvelles fonctionnalités très puissantes pour les besoins les plus sophistiqués. Même s'il est toujours difficile de prévoir le futur en matière de technologie, l'HTML 5 sera très probablement de plus en plus présent sur le Web.

Les versions récentes des principaux navigateurs (Chrome, Firefox, Internet Explorer...) sont capables de gérer la grande majorité des fonctionnalités introduites par l'HTML5. Concrètement cela signifie que les créateurs de site Web peuvent déjà tirer partie de l'HTML5 maintenant. Le prix à payer est que certaines fonctionnalités ne pourront pas fonctionner avec certains navigateurs anciens mais toujours utilisés aujourd'hui.

Voici le logo officiel de l'HTML5:

L'HTML5 et le SEO / Référencement naturel

Jusqu'ici il n'y a AUCUN indice que Google favoriserait les sites utilisant HTML5 par rapport à d'autres versions de l'HTML. Ceci est cohérent avec le but officiel annoncé par Google: fournir le contenu le plus intéressant pour ses utilisateurs en fonction de leur requête. Et il va donc privilégier la qualité du contenu plutôt que la technologie utilisée pour construire le site. Cela pourrait évoluer dans les prochaines années.

Concrètement, si vous avez un site existant qui n'utilise pas l'HTML5 et dont le référencement naturel est bien optimisé, d'un point de vue SEO il n'y a pas de besoin urgent de passer à l'HTML5.

A l'inverse, si vous avez décidé pour de bonnes raisons - autres que pour le SEO - de créer ou de remodeler en profondeur votre site Web en utilisant l'HTML5, il est intéressant de prendre en compte ces 2 fonctionnalités nouvelles de l'HTML5 qui vous aideront à optimiser votre site:

• Utiliser les nouvelles balises <header>, <footer>, <main>, <article>, <nav>, <aside> pour structurer votre site.

  En effet l'HTML5 introduit une série de nouvelles balises qui permettent d'identifier des blocs très classiques dans la plupart des sites Internet: un en-tête (header), un pied de page (footer), une zone de navigation / menu (nav), un article de contenu (article), un bandeau sur le côté (aside). C'est intéressant d'un point de vue SEO car cela facilite grandement la tache de Google pour "comprendre" la structure de votre site. Et en particulier de mieux cibler les zones de contenu les plus importantes de votre page.

  Aujourd'hui Google est déjà capable de faire cela avec les sites qui n'utilisent pas l'HTML5, mais son travail dans ce cas est un peu plus compliqué, avec un risque d'erreur, justement car il n'y a pas ces balises précises.

  Vous trouver plus bas dans cet article un exemple de structure classique d'une page en HTML 5

• Réduire ou éliminer votre dépendance à des technologies propriétaires (type Flash) sur votre site grace aux nouvelles balises HTML5 pour l'audio et la vidéo.

  D'un point de vue SEO, si un site utilise abondamment des zones externes (type Flash), il sera plus difficile d'en optimiser le référencement naturel. Google est capable d'indexer le contenu d'un composant Flash mais sa tache est plus compliquée que pour l'HTML simple. L'HTML5 permet d'éviter l'utilisation de ces technologies externes dans de nombreuses situations.

La balise <main> utile pour le SEO

La spécification officielle de l'HTML, pas encore adoptée officiellement, décrit bien cette nouvelle balise main :

Elle est très simple à mettre en place :

		<main role="main">
			...
		</main>

C'est pourquoi il semble clair que cette balise main soit particulièrement intéressante pour le SEO : en effet elle permet d'indiquer de manière très claire et simple à Google quelle zone de sa page contient finalement le texte le plus important à indexer (car précisément il est unique). Cela lui permettra plus facilement d'ignorer ou de donner moins d'importance aux textes des menus, en-têtes, pieds de pages...

Google n'a officiellement pas décrit la façon dont il pourrait tirer partie de cette balise mais il est tout à fait réaliste de penser qu'ils l'exploitent déjà.

L'outil de densité de mot-clé s'adapte au HTML 5

En cohérence avec le chapitre précédent, ZinaWeb a adapté son outil d'analyse de densité de mot-clés pour que si une balise main est présente sur la page analysée, alors seul le contenu à l'intérieur de cette balise sera pris en compte.

Ceci s'applique à la fois pour la zone de calcul des densité de mot-clés mais aussi pour la zone "Vision Google" du rapport de ZinaWeb.

Les autres principales nouveautés de l'HTML5

En dehors des 2 points décrits plus haut qui concernaient le SEO, voici les autres principales nouveautés de l'HTML5:

• une nouvelle balise <canvas> pour créer des images dynamiquement
• la possibilité de créer des sites Web dont certaines fonctionnalités continuent de fonctionner même sans accès Internet. C'est très intéressant pour la nouvelle génération d'applications de type Cloud (portail mail, Google docs...)
• des formulaires HTML plus puissants. En particulier, il est désormais possible de valider le contenu des champs saisis par le visiteur directement en HTML, sans nécessité d'utiliser du code Javascript ou des interactions Client / Serveur comme aujourd'hui.

Exemple de page HTML5

Voici le squelette d'une page utilisant l'HTML5 :

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<header>
			Logo, tag line, login...
		</header>
		<nav>
 			 <ul>
			    <li><a href="#">Accueil</a></li>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
  			</ul>
		</nav>
		<article>
			<h1>Titre 1...</h1>
				<h2>Titre 1.1...</h2>
					<p>paragraphe...</p>
					<p>paragraphe...</p>
				<h2>Titre 1.2...</h2>
					<p>paragraphe...</p>
					<p>paragraphe...</p>
		</article>
		<footer>
			<p>Copyright, Mentions légales...</p>
		</footer>
	</body>
</html>

L'outil gratuit ZinaWeb pour analyser les versions HTML utilisées par vos pages

Pour lancer l'analyse ZinaWeb, il vous suffit de saisir le lien vers votre page dans la zone ci-dessus et de cliquer sur le bouton Analyser. Vous pourrez alors accéder aux différentes pages du rapport, en particulier celle sur les version d'HTML.

Pour en savoir plus...

Si cet article vous a donné envie de vous documenter davantage sur l'HTML5, voici quelques liens utiles :

• le site officiel en anglais de la W3C sur l'HTML