Academy

Wat is Open Graph?

Het Open Graph Protocol, of “Open Graph” in het kort, is gestructureerde markup die je aan jouw HTML documenten kunt toevoegen. Door middel van deze markup kun je de context van jouw content uitleggen en de controle nemen over hoe snippets worden getoond wanneer jouw URLs gedeeld worden via social media zoals Facebook, LinkedIn, Twitter, en applicaties zoals Slack, WhatsApp en Telegram.

Facebook Open Graph geillustreerd

Hier is een voorbeeld van hoe KLM Open Graph gebruikt om hun blog post op de juiste wijze te laten zien:

Facebook Open Graph voorbeeld

Waarom Open Graph ook voor jou belangrijk is

Een aantrekkelijke afbeelding trekt de aandacht. Een goede titel en beschrijving verleidt mensen ertoe op jouw snippet te klikken. Dit is allemaal van groot belang wanneer je probeert het verkeer op social media probeert te beïnvloeden.

Open Graph markup geeft je de controle over hoe de snippets van jouw URL’s worden getoond op social media. In SEO zijn we enorm gefocust op het optimaliseren van titels en meta descriptions om een zo hoog mogelijke click-through-rate (CTR) te krijgen, maar wanneer het om social media gaat wordt het vaak vergeten. Dit is jammer want de strijd om aandacht is net zo groot op social media.

Geoffrey Colon
Geoffrey Colon

Open Graph is belangrijk omdat het rekening houdt met het delen van content. Wanneer iemand een link kopieert om deze in een status te posten of te delen vanaf jouw website, willen ze niet tijd besteden aan het herontwerpen van de content zodat het er goed uitziet in hun feed. En ze willen zeker niet alleen maar een kale link zonder foto of headline. Open Graph helpt met het ontwerp van de content omdat het gekoppeld is aan verschillende APIs zodat het een algemene look en feel heeft en het aantrekkelijk is voor degenen die deze informatie in hun newsfeeds zien. Zij hebben daardoor meer de neiging om op de link te klikken. Open Graph werkt letterlijk als een traffic driver die gecontroleerd wordt door het webdesign team.

Izzi Smith
Izzi Smith

Sociale signalen zijn een fantastische manier om aan zoekmachines te bewijzen dat je hoogwaardige content hebt wat gedeeld kan worden, uniek is en waarde heeft voor een groot publiek. Als je echter niet de controle neemt over het uiterlijk van jouw pagina op Social Media platforms, riskeer je dat je de shares en engagements verliest wanneer de verkeerde content wordt getoond. Door middel van Open Graph elimineer je dat risico en neem je de controle over hoe jouw content weergegeven wordt. Dit maximaliseert jouw kansen op meer verkeer voor jouw site en verkrijg je deze zo belangrijke social signals.

Verhoogt Open Graph mijn rankings?

Nee, Open Graph heeft niet direct een invloed op jouw rankings. Wij denken echter dat Open Graph net als Schema.org zoekmachines helpt de context van jouw content te bepalen. Dus op een bepaalde manier profiteert jouw SEO prestatie toch van Open Graph.

Zoals we in de vorige sectie hebben uitgelegd is ten zeerste aan te raden dat je Open Graph implementeert als je het verkeer vanaf social media wil vermeerderen.

Het is tenslotte geen erg grote moeite om ook een Open Graph titel, beschrijving en afbeelding toe te voegen wanneer je de titel en meta description van een pagina aan het fine-tunen bent.

Kevin Indig
Kevin Indig

Open Graph markup is belangrijk tijdens het proces van content distributie. Het vermindert de spanning van het delen van content door ervoor te zorgen dat de snippet er goed uitziet en daarom de kans op re-shares vergroot. Open Graph markup is uiteindelijk een belangrijke factor bij de virale distributie van content. Hoe beter het onderhouden wordt, hoe meer de content gedeeld wordt.

Arnout Hellemans
Arnout Hellemans

Aangezien een groot aantal tools niet op HTTP gebaseerd zijn (e.g. WhatsApp, Slack, FB Messenger) is er geen referrer of verwijzer, en als zodanig eindigt dit verkeer als direct traffic in Google Analytics, gebruik daarom tracking op de og:url (UTM of iets anders) om de bronnen van dit verkeer te differentiëren.

Welke platforms ondersteunen Open Graph

Vanzelfsprekend Facebook aangezien zij de developer zijn van Open Graph.

Open Graph wordt ook ondersteund door ten minste deze platforms:

  • LinkedIn
  • Slack
  • Twitter
  • WhatsApp
  • Telegram

N.B. Twitter heeft zijn eigen versie ontwikkeld genaamd ‘Twitter Cards’. Maar als er geen Twitter Cards aanwezig zijn dan vallen ze terug op Open Graph om snippets voor URL’s te genereren.

Hoe implementeer je Open Graph

Je implementeert Open Graph door Open Graph markup toe te voegen aan jouw HTML documenten, in de <head> van jouw pagina’s. Je kunt dit handmatig doen of, als jouw website aangedreven wordt door een CMS, dan is het waarschijnlijk dat er functionaliteit of plugins beschikbaar zijn voor dit werk. Indien niet, praat dan met jouw developers. Het is niet zo moeilijk om de functionaliteit hiervoor te bouwen.

Er zijn vier vereiste Open Graph eigenschappen:

  1. og:url
  2. og:title
  3. og:description
  4. og:image

Er zijn ook twee aanbevolen eigenschappen; gebruik deze om nog meer context voor de content te geven.

  1. og:type
  2. og:locale

Laten we eens kijken naar een voorbeeld van Open Graph

Ons Schema.org artikel ziet er zo uit wanneer het gedeeld wordt op Facebook:

Open graph op Facebook - snippet voorbeeld

Wanneer we de source code opvragen, ziet de Open Graph implementatie er zo uit:

Open Graph code snippet

og:locale

De og:locale eigenschap beschrijft de locale die de pagina probeert te bereiken. In dit geval is het de standaardwaarde: en_US. Je zou kunnen stellen dat og:locale vergelijkbaar is met het hreflang attribuut in SEO wanneer het gaat om het bedoelde gebruik—een bepaald publiek proberen te bereiken.

Als je content hebt voor andere locales, kun je alternatieve versies definiëren door middel van og:locale:alternate.

Voorbeeld code snippet
<meta property="og:locale" content="en_US" />

Vereisten
Deze waarde bestaat uit een taalcode van twee letters, een underscore, en dan een landcode van twee letters.

Wat gebeurt er als je het niet definieert
Als de og:locale niet ingevuld of gedefinieerd is dan wordt standaard en_US gebruikt.

Meer info over og:locale
Facebook for Developers documentation.

og:type

De og:type eigenschap beschrijft het type content—in dit geval artikel. Deze tag beïnvloed hoe jouw pagina eruit ziet in Facebook’s feed. Je kunt uit vele types kiezen, bijvoorbeeldproduct, book, place, profile, and video.movie. Deog:type is vergelijkbaar met Schema types.

Voorbeeld code snippet
<meta property="og:type" content="article" />

Vereisten
Er kan maar één type per pagina gedefinieerd worden.

Wat gebeurt er als je het niet definieert
Als je het og:type definieert, dan wordt standaard website gebruikt.

More info on og:types
Facebook for Developers documentation.

og:title

De og:title eigenschap staat voor Open Graph titel, wat de titel van een pagina weergeeft. De og:title is vergelijkbaar met <title> tag in SEO.

Voorbeeld code snippet
<meta property="og:title" content="Structured data using Schema.org: the Ultimate Guide" />

Vereisten
De titel mag geen branding bevatten. Het moet de titel van jouw content beschrijven. Houd bovendien het volgende in gedachten wanneer je jouw snippet voor Facebook optimaliseert:

  • Jouw titel past niet op één regel als het langer is dan 55–60 karakters.
  • Jouw og:description toont het niet als jouw titel zich over twee regels verspreidt.

Wat gebeurt er als het niet definieert
Social media platforms gebruiken dan jouw <title> tag of jouw twitter:title als een fallback.

og:description

De og:description staat voor Open Graph beschrijving. Het is een korte beschrijving van de pagina.

Voorbeeld code snippet
<meta property="og:description" content="Get more clicks and outsmart your competitors with Schema.org!" />

Vereisten
Houd bij het optimaliseren van jouw snippet voor Facebook in gedachten dat de beschrijving niet op één regel past wanneer het langer is dan 55-60 karakters.

Wat gebeurt er als je het niet definieert
Social media platforms gebruiken dan jouw meta description of jouw twitter:description als een fallback.

og:url

De og:url eigenschap beschrijft de canonieke versie van de URL: de versie zonder parameters.

Voorbeeld code snippet:
<meta property="og:url" content="https://www.contentkingapp.com/academy/schema/" />

Vereisten
Het is essentieel dat je hier de canonieke versie van de URL definieert, aangezien Likes en Shares worden toegeschreven aan dit URL in plaats van aan de niet-canonieke versie.

Wat gebeurt er als je het niet definieert
Jouw Open Graph implementatie wordt niet gevalideerd, aangezien dit een vereiste eigenschap is.

og:site_name

De og:site_name eigenschap beschrijft de naam van de website—maar het is niet langer een ondersteunde eigenschap.

Voorbeeld code snippet
<meta property="og:site_name" content="Real-time SEO Auditing and Content Tracking" />

article:section

De article:section eigenschap is een eigenschap van het og:type, wat beschrijft van welk deel van de website een pagina onderdeel uitmaakt. In ons geval bevinden onze Academy artikelen zich in dearticle:section.

Voorbeeld code snippet:
<meta property="article:section" content="Structured Data" />

Vereisten
Geen.

Wat gebeurt er als je het niet definieert
Social media platforms begrijpen dan niet tot welke sectie van jouw pagina behoort.

Meer informatie over article:section
Facebook for Developers documentation.

og:image

De og:image eigenschap definieert welke afbeelding moet worden getoond in jouw snippet. Zorg ervoor dat je deze afbeeldingen zorgvuldig selecteert, want grootte, kwaliteit en afmetingen doen er wel degelijk toe.

Voorbeeld code snippet:
<meta property="og:image" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Vereisten
Wanneer het gaat om og:image, houd dan rekening met de volgende vereisten:

  • Als je een grote afbeelding wilt laten zien in jouw snippet, zorg er dan voor dat het minimaal 600 x 315 pixels heeft—en idealiter 1,200 x 630 pixels voor schermen met een hoge pixel dichtheid (bijvoorbeeld de Retina schermen van Apple)
  • Als een afbeelding kleiner dan 600 x 315 wordt gedefinieerd, dan zul je zien dat jouw snippet ook een kleinere afbeelding bevat.
  • De minimale afmetingen zijn 200 x 200 pixels. Kleinere afbeeldingen worden niet gevalideerd.
  • De maximale bestandsgrootte die ondersteund wordt is 8 MB per afbeelding.
  • Zorg ervoor dat je afbeeldingen niet bijgesneden worden, houd een beeldverhouding van 1.91:1 aan.

Wat gebeurt er als je het niet definieert
Jouw Open Graph implementatie wordt niet gevalideerd, en social media zullen jouw pagina’s blijven doorzoeken voor een afbeelding. Er is een grote kans dat dit er … niet goed uitziet, want we hebben gezien dat er vrij strenge vereisten rondom afbeeldingen zijn.

Optional extra fields for og:image
Er zijn optionele, extra velden beschikbaar voorog:imagedie meer informatie over de afbeelding kunnen verschaffen:

  • og:image:url: dit is een alternatief voor og:image
  • og:image:width en og:image:height: bepaalt de wijdte en de hoogte van een afbeelding zodat de afbeelding juist laadt wanneer het voor het eerst gedeeld wordt.
  • og:image:type: laat je het afbeeldingstype definiëren. Ondersteunde waarden:
    • image/jpeg
    • image/gif
    • image/png

og:image:secure_url

De og:image:secure_url definieert de HTTPS versie van de og:image.

Voorbeeld code snippet:

<meta property="og:image:secure_url" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Vereisten
De afbeeldings-URL moet via HTTPS aangeboden worden.

Wat gebeurt er als je het niet definieert
Het is niet duidelijk wat er dan gebeurt.

Andere Open Graph eigenschappen

Er zijn nog veel meer Open Graph eigenschappen beschikbaar. Hier zijn een aantal die het vermelden zijn:

  • og:video: gebruikt om een video te specificeren. Zie Facebook for developer documentatie voor meer information hierover.
  • og:updated_time: meldt wanneer de pagina voor het laatst was geüpdatet.
  • og:ttl: meldt het aantal seconden voor de pagina opnieuw gescraped mag worden door Facebook. Dit is een manier om het percentage van Facebook crawlers te beperken.

Valideer jouw Open Graph implementatie met een checker

Je kunt de Facebook Open Graph debugger gebruiken om jouw Open Graph implementatie te valideren.

Dit laat je echter maar één URL per keer controleren, dus heeft het zin om een oplossing te gebruiken die je een groot aantal pagina’s laat controleren. ContentKing helpt je hiermee want de app laat je in real time de Open Graph implementatie van je hele website controleren:

Contentking - issues open graph

Best practices voor Open Graph

Houd rekening met de volgende best practices wanneer je werkt met Open Graph:

  1. Zorg ervoor dat je tenminste alle vereiste Open Graph eigenschappen definieert—en idealiter ook de aanbevolen eigenschappen.
  2. Houd og:title onder 55–60 karakters.
  3. Houd jouw og:description onder 60–65 chars.
  4. Gebruik voor og:image, high-quality afbeeldingen met afmetingen van ten minste 1,200 x 630 pixels, met een maximale bestandsgrootte van 8 MB.
  5. Wanneer je Open Graph markup voor een pagina voorbereidt, gebruik dan altijd de Open Graph debugger om jouw snippet te kunnen previewen. Zorg ervoor dat alle gegevens ingevuld zijn. Pas het aan totdat je het af vindt. Een bonus is dat je snippet pre-cached, wat betekent dat jouw snippet juist wordt getoond wanneer het voor het eerst gedeeld wordt.
  6. Als je fouten gemaakt hebt en ze daarna gecorrigeerd hebt en je wilt dat Facebook een nieuw snippet genereert, ga naar de Open Graph debugger en klik op “Fetch new scrape information”. Dit ververst de cache. Het ververst echter niet ook automatisch de afbeelding zelf—daarvoor moet je een nieuwe og:image URL definiëren en pas dan “Fetch new scrape information” uitvoeren.
  7. Gebruik og:image:width en og:image:height om Facebook, etc. de afbeelding op de juiste wijze te laten laden meteen nadat het voor de eerste keer gedeeld is.
ContentKing Academy Content Team
Steven van Vessum
Steven van Vessum

Steven is onze Chief Customer Officer. Hij zorgt ervoor dat onze klanten tevreden zijn én blijven. Daarnaast is hij gek op alles wat met SEO en content marketing te maken heeft!

Vojtěch Zach
Vojtěch Zach

Vojtěch is ContentKing’s Customer Support & Localization Manager. He is the one who will answer your questions when you reach out to us. He is a studied translator, so apart from making our users happy, he also loves to take on our localization challenges.

Lorena Torsani
Lorena Torsani

Lorena is ContentKing’s Marketing Specialist. She’s a creative thinker, who is highly enthusiastic about engaging with customers, running exciting campaigns and bringing forth some fresh ideas.

Probeer 14 dagen gratis

Binnen 20 seconden aan de slag

Gelieve een geldige domeinnaam (www.voorbeeld.nl) op te geven.
  • Geen credit card nodig
  • Geen installatie nodig
  • Geen verplichtingen