SEO: donnez du sens dans le contenu de ses pages
Dans le cadre du référencement naturel, ou SEO, il nous faut respecter certains principes si nous voulons que cela fonctionne bien, notamment:
- Donner du sens / de la sémantique à son contenu
- Eviter les Single Page Applications (car ces dernières charges des données à posteriori, ce que le moteur de recherche ne sait pas forcément)
- Pour ce point, il existe des techniques, comme les applications isomorphiques, pour pallier à cela
- ...
Nous allons nous pencher sur le premier point.
Souvent, on nous dit simplement de nous baser sur les nouveaux tags HTML5, qui apportent de la sémantique sur l'emplacement du contenu de la page (et en fonction de son imbrication, du "poids" du contenu).
- HEADER
- FOOTER
- NAV
- MAIN
- SECTION
- ARTICLE
- ASIDE
- ADDRESS
- FIGURE
De même, nous avons des balises HTML5 qui apportent du "sens" sur le type de contenu, à savoir:
- BDI pour spécifier la direction du text
- DETAILS qui est une zone rétractable et donc pas forcément visible à l'utilisateur à prime abord (donc du contenu avec un poids moindre)
- DIALOG qui est la nouvelle fenêtre
- FIGCAPTION qui est le titre d'une image
- MARK pour surlignée du texte
- SUMMARY qui est le titre de la zone DETAILS
- TIME pour définir une date
Ensuite, nous avons les ARIA HTML5, mais cela, c'est plus pour l'accessibilité.
Pourtant, il existe dans les "attributs globaux" d'HTML des attributs très utile pour cela
Découverte de Schema.org
Mais avant, une petite digression, avec le site http://schema.org, qui liste un nouveau de schéma de modèle de données collaborative, à savoir que nous pouvons réutiliser dans nos applications Webs.
Nous pouvons une liste très détaillée ici: http://schema.org/docs/full.html
Nous avons des schémas pour décrire des formats simples, comme un booléen, un nombre par exemple.
Mais aussi des modèles plus complexes comme:
Voir même des actions, comme un ordre de commande.
Attributs "itemscope", "itemtype" et "itemprop"
Maintenant, par le biais des trois attributs suivants, nous allons pouvoir donner du sens à notre contenu, notamment:
- itemscope pour préciser que l'élément HTML courant contient des informations sémantiques
- itemtype au même niveau qu'itemscope et qui précise le schéma de modèle à utiliser (souvent, nous utilisons le schema.org que nous avons vu ci-dessus)
- itemprop pour spécifier sur l'élément HTML quelle propriété du modèle la valeur fait référence
Un petit exemple, prenons les films.
Le schéma d'un film se trouve ici: http://schema.org/Movie
Grâce à ça, nous pouvons produire par exemple le contenu HTML suivant:
<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director:
<span itemprop="director">James Cameron</span>
(born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html"
itemprop="trailer">Trailer</a>
</div>
Nous devons faire "attention" avec l'attribut itemprop, car en fonction de l'élément HTML sur laquelle nous la plaçons, elle n'ira pas forcément chercher la valeur au même endroit.
Par exemples:
- Sur une balise "META", ce sera l'attribut "content" qui fera fois
- Sur une balise "A" ou "LINK", ce sera l'attribut "href"
- Sur une balise "TIME", ce sera l'attribut "datetime"
- ...
Ce qui implique que nous avons des usages différents en fonction de ce que nous voulons mettre en avant:
<div itemscope>
I was born on <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.
</div>
Pour plus de détails, je vous invite à aller ce site: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop
Enjoy !
Commentaires
Enregistrer un commentaire