Utilisation des nouvelles balises HTML 5 pour le référencement universel

Les nouvelles balises HTML 5

Dernière mise à jour : 5 février 2008.
Dans les nouvelles recommandations du HTML 5 encore au stade de brouillon du W3C, on note l'apparition de nouvelles balises. Voici donc sur cette page comment les nouvelles balises peuvent être utilisées dans le cadre du référencement universel, et à chaque mise à jour des navigateurs cette page permettra également de suivre l'implémentaion de ces balises.
Note : Les recommandations du W3C n'étant encore qu'au stade de brouillon, les informations contenues ici peuvent évoluer, voire devenir obsolètes après la publication des prochaines recommandations.

Nouvelles balises et référencement universel

Le référencement universel (ou recherche universelle) consiste pour les moteurs à ne plus limiter leurs résultats à des pages web, mais à proposer à l'internaute un panel de documents multimédia comme la vidéo, l'image, l'actualité ou encore la localisation géographique. Ainsi parmi les nouveautés du HTML 5, plusieurs balises semble présenter un réel intérêt du fait qu'elles apportent au sein du code source une définition précise du contexte pour chaque élément qu'elles contiennent.
Par exemple, on imagine très bien quel type d'information la balise video apportera au moteur de recherche (ou au navigateur).
Même si aujourd'hui la plupart des contenus sont bien identifiés par les robots, l'utilisation de balises spécialement dédiées aux contenus multimedia va sans nul doute accélérer le temps de lecture des moteurs et donc faciliter encore la prise en compte du contenu.

On peut donc considérer que les balises suivantes :
Balise section
Pour identifier le contexte d'un bloc de contenu, permet de mieux structurer une page
Balise video
Balise utilisée pour contenir une vidéo
Balise audio
Balise utilisée pour un contenu audio
Balise ins
Indique qu'un contenu est venu compléter la version initiale du document
Balise aside
Indique le faible rapport d'un contenu par rapport à la page (et donc diminution de la dilution des mots clés)
Balise nav
Balise qui contient la navigation principale du site
apporteront une réelle valeur ajoutée à nos pages web, et permettront de mieux positionner leurs contenus en fonction de leur importance dans la page et de leur "contexte" mieux définit.

Balise section

Utilisation de la balise section

La balise section permet d'identifier une section thématique d'une page, pour regrouper un contenu dans un contexte précis. Elle peut contenir des titres (hn), des paragraphes (p), un header et/ou un footer. On peut retrouver cette balise plusieurs fois dans la même page.
Référencement : Placer un contenu dans un contexte précis, à l'aide de balises hn peut jouer un rôle important dans le référencement car (si les moteurs viennent à l'utiliser) elle facilitera la mise en valeur d'un contenu particulier.

<section>
<h1>Aspect graphique de la balise section</h1>
<p>
Voici l'aspect graphique de la balise section...
</p>
</section>

Aspect de la balise section

Aspect graphique de la balise section

Voici l'aspect graphique de la balise section...

IE6/7, Firefox, Opera : Pas de changement
Elément de type block : non


Balise video

Utilisation de la balise video

Comme son nom l'indique, l'élément video sera dédié à l'utilisation de contenu vidéo. Par déduction, il viendra donc remplacer la balise object utilisée jusqu'alors pour tous les types de contenus multimédia (en particulier pour le Flash). On peut noter aussi ici la valeur sémantique de la balise, qui permet à tout moteur/navigateur de savoir implicitement qu'à l'endroit où il y a une balise video, il y a une vidéo (très différent donc de la balise object)

Référencement : Ici on pourra indiquer aux moteurs quelle est la teneur du contenu (vidéo) et même donner des informations supplémentaires grâce aux attributs suivants :
poster=""
Permet d'afficher une image lorsque la vidéo n'est pas disponible (doit contenir une url)
playcount=""
Affiche le nombre de visionnages de la vidéo (nombre déjà utilisé pour classer les vidéos dans les résultats de recherche)
etc...

<video src="video.ogg" id='v1' poster="video.jpg" style="width: 480; height: 360;"></video>

Aspect de la balise video

Firefox développe déjà l'utilisation de cette balise et à priori devrait proposer dans sa version 3 (voire la version suivante) une bonne prise en charge. Pour plus d'infos : http://www.double.co.nz/video_test/
Opera permet d'ores et déjà l'utilisation de cette balise, mais uniquement en installant un decodeur Ogg Theora. Plus d'infos : http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/


Balise audio

Utilisation de la balise audio

La balise audio est sensiblement similaire (en terme d'intégration) à la balise video

Référencement : La balise audio permettra aux moteurs de recherche de savoir qu'à cet emplacement se trouve un contenu audio ce qui l'aidera à l'identifier et la pertinence qu'il lui donnera sera d'autant plus importante.

<audio src="audio.ogg"></audio>

Aspect de la balise audio

Dans certain cas, en particulier pour respecter les normes d'accessibilité, il reviendra implicitement au webmaster de proposer un contenu alternatif au contenu audio (retranscription textuelle par exemple).


Balise ins

Utilisation de la balise ins

La balise ins fait partie des éléments de mise à jour qui sont implémentés dans HTML 5. ins symbolise un ajout de contenu par rapport à la version initiale. Selon les directives du W3C il existe plusieurs façons d'implémenter cette balise, en particulier lorsqu'il s'agit de spécifier l'ajout d'un paragraphe complet (balise p) ou d'une simple phrase. Mais nje n'évoquerait pas ces aspects dans ce document, partant du principe qu'ils sont voués à évoluer.

Référencement : En terme de référencement cette balise peut avoir une importance non négligeable, en effet, partant de l'hypothèse que les moteurs sauront l'utiliser, on pourra leur spécifier quel contenu est venu compléter la version initiale, en lui spécifiant même les dates de ces mises à jour, grâce à l'attribut datetime="". A savoir aussi qu'au jour d'aujourd'hui aucun attribut n'est obligatoire.

<p>
<ins datetime="2005-03-16T00:00Z">Cette phrase a été ajoutée</ins>
Cette phrase était déjà présente dans le document
</p>

Aspect de la balise ins

Cette phrase a été ajoutée Cette phrase était déjà présente dans le document

Cette balise est déjà implémentée dans la plupart des navigateurs web, plus d'informations sur son utilisation et sa syntaxe sur cette page.


Balise aside

Utilisation de la balise aside

La balise aside vient préciser au navigateur/moteur que le contenu de la section est thématiquement lié au reste du contenu de la page mais qu'on peut cependant séparer de la structure de la page. Ce genre de balises sont souvent représentées "encadrées" sur la page.

Référencement : Pouvoir séparer une partie du contenu sans en ôter la pertinence par rapport à la thématique de la page est assez intéressante, pour pouvoir proposer au visiteur un contenu différent, plus varié ou en complément, sans l'intégrer complètement dans la page.

<aside>
<section>
<header>Voir aussi</header>
<p>
Liens ou contenu supplémentaires
</p>
</section>
</aside>

Aspect de la balise aside

Pas de changement dans IE6, Firefox et Opéra.
Elément de type block : non


Balise nav

Utilisation de la balise nav

On spécifiera à l'aide de la balise nav l'emplacement d'une section qui contient des liens de navigation interne, comme un menu par exemple.

Référencement : Ici l'on pourra clairement indiquer l'emplacement du menu du site ou de tout moyen de navigation que le visiteur aura à disposition.

<nav>
<ul>
<li>Lien 1</li>
<li>Lien 2</li>
<li>Lien 3</li>
<ul>
</nav>

Aspect de la balise nav

Pas de changement dans IE6, Firefox et Opéra.
Elément de type block : non


Balise article

Utilisation de la balise article

L'élément article permet de séparer du contenu général de la page un bloc de contenu. Ce contenu est indépendant, n'a pas besoin d'être placé dans le contexte de la page pour être compris. Les balises article peuvent être imbriquées, dans le cas de commentaires sur un blog par exemple, par rapport à un post publié.
Référencement : On imagine mal comment peut être interprêté cette balise dans la mesure où sont utilisation semble complexe et son utilité encore nébuleuse. Les prochaines versions du document sur HTML 5 viendront surement préciser ses fonctions.

<article>
Les termites du Népal sont voraces
Le 20 janvier 2007 près de Katmandou, un millier de termites...
</article>
Super ce post, merci !
<article>
</article>

Aspect de la balise article

Les termites du Népal sont voraces Le 20 janvier 2007 près de Katmandou, un millier de termites...
Super ce post, merci !

IE6/7, Firefox, Opera : Pas de changement.
Elément de type block : non