• 40 hours
  • Easy

Free online content available in this course.

Paperback available in this course

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 11/19/18

La sémantique et le référencement

Log in or subscribe for free to enjoy all this course has to offer!

Le pari de l'avenir pour le référencement et pour le web en général est la « sémantique ». Vous devez probablement avoir déjà vu ce mot quelque part, tout comme « web 3.0 ». Il est l'heure de dégrossir ces concepts un peu étranges mais qui sont très intéressants.

La sémantique et le référencement

Le pari de la sémantique

Image utilisateur
L'histoire du web

Le web est âgé d'une vingtaine d'années tout au plus et, depuis sa création, il n'a cessé d'évoluer à une vitesse folle. Pour s'y retrouver, on s'est mis à vouloir distinguer les grandes périodes de l'histoire du web par des « numéros de version ». Vous avez donc forcément entendu parler de « web 2.0 » ou de « web communautaire ». Voyons un peu de quelle manière le web a évolué ces dernières années.

Le web 1.0 dit « statique » - Années 1990

À ses débuts, le web était quelque chose de très simple. Avec le recul, on a appelé cette période le « web 1.0 ». C'était une période où les sites web étaient statiques. Il n'y avait aucun échange entre les personnes. Consulter un site web se résumait alors à lire une feuille de papier numérisée, ni plus ni moins. Le webmaster du site proposait un contenu, et le visiteur le lisait. De là, il ne pouvait se passer aucune autre interaction entre le visiteur, le site, et le webmaster. En bref, le visiteur n'était que spectateur.

Dans l'absolu, vous pouvez encore créer des sites type web 1.0. Il vous suffit simplement de créer des documents HTML et de les envoyer sur votre serveur. Ça marche, mais autant vous dire que les choses peuvent quand même être plus intéressantes que cela.

Le web 2.0 dit « communautaire » - Fin des années 1990 et années 2000

La fin des années 1990 correspond à une énorme évolution dans le web. En effet, nous sommes passés à ce moment-là au « web 2.0 », un web communautaire où le visiteur est maintenant acteur. C'est pendant cette période que des choses qui ne nous quittent plus aujourd'hui sont apparues :

  • les flux RSS ;

  • les réseaux sociaux ;

  • les sites de partage.

Chaque visiteur est désormais acteur du web. On lui propose des solutions pour interagir très facilement avec les autres visiteurs, et tout le monde se sent bien en communauté en participant à la vie du site. Le Site du Zéro est typiquement un site « web 2.0 ».

Avec le web 2.0, un nouveau problème se pose. Puisque tout le monde sur le web devient acteur et peut produire du contenu, il est dans le même temps de plus en plus difficile de suivre l'évolution d'un thème ou d'une information sur le web. En effet, tout le monde crée du contenu via des forums, des blogs, des réseaux sociaux... Le volume d'information avec lequel il faut jongler a ainsi considérablement augmenté. On fait actuellement évoluer le web vers une nouvelle version, le « web 3.0 ».

Le web 3.0 dit « sémantique » - De nos jours...

Il existe un débat concernant le fait de savoir si, oui ou non, nous sommes aujourd'hui dans le web sémantique. Certains disent que oui, certains disent que non, et certains disent qu'on est entre le web communautaire et le web sémantique, autant vous dire que c'est un peu compliqué et que personne ne risque vraiment de tomber d'accord. Néanmoins, le web sémantique reste le grand pari du W3C pour les années à venir. Mais concrètement, le web sémantique, c'est quoi ?

Le web d'aujourd'hui n'est rien d'autre qu'un ensemble de pages HTML, dont les moteurs de recherche arrivent à définir le thème par une suite de mots-clés présents. Par exemple, on arrive à définir le Site du Zéro comme un site de tutoriels, parce que le terme « tutoriel » est présent un peu partout sur le site. Le problème, c'est que si un humain sait ce qu'est un tutoriel, une machine, elle, ne sait absolument pas ce que c'est.

L'idée est donc de permettre l'utilisation de nouvelles balises HTML (notamment avec HTML5) pour permettre aux internautes de ne plus créer de simples informations textuelles sur le web, mais des données qui ont du sens pour une machine. Prenons un exemple apparu avec HTML5. Sémantiquement, pour définir un menu en XHTML, vous passiez par exemple par une div portant l'id menu : <div id="menu">. Aujourd'hui, en HTML5, on a la balise <nav>. Concrètement, les machines comprennent que <nav> est un élément de navigation sur le site, alors que la balise <div> n'est rien d'autre... qu'un élément HTML block !

Dans le web 3.0 (sémantique), on va quand même un tout petit peu plus loin que cela, car on va avoir suffisamment de balises pour couvrir tous les types de données que l'on peut trouver sur le web. Voilà un petit extrait, vous imaginez que la liste est vraiment très longue :

  • une localisation géographique ;

  • une carte de visite ;

  • un CV ;

  • un événement dans le temps ;

  • ...

Vous ne comprenez pas trop l'utilité du web sémantique ? C'est normal, car j'ai omis de vous parler d'un facteur très important ! Sachez que de nouveaux langages sont envisagés par le W3C. Ces langages seront adoptés comme standards au même titre que le HTML. Parmi ces langages, nous aurons une sorte de langage de requête très puissant (comme le SQL !) pour obtenir des données présentes sur les sites web... et les utiliser dans des programmes ! Imaginez le potentiel de ces technologies à venir, il est quasiment illimité. ;)

Bien sûr, nous ne sommes pas totalement entrés dans le web sémantique, mais il faut comprendre que nous arriverons dans une situation où le web sera devenu intelligent, les machines seront capables de comprendre les données, au lieu de ne voir que du texte. Nous obtiendrons les informations plus facilement que jamais : c'est le web qui viendra à nous !

Il est difficile d'imaginer le futur, mais imaginons le cas d'un moteur de recherche comme Google : une recherche sur le web serait centralisée, une seule recherche n'enverrait plus une liste de sites non-ordonnée, mais plutôt un ensemble de données exhaustif et centralisé, car sur le web sémantique, tout est cohérent. Une seule recherche me permettrait donc de tout savoir sur les oiseaux par exemple, alors qu'en 2012, je dois rechercher sur plusieurs sites de passionnés d'ornithologie pour obtenir toutes les informations qu'il me faut.

Les moteurs de recherche intègrent de plus en plus les technologies qui feront le web sémantique, et nous disposons déjà de « balises HTML » plus évoluées que les balises courantes. Ces balises nous permettent réellement de définir des données sur nos pages web, données que Google exploite déjà en partie... C'est donc l'occasion pour nous d'apprendre à définir des données dans nos pages web, car cela aura un réel impact sur le référencement. Dans la suite de ce chapitre, nous prendrons l'exemple de l'auteur d'un blog appelé Jacques. Nous définirons les informations de ce monsieur comme des données du type "Personne" grâce aux balises spéciales que j'ai évoquées. ;)

Le référencement à travers l'évolution du web

Le référencement évolue à travers le web

Le référencement du web 1.0

Au fur et à mesure que le web a évolué, la manière de se référencer a aussi évolué. En effet, le référencement est toujours le reflet du web. Cela implique que le passage au web sémantique va aussi impliquer de gros changements dans votre façon de concevoir votre site web. Le web 1.0 était un web statique. Le visiteur n'était pas acteur du site, mais uniquement spectateur. Ainsi, le référencement était aussi très centré sur le site en lui-même, il ne s'agissait que de placer les bons mots-clés en bon nombre dans les balises <meta /> des pages web.

Le référencement du web 2.0
Image utilisateur

Avec le web 2.0, tout a changé. Le web est devenu beaucoup plus communautaire, beaucoup plus ouvert, et beaucoup plus centré sur la communauté. Le référencement est aussi calqué sur ceci : vous savez maintenant que vous ne pouvez pas faire référencer votre site sans le soutien des autres.

Vous devez penser à beaucoup de plus de choses, et la qualité seule de votre site ne peut pas suffire, il va aussi falloir s'impliquer ailleurs en vous faisant connaître sur les réseaux sociaux, et en incitant les autres webmasters à faire des liens vers votre site web. Vous aurez également l'occasion de faire profiter les autres webmasters du succès de votre site ; nous verrons tout cela dans la troisième partie de ce cours. Tout cela pour dire que le référencement dans le web 2.0 est aussi un référencement communautaire. Votre propre qualité est importante, mais sans les autres vous n'irez pas loin.

Le référencement du web 3.0

Se référencer sur le web 3.0 sera aussi très différent de ce à quoi on était 'habitués sur le web 2.0. En effet, vous savez d'ores et déjà que le web 3.0 sera un web de données. On ne parle plus d'information au sein d'une page web, mais plutôt de données réelles et cohérentes. Pour se référencer correctement sur le web sémantique, il faudra donc trouver le moyen de définir des données dans vos pages web.

Nous utiliserons pour cela les microformats. Comme beaucoup, je pense que nous sommes à un stade de transition entre le web 2.0 et le web 3.0. C'est pourquoi il va falloir commencer sérieusement à anticiper le futur et commencer à définir des données dans vos pages web. Le Site du Zéro le fait déjà, et Google exploite déjà cela dans ses résultats de recherche... si ! Je suis sûr que vous avez déjà vu un résultat de recherche qui diffère sensiblement du modèle que nous avions vu plus tôt dans le cours (voir la figure suivante).

Le Site du Zéro met en forme ses résultats de recherche grâce aux microformats
Le Site du Zéro met en forme ses résultats de recherche grâce aux microformats

En effet, vous pouvez voir qu'une donnée est définie dans ce résultat de recherche. Les notes sur le tutoriel de Java ont été repérées par Google grâce à un microformat : le moteur de recherche a donc été capable d'afficher des étoiles, la note /4 ainsi que le nombre de votants. Bien sûr, dans quelques années, quand le web sémantique sera parfaitement adopté, tout cela ira bien plus loin et s'étendra bien au-delà des moteurs de recherche. En attendant, il y a bien d'autres données que nous pouvons définir sur notre site. Google peut s'en servir afin de mettre en forme nos résultats de recherche (voir la figure suivante). Nous pouvons par exemple afficher un fil d'Ariane à la place de l'URL de la page, le prix d'un produit que nous vendons dans le cas d'un site d'e-commerce, ou encore la photo et le nom de l'auteur d'un article !

Nous pouvons ajouter un Fil d'Ariane à la place de l'URL grâce aux micro-données !
Nous pouvons ajouter un Fil d'Ariane à la place de l'URL grâce aux micro-données !

Pour le moment, tout cela va nous servir à inciter l'internaute à visiter notre site une fois qu'il verra notre lien sur Google, étant donné que nous avons l'occasion d'afficher plus d'informations que d'habitude.

HTML5 et les micro-données de l'avenir

Microformats ou micro-données ?

Utilisons les micro-données

Nous savons comment le web 3.0 fonctionne et fonctionnera. Pour mettre notre site aux normes, il va falloir utiliser les microformats qui sont donc un balisage spécial de notre contenu HTML.

Il faut néanmoins faire la différence entre « microformats » et « micro-données ». Ces dernières ont été apportées par HTML5, et il convient de les utiliser dès maintenant et de laisser tomber les anciens microformats. Les micro-données sont amenées à devenir les références dans le futur ; ce sont un peu les dernières versions en date qu'il faut utiliser. Ce chapitre portera donc essentiellement sur les micro-données de HTML5.

Balisez sémantiquement votre contenu

Qu'est-ce qu'une micro-donnée ?

Concrètement, une micro-donnée n'est rien d'autre qu'un élément HTML un peu spécial. En fait, c'est quelque chose qui va venir se greffer sur les balises HTML déjà existantes pour les définir comme données. Ainsi, n'importe quelle balise dans votre page web peut devenir une donnée si vous souhaitez la définir comme telle. Il suffit juste d'y appliquer un attribut spécifique, et le tour est joué. Étant donné que les balises <div> et <span> sont des balises joker qui n'agissent pas sur le rendu de la page dans le navigateur, on a pour habitude de les utiliser pour définir des micro-données.

Pour définir une donnée, il suffit d'ajouter l'attribut itemscope à une balise. L'attribut itemscope sert à indiquer aux robots que le contenu de la balise qui porte cet attribut aura des données sémantiques. Elle sert donc à dire : « ok, les données qu'il y a dedans sont sémantiques, je vais pouvoir les étudier pour les prendre en compte au mieux ».

Dans la suite des exemples, nous allons tenter de définir une donnée qui représente une personne nommée Jacques grâce aux micro-données. Cela serait par exemple utile dans le cadre d'un blog pour dire qui est l'auteur de ce blog.

<div itemscope>
    <p>Je suis l'auteur de ce blog. Mon nom est Jacques.</p>
</div>
Définissez le type de vos données

Vous savez maintenant définir une donnée. Le problème est que votre donnée ne correspond encore à rien. Il faut dire que la <div> contient une personne. Pour cela on va passer par un autre attribut : itemtype. Cet attribut va prendre la définition d'une donnée (on parle de « vocabulaires ») depuis le site schema.org. Vous pouvez consulter la liste des définitions disponibles dans la documentation. Schema.org est un site maintenu par Google, Bing! et Yahoo!.

<!-- Les moteurs de recherche sauront maintenant que cette donnée est une personne .-->
<div itemscope itemtype="http://schema.org/Person">
    <p>Je suis l'auteur de ce blog. Mon nom est Jacques.</p>
</div>
Utilisez les propriétés des données !

Plusieurs propriétés sont disponibles. Vous pouvez en consulter la liste exhaustive pour chaque définition dans la documentation. Pour les personnes, plusieurs sont intéressantes (Consultez la documentation de la définition "Person").

  • name : pour renseigner le nom de la personne ;

  • addressLocality : pour renseigner l'adresse de la personne ;

  • affiliation : pour dire si la personne fait partie d'une école, ou d'une équipe ;

  • email : l'email de la personne ;

  • ...

Bref ! il y en a vraiment des tonnes et vous devriez consulter les documentations pour vous faire une idée plus complète sur la question... Pour le moment, nous devons finir de baliser notre code. Pour cela, nous allons faire simple et utiliser le nom et l'email ; ce sera bien suffisant pour compléter la présentation de Jacques sur son blog. Pour définir les propriétés, je vous conseille d'utiliser des balises <span>. Utilisez l'attribut itemprop pour renseigner les attributs.

<div itemscope itemtype="http://schema.org/Person">
    <p>Je suis l'auteur de ce blog. Mon nom est <span itemprop="name">Jacques</span>.</p>
    <p>Mon adresse email est : <span itemprop="email">jacques@monblog.com</span></p>
</div>

Et c'est tout ! Voilà ce que donne un code balisé sémantiquement ! Bien sûr, l'intérêt aujourd'hui est très limité et vous ne devez sûrement pas comprendre l'utilité que tout ceci peut avoir. C'est simplement de l'anticipation, car demain on ne fera plus que ça, vous devriez donc prendre l'habitude tout de suite d'utiliser les micro-données dans vos codes source. Retenez simplement que les microformats constituent l'avenir du web, et que l'on pourra plus tard utiliser ça de manière bien plus poussée qu'en 2012. Le tout est de prendre l'habitude de le faire dès maintenant ! Si vous avez compris ce concept, alors vous avez tout compris : pour le reste, je vous conseille d'aller lire la documentation de schema.org, ainsi que la FAQ de Google pour webmasters à ce sujet.

  • La sémantique représente l'avenir du web.

  • Consultez les définitions sur schema.org.

  • Prenez dès maintenant l'habitude de baliser vos contenus grâce aux micro-données.

Example of certificate of achievement
Example of certificate of achievement