Open Graph et Twitter Cards : qu’est ce que c’est et comment les utiliser ?

Troisième partie de notre série « Débuter en référencement« . Après la théorie, passons gentiment à un peu de code. On sort un peu du SEO au sens strict, puisque l’on sort de l’optimisation pour les moteurs de recherche, mais on reste dans le cadre de l’acquisition de trafic.

Étrangement méconnues par un certain nombre d’acteurs du web bien que très utilisées (merci les plugins SEO …), ces deux technologies sont garantes de votre image sur les réseaux sociaux. Ou, du moins, d’une partie de cette image.

Open Graph et Twitter Card, à quoi ça sert ?

Pour les Twitter Cards (cartes Twitter), c’est peut être un peu plus simple à deviner que pour Open Graph. Je vous ai parlé d’image, de votre image, et d’acquisition de trafic. Et pour cause : ces balises vous permettent de soigner la présentation de vos liens sur les réseaux sociaux.

Vous l’avez déjà surement remarqué en partageant un lien sur Facebook. Un aperçu du site se charge, avec une image et un peu de texte pour donner envie de cliquer. Si ça ne fonctionne pas chez vous, la raison est très simple, vous n’utilisez pas Open Graph. Et il faut bien l’avouer, c’est tout de suite moins classe … Mais rassurez vous, on va arranger ça très vite :)

Comment les installer

Ces technologies prennent la forme de balises meta (et c’est à ce moment précis que je me dis : fais donc un dossier sur les balises meta. So, Stay Tuned !). Ce sont donc des balises à glisser dans le <head> de votre document HTML.

Open Graph

Toutes les balises meta sont composées d’un nom et d’une valeur, ou plutôt d’une propriété et d’un contenu. Open Graph s’appuie sur plusieurs balises meta, par exemple og:title, og:description ou og:image. Dans notre cas, nous allons prendre un exemple simple et basique qui est adapté à la majorité des cas.

<meta property="og:site_name" content="MonSiteWeb" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://monsiteweb.fr/ma-page-qui-dechire" />
<meta property="og:title" content="MonSiteWeb - Plein d'articles géniaux" />
<meta property="og:description" content="Découvrez plein d'articles qui vont vous plaire. C'est certain !" />
<meta property="og:image" content="https://monsiteweb/images/uneimage.jpg" />
 

Déboguer Open Graph

Facebook utilise un système de cache afin de ne pas avoir à visiter votre site à chaque fois qu’une URL est partagée. Alors comment gérer quand vous avez changé le contenu de vos balises Open Graph ? Il suffit de vous rendre sur le débogueur. Vous pourrez y vérifier que tout se passe bien et régénérer le cache si besoin.

Twitter Cards

Pour les Twitter Cards, le fonctionnement est sensiblement le même. Il existe plusieurs types de Twitter Cards, mais nous allons nous limiter à celles qui permettent un « aperçu » du site web, comme sur Facebook ou LinkedIn avec OpenGraph. (Un dossier complet viendra surement). Plus précisément à un type de Twitter Cards, celui qui permet de présenter de grandes et belles images.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@monCompteTwitter" />
<meta name="twitter:title" content="MonSiteWeb - Plein d'articles géniaux" />
<meta name="twitter:description" content="Découvrez plein d'articles qui vont vous plaire. C'est certain !" />
<meta name="twitter:image" content="https://monsiteweb/images/uneimage.jpg" />
<meta name="twitter:url" content="http://monsiteweb.fr/ma-page-qui-dechire" />
 

Déboguer Twitter Cards

Eh oui, bonne nouvelle ! Twitter possède aussi son outil de débogage ! Vous allez donc pouvoir vérifier que tout s’affiche comme vous le souhaitez.

Quelle taille pour les images ?

Facebook se débrouille plutôt pas mal dans la gestion des images et s’adapte relativement bien à ce que vous lui proposez. Vous pouvez utiliser une image carrée, mais on conseille généralement des images au format paysage d’un ratio 1:91, pas trop petite. 1200×628 pixels est la taille conseillée.

Pour Twitter, on peut travailler avec des images un peu plus petites, type 506×254 pixels, avec un ratio proche de 1:2.

Globalement, vous pouvez travailler avec une seule image d’un ratio entre 1:91 et 1:2. Evitez simplement les images trop petites. Si vous avez des doutes, n’hésitez pas à vérifier et à optimiser à l’aide des débogueurs.

Les plugins SEO

Il existe des plugins pour générer automatiquement ces balises sur votre site. On citera notamment Yoast SEO, très utilisé sur WordPress. A vous de voir sur quelles bases vous voulez construire votre site et si vous préférez tout gérer vous même on prendre des plugins développés par des tiers.

Open Graph et Twitter Cards : qu'est ce que c'est et comment les utiliser ?

On termine avec ce gif, parce que The Rock avec les cheveux longs, ça s’impose tout seul …

Suggestions