Open Graph vs Twitter Card : quelle est la différence ?

Les deux contrôlent les aperçus des liens sur les réseaux sociaux. Mais ce n'est pas la même chose. Voici quand utiliser chacun d’eux et pourquoi vous devriez utiliser les deux.

Open Graph — La norme Facebook

Open Graph a été introduit par Facebook en 2010. Avant les balises OG, lorsque quelqu'un partageait un lien sur Facebook, la plateforme sélectionnait au hasard une image et un texte sur la page. Le résultat était imprévisible et souvent peu attrayant.

Facebook a déclaré : "Donnons aux webmasters un moyen standard de contrôler les aperçus de leurs liens." Ils ont créé un ensemble de balises méta que n’importe quel site Web pourrait ajouter :

<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />

D'autres plateformes ont adopté la norme Open Graph. LinkedIn, Discord, Slack, WhatsApp et Reddit lisent tous les balises og: pour afficher les aperçus des liens.

Twitter Cards — La norme Twitter

Twitter a créé son propre système appelé « Twitter Cards » avant que Open Graph ne soit largement adopté. Twitter Cards utiliser une convention de dénomination d'attribut différente :

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Les Twitter Cards ont deux types principaux :

• summary — Petite vignette sur le côté droit du tweet
• summary_large_image — Grande image occupant la majeure partie de la carte (recommandé)

Compatibilité des plateformes

Voici quelles plateformes utilisent quelles balises :

Pourquoi devriez-vous définir les deux

Même si la plupart des plateformes prennent en charge les deux types de balises, il existe de bonnes raisons de définir les deux :

1. X/Twitter préfère les balises twitter:card. Bien que X puisse recourir aux balises OG, il peut ne pas les restituer correctement. La définition des deux garantit que X affiche le bon type de carte.
2. Épreuve du futur. Si une nouvelle plate-forme se lance et préfère un standard à l'autre, le fait d'avoir les deux garantit la compatibilité.
3. Cohérence. L'utilisation des deux garantit que votre aperçu semble correct, quelle que soit la plate-forme qui lit quelles balises.

La configuration complète

Voici la configuration recommandée pour n'importe quelle page :

<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Liste de contrôle des solutions rapides

Foire aux questions