7 minuten 
Juist Redactieteam Wat is Facebook’s open graph en wat kun je ermee?
Open Graph is een soort van kaartje met vaak een foto die verschijnt in je post, zodra er een link wordt gedeeld op een social network site, zoals Facebook. Maar wat is het eigenlijk, hoe werkt het, wat kun je er mee en welke voordelen heeft het?
Open Graph?
Open Graph is in 2010 geïntroduceerd binnen verschillende social media platformen. Zo verschijnen er regelmatig ingrijpende updates binnen Facebook. Open Graph zorgt ervoor dat websites en social media beter integreren. Geposte links van websites werden ‘rich graphs’ op Facebook. Een website kreeg meer controle over hoe dit eruit ziet op Facebook.
Zodra een persoon of bedrijf een link van een website deelt op social media, zoals Facebook, ‘leest’ dit platform deze pagina uit en zoekt naar relevantie informatie om te tonen in de betreffende post. Zo kijkt Facebook naar een afbeelding, titel, omschrijving en een link. Normaal gesproken worden deze automatisch overgenomen van de website, maar met Open Graph heb je zelf de controle over welke informatie een social media platform gebruikt. Dit hoeft dus niet dezelfde informatie (beeld en tekst) te zijn als wat er zichtbaar is op de website. Al raden we dat natuurlijk wel aan.
In dit voorbeeld zie je hoe Facebook automatisch een afbeelding, titel en omschrijving ophaalt vanuit een nieuwsartikel.
Praktijkvoorbeeld
De voordelen van Open Graph worden steeds bekender en Open Graph wordt steeds vaker toegepast. Een van de voordelen is dat het zorgt voor een betere uitstraling op social media, maar slecht een klein deel van de websites profiteert van dat voordeel. Sommige website profiteren echter wel van het voordeel; Nu.nl maakt bijvoorbeeld goed gebruik van Open Graph wat zorgt voor een goede uitstraling op social media.
Open Graph, hoe werkt het?
Om met Open Graph te kunnen werken moet je in de broncode van de website Open Graph metatags gebruiken. Dit klinkt heel technisch, maar het is vaak gemakkelijk om met een plugin in je Content Management Systeem zelf Open Graph te implementeren op je website, soms zit het er zelfs al in.
LinkedIn, Google+ en Twitter kijken actief naar Open Graph tags in je website. Twitter heeft zelfs een eigen service, Twitter Cards. Als er geen Open Graph tags aanwezig zijn in je website, dan vult de site waarop je een link deelt zelf iets in op basis van wat ze kunnen vinden. Hierbij moet je dus geluk hebben, wat een belangrijke reden is om zelf de weg te wijzen in Open Graph.
Open Graph, hoe gebruik je het in je eigen website?
Om Open Graph te laten werken moet je een bepaalde basis gebruiken. Deze basis bestaat uit 4 metatags in je broncode.
- og:title – dit is de titel van je bericht of pagina
- og:type – dit is het type content dat je deelt voor een webpagina. B.v. voor een nieuwsartikel gebruik je ‘’artikel.’’
- og:image – hier zet je de locatie van de afbeelding die je wilt laten zien op de te delen pagina. (zorg wel voor een afbeelding die groot genoeg is.
- og:url – dit is de URL van de pagina waar jij naartoe wil linken
In de <head> sectie van de HTML van je website ziet dat er als volgt uit:
<html> <head> <title>Facebook live. Hoe werkt het? Tips en Turotrial </title> … <meta property=”og:title” content=“Facebook live. Hoe werkt het?” /> <meta property=”og:type” content=“artikel” /> <meta property=”og:image” content=“https://juist.nl/wp-content/uploads/2016/05/juist-blog.jpg” /> <meta property=”og:url” content=“https://juist.nl/blog/facebook-live-hoe-werkt-het/” /> … </head> … </html>
Dit voorbeeld ziet er op Facebook als volgt uit:
Je kunt nog een aantal extra tags toevoegen als je een website in Nederland hebt:
Beschrijving
Deze tag zorgt voor een stukje tekst die wordt getoond bij het delen van de URL.
<meta property=”og:description” content=“Hoe werkt Facebook Live? Wat heb je eraan en waar moet je op letten? Lees het in deze duidelijke tutorial, inclusief waardevolle tips.” />
Taal
Deze tag geeft aan welke taal je content is. Facebook zet standaard de taal op en_US, daarom is het van belang dat jij de taal aanpast.
<meta property=”og:locale” content=”nl_NL” />
Naam website
Met deze laatste tag kun je de naam van jouw site doorgeven. Als jouw site bijvoorbeeld onderdeel is van een netwerk is dit erg handig.
<meta property=”og:site_name” content=“Juist” /
Open Graph werkt niet
Facebook open graph werkt niet
Je hebt alles goed ingesteld in de <head> van je pagina’s, maar toch gebruikt Facebook nog steeds je oude teksten en afbeeldingen. Dit komt omdat de nieuwe elementen nog niet actief door Facebook zijn opgepikt. Je kunt Facebook hier een handje bij helpen met de handige tool ‘Sharing Debugger’ van Facebook. Hiermee forceer je Facebook om de meest recente OG-tags te gebruiken. Gebruik de volgende 4 stappen om Facebook opnieuw naar jouw website Open Graphs te laten kijken:
- Bezoek https://developers.facebook.com/tools/debug/
- Vul de complete URL van de pagina in
- Facebook toont de huidige inhoud van de OG tags
- Komt het niet overeen met wat je hebt ingesteld? Klik dan op ‘Scrape again’.
Facebook link afbeelding en titel achteraf wijzigen
Als je op Facebook als persoon of bedrijf een link-bericht wil maken, plaats je de link in het bericht. Facebook haalt zoals gezegd automatisch de open graph tags op en toont de afbeelding, titel en afbeelding. Het kan voorkomen dat je op dat moment deze elementen nog wilt aanpassen. Dit kan echter alleen als het domein van de gelinkte website door door jou is geclaimd. Hiermee heb je aan Facebook bewezen dat de website van jou is. De reden hierachter is om clickbait te voorkomen.
Over hoe je een Facebook Domein Verifieert heb ik het volgende blog geschreven.
Waarom zou ik Open Graph gebruiken?
Ten eerste omdat je graag zelf bepaalt hoe je website op social media eruit ziet, zeker als je hier veel tijd en energie insteekt. Daarnaast valt het goed vormgegeven Open Graph kaartje bij een social media post beter op je tijdlijn. Hierdoor trek je meer likes en kliks aan, dat zorgt ervoor dat de content langer in de newsfeed blijft hangen. Al deze toepassingen zorgen dus voor meer bereik.
Open graph kan je helpen om nieuws, vacatures, persberichten of bijvoorbeeld een link naar je homepage in te richten. Hierdoor ziet het er goed en relevant uit, wat weer belangrijk is als het gedeeld wordt.
Met Open Graph bepaal je dus hoe je content eruit ziet op social media en niet te vergeten dat het ook werkt voor de vindbaarheid van je content.
Je vindbaarheid verbeteren met Open Graph?
Er wordt door meer dan 1 miljard gebruikers op Facebook gezocht en ook Facebook zet duidelijk in op zoeken. Kortom: Facebook kan ook gezien worden als zoekmachine. Dit wordt extra duidelijk door Graph Search. Die vindbaarheid wordt groter als je gedeelde content op Facebook juist en volledig is vormgegeven.
Goede vindbaarheid van je content is in de toekomst erg belangrijk voor:
- local: Facebook zet qua zoeken niet alleen in op grotere bedrijven en winkels maar ook op lokale content. Een onderdeel waar zoeken belangrijk voor is, is de functie Places. Omdat je natuurlijk niet wil dat die bedrijven foute info over jou tonen is het heel belangrijk dat je met Open Graph die bedrijven in een duidelijke weergave de juiste info geeft.
- Bing: Facebook en Bing werken nauw samen, zo toont Bing (in Amerika) social resultaten van Facebook in de zoekmachine.
Graph Search, wat is het?
Doormiddel van Graph Search wordt het zoeken in (gedeelde) content en posts een stuk eenvoudiger. Hierdoor liggen er kansen om je content beter vindbaar te maken. Als je je taalinstellingen op Facebook op English US hebt staan, heb je automatisch toegang tot de zoekfunctie.
Het wordt dus belangrijker dat je de juiste keywords in je content en Open Graph gebruikt. Je kunt met de juiste keywords in je Open Graph de vindbaarheid op social media al vanuit je website vergroten.
Meer inzicht op Facebook over jouw website
Facebook Insights geven de statistieken van jouw pagina weer. Je krijgt hier toegang toe als je een Facebookpagina hebt. De Domain Insights is hier een interessante toevoeging op. Je krijgt een extra Open Graph tag als je je website claimt op Facebook. Zodra je die extra tag in je website plaatst, krijg je op Facebook Insights meer inzicht in het verkeer dat van Facebook naar je website gaat. Facebook geeft deze statistieken niet standaard af maar het instellen ervan is redelijk eenvoudig.
Aan de slag
Je moet ervoor zorgen dat je Open Graph in de basis kunt toepassen. De meeste Content Management Systemen hebben plugins die zorgen voor de juiste functionaliteit. Het is niet moeilijk om Open Graph data op te nemen in je site. Als je Open Graph de juiste invulling en toepassingen hebben, heeft het zowel direct als indirect invloed op je presence, je vindbaarheid en de traffic naar jouw site.