Balises Open Graph, Twitter cards et SEO : le guide ultime pour les optimiser pour votre référencement

Comprendre le fonctionnement des balises Open Graph, des Twitter Cards, et leur enjeu sur votre SEO est devenu primordial. Cela vous permettra d’être percutant lors du partage de votre contenu sur les réseaux sociaux et sera un plus pour votre SEO : nous vous expliquons tout ceci dans ce guide « qu’est-ce que c’est, comment les implémenter, et comment combiner les balises open-graph et les twitter cards ! »

Sommaire

• Définition du protocole Open Graph
• La Twitter Card, c’est quoi ?
• Combiner les données Open Graph avec les Twitter Cards

Les balises Open Graph en bref !

Définition du protocole Open Graph

Le protocole qui vous permettra de partager un contenu provenant d’une page web sur les réseaux sociaux est “l’Open Graph”. Les données Open Graph sont un ensemble de balises permettant de donner des informations structurées et riches sur le contenu d’une page provenant d’un site web. Autrement dit, lorsqu’un internaute cliquera sur un bouton de partage, les informations inscrites par défaut seront celles insérées.

Comment mettre en place des balises open graph ?

1. Ajoutez  la ligne suivante dans votre page Html:

2. Ajoutez les balises meta avec les attributs property et content dans la balise « head », comme par exemple ci-dessous : 

• la balise og:title = correspond au titre de votre page, moins de 65 caractères la balise meta : elle est très similaire à votre balise Title classique!
• balise og:description = description courte de la page, moins de 300 caractères: elle est très similaire à votre balise meta-description classique!
• la balise og:url = URL « canonique », celle qui indexe votre page. Il est fort probable qu’elle corresponde à l’url de votre page web >> essayez donc de bien optimiser votre url !
• la balise og:image = URL de l’image qui représente votre page 
• balise og:site_name = nom global de votre site web

Attention : toute les balises ne sont pas indispensables, mais certaines le sont! Il faut absolument spécifier les 4 balises: og:title, og:type, og:url, og:image

Vous avez la possibilité d’extraire ces informations sur notre solution Smartkeyword.

L’intérêt des balises Open Graph ?

L’impact du protocole Open Graph se trouve d’un point de vue indirect au niveau des moteurs de recherche. A l’origine, les balises Open Graph sont destinées à une utilisation sur les réseaux sociaux. Générant et augmentant le taux de clic sur un site web via les partages sociaux cela se révèle avoir un fort intérêt business. De plus le Rankbrain étant le 3e critère de pertinence de Google, ayant pour indices d’influence le taux de clics, le protocole Open Graph devient alors indirectement un outil non négligeable dans une stratégie SEO.

Résumé des 5 balises Open Graph les plus importantes

balise og:title

qui correspond au titre de votre page

balise og:description

qui correspond à une description courte de votre page

balise og:url

qui correspond à l’url votre page web

balise og:image

qui représente l’image de votre page qui sera partagée sur les réseaux sociaux

balise og:site_name

qui correspond à l’url de votre site

Les différents types de Twitter Card en bref !

La Twitter Card, c’est quoi ?

Une Twitter card est une optimisation technique qui enrichit vos tweets de données média provenant de votre site internet. Lorsqu’une personne partage un lien, le tweet publié se verra accompagné d’informations dans un format multimédia préalablement choisi par l’auteur.

Comment mettre en place la Twitter Card ?

Rendez vous simplement sur la plateforme d’aide aux développeurs Twitter et allez dans l’outil “Validator tool” qui vous aidera à générer le code à intégrer sur votre site web selon le format de twitter cards que vous désirez générer que cela soit pour le format desktop ou mobile.

Entrez toutes les informations demandées, ensuite vous aurez la possibilité de prévisualiser le résultat et d’obtenir le code à intégrer sur votre site web, ensuite il vous suffit de valider. Pour vérifier si tout fonctionne correctement du point de vue des meta données, renseignez l’url en question.

Si le site a les balises meta et que l’URL correct, vous serez redirigé vers une page où vous aurez la possibilité de soumettre des informations basiques et une demande d’approbation.

Les  8 formats existants de twitter cards 

La Summary card

Format par défaut reprenant des éléments de votre page web tels que le titre, la description, l’aperçu et la mention twitter.

Summary card with Large image

Ce format sera accompagné d’une grande image reprenant les mêmes éléments que la Summary card.

Photo card

Tweet illustré d’une image n’utilisant aucun caractère.

Gallery card

Format montrant à l’utilisateur une sélection de photo extraite du lien du site web avec le tweet.

Player card

Concerne uniquement le contenu multimédias (vidéo, audio et slides) pour être directement “con: présentant une sélection de photos via le lien du web avec le tweet.

App card

Format adapté pour les applications mobile iOs et Androïd. Les données affichées sont le nom de l’application, le nom du store, le prix, la description et les avis vu depuis l’aperçu twitter.

Product card

Convient au e-commerce, les données remontant concernent le produit en question avec une image, le prix, la liste des tailles, la disponibilité.

Lead generation card

Format uniquement disponible en format publicitaire, il permet l’intégration d’un call-to-action de partage, en facilitant aussi le pré-enregistrant des informations tel que la mention, le nom et l’adresse e-mail.

L’intérêt de la Twitter Card

Les Twitter Card permettent de rendre un contenu plus attractif car cela permet d’illustrer de manière automatique vos liens web que vous partagez. Chaque carte comporte une attribution de contenu intégré, qui permet d’afficher les comptes Twitter appropriés pour le contenu spécifié par vous. Les utilisateurs pourront suivre et visualiser les profils des comptes attribués directement depuis la carte. Cela facilite la lecture de l’utilisateur en d’illustrant automatiquement  les liens web partagé sans imputer un nombre de caractères sur le tweet. Un tweet ayant des meta-données augmente la visibilité par conséquent la viralité auprès des followers.

Combiner les données Open Graph avec les Twitter Cards

Les tags de cartes Twitter sont similaires aux tags Open Graph et sont basés sur les mêmes conventions que le protocole Open Graph.

Quand on utilise le protocole Open Graph pour décrire des données sur une page, on a la possibilité de générer facilement une Twitter card sans dupliquer les balises et les données.

Lorsque le processeur de la Twitter card recherche des balises sur une page, il contrôle et s’assure d’abord la propriété spécifique à Twitter et, si elle est absente, il revient à la propriété Open Graph prise en charge. Permettant dès lors d’être défini sur la page indépendamment et d’amoindrir la quantité de balisage en double nécessaire pour décrire le contenu et l’expérience.

À noter : dans le code vous devez compléter les mentions « twitter:card, twitter:site, et twitter:creator » avec vos informations pour une parfaite optimisation.

Conclusion

Finalement, rendez votre contenu de site visible sur les réseaux sociaux grâce à la balise open graph et mettez en avant votre contenu pour apporter du trafic.

   Article rédigé par Louis Chevant