Open Graph versus Twitter Card: wat is het verschil?

Beide beheren linkvoorbeelden op sociale media. Maar ze zijn niet hetzelfde. Hier leest u wanneer u ze allemaal moet gebruiken - en waarom u beide zou moeten gebruiken.

Open Graph — De Facebook standaard

Open Graph werd in 2010 geïntroduceerd door Facebook. Als iemand vóór OG-tags een link deelde op Facebook, koos het platform willekeurig een afbeelding en tekst van de pagina. Het resultaat was onvoorspelbaar en vaak onaantrekkelijk.

Facebook zei: "Laten we webmasters een standaardmanier geven om hun linkvoorbeelden te beheren." Ze creëerden een reeks metatags die elke website kon toevoegen:

<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" />

Andere platforms hebben de Open Graph-standaard overgenomen. LinkedIn, Discord, Slack, WhatsApp en Reddit lezen allemaal og: tags om linkvoorbeelden weer te geven.

Twitter Cards — De Twitter-standaard

Twitter creëerde zijn eigen systeem genaamd "Twitter Cards" voordat Open Graph algemeen werd aanvaard. Twitter Cards gebruik een andere attribuutnaamgevingsconventie:

<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" />

Twitter Cards heeft twee hoofdtypen:

• samenvatting — Kleine miniatuur aan de rechterkant van de tweet
• summary_large_image — Grote afbeelding die het grootste deel van de kaart in beslag neemt (aanbevolen)

Platformcompatibiliteit

Hier ziet u welke platforms welke tags gebruiken:

Waarom u beide moet instellen

Hoewel de meeste platforms beide tagtypen ondersteunen, zijn er goede redenen om beide in te stellen:

1. X/Twitter geeft de voorkeur aan twitter:card tags. Hoewel X kan terugvallen op OG-tags, worden deze mogelijk niet correct weergegeven. Als u beide instelt, zorgt u ervoor dat X het juiste kaarttype weergeeft.
2. Toekomstbestendig. Als een nieuw platform wordt gelanceerd en de voorkeur geeft aan de ene standaard boven de andere, zorgt het hebben van beide voor compatibiliteit.
3. Consistentie. Als u beide gebruikt, zorgt u ervoor dat uw voorbeeld er correct uitziet, ongeacht welk platform welke tags leest.

De volledige installatie

Dit is de aanbevolen configuratie voor elke pagina:

<!-- 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" />

Controlelijst voor snelle reparatie

Veelgestelde vragen