Optimisation du HTML5 pour le SEO

html5_seo_article

Vu nos expériences dans le métier on nous demande souvent l’interdépendance entre le HTML 5 et le Search Engine Optimisation (SEO).

Bien que nous ne sommes pas des spécialistes en SEO, on peut tout de même vous faire un petit guide sans entrer dans les profondeurs algorithmique de Google, Yahoo et Bing.

Les moteurs de recherche

Pour le moment, Google indexe par rapport au microdata du HTML5 mais ne vous pénalise si vous n’utiliser pas les structures et balisases html5 ( nav, header, footer …)

Mais tout de même dans une annexe Google conseille d’utiliser HTML 5 du moins pour les points déjà valider par le W3C .Bien que cette mesure ne conduise à une amélioration du référencement, il serait généralement avantageux en soit d’avoir un balisage correcte.

La meilleure stratégie est d’utiliser les balises dont nous maîtrisons dans la pratique ou pourquoi pas enrichir un peu notre vocabulaire en balise html5, car les nouvelles balises peuvent nous donner des informations supplémentaires pour avoir un contenu plus lisible.

Mais avant tous il faut créer un site riche en informations utiles, et écrire des pages qui décrivent clairement et précisément votre contenu.

HTML5 microdata and schema.org

Schema.org est un consortium crée par Bing, Google et Yahoo ! Dans le but de fournir une collection de schémas, à savoir les balises HTML, que les webmasters peuvent utiliser pour baliser leurs pages de manière que les principaux fournisseurs de recherche les prennent en compte pour améliorer l’affichage des résultats de recherche.

Schema.org utilise les microdata pour en faite en sorte que cette structure va aider les moteurs de recherche pour classer votre contenu (le ranking).

Voyons un exemple concret de l’utilisation des microdata :

Avec l’avènement de nouveaux balisages html5, la sémantique est apportée par les éléments HTML, mais pas seulement : trois attributs principaux sont utilisés pour intégrer des Microdata dans HTML5 :

  • itemscope (signification : à quel champ sémantique correspond l’élément ?),
  • itemtype (précise le type de l’élément),
  • itemprop (les différentes propriétés, par exemple : le nom, l’adresse, l’url…)

En pratique les microdatas, on l’intègre comment dans notre code ?

itemscope et itemtype s’utilisent conjointement dans une même une balise, itemscope indique simplement que les informations contenues dans la balise ont été enrichies et itemtype indique à quel type de données nous avons à faire.

Dans cet exemple, on donne l’étendue des informations microformatées (itemscope) et le type d’élément auquel ils se réfèrent, ici, un article (itemtype) : les détails sur la valeur que l’on peut y indiquer sont abordés ci-après:

itemprop
Permet d’indiquer à quoi correspondent les différentes informations. En reprenant l’exemple d’avant on peut obtenir ceci :

Itemref
Cet attribut permet de reprendre des informations déjà présentes sur la même page en indiquant l’id de la partie enrichie sémantiquement.
Par exemple, itemref=”titre position” inclura les éléments ayant comme id titre et position.

Plusieurs <h1> dans une page

Tout document HTML5 dispose de cloison de contenu comme <article>, <aside>, <nav>et <section>.
Donc ces zones de contenu peuvent chacune contenir une balise <header> et <footer> et aussi de multiple catégorie de titre allant de h1 à h6.

Et cela nous permet de dire qu’avoir un multiple <h1> dans une page ne risque pas de pénaliser le référencement à condition qu’il il y a une bonne organisation comme le montre la vidéo :

Répondre