Als je een link deelt op een social netwerk site dan zie je over het algemeen automatisch een soort kaartje verschijnen in je post. Vaak met een foto erbij. Hoe werkt dat? Dit wordt Open Graph genoemd en in dit artikel leg ik uit wat het is, wat je er mee kunt en welke voordelen het heeft.

Wat is Open Graph?

Open Graph is bedacht door Facebook in 2010. Dit werd gedaan om een betere integratie tussen websites en Facebook te bewerkstelligen. In de praktijk kwam het er op neer dat links van websites die gepost werden op Facebook zogenoemde ‘rich graphs’ konden worden. Een andere uitleg is dat je als website hiermee een zekere mate van controle krijgt op hoe je er op Facebook uit ziet.’

Een voorbeeld. Als iemand een link van een website plaatst in zijn of haar status op Facebook dan verschijnt er automatisch een soort kaartje. Vaak zie je hierin een afbeelding, een titel, een omschrijving en een link. Ook bij LinkedIn, Google+ en Twitter gebeurt dit. Deze gegevens kun je zelf beïnvloeden en min of meer ‘dicteren’ aan sociale netwerken. Kortom: je kunt het ‘kaartje’ zelf invullen.

Een voorbeeld van een link van Nu.nl die ik op Facebook plaats:

Voorbeeld nu.nl op Facebook

Kijken we naar de broncode van de pagina dan zien we de volgende gegevens bij Nu.nl:

Voorbeeld nu.nl op Facebook met metadata

Open Graph gebruikt, in technische taal, metatags die in de <head> van de broncode van een website geplaatst worden en waarmee je dit ‘kaartje’ van inhoud voorziet. Iets verderop in dit artikel leg ik je uit wat dit is en hoe je het ook zelf kunt toepassen.

Praktijkvoorbeelden van het gebruik

Open Graph wordt nog weinig toegepast in websites en de voordelen zijn nog relatief onbekend. Slechts een klein deel van de websites profiteert van de voordelen van een betere uitstraling op social media. Nu.nl doet het goed, maar laten we eens de websites van een paar bekende merken bekijken en hoe het er uit ziet als je een link deelt op Facebook.

1] Jumbo Supermarkten. Niet weg te slaan van TV met de reclames. Maar op het gebied van Open Graph is er nog geen aandacht. Dat is jammer, want de uitstraling kan een stuk beter. Het is nu ronduit kaal. Je mist Frank Lammers bijna.

jumbo open graph voorbeeld

 

2] Rabobank. Druk met hun nieuwe campagne ‘Een aandeel in elkaar’. Daar is helaas niets van te zien als ik besluit de link van de website te delen. Een gemiste kans.

rabobank open graph

3] Dove. Bekend om de viral video’s, benadering van de doelgroep en omarming van social media. De site in Nederland roept ook gelijk op om mee te praten op Facebook. Besluit ik de link van de website te delen, dan valt het tegen. Of laat ik het zo zeggen: ik wordt er niet warm van. Een kleine blunder als je als merk zo met social en Facebook bezig bent.

dove

4] Boer Zoekt Vrouw. Daar heeft iemand op zitten letten bij de KRO! Alles netjes ingevuld en een mooie presentatie als ik de URL deel. Terecht denk ik, als je op social media net zo groot bent als het TV programma.

bzktv

Hoe werkt Open Graph?

Om met Open Graph te kunnen werken moet je gebruik maken van Open Graph metatags in de broncode van je website. Dat klinkt heel technisch, maar dat valt mee. Open Graph kun je vaak gemakkelijk zelf implementeren op je website met een plugin in je Content Management Systeem, of het zit er al in. Voor WordPress zijn er genoeg plugins te vinden bijvoorbeeld, maar ook voor andere CMS-en zijn er opties zoals bijvoorbeeld: Drupal modules, Typo3 extensions of Magento Extensions,

LinkedIn, Google+ en Twitter kijken actief naar Open Graph tags in je website. Twitter gaat zelfs nog verder met een eigen service, Twitter Cards. Zijn er in je website geen Open Graph tags aanwezig, dan vult de site waarop je een link deelt zelf iets in op basis van wat ze kunnen vinden. Dat moet je een beetje zien als een loterij. Des te meer reden om zelf de weg te wijzen.

Hoe gebruik je Open Graph in je website?

Er is een bepaalde basis die je toe moet passen om Open Graph te laten werken. Daarvoor gebruik je de volgende 4 metatags in je broncode:

  • og:title – De titel van je pagina of bericht, bijvoorbeeld: “De beste pagina van mijn website”.
  • og:type – Het type content dat je deelt voor webpagina’s is altijd ‘website’. Betreft het een nieuwsartikel dan kun je ook ‘article’ gebruiken. Betreft het een artikel in je webshop dan gebruik je ‘product’, etc. (alle mogelijkheden vind je hier)
  • og:image – De locatie van de afbeelding die je wilt tonen op de te delen pagina. Zorg dat deze afbeelding groot genoeg is zodat deze goed opvalt in de timeline. (minimaal 600 x 315px) Bijvoorbeeld: http://www.mijngavewebsite.nl/images/facebookafbeelding.jpg
  • og:url – De directe URL van de pagina waar je naartoe linkt. Bijvoorbeeld  http://www.mijngavewebsite.nl/paginas/debestepagina.html.
In de <head> sectie van de HTML van je website ziet dat er als volgt uit:
<html>
<head>
<title>De beste pagina van mijn website</title>
<meta property=”og:title” content=“De beste pagina van mijn website” />
<meta property=”og:type” content=“website” />
<meta property=”og:image” content=“http://www.mijngavewebsite.nl/images/facebookafbeelding.jpg” />
<meta property=”og:url” content=“http://www.mijngavewebsite.nl/paginas/debestepagina.html” />
</head>
</html>

Heb je een website in Nederland, dan kun je nog een aantal handige extra tags toevoegen:

Beschrijving

<meta property=”og:description” content=“Deze pagina bevat een prachtig verhaal over waarom dit de allerbeste pagina van mijn website is. Wil je meer weten, neem dan contact op.” />

Hiermee geef je een stukje tekst mee dat getoond wordt bij het delen van een URL. In het voorbeeld van Nu.nl zie je dat er al een stukje van het nieuwsbericht in zit. Je kunt dit zien als de meta description zoals je die ook in je HTML gebruikt.

Taal

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

Dit geeft aan in welke taal je content is. Standaard zet Facebook dit op en_US. (want Amerika is het centrum van de wereld…)

Website naam

<meta property=”og:site_name” content=“Mijn Gave Website” />

hiermee geef je de naam van je site door. Handig als je website bijvoorbeeld onderdeel is van een netwerk.

Wil je controleren of Facebook alles goed ziet? Dan kun je voor elke URL van je website de Open Graph Debugger gebruiken. Facebook geeft dan direct aan wat er gevonden wordt en hoe dat er uit ziet.

Waarom Open Graph toepassen?

In de eerste plaats natuurlijk omdat je graag zelf wilt bepalen hoe je website er uit ziet op social media, zeker als je hier tijd en energie in steekt. Bovendien valt een goed vormgegeven Open Graph kaartje bij een social media post veel meer op in de tijdlijn. Niet onbelangrijk is dat aantrekkelijke en opvallende content  langer in de newsfeed blijft hangen en meer kliks en likes aantrekt. Kortom: je creëert meer bereik door de juiste toepassing van Open Graph.

Als je denkt aan nieuws, vacatures, persberichten of überhaupt de link naar je homepage, dan kan Open Graph helpen dit goed in te richten. Publiceer je regelmatig nieuws, updates of vacatures, dan is dat bij uitstek deelbare content voor je bezoekers. Het spreekt voor zich dat het belangrijk is dat het er goed en relevant uitziet als het gedeeld wordt.

Open Graph heeft dus invloed op hoe je content er uit ziet op social media, maar dat is niet alles: het werkt ook voor de vindbaarheid van je content.

Met Open Graph ook je vindbaarheid verbeteren

Facebook zet duidelijk in op zoeken en er wordt ook steeds meer gezocht op Facebook door de meer dan 1 miljard gebruikers. Kortom: Facebook is eigenlijk ook een zoekmachine. Met de functie Graph Search wordt dit erg duidelijk. Met juiste en volledige vormgeving van je gedeelde content op Facebook, werk je ook aan je vindbaarheid op Facebook.

Daarnaast is goede vindbaarheid van je content in de toekomst ook voor deze twee zaken belangrijk:

  • Local: Facebook zet qua zoeken ook in op lokale bedrijven en winkels. Er is al een Places functie, waar zoeken een belangrijk onderdeel is. Nog een reden om te zorgen dat ze de juiste info van je hebben. Sinds vorige week heeft Facebook ook een nieuwe functie gelanceerd in Amerika die hierbij aansluit: Place Tips. Deze functie maakt het belangrijk goede content op Facebook te hebben. (lees hier de uitleg)
  • Bing: Bing en Facebook zijn vriendjes. In Amerika toont Bing al social resultaten van Facebook in de zoekmachine. Iets om in je achterhoofd te houden voor de toekomst.

Wat is Graph Search?

Graph Search laat je op Facebook zoeken op bijvoorbeeld een restaurant in Utrecht dat vrienden leuk vinden, café’s of winkels in de buurt of vrienden die een bepaald merk leuk vinden. Waar je voorheen voornamelijk personen kon vinden, wordt met Graph Search ook het zoeken in (gedeelde) content en posts een stuk makkelijker. Daar liggen kansen om aan je vindbaarheid te werken met content. Ook hier op 42bis.nl werd er al geschreven over zoeken op Facebook. Op Frankwatching verscheen vorig jaar ook een artikel over wat je met Graph Search kunt en hoe het werkt.

Als je enige ervaring hebt met SEO, dan kun je aanvoelen dat het gebruik van juiste keywords in je content en Open Graph dus belangrijker wordt. Met Open Graph kun je je vindbaarheid op social media al vanuit je website beïnvloeden.

Tip: Als je je taalinstelling op Facebook op English US zet dan heb je automatisch toegang tot de nieuwe zoekfunctie.

Meer inzicht in jouw website op Facebook

Als je een Facebook pagina hebt krijg je ook toegang tot Facebook Insights, de statistieken van je pagina. Een interessante toevoeging hierop is Domain Insights. Je kunt je website ‘claimen’ bij Facebook. Je krijgt dan een extra Open Graph tag. Zet die in je website en je krijgt bij Facebook Insights meer inzicht over het verkeer dat van Facebook naar je website gaat. Deze statistieken krijg je niet standaard van Facebook, maar instellen is vrij gemakkelijk. Facebook biedt je hiervoor een korte handleiding.

Aan de slag

In de praktijk moet je zorgen dat je Open Graph in de basis kunt toepassen. De meeste Content Management Systemen hebben handige plugins die je snel de juiste functionaliteit geven. Het opnemen van Open Graph data in je site is niet al te moeilijk. Met de juiste invulling en toepassing heeft het zowel direct als indirect invloed op je presence, maar ook je op vindbaarheid en uiteindelijk de traffic naar je site.

Heb je nog vragen of aanvullende tips? Reageer!


12.057 keer gelezen Geschreven door en