Sémantique & web : Comment aborder le sujet ?

D’après le Centre National de Ressources Textuelles et Lexicales, la sémantique se définit comme :

Étude d’une langue ou des langues considérées du point de vue de la signification; théorie tentant de rendre compte des structures et des phénomènes de la signification dans une langue ou dans le langage.

Du fait de la nature multimédia du web, la sémantique pourrait alors se rapporter à tout ce qui permet de donner du sens à la structure, au contenu d’une page, que ce soit d’un point de vue humain ou machine. En effet, nous le verrons, la plupart des efforts faits d’un point de vue sémantique sur le web sont avant tout destinés à faire mieux comprendre aux machines, moteurs de recherche le type de contenu qu’ils découvrent et les relations pouvant exister entre ces contenus. Et donc par ce fait, les faire mieux référencer !

Voyons où nous pouvons trouver trace de sémantique sur le web.

Les URI

Sur le web, tout commence par une url et la sémantique n’y déroge pas. C’était l’époque où les sites dynamiques balbutiaient et n’hésitaient pas à vous proposer des URLs de type http://www/baduri.com/page?id=12345&type=152&sort=asc. Et encore c’est un exemple plutôt lisible ! Difficile de deviner de quoi va traiter une pareille URL, quel type de document nous allons y trouver.

Dans deux articles passés depuis à la postérité, Jakob Nielsen et Tim Berners-Lee nous expliquent l’importance de la construction d’une URL de façon sémantique, du sens qui peut déjà se dégager par le choix de mots-clés représentant le type de document ou le type de contenu qui s’affichera. Il est beaucoup plus facile de comprendre que l’adresse http://www.gooduri.com/2013/12/cool-uri est certainement un article sur les « cool URI ».

HTML

Et côté HTML, c’est identique. Le format XHTML, enterré avec l’arrivée de HTML5, n’était ni plus ni moins qu’une tentative de compléter le HTML par des balises sémantiques, tout en restant plus simple que DocBook.

Et n’oublions pas les meta-données comme <meta name="keywords"> qu’il est depuis le début possible d’ajouter aux en-têtes d’une page web.

Balisage sémantique avec HTML5

Même si XHTML est enterré, HTML5 n’en garde pas moins les traces de cette volonté d’injecter de la sémantique, du sens dans le code du web. Nous y trouvons quelques balises comme <article>, <nav>, <aside>, <footer>, <header> ou encore <main> qui servent clairement à délimiter des zones de contenu au sein d’une page, permettant notamment grâce à la balise <article> de distinguer le contenu principal du reste de la page. Vous indiquez des zones fonctionnelles comme la navigation avec <nav>.

Ce qui peut donner dans les grandes lignes pour un billet de blog comme celui-ci :

<html>
  <head>
    <title>Titre article</title>
  </head>
  <body>
    <header>
      <h1>Nom Site</h1>
      <nav>
        <ul>
          <li>Accueil</li>
          <li>Section1</li>
        </ul>
      </nav>
    </header>
    <article>
      <header>
        <h1>Titre article</h1>
      </header>
      <p>Contenu</p>
      <footer>
        <h1>À propos de l'auteur</h1>
        <p>Olivier Jan, co-fondateur de Check My Website…</p>
      </footer>
      <aside>
        <h1>Article aside</h1>
        <p>Peut contenir des billets en relation</p>
      </aside>
    </article>
    <aside>
      <h1>Site Aside</h1>
    </aside>
    <footer>
      <h1>Site footer</h1>
    </footer>
  </body>
</html>

Vous pouvez « outliner » ce code en ligne pour voir comment il est structuré et comment il est « vu ».

Arrivé à ce stade, nous pouvons dire que nous avons fait du Plain Old Semantic HTML (POSH), expression née sur l’IRC des microformats. Les microformats que nous allons aborder maintenant.

Micro-formats

Les microformats sont du code HTML spécifique pour marquer les personnes, les organisations, les événements, les lieux, les billets de blog, les produits, les critiques, les CV, les recettes de cuisine, etc. Les sites utilisent les microformats afin de publier une API standard qui est consommée et utilisée par les moteurs de recherche, navigateurs et autres sites.

La version 2 est sortie et renforce la cohérence du marquage sur les principaux éléments comme nous allons le voir.

Balisage sémantique avec les microformats

Reprenons notre exemple de marquage POSH pour l’améliorer en utilisant les microformats en version 2. Ainsi la partie auteur va se transformer en un marquage qui permettra facilement d’extraire la carte de visite de l’auteur, appelé h-card dans le jargon microformats ou aussi Vcard et qui est définit dans la RFC6350 entre autres :

<footer class="h-card">
  <h1>À propos de l'auteur</h1>
    <p><a class="p-name u-url" href="http://olivierjan.com/">Olivier Jan</a>, co-fondateur de <span class="p-org">Check my Website</span>…</p>
</footer>

Le footer se voit compléter d’une classe h-card indiquant la présence d’une carte de viste.
Le nom de l’auteur est transformé en lien possédant deux classes p-name et u-url. Dans le contexte h-card, p-name est le nom de la personne et u-url le lien vers la page d’accueil de cette personne.
le nom de la société est encapsulée dans une balise <span> qui permet d’ajouter la classe p-org, indiquant de façon claire que la personne indiquée par p-name travaille et a donc une relation avec Check my Website, l’organisation indiquée par p-org.

Je vous le disais en introduction de cet article, beaucoup des efforts de la sémantique sur le web portent sur la capacité à donner du sens aux liens et ce que nous venons de faire avec les microformats ne déroge pas à ce fait. Nous avons créer une relation entre une personne et son organisation, cette relation n’apparaissant pas dans notre code POSH.

Il est possible de vérifier ce qui est extrait d’une page avec ce genre d’outils. Voilà un exemple de sortie JSON (tronquée pour cause de longueur excessive) issu de cet outil pour un article de blog de Wooster :

{
  "items": [
    {
      "type": [
        "h-entry"
      ],
      "properties": {
        "author": [
          {
            "type": [
              "h-card",
              "h-card"
            ],
            "properties": {
              "name": [
                "Olivier Jan"
              ],
              "updated": [
                "2013-11-19T11:00:00Z"
              ]
            },
            "value": "19 novembre 2013 par  Olivier Jan dans  h\u00e9bergement"
          },
          {
  "rels": {
    "canonical": [
      "http:\/\/wooster.checkmy.ws\/2013\/11\/choisir-type-hebergement\/"
    ],
    "publisher": [
      "https:\/\/plus.google.com\/u\/0\/communities\/112049531399159230932"
    ],
    "sitemap": [
      "http:\/\/wooster.checkmy.ws\/sitemap.xml"
    ],
    "shortcut": [
      "http:\/\/wooster.static.checkmy.ws\/favicon.ico"
    ],
    "icon": [
      "http:\/\/wooster.static.checkmy.ws\/favicon.ico"
    ],
    "apple-touch-icon": [
      "http:\/\/wooster.static.checkmy.ws\/apple-touch-icon-precomposed.png"
    ],
    "stylesheet": [
      "http:\/\/fonts.googleapis.com\/css?family=Roboto:400,300,300italic,400italic,700,700italic|Bree+Serif:400",
      "http:\/\/wooster.static.checkmy.ws\/assets\/css\/af67.style.css"
    ],
    "bookmark": [
      "http:\/\/wooster.checkmy.ws\/2013\/11\/choisir-type-hebergement\/"
    ],
    "author": [
      "https:\/\/plus.google.com\/u\/0\/+OlivierJan"
    ]
  }
}

Ceci n’est qu’un exemple de ce qu’il est possible de faire et vous pouvez essayer de trouver comment marquer la fin de notre code pour par exemple permettre de déterminer à coup sûr le type de contenu de cette page. Regardez du côté de la classe h-entry pour ce faire. Correction des copies dans une semaine !

Les balises microformats sont correctement détectées par les principaux moteurs de recherche, dont Google bien sûr. Google qui a décidé de prendre la sémantique à son compte et propose donc de nouvelles balises regroupées dans des ensembles appelés schémas.

Données structurées

Sous la houlette de Google donc, schema.org est un site qui propose de nouvelles balises HTML que les webmasters peuvent utiliser dans leurs pages pour améliorer leur reconnaissance par les principaux moteurs de recherche. Les moteurs de recherche; dont Bing, Google, Yahoo! et Yandex s’appuient sur ce balisage pour améliorer l’affichage des résultats de recherche, ce qui rend les pages d’un site plus facile à trouver par les internautes.

Ce balisage permet aux moteurs de recherche de comprendre les informations contenues dans une page Web et de fournir des résultats de recherche plus riches, plus pertinents. Les moteurs de recherche se sont réunis pour fournir un ensemble commun de schémas que les webmasters peuvent utiliser.

Tout commence par le terme chose (Thing) qui est la forme la plus générique de contenu. À ce terme correspondent un ensemble de propriétés comme :

description qui est une description du terme, de l’item.
url qui est l’URL de l’item.
name qui est le nom de l’item.

Plutôt clair et simple ! Là où ça devient vraiment intéressant, c’est que les termes se précisent petit à petit. De Thing, il est possible de passer à CreativeWork puis à Blog. À chaque fois de nouvelles propriétés s’ajoutent. Celles-ci peuvent également être héritées des propriétés de leurs « parents ».

Ainsi, notre item Blog peut à la fois contenir une propriété spécifique à cet item comme blogPost et une propriété héritée de CreativeWork comme author. Simple vous disais-je mais aussi puissant. Reste à voir comment baliser son code avec ces items et leurs propriétés.

Voici quelques types d’items dans leur langue originelle pour vous donner une idée de tout ce qu’il est possible de baliser de cette façon : Event, Health, Organization, Person, Place, LocalBusiness, Restaurant, Product, Offer, AggregateOffer, Review, AggregateRating…

Balisage sémantique avec les données structurées

En se basant toujours sur notre premier exemple de code HTML5, la partie qui pourrait être vraiment intéressante à spécifier est l’item <article> et ses différentes parties qui correspondent à des propriétés.

<article itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    <h1 itemprop="name">Titre article</h1>
  </header>
  <p>Contenu</p>
  <footer>
    <h1>À propos de l'auteur</h1>
    <p><span itemprop="author">Olivier Jan</span>, co-fondateur de Check My Website…</p>
  </footer>
  <aside>
    <h1>Article aside</h1>
    <p>Peut contenir des billets en relation</p>
  </aside>
</article>

Par ce balisage, simplissime par rapport aux possibilités offertes, nous avons quand même indiqué aux moteurs de recherche que cette page contient un billet de blog (itemscope itemtype="http://schema.org/BlogPosting") dont les propriétés itemprop="author" et itemprop="name" sont définies. Nous pouvons vérifier ceci en ligne. Pour vous éviter le copier-coller du code dans l’outil et si vous voulez bien me croire sur parole…

Données structurées extraites

Item

type:

http://schema.org/BlogPosting

property:

name:	Titre article
author:	Olivier Jan

Liste d’outils pour contrôler la sémantique

Voici une petite posologie pour ceux qui veulent tenter l’aventure de la sémantique sur leurs pages !

Outliner HTML5 en ligne ou en extension Chrome.
Extraction microformats en ligne ou en extension Chrome.
Extraction données structurées en ligne ou en extension Chrome.

La sémantique, un aspect de la performance web ?

Nous avons abordé les grands axes de la sémantique sur le web dans cet article mais sachez qu’il existe d’autres formes de structuration du contenu. Facebook utilise par exemple Open Graph, Twitter ses « cartes » et il aurait aussi été possible de parler RSS, Atom ou RDF. Tout ceci nous aurait amener à parler ontologie et taxonomie. J’aurais fini par vous perdre en route ! Nous aurons l’occasion de toute façon de revenir sur ce vaste… Et passionnant sujet qu’est la sémantique sur le web.

Il est certain qu’aujourd’hui, ajouter de la sémantique à son code fait partie de la performance d’un site web. Pas en terme de vitesse bien sûr, mais en terme de performance SEO. Et cela compte bien autant qu’un site rapide, car avant qu’un internaute puisse juger de la rapidité de celui-ci, encore faut-il qu’il le trouve. La sémantique peut l’y aider. Votre contenu étant correctement indexé, il a plus de chance d’être vu.