Facebook va généraliser les Instant articles dès le 12 avril 2016 (+ tutoriel bonus)

Mathieu Chartier Webmarketing 1 commentaire

Facebook va déployer les Instant articles (articles instantanés) pour tous les éditeurs de contenus

Facebook vient d'annoncer que les articles instantanés (instant articles) vont être déployés à l'ensemble des utilisateurs dès le 12 avril 2016. Cette fonctionnalité née le 12 mai 2015 aux Etats-Unis a rencontré un franc succès auprès des premiers utilisateurs, c'est donc une excellente nouvelle que les instant articles se généralisent pour tous.

La déploiement se fera après la conférence F8 que donnera Facebook le 12 avril 2016. Le communiqué officiel précise que les articles instantanés ont été créés essentiellement pour lutter contre les connexions lentes sur mobile mais aussi contre les interfaces non ergonomiques (non "responsive" en général) pour les smartphones et tablettes. L'intérêt des instant articles est de charger automatiquement les articles complets dans l'interface de Facebook, avec un design adaptatif et une vitesse de chargement accrue. Il s'agit d'un vrai gain pour les utilisateurs du réseau social mais aussi pour les éditeurs de contenus (il ne reste qu'à savoir si les visites seront comptabilisés comme des visites sur site ou non, la réponse reste encore floue...).

Cette fonctionnalité est très importante pour Facebook, qui a même activé un sous-domaine dédié aux Instant articles : https://instantarticles.fb.com. Vous pourrez voir des vidéos de présentation de la fonctionnalité. On voit notamment un article de National Geographic présentant une photo, et lorsque l'utilisateur clique sur l'illustration, l'article complet s'affiche de manière instantanée. C'est simple, rapide et efficace ! Toute l'interface est en responsive web design et "scalable" (il est possible de zoomer), sans ralentir le chargement des articles. Attendons de l'avoir en main, mais les vidéos de démonstration sont alléchantes... :D

Facebook fournit une documentation complète pour les éditeurs qui souhaiteraient profiter des articles instantanés sur le réseau social (mobile, via les applications iOS 7.0 minimum et Android Jelly Bean et versions ultérieures) : https://developers.facebook.com/docs/instant-articles. Les prérequis sont évidents, il faut détenir une page professionnelle et avoir un rôle d'administrateur ou d'éditeur pour cette page.

Côté technique, il faut intégrer quelques éléments sémantiques dans le code source des articles pour que la fonctionnalité soit active. Si cela est assez compréhensible pour les développeurs, de nombreux thèmes de sites web ne sont clairement pas adaptés pour les articles instantanés, ce qui risque de limiter leur utilisation. Je vous décris les étapes successives, et vous allez remarquer que rares sont les sites qui peuvent répondre facilement à la demande (hormis pour les développeurs qui mettent les mains dans le cambouis).

1. Intégration des Instant articles : modification du <head>

Tout commence par une modification de la partie <head> des pages web, avec trois informations :

  • une <meta> "property" (non valide W3C, il faut ajouter le bon DTD pour rendre cela valide, pour les puristes ^^) ;
  • une URL canonique qui dirige vers l'article original, avec une URL absolue (obligatoire) ;
  • une balise <meta> pour indiquer le style à donner à l'article.

Voici un exemple

<head>
...
<meta property="op:markup_version" content="v1.0">
<link rel="canonical" href="http://www.site.com/titre-article/">
<meta property="fb:article_style" content="style-article">
...
</head>

Par défaut, les articles affichés dans Facebook récupèrent le titre de l'article et sa description, mais il est possible de modifier cela via des balises <meta> spécifiques (optionnelles), comme ceci :

<meta property="og:title" content="Titre de l'article">
<meta property="og:description" content="Description de l'article">
<meta property="og:image" content="http://www.site.com/dossier-image/image-couverture.jpg">

2. Intégration des Instant articles : entête des articles

La seconde étape vise à récupérer l'entête des articles, utiles pour l'affichage dans Facebook. Il faut absolument être en HTML 5 (ce qui semble évident de nos jours), et utiliser les balises <article> et <header> pour gérer l'entête de l'article. La contrainte est qu'il faut ajouter de nombreuses informations, que voici :

  • Type de média : image ou vidéo ;
  • Titre et sous-titre de l'article ;
  • Auteur de l'article (via une balise <address> menant vers le profil Facebook de l'auteur) ;
  • Une phrase d'accroche (résumé) ;
  • Date de publication et de modification (qui peut être la même).

Voici un exemple en HTML pour l'entête d'un article instantané valide :

<article>
    <header>
      <!-- Image de couverture de l'article --> 
      <figure>
        <img src="http://wwW.site.com/dossier-image/image-couverture.jpg" />
        <figcaption>Cette photo sert de couverture</figcaption>
      </figure>
      
      <!-- Titre et sous-titre affichés dans l'article instantané -->
      <h1>Titre</h1>
      <h2>Sous-titre</h2>

      <!-- Accroche pour l'article -->
      <h3 class="op-kicker">Accroche de l'article</h3>

      <!-- Référence à l'auteur Facebook de l'article instantané -->
      <address>
        <a rel="facebook" href="http://www.facebook.com/chartier.mathieu">Chartier Mathieu</a>
        Description courte de l'auteur.
      </address>

      <!-- The published and last modified time stamps -->
      <time class="op-published" dateTime="2016-02-17T23:12:16Z">17 février 2016 à 23h12</time>
      <time class="op-modified" dateTime="2016-02-17T23:12:16Z">17 février 2016 à 23h12</time>
    </header>
</article>

3. Intégration des Instant articles : corps du contenu

L'étape 3 vise à intégrer le "corps" du contenu de l'article. Ici, peu de contraintes techniques, les paragraphes doivent bien utilisés les balises <p> en HTML tandis que les images doivent être intégrées à l'aide des balises HTML 5 <figure> (voire avec une description et <figcaption>). Je rappelle que ce n'est pas le cas par défaut dans des CMS comme WordPress par exemple, il faudra donc créer un filtre pour ce faire si je ne m'abuse...

<body>
  <article>
    <!-- Texte de l'article sous forme de paragraphes -->
    <p>Premier paragraphe de l'article.</p>
    <p>Second paragraphe de l'article...</p>

    <!-- Exemple pour une vidéo intégrée dans un article (identique pour une image) -->
    <figure>
      <video>
        <source src="http://www.site.com/dossier-video/video.mp4" type="video/mp4"/>
      </video>
    </figure>

    <!-- Suite du texte s'il y en a... -->
    <p>Troisième paragraphe de l'article.</p>
  </article>
</body>

4. Intégration des Instant articles : ajout de médias ou de fonctionnalités

Facebook autorise l'ajout de fonctionnalités propres ou de médias plus spécifiques, comme des <iframe>. Il est possible d'ajouter des <iframe> externes à l'aide des balises <figure>, à l'image de ce qui se fait pour les illustrations ou les vidéos. Voici un court exemple :

<!-- Exemple d'intégration d'une publicité -->
<figure class="op-ad">
   <iframe src="https://www.serveur-publicite.com/ss;adtype=banner300x250" height="250" width="300"></iframe>
</figure>

Attention, il faut absolument respecter le jeu des classes CSS de Facebook, sinon cela ne fonctionnera pas. Il en sera de même pour tous les médias à inclure, c'est pourquoi la documentation s'avère très utile pour ne pas se perdre.

Facebook présente également la possibilité d'ajouter un média qui peut être aimée (like) et commentée, il suffit d'ajouter l'attribut data-feedback="fb:likes,fb:comments" à la balise ouvrante <figure> lorsque l'on ajoute un média comme une image.

Les utilisateurs peuvent aussi intégrer des slideshows simplement à l'aide de balises <figure> et de la classe "op-slideshow", comme ceci :

<figure class="op-slideshow">
   <figure>
      <img src="http://www.site.com/dossier-image/image-1.jpg" alt="Image 1" />
   </figure>
   <figure>
      <img src="http://www.site.com/dossier-image/image-2.jpg" alt="Image 2" />
   </figure>
   <figure>
      <img src="http://www.site.com/dossier-image/image-3.jpg" alt="Image 3" />
   </figure>
</figure>

Une image avec audio-description peut également être intégrée simplement, comme ci :

<figure>
   <img src="http://www.site.com/dossier-image/image.jpg">
   <audio title="Titre de la bande audio">
      <source src="http://www.site.com/description.mp3">
   </audio>
</figure>

Je ne vous décrirai pas l'ensemble des fonctionnalités existantes mais je terminerai par un exemple de cartes avec géolocalisation. Il faut jongler entre des balises HTML et un script en JSON qui décrit les points de localisation. Sachez qu'il est possible de faire cela avec une carte (comme dans l'exemple) mais aussi avec une image personnelle (dans ce cas, il faut juste ajouter une balise <img> de son choix).

<!-- Intégration d'une carte avec géolocalisation -->
<figure class="op-map">
<script type="application/json" class="op-geotag">  
{
  "type": "Feature",
  "geometry": {
     "type": "Point",
     "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ]    
  },    
  "properties": {      
      "title": "Jessore, Bangladesh",      
      "radius": 750000,      
      "pivot": true,      
      "style": "satellite",
  }
}  
</script>
</figure>

Enfin, si vous voulez que la couverture de l'article ne soit pas une image mais une vidéo, il vous suffit d'ajouter l'attribut class="fb-feed-cover" à la balise <figure> qui contient une source vidéo.

Conclusion sur l'intégration des articles instantanés de Facebook

En tant que technicien, aucune étape ne me paraît impossible à mettre en œuvre, mais je suis bien conscient que ce ne sera pas le cas pour tout le monde, et surtout que les diverses contraintes risquent de freiner grandement l'utilisation de cette fonctionnalité pourtant très intéressante et alléchante.

Certes, quasiment tout se fait dans des balises <figure> si nous y regardons de près, mais aucun CMS à ce jour n'intègre les médias de cette façon. Entre l'AMP HTML à gérer, les Instant articles de Facebook et certainement d'autres supports que je ne nomme pas ici, cela va devenir très compliqué de répondre à tous les objectifs. Pour ma part, l'AMP HTML prime car il pourra obtenir un boost SEO de Google et assure que les visites seront comptabilisées (mais son intégration est encore plus complexe en revanche).

Je suis un peu déçu qu'il y ait autant de points à paramétrer dans le code HTML pour que les articles soient pris en compte par Facebook, et j'ai bien peur que cela soit tué dans l'oeuf... Je vais tenter de rester optimiste et je vous encourage vivement à vous pencher sur la question, ce sera l'occasion de faire un peu de développement voir de bosser sur un plugin WordPress qui pourrait filtrer ce type de contenus (ce sera plus difficile pour les médias spécifiques mais pour le reste, c'est faisable !). Bon courage ! ;-)