Dans le cadre d’audit SEO ou d’optimisation du référencement naturel, on entend parler de lier un compte Twitter à un site web, de balises Open Graph et de cartes Twitter…
Qu’est-ce que les balises Open Graph ?
Tout d’abord, le protocole Open Graph est un ensemble de balises HTML de type méta données permettant d’enrichir une page de données structurées à destination des réseaux sociaux.
Ces méta données donnent des informations sur le contenu d’une page pour Facebook, Twitter, LinkedIn Pinterest…
Ensuite, à l’origine les balises Open Graph sont une création de Facebook datant de 2010 et permettent de faciliter l’intégration des autres sites au sein du réseau social. Désormais ces balises OG sont gérées par la fondation Open Web et sont utilisé par la plupart des réseaux sociaux comme Pinterest et anciennement Google+.
⚠️Pour Facebook et LinkedIn on parle de balises Open Graph.
Twitter utiliser un format de méta données spécifique alors qu’il sait exploiter les balises OG.
⚠️Pour Twitter on parle de balises Twitter Cards ou cartes Twitter.
Comment mettre en place les balises Open Graph ?
Les balises open graph sont ajoutées simplement en utilisant un plugin WordPress comme Yoast SEO, ou a sinon elles sont ajoutées dans la partie <head> d’un site web de la façon suivante :
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>La balise OG ou Open Graph et les Twitter Cards </title>
<meta property="og:title" content="Comment optimiser la balise Open Graph avec Raccourci Formation" />
<meta property="og:site_name" content="https://dessin-humoristique.fr/" />
<meta property="og:type" content"="article" />
<meta property="og:url" content="(url de la page) " />
<meta property="og:image" content="lien de l’image" />
</head>
</html>
Ces données sont les métadonnées basiques du protocoles OG mais il existe d’autres balises facultatives pour enrichir davantage un objet comme :
<meta property="og:video" content="url de la vidéo contenu dans la page " />
<meta property="og:local" content="fr_FR" />
précise la langue employée sur la page.
De nombreuses autres balises facultatives peuvent être ajoutées voir sur le site officiel de l’Open Graph.
A quoi sert la balise Open Graph ?
La balise OG sert principalement lors du partage de liens sur les différentes plateformes sociales. Ces metadonnées illustrent au mieux le contenu du partage.
Ces balises ajoutent un titre, une miniature et une description à tout lien partagé sur les réseaux sociaux.
Le protocole Open Graph améliore l’expérience client et permet de contrôler la mise en page et les informations diffusées de chaque objet social.
En l’absence d’une balise OG et lors d’un partage, Facebook utilise aléatoirement le contenu de la page.
Quel l’impact du protocole Open Graph ?
Officiellement les balises OG n’améliorent pas directement le référencement naturel, mais compléter ces balises permet d’augmenter le taux de clic lors du partage de lien dans les réseaux sociaux. Indirectement cela optimise le référencement naturel.
Pour voir l’affichage d’un partage et analyser une url, testez les liens sur l’outil de débogage des balises Open Graph Facebook.
Comment optimiser le protocole Open Graph ?
Pour rendre des pages riches sur les réseaux sociaux, il suffit de de remplir les différents champs de métadonnées à savoir :
La balise OG Title.
Le titre est la première information à fournir pour l’Open Graph et sera le titre de la page sur les réseaux sociaux. OG Title se compose tout comme la balise “meta” Title de 65 caractères visibles aussi elle doit être suffisamment précise et séduisante pour inciter les internautes à la lecture.
<meta property="og:title" content="Comment optimiser la balise Open Graph avec Raccourci Formation" />La balise OG Title s’apparente fortement à la balise Title dans son contenu comme dans l’utilisation.
La balise OG Image.
C’est l’url ou le de lien l’image à la une lors du partage sous la forme d’une miniature. Puisque les images offrent un fort attrait visuel, elles augmentent le taux de clics.
La taille idéale pour les images de la balise OG est 1200 x 628 pixels.
<meta property="og:image" content="lien de l’image" />La taille idéale pour les images de la Twitter Card est 506 x 628 pixels.
<meta name="twitter:image" content="lien vers l’image" />La balise OG Description.
C’est un court texte de 200 à 300 mots décrivant au mieux le contenu de la page. Donc cette balise permet d’ajouter des précisions au titre et donne un aperçu de la page, tout comme la balise méta description.
L’idéal est d’utiliser une à quatre phrases pour cette partie.
<meta property="og:description" content="Découvrez comment utiliser les balises OG et Twitter cards pour enrichir les pages de données structurées lors des partages sociaux." />
<!--Twitter Cards-->
<meta name="twitter:description" content="Découvrez comment utiliser les balises OG et Twitter cards pour enrichir les pages de données structurées lors des partages sociaux." />La balise OG description prend place sous le titre lors d’un partage sur Facebook.
La balise OG Url.
Il s’agit de l’URL canonique de la page web cible, elle est notamment utilisée dans le cas où le site se compose de pages dynamiques ou que plusieurs URL permettent d’accéder au même contenu.
<meta property="og:url" content="(url de la page) " />
<!-- Twitter Card -->
<meta name="twitter:url" content="https://dessin-humoristique.fr/optimiser-balise-open-graph-twitter-cards" />La balise OG URL sert également pour le décompte des mentions J’aime et les partages.
La balise OG Type.
C’est la balise qui précise de quel contenu il s’agit : article, video, music, web site.
<meta property="og:type" content"="article" />Tous les types d’objet sont disponibles sur le site officiel de la balise OG voir lien plus haut dans l’article.
La balise OG Site_name.
Elle permet de donner un nom au site web en général, c’est là que l’on postione l’url de la page d’accueil d’un site web.
<meta property="og:site_name" content="https://dessin-humoristique.fr/" />Comment optimiser les cartes Twitter ?
Le principal intérêt des balises Twitter Cards est de personnaliser la mise en page des objets (url d’une page) lors d’un partage Twitter.
Il existe de nombreux formats de carte pour générer du trafic vers un site web à savoir :
La Carte Résumé ou « Summary Card ».
Ce type de carte Twitter affiche le titre, la miniature, la description ou les premières lignes du contenu, l’aperçu et la mention Twitter. C’est pourquoi, elle est généralement utilisée pour les articles de blogs, les actualités, les catégories de site.
<meta name="twitter:card" content="summary" />C’est aussi la carte standard utilisée lors des partages de liens sur Twitter..
Le résumé avec image ou « Summary Card with large image ».
Ce type de carte Twitter laisse la place à un large visuel reprenant en dessous le titre, la description, l’aperçu et la mention Twitter.
<meta name="twitter:card" content="summary_large_image" />C’est la copie conforme de la carte ‘’résumé’’ mais donnant plus de place à l’image.
La carte photo ou « Photo Card ».
Il s’agit d’une mise en avant de visuels d’images mais sans texte.
<meta name="twitter:card" content="photo" />Cette balise est particulièrement adaptée pour les sites portefeuilles d’artistes ou de photographes.
La galerie d’images ou « Gallery Card »
Ce format de carte Twitter affiche une composition de visuel de la page cible, ainsi que le titre et la description.
<meta name="twitter:card" content="gallery" />Ce modèle au format mosaïque affiche jusqu’à 4 photos sur un seul tweet.
La carte produit ou « Product Card »
Le produit est la meilleure option pour le partage de produits de e-commerce.
<meta name="twitter:card" content="product" />La carte produit Twitter affiche la miniature, le nom du produit, le prix, la taille (si nécessaire) depuis l’aperçu Twitter.
La carte video et audio ou « Player Card »
Cette carte Twitter est utilisée pour les contenus multimédias comme la vidéo, les audios et les présentations en slides.
<meta name="twitter:card" content="player" />Ce modèle de carte permet d’intégrer directement la vidéo ou le fichier audio et par conséquent la lecture depuis Twitter.
La carte application ou ‘’App Card’’
Pour les applications mobiles, la carte Twitter Application est le plus pertinente puisqu’elle affiche les informations sur store comme le nom de l’appli, le prix, la description et les avis.
<meta name=”twitter:card” content=”app”>Ce modèle de carte permet également de proposer le téléchargement de l’application directement depuis Twitter.
Lead Generation Card
Ce format publicitaire permet d’intégrer un call to action au sein de l’objet social. Ce format de carte est idéal pour favoriser par exemple les inscriptions à une News letter.
Au final chaque format proposera un affichage différent des métadonnées lors des partages sociaux. En fonction des besoins et du secteur de’activité, il est intéressant de personnaliser les Twitter Cars en fonction de chaque page.
Comment mettre en place les Twitter Cards ?
Les balises Twitter cards sont ajoutées via une extension WordPress comme YoastSEO ou directement dans le code du <head> du site de la façon suivante :
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@adri_papeterie" />
<meta name="twitter:creator" content="@adri_papeterie" />
<meta name="twitter:title" content="Comment optimiser la balise Open Graph ?" />
<meta name="twitter:description" content="Découvrez comment utiliser les balises OG et Twitter cars pour enrichir les pages de données structurées lors des partages sociaux." />
<meta name="twitter:image" content="(lien vers l’image)" />
<meta name="twitter:url" content="https://dessin-humoristique.fr/optimiser-balise-open-graph-twitter-cards" />Pour voir comment s’affiche un partage sur Twitter, il est possible de tester une url sur un outil de débogage des Twitter cards.
Conclusion :
Nous retiendrons pour cet article, que le protocole OG est un ensemble de balises méta à intégrer à un site web. Ce balisage améliore sensiblement l’expérience utilisateur lors des partages de lien sur les réseaux sociaux.
Concernant l’optimisation des balise OG , on peut se demander si les algorithmes de Google considèrent les balises Open Graph comme un élément de compréhension du contenu et un plus dans le référencement.
