tfe Homepage

Intro

Opengraph/Opentweet/Schemas est un ensemble de balises et attributs HTML, utilisés entre autre par les réseaux sociaux, servant à identifier le contenu d'une page.

Grâce à ces informations, on peut identifier facilement le titre de la page, la description, l'auteur, ...

Utilisation

Lorsque l'on poste une url sur un réseau social, celui-ci va récupérer le code html de la page, et analyser les tags présents.

Par exemple, si l'on poste l'url http://eu.battle.net/d3/fr/ sur facebook, les informations relatives à la page web seront affichés:

<meta property="og:site_name" content="Diablo III" />
<meta property="og:title" content="Diablo III" />
<meta property="og:image" content="http://media.blizzard.com/battle.net/logos/og-d3.png" />
<meta property="og:url" content="http://eu.battle.net/d3/fr/" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="fr_FR" />
<meta property="fb:admins" content="470332842321,433163104416"/>

Microdata schema.org

Les microdata schema.org nous permettent de définir la définition de chaque balise: titre, image, lien, etc...

Pour définir les informations importantes de notre page web, les attributs itemscope et itemprop sont utilisés:

• itemscope: définit le début d'un groupe d'éléments (itemscope)
• itemprop="name": indique que le contenu de cette balise est le titre de cet élément
• itemprop="url": indique le lien spécifique à l'article en question
• itemprop="description"
• ...

Vous trouverez plus d'informations sur les microschemas sur http://schema.org/docs/gs.html.

Google propose une page de test, permettant de visualiser l'information extraite lors d'une visite de son bot.

Si vous analysez le code source du blog:/p>

<div class="item" itemscope >
<h3><a href="/blog/introduction_opengraph_twitgraph_et_schemas.html" itemprop="name" title="Introduction à Opengraph, OpenTweet et Schemas">Introduction à Opengraph, OpenTweet et Schemas</a></h3>
<div class="item_content" itemprop="text">
...
</div>

Vous trouverez des itemscope et itemprop, qui donnent le résultat suivant:

Facebook

Comme vu avec l'exemple sur l'url de Diablo3, Facebook se base sur les meta opengraph pour récupérer les données du site.

Les spécifications spécifiques à Facebook sont disponibles sur http://ogp.me/.

• og:type, qui permets de savoir dans quelle catégorie classer l'url (article, book, profile, etc...).
• og:title, Titre de la page
• og:description, Description brève
• og:url, Lien vers l'article (en général il s'agit de la même url)
• og:image, Image descriptive de la page
• og:site_name, Nom du site
• og:video, og:audio, ...

Par exemple, pour une vidéo youtube quelconque, on trouvera les métas:

    <meta property="og:video" content="http://www.youtube.com/v/lien?version=3&autohide=1">
      <meta property="og:video:type" content="application/x-shockwave-flash">
      <meta property="og:video:width" content="1280">
      <meta property="og:video:height" content="720">

Ce qui donnera un lien vers une vidéo lisible directement sur le site:

Twitter

Les spécification spécifiques à Twitter sont disponibles sur https://dev.twitter.com/docs/cards.

• twitter:title : Titre
• twitter:url : Url
• twitter:card : Information générale
• twitter:description : Description
• twitter:image : Image du site
• twitter:site : @username twitter
• twitter:creator : @username Créteur de l'article
• twitter:creator:id : username twitter id
• twitter:player : Url du player flash
• twitter:player:width : Taille X
• twitter:player:height : Taille Y
• twitter:player:stream : Flux de la vidéo

Si l'on prends le même exemple avec la vidéo youtube, des métas twitter sont également envoyés:

<meta name="twitter:card" value="player">
    <meta name="twitter:site" value="@youtube">
      <meta name="twitter:player" value="https://www.youtube.com/embed/33MNKCiTgFY">
      <meta property="twitter:player:width" content="1280">
      <meta property="twitter:player:height" content="720">

Ce qui donne un rendu: