• 6 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 04/09/2019

Ajouter les metatags

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Il y a fort à parier que vos utilisateurs partageront votre page sur les réseaux sociaux au moins une fois dans la vie de votre site. Vous avez déjà certainement vous-même partagé des articles ou des sites particulièrement enthousiasmants. La plupart du temps, des informations automatiques s’affichent sur le réseau social : nom de la page, lien, image aux bonnes proportions et parfois même le nom d’une page à suivre. C’est un peu la magie des réseaux sociaux qui s’opère : le simple fait de copier un lien met en forme un contenu prêt à être partagé !

Néanmoins, et pour paraphraser notre cher ami Antoine de Saint-Exupéry, l’essentiel est invisible aux yeux des internautes. Quand vous collez un lien dans le fil d’actualité d’un réseau social, ce dernier commence par parcourir son code source à la recherche d’informations : titre de la page, image, lien, et tout autre élément que le développeur aura voulu ajouter.

S’il ne trouve rien, il reconstituera par lui-même les informations. C’est pourquoi Facebook vous propose parfois plusieurs images voire aucune : le développeur n’a pas pensé à inclure les bonnes données dans son code source.

Le code source n’inclut certainement pas les bonnes données...
Le code source n’inclut certainement pas les bonnes données...

De quels éléments parle-t-on exactement ? Des méta-tags. Ils permettent aux réseaux sociaux de mieux comprendre le contenu de votre page et d’afficher le contenu que vous souhaitez. Vous êtes ainsi maître du contenu diffusé sur les réseaux sociaux.

La plupart des réseaux sociaux se basent sur les “meta tags” pour compléter ces informations. Ce sont des balises meta contenues dans le<head> de votre site. Un petit exemple :

<title>Catyler, our new hero</title>
<meta name="description" content="I need a caaaaat, I’m holding out for a hero ‘til the end of the night. He’s gotta be strong...">

Si aucune autre information n’est donnée, les réseaux sociaux indiqueront que le titre de la publication à partager est “Catyler, our new hero” et que la description associée est “I need a cat, I’m holding out for a hero ‘til the end of the night. He’s gotta be strong...”.

Mais certains réseaux sociaux ont besoin d’éléments de plus en plus spécifiques, comme des images d’une certaine taille ou des informations additionnelles. C’est pourquoi ils ont développé leurs propres attributs. Nous allons nous concentrer sur les deux principaux réseaux : Facebook et Twitter.

Facebook : l’Open Graph

L’Open Graph est un protocole développé par Facebook qui lui permet, de façon très simplifiée, de récupérer des informations sur votre page web et de créer une entrée structurée dans Facebook.

Reprenons la page de Catyler. Facebook a besoin de plus d’informations qu’un simple titre et sa description. En effet, l’utilisateur aimerait ajouter une photo de la chanteuse ainsi que le lien vers son site. Facebook aimerait savoir si l'utilisateur partage un article, une page d’accueil, une chanson, une vidéo, etc.

Le protocole de Facebook intègre de nombreuses propriétés que nous ne pouvons toutes voir en détail. Néanmoins, vous pouvez vous baser de manière générale sur ce snippet générique que vous pourrez reprendre sur la plupart de vos pages d’accueil.

<!-- Open Graph data -->

<meta property="og:title" content="Title Here"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.com/"/>
<meta property="og:image" content="http://example.com/image.jpg"/>
<meta property="og:description" content="Description Here"/>

Source : https://github.com/celine-m-s/metatags-101/blob/master/minimal_template

  • og:title : Le titre de votre page, optimisé pour Facebook.

  • og:type : website. Indiquez “article” s’il s’agit d’un article.

  • og:url : l’url à afficher

  • og:image : image optimisée pour Facebook

  • og:description : description pour Facebook

Un outil très utile pour comprendre la manière dont fonctionne Open Graph est le Débogueur de Facebook : https://developers.facebook.com/tools/debug/

Il vous expliquera pourquoi certains éléments ne s’affichent pas (très utile quand, par exemple, votre photo est mal prise en compte).

Twitter : les Twitter Cards

Twitter a également ses propres attributs pour les balises meta. Vous pourrez ainsi dire à Twitter quelle image afficher en grand dans les bonnes dimensions.

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 200x200px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">

À notre maquette !

Utilisons ce boilerplate pour intégrer les balises meta de notre choix.

Je vais intégrer le “minimal_template” mais je vous invite à regarder les autres boilerplates.

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.com/"/>
<meta property="og:image" content="http://example.com/image.jpg"/>
<meta property="og:description" content="Description Here"/>

Vers un Web sémantique

Un des grands enjeux pour les moteurs de recherche depuis des années se résume en deux mots : Web sémantique. Ce concept fait référence à la création de standards sur le Web qui permettraient aux grands acteurs de la recherche de mieux comprendre l’univers sémantique des requêtes qui sont faites sur leur moteur.

Ce que j’explique semble vaseux ? C’est normal !

Prenons un exemple !

quandmonchat.tumblr.com parle de chats. Vous et moi le savons car notre cerveau a, depuis bien longtemps normalement, fait la liaison entre l’animal de type “chat” et le mot “chat”. Quand nous étions enfant, un humain nous a dit : “Ceci est un chat. Il s’agit d’un animal.”

Plus tard, nous avons découvert les “chats” (souvenez-vous de Caramail ! Et de MSN Messenger ! Toute mon adolescence ;) ). Mais un “chat” n’est pas un “chat” n’est-ce pas. ;) 

L’outil de messagerie appartient au champ sémantique de l’informatique, à la différence du miaou qui appartient à celui des animaux.

Or les robots sont comme des enfants qui découvrent le vocabulaire humain. Si vous cherchez “chat” sur votre moteur de recherche préféré, il ne saura pas si vous faites référence à l’animal ou à la messagerie. Il vous proposera alors un mélange des deux dans l’espoir de tomber juste (c’est un peu simplifié mais vous comprenez l’idée !).

Son enjeu est de mieux vous comprendre pour vous proposer des résultats qui se rapprochent au plus de ce que vous cherchez. Il a pour cela besoin d’apprendre l’univers sémantique de chaque mot que nous utilisons pour s’imprégner du contexte et du vocabulaire.

Pour faire face à cette problématique, les moteurs de recherche ont développé leurs propres conventions. Puis, en 2011, certains d’entre eux se sont réunis pour mettre à plat leurs pratiques et créer un standard commun qui pourrait être adopté par tous les développeurs. Schema.org est né. Il s’agit d’un collectif collaboratif et communautaire qui a pour mission de créer, maintenir et promouvoir de nouveaux schémas pour structurer les données sur Internet, tant au niveau des pages que des mails. Il s’inscrit dans la grande réflexion globale sur le web sémantique.

Concrètement, Schema.org introduit de nouveaux attributs HTML qui permettent aux robots (tels que Google) de mieux comprendre le contenu de vos pages. Ils contextualisent les concepts que nous utilisons pour permettre aux robots de les comprendre et de mieux les afficher.

Imaginons que nous vendons une figurine de chat. Notre souhait le plus cher est que l’utilisateur achète cette figurine, n’est-ce pas ? Les attributs schema.org sont interprétés par la plupart des moteurs de recherche et génèrent des affichages différents qui peuvent mettre votre produit plus en évidence pour l’utilisateur.

Une des possibles interprétations par Google des standards schema.org
Une des possibles interprétations par Google du standard schema.org

Cet aspect mériterait un cours en lui-même, c’est pourquoi je ne le développerai pas plus dans ce cours. Mais je vous conseille la lecture de cet excellent article sur le lien entre schema.org et Google

Ça a l’air assez compliqué… Est-ce indispensable de comprendre le fonctionnement de schema.org ? As-tu des ressources à me conseiller ?

Comprendre le principe des balises sémantiques est essentiel et je vous conseille de vous entraîner en jouant avec les outils ci-dessous :

  • Structured Data Testing Tool : cherchez une page contenant des balises sémantiques et laissez Google vous afficher ce qu’il en a compris ;

  • Schema creator : créez vos premières balises sémantiques grâce à un formulaire qui vous affichera le code HTML correspondant.  

Exemple de certificat de réussite
Exemple de certificat de réussite