Balises Open Graph,Twitter cards, SEO : le guide ultime

Catégories seo
open graph twitter card smartkeyword

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 !”

Le protocole Open Graph, c’est quoi ?

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 balise 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 ?

facebook balise open graph seo

  1. Ajoutez  la ligne suivante dans votre page Html:
    <html xmlns:og="http://ogp.me/ns#">
  2. Ajoutez les balises meta avec les attributs property et content dans la balise <head>, comme par exemple ci-dessous: 

balise open graph privateaser seo smartkeyword

  • 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
  • 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.

balise open graph seo 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é pour une utilisation simplement 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.

La Twitter Card, c’est quoi ?

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

twitter card seo smartkeyword

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 basique et une demande d’approbation.

 

twitter card generator seo smartkeyword
Source : Yousemii

 

Les  8 formats existants de twitter cards :

  • 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 twitter card seo smartkeyword
Source : buffer social

 

  • summary card with Large image : format sera accompagné d’une grande image reprenant les mêmes éléments que la Summary card.
summary card with Large image twitter card seo smartkeyword
Source : buffer social
  • photo card : tweet illustré d’une image n’utilisant aucun caractère.
photo card twitter card seo smartkeyword
Source : adparlor

 

  • gallery card : format montrant à l’utilisateur une sélection de photo extraite du lien du site web avec le tweet.
gallery card twitter card seo smartkeyword
Source : VPDM
  • 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.
player card twitter card seo smartkeyword
Source : buffer social
  • 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.
App Card Twitter card seo smartkeyword
Source : buffer social

 

 

  • 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é.
product card twitter card seo smartkeyword
Source : VPDM

 

 

  • 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.
lead generation card twitter card seo smartkeyword
Source : VPDM

 

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ée, 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 controle 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.

balise Open Graph twitter card seo privateaser smartkeyword

 

 

Ingénieur informaticien de formation et joueur d'échecs de niveau international, j'ai travaillé 8 ans en tant que Product Manager chez Murex, leader mondial des progiciels financiers.
En 2014, désireux de voir du pays, j'ai alors enseigné les mathématiques financières à l'ENSIMAG et me suis mis à mon compte au service de startups & PME, milieu dans lequel j'ai pu découvrir les métiers du Web et notamment le référencement naturel.
J'ai alors créé SmartKeyword.io en parallèle de mon activité de freelance et suis ravi de m'y consacrer à temps plein depuis déjà 1 an! La mission de SmartKeyword est d'aider les e-commerçants à augmenter leurs ventes via le référencement, et ce de manière autonome.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *