Open Graph

In deze blog leg ik je uit wat Open Graph is, welke Open Graph tags er zijn en hoe je het kan debuggen voor onder andere Facebook, Twitter en Whatsapp. Wil jij controle over je social media uitingen en je website meer “structuur” geven, ga dan aan de slag met Open Graph.

Wat is Open Graph?

Open Graph is een opmaak waarmee je controle kan uitoefenen op de uitingen van je content op social media. De Open Graph opmaak is geen ranking factor voor SEO. Toch denk ik dat Open Graph zoekmachines “structuur” geeft, net als structured data, tabellen, lijsten en semantic HTML5 dat doen. Deze structuur zorgt er voor dat o.a. zoekmachines je website beter begrijpen.

Open Graph wordt ondersteund door de volgende social media kanalen: Facebook, Twitter, Linkedin, Whatsapp, Slack en Telegram. Behalve Twitter, gebruikt elk kanaal het zelfde protecol. Goed om te weten: elk social media kanaal interpreteert de OG tags op zijn eigen manier. Ontdekken hoe? Kijk dan eens naar het verschil tussen bijvoorbeeld je OG: image op Facebook en Twitter.

Voorbeeld Open Graph

Het is je vast wel eens opgevallen: je deelt een link van je nieuwe aankoop of vakantiebestemming via Whatsapp of Facebook en plop… er verschijnt een afbeelding en titel bij de link. Mits de juiste gegevens aanwezig zijn, worden deze automatisch overgenomen van je website. Met Open Graph kan je hier zelf invloed op uitoefenen en onder andere bepalen hoe de afbeelding en titel er komen uit te zien.

Het voorbeeld hierboven ziet er in Open Graph tags als volgt uit:

<meta property="og:type" content="article"/>
<meta property="og:url" content="https://www.seobrein.nl/wat-is-seo"/>
<meta property="og:locale" content="nl_NL"/>
<meta property="og:site_name" content="YellowBlueMarketing"/>
<meta property="og:title" content="Wat is SEO?"/>
<meta property="og:description" content="SEO is een Engelse term dat staat voor search engine optimization. In het Nederlands wordt het ook vaak zoekmachine optimalisatie genoemd. Het doel van SEO: je organische vindbaarheid vergroten voor klanten die op zoek zijn naar jouw producten of dienstverlening. In deze blog kom je meer te..."/>
<meta property="og:updated_time" content="2020-06-12T15:13:33+00:00"/>
<!-- og:image:1 --><meta property="og:image" content="https://www.seobrein.nl/wp-content/uploads/2019/06/Wat-is-SEO-600x315-cropped.png"/>
<!-- og:image:1 --><meta property="og:image:width" content="600"/>
<!-- og:image:1 --><meta property="og:image:height" content="315"/>
<!-- og:image:1 --><meta property="og:image:alt" content="Wat is SEO"/>

Open Graph tags

Het controleren van je social media uitingen kan je met verschillende tags doen. Een aantal Open Graph tags zijn vereist: De url, de titel, de beschrijving en de afbeelding. Sommige tags zijn optioneel: type content en locatie.

OG:title

De OG:title is een vereiste tag die de titel van je artikel beschrijft. In het voorbeeld hierboven is dit “wat is SEO?”
In de HTML code ziet dit er als volgt uit:

<meta property=”og:title” content=”Wat is SEO?” />

Vereisten voor een optimaal resultaat:

• Gebruik niet je merknaam
• Zorg dat je titel niet langer is dan 55 karakters
• Is je titel langer dan 55 karakters, dan zal de beschrijving tag ( OG:description) niet gebruikt worden.
• Heb je geen OG:title, dan zal je title tag vaak gebruikt worden.

OG:description

De OG:description is een vereiste tag waar een korte beschrijving van je pagina in staat. Deze tag wijkt iets af van de Meta description. Je mag hier namelijk maar 55 tot 60 karakters voor gebruiken. In de HTML code ziet dit er als volgt uit:

<meta property=”og:description” content=”SEO is een engelse term dat staat voor Search engine optimization” />

Vereisten voor een optimaal resultaat:

• Beperk je tot 60 karakters
• Heb je geen OG:description, dan zal je meta description tag gebruikt worden

OG:url

De OG:url is een vereiste tag en beschrijft de url van je pagina.
In de HTML code ziet dit er als volgt uit:

<meta property=”og:url” content=”https://www.seobrein.nl/wat-is-seo“/>

OG:image

De OG:image is een vereiste tag die vertelt welke afbeelding er getoond moet worden.
In de HTML code ziet dit er als volgt uit:

<meta property=”og:image” content=”https://www.seobrein.nl/wp-content/uploads/2019/06/Wat-is-SEO-600×315.png” />

Vereisten voor een optimaal resultaat:

• Het beste formaat voor een grote afbeelding is: 1200 x 630.
• Het minimale formaat voor een grote afbeelding is: 600 x 315.
• Houdt het volgende ratio aan om er zeker van te zijn dat je afbeelding niet verkleint: 1.91:1
• Voor een kleine afbeelding heb je minimaal 200 bij 200 pixels nodig. Anders wordt er helemaal geen afbeelding getoond.
• Zorg dat je afbeelding opgeslagen wordt als het bestandstype: .jpeg, .png of .gif.
• Zorg dat de afbeelding niet groter is dan 8MB.
• Kies je geen afbeelding, dan mag het desbetreffende kanaal zelf bepalen welke afbeelding er getoond wordt.
• Je kan je afbeelding verrijken met optionele OG tags.
• Wil je tekst in je afbeelding plaatsen, doe dit dan in het midden van de afbeelding. Verschillende social media kanalen snijden je afbeelding af.

Tip van Jeroen Boschman: “Elke social media kanaal gaat anders om met OG: Image. Test de uitwerking van je Open graph image bij de kanalen die voor jouw belangrijk zijn. Ben je hier tevreden over? Negeer dan eventuele afwijkingen bij andere kanalen”

OG:type

De OG:type tag is optioneel en beschrijft het type content dat je publiceert. Deel je bijvoorbeeld een spotify playlist, dan zal dit er in de HTML als volgt uit zien:

<meta property=”og:type” content=”music.playlist” />

Vereisten voor een optimaal resultaat:

• Er kan maar één type per pagina gebruikt worden
• Stel je geen type in, dan wordt standaard het type: website gebruikt.

OG:locale

De OG:locale tag is optioneel en beschrijft voor welke locatie je content bedoeld is. In ons voorbeeld zou dat Nederland kunnen zijn.
In de HTML code ziet dit er als volgt uit:

<meta property=”og:locale” content=”NL_NL” />

Vereisten voor een optimaal resultaat:

• Er dient een taalcode en Landcode meegegeven te worden (volgens ISO 369 en ISO 3166).

TIP: Ben je benieuwd hoe je je Open graph instelt in Wix? Bekijk dan mijn Wix SEO handleiding.

Twitter cards

Twitter heeft zijn eigen Open Graph opmaak, genaamd twitter cards. Wordt jouw content veel gedeeld via Twitter, dan is het zeker de moeite waard eens naar de opmaak van twitter cards te kijken. Zo niet, dan gebruikt Twitter het reguliere OG protecol.

Vereisten voor een optimaal resultaat:

• De vereiste opmaak is opgenomen in je pagina (twitter:card en twitter:title)
• Houd je titel onder de 55 karakters en de beschrijving onder de 125 karakters.
• Wanneer je gebruik maakt van een afbeelding, zorg er dan voor dat:
  • De afbeelding minimaal 144 bij 144 pixels is.
  • De afbeelding minimaal 300 bij 157 pixels is, mits je een grote afbeelding wilt.
  • De afbeelding het ratio 2:1 aanhoudt, mits je een grote afbeelding wilt.
  • De afbeelding niet groter is dan 5mb
• Zorg ervoor dat je robots.txt, twitter bot niet blokkeert. Het voorbeeld hieronder, is wat je niet in je robots.txt wilt hebben staan:

User-agent: Twitterbot
Disallow: /

• Controleer je twitter cards met de twitter validator

Open Graph Facebook debugger

Facebook heeft een handige tool op de markt gebracht om jouw Open Graph fouten op te sporen. Je kan dit eenvoudig doen door een url in te vullen en je pagina op te halen (zie afbeelding hieronder). Wil je meerdere urls tegelijkertijd debuggen? Plak dan al je urls, gescheiden door een komma, in de ‘bach invalidator’. Ben je iets technischer aangelegd, maak dan ook gebruik van de API die Facebook beschikbaar stelt.

Open Graph en UTM tags

Wil je naast de controle over de uitingen ook meer inzicht in het verkeer dat uit social media kanalen komt? Voeg dan UTM tags toe aan je open graph opmaak. Veel tools zoals Whatsapp, Instagram en chat, zijn niet gebaseerd op het HTTP protocol. Zonder UTM tags, zal Google analytics dit verkeer niet toekennen aan het desbetreffende social media kanaal.