La base du SMO : les balises méta

• 7 min read

Cet article est libre d'accès pour tous grâce à ceux qui soutiennent notre blog indépendant.

Le SMO (Social Media Optimization) est un ensemble de méthodes qui visent à améliorer le trafic venu des réseaux sociaux. Dans cet article je vous expliquerais comment mettre en place qu’une infime partie des méthodes de SMO mais ces méthodes amélioreront déjà de beaucoup votre visibilité sur les réseaux sociaux. Nous allons nous concenter sur les balises HTML méta.

Pourquoi appliquer les règles du SMO à son site ?

Comme ceux qui appliquent les techniques du SEO (Search Engine Optimization) sur leurs projets le savent sûrement déjà, pour les moteurs de recherches comme pour les réseaux sociaux, le but principal est de pouvoir donner à l’utilisateur l’information voulu en temps voulu. Souvent ce travail se divise en deux étapes : comprendre ce que veut l’utilisateur même s’il ne le dit pas et lui fournir les informations adaptées.

On dira, et peu me contrediront je pense, que les différents services savent déjà très bien comprendre ce que l’on veut. Par contre là où ça se complique pour eux c’est dans la restitution de l’information. Parce que pour la restituer il faut déjà la comprendre : d’où les règles que nous « imposent » Google, Facebook, Twitter et compagnie. Il s’agit en fait de poser un standard pour se comprendre.

Le risque n’est pas que ces services nous pénalisent volontairement mais que notre site ou le contenu que l’on propose ne soit pas compris correctement. Donc ce contenu ne serait peut-être pas fournit aux bonnes personnes ou au bon moment. De ce fait, notre contenu s’en trouverait pénalisé par fatalité car d’autres sites (concurrents ?) ayant suivi les règles établies seraient compris et mieux partagés aux internautes.

Dans le cas inverse, notre contenu est mis en avant par le réseau social de par sa meilleure façon de l’afficher.

Open Graph, décrire son site à un réseau social

Open Graph est un protocole créé par Facebook. Il permet à Facebook mais aussi à tous les autres réseaux sociaux utilisant ce protocole de mieux comprendre une page web et ainsi de mieux l’afficher sur leur site, de permettre une meilleure interaction de l’utilisateur avec le contenu.

Le protocole utilise pour cela une technologie bien connu des développeurs web, les metadata. Les quantités de metadata qu’il est possible utiliser sont vraiment impressionnantes et je vous conseille d’aller les découvrir directement sur le site officiel. Ici je ne traiterais que de celles que j’utilise fréquemment et qui du coup deviennent les plus utiles de mon point de vue.

Voyons tout d’abord og:site_name, og:local et og:type. 3 balises que je mets toujours ensembles. Elles définissent pour og:site_name le nom du site, pour og:local la langue de la page web et doit être au format langue_PAYS (fr_FR), pour og:type le type de la page comme par exemple « website » ou « article ».

<meta property="go:site_name" content=« Cook For Two » />
<meta property="go:locale" content=« en_US » />
<meta property="go:type" content=« website » />

Exemple assez simple, les balises peuvent même se comprendre toutes seules.

<meta property="go:title" content="Diner en amoureux — Cook for Two" />

La metadata go:title permet d’indiquer le titre de la page où l’on se trouve. Vous n’êtes pas obligé d’y entrer exactement le même que celui de la balise title, vous pouvez indiquer ici un titre plus adapté aux réseaux sociaux.

<meta property="go:description" content=" " />

Je n’ai pas remplis le content de cette balise mais vous aurez compris ce qu’il faut y mettre. Une description de votre page (pas de votre site) pour donnez envie aux gens de cliquer sur votre lien.

<meta property="go:url" content="http://cookfortwo.com/en/" />
<meta property="go:image" content="http://cookfortwo.com/img/lo.png" />

Les deux dernières balises propre à Open Graph (donc propre à personne vu que c’est un protocole standard) sont tout aussi simples. On doit y indiquer respectivement l’adresse de la page et une image que l’on veut afficher lorsque quelqu’un partage notre lien.

Une balise que je rajoute souvent mais qui ne sert que pour Facebook :

<meta property="fb:admins" content="480933331928074" />

La balise fb:admins sert à indiquer le propriétaire du site, pas forcément l’auteur de la page. Généralement, on indique une page Facebook. Et on le fait avec l’id de la page Facebook.

Pour faire la même chose avec Google+ la syntaxe change, ce ne sera plus une balise meta mais je vous la donne quand même :

<link rel="publisher" href="https://plus.google.com/117748851621697236514"/>

Cette fois c’est le lien vers la page Google+ que l’on utilise comme valeur.

Twitter Cards, un équivalent

Twitter n’utilise pas le standard Open Graph et on peut se demander à quoi cela servirait. En effet, de base à part une couleur, les liens ne sont pas beaucoup mis en valeur sur ce réseau social.

C’est justement ce qu’a voulu changer l’entreprise en développant les Twitter Cards. Le principe est à peu près le même que Open Graph même si la finalité change.

Twitter part du principe qu’un propriétaire de site ne veut pas forcément afficher de la même manière toutes les pages de son site et surtout que ce n’est pas tous les affichages qui réussissent à tous les contenus. Les deux affirmations ne sont pas fausses.

Il y a donc plusieurs modèles de carte et une carte représente un lien affiché selon un de ses modèles de cartes.

Summary Cards

Summary Card un type d’affichage basique un peu à la Facebook ou comme les autres réseaux : Titre, description, petite photo.

Summary Cards with large image

La même que la Summary Card mais avec une image en bannière au-dessus du titre et de la description. Le résultat commence déjà à être plus sympa.

Photo Cards

Comme son nom l’indique la Photo Card a été conçu pour partager une photo et surtout la mettre en valeur dans la timeline Twitter.

Exemple d’utilisation : un site portfolio pour un photographe. Sur les pages présentants une photo particulière on peut indiquer à Twitter que l’on veut afficher notre lien en Photo Card. La photo s’affichera donc directement dans Twitter. Même s’il ne clique pas le follower verra la photo.

La Gallery Card c’est un peu la Photo Card mais avec plusieurs photos. Ça donne un bon résultat.

La Gallery Card s’affiche comme une simple Summary Card lorsqu’elle est intégrée à un site web, cliquez sur l’heure et la date pour l’afficher correctement.

Exemple d’utilisation : Toujours un portfolio de photographe mais cette fois un internaute partage le lien d’un album complet. On peut indiquer à Twitter quelques photos, les plus belles de l’album par exemple, qui le mettront en avant dans la timeline.

App Cards

Une carte juste pour la présentation des applications. Souvenons nous aussi que Twitter teste en ce moment un système d’achat d’app directement via son application ou son site.

L’ App Card ne s’affiche pas lorsqu’elle est intégrée à un site web, cliquez sur l’heure et la date pour l’afficher correctement.

Exemple d’utilisation : Je propose un service par le biais d’une application iOS et je permets à l’utilisateur de partager certaines données au monde entier grâce à une interface web simple. Je demande à Twitter d’afficher sous chaque tweet menant à mon interface web les informations concernant l’application. Une bonne façon de rediriger le flux d’internautes vers le produit qui me rapporte vraiment de l’argent.

Player Cards

La card qui permet aux vidéos de Youtube de se lire directement dans Twitter. C’est donc un lecteur, mais pas que de vidéos. La documentation indique que cette carte concerne le contenu video, audio et autre média.

Exemple d’utilisation : Je suis Youtube. Certaine de mes pages (OK la majorité) permettent la lecture d’une vidéo. Je demande à Twitter d’afficher la video directement dans Twitter.

Product Cards

Ici l’intérêt est pour les site de e-commerce vendant des produits physiques. La Twitter intègre une description du produit, son prix, etc…

La Product Card ne s’affiche pas lorsqu’elle est intégrée à un site web, cliquez sur l’heure et la date pour l’afficher correctement.

Exemple d’utilisation : Je suis un site de vente de vêtements. Sur les pages d’article je place mes metadatas indiquant à Twitter toutes les informations relatives à mon article. Mon article s’affiche donc directement dans la timeline de l’internaute. J’ajoute ainsi de la plus-value à la pub que me font déjà mes clients en postant le lien d’un produit.

Il est bon de préciser que toutes les cartes affichent un call-to-action pour pousser aider l’internaute à agir face à notre contenu.

Et le code ?

Les codes des différentes cartes sont sensiblement les mêmes et comme je ne les ai pas toutes testées non plus, je ne vous fournis que le code des Summary Cards.

Comme vous devez maintenant comprendre le principe des metadatas pour les réseaux sociaux grâce à Open Graph, je vous mets le code en un seul bloc avec une courte explication.

Pour retrouver les balises nécessaires/manquantes pour des usages plus spécifiques. Rien de mieux que la doc officiel !

<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="http://cookfortwo.com/en/" />
<meta name="twitter:title" value="Diner en amoureux – Cook for Two" />
<meta name="twitter:description" value="" />
<meta name="twitter:site" value="@MindsersIT" />
<meta name="twitter:creator" value="@MindsersIT" />
<meta name="twitter:image" value="http://cookfortwo.com/img/lo.png" />

Voici ce qui change par rapport à Open Graph :

  • twitter:site : compte Twitter du propriétaire du site
  • twitter:creator : compte Twitter de l’auteur du contenu (ex :article)
  • twitter:card : type de carte que vous avez choisi

Rejoins 250+ développeurs de notre liste de diffusion et sois reçois les articles directement dans ta boite mail.

S'inscrire à la newsletter

Aucun spam. Désabonnes-toi en un seul clic à tout moment.

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.

By clicking "Allow all", you agree to the storing of cookies on you device to enhance site navigation, analyse site usage, and assist in our marketing effort.