Open Graph

Open Graph

Voor de juiste weergave op social media

Metatags en title tags van een website zijn vaak wel bekend en een belangrijk SEO ingrediënt. Maar hoe zit dat met social media? Hoe zorg je ervoor dat je ook dáár de juiste titel, omschrijving en foto krijgt als je zelf een bericht deelt of als een bezoeker op de knop ‘deel op Facebook’ klikt? Krijg je dan ook de tekst die je wenst, met de bijbehorende foto? Lees alles over 'Open Graph'.


Om dit goed voor elkaar te krijgen heb je Open Graph nodig. In deze blog leg ik uit wat het is, hoe je het gebruikt en hoe je de missers, die sommige grote bedrijven nog steeds maken, kunt voorkomen.

Wat is Open Graph?

Open Graph is een protocol, bedacht door Facebook om het gebruikers makkelijker te maken om linkjes van andere websites te delen.
Met Open Graph kun je gegevens van je website (je homepage of een blog artikel bijv.) makkelijk integreren in social media zoals Facebook, Twitter, Google+ en LinkedIn.
Open Graph is onmisbaar om gestructureerd data van een website aan te bieden aan verschillende social media websites.
In de praktijk worden aan de van de website enkele extra meta elementen toegevoegd, zodat social media die herkennen en er wat mee kunnen doen.

Waarom gebruiken?

Wil je meer controle op wat bijv. Facebook van je website overneemt, met Open Graph is dat eenvoudig te doen. Je hebt invloed op hoe je informatie van je website deelt met social media; welke titel wordt er gebruikt, welke intro tekst, en welke afbeelding moet er worden gebruikt? Hiermee voorkom je dat er een verkeerde foto van je site op Facebook wordt getoond.

Hoe gebruik je Open Graph?

De HTML code van elke pagina die je met Open Graph wilt delen met social media, zul je moeten uitbreiden met enkele extra metadata elementen. Er zijn 4 verplichte:

og:title – de titel van je artikel; dit is tevens de anchor tekst waarop de bezoeker kan klikken om naar je site door te klikken
og:type – het type van het object (article, blog, website, video)
og:image – de URL van je afbeelding (zorg voor een afbeelding die groot genoeg is)
og:url – de canonical URL van het object, ofwel de URL waar je naartoe wilt linken

Andere interessante elementen, die je zeker ook kunt gebruiken, zijn:
og:description – net als de ‘metadata description’, een omschrijving van 1 of 2 zinnen van het artikel, die uitnodigt om op door te klikken
og:site_name – bij een artikel is dit de naam van de website

open graph html code

Voorbeeld Facebook

Stel je wil onderstaand bericht op Facebook hebben, dan moet je website voorzien zijn van de speciale elementen: image, title, description en een URL.

facebook bericht

Een bericht op de tijdlijn van Facebook bevat de volgende Open Graph basisonderdelen:

og:image – de URL van je afbeelding
og:title – de titel van je artikel; dit is tevens de anchor tekst waarop de bezoeker kan klikken om naar je site door te klikken.
og:description – een attractieve beschrijving van je artikel
og:url – de canonical URL van het object

Voorbeeld:
Zo stel je het in als je een artikel aanmaakt in Joomla.

opengraph metadata joomla

En het resultaat wat je dan op Facebook krijgt:

facebook og tags

Wat nou als je geen Open Graph gebruikt?

Facebook is best in staat om informatie van je website te ‘schrapen’ en die weer te geven, echter het zal vaak niet de informatie zijn die je wenst; een foute titel, een omschrijving in je bericht die de plank totaal misslaat, en wellicht nog erger, een verkeerde foto die niets met het bericht te maken heeft. Bekijk ook de voorbeelden verderop in dit artikel.

Open Graph testen

Heb je Open Graph op je site geïnstalleerd en in je artikel de juiste metatags ingevuld, dan is het tijd om te checken of Facebook ook de juiste data ziet. Met de Facebook Developer Tool Open Graph Debugger. Je ziet dan meteen de verschillende elementen en hoe die ingevuld worden, eventuele foutmeldingen en een preview van het bericht zoals het op Facebook komt.

 fb debugger

TIP: met de knop ‘Scrape again’ kun je Facebook dwingen om nogmaals naar je website te kijken om de juiste Open Graph data op te halen. Handig als je net wat gewijzigd hebt en noodzakelijk als je Facebook bericht anders getoond wordt dan op je site.
In de praktijk zul je dit nog wel eens moeten gebruiken.

Open Graph en LinkedIn

LinkedIn maakt ook gebruik van de metatags die Open Graph gebruikt, met name de elementen:

og:title – de titel van je artikel; dit is tevens de anchor tekst waarop de bezoeker kan klikken om naar je site door te klikken
og:image – de URL van je afbeelding
og:description – een attractieve beschrijving van je artikel
og:url – de canonical URL van het object

Voor afbeeldingen geldt:
max. bestandsgrootte: 5MB
minimale afmetingen voor een afbeelding: 1200 (breedte) x 627 (hoogte) pixels (net als Facebook)
Aanbevolen ratio: 1,91 : 1

Open Graph en Twitter

Twitter heeft een eigen protiocol bedacht om gedeelde content te begrijpen en goed weer te geven in Twitter: Twitter Cards. Voor het delen van website content, dus een linkje van je site die in twitter wordt gedeeld, wordt gebruik gemaakt van de kaart: summary.

De ‘summary card’ van Twitter bestaat uit de volgende elementen:

twitter:image Link afbeelding
twitter:title Link titel van max 70 karakters
twitter:creator Schrijver (op Twitter)
twitter:description Link omschrijving van max 200 karakters
twitter:url canonical URL van de content (website)

Echter als Twitter deze informatie niet vind op je website, dan wordt er alsnog gezocht naar Open Graph data.

og:title – de titel van je artikel; dit is tevens de anchor tekst waarop de bezoeker kan klikken om naar je site door te klikken
og:image – de URL van je afbeelding
og:description – een attractieve beschrijving van je artikel
og:url – de canonical URL van het object

Voor afbeeldingen geldt: max 120 x 120px maar minimaal 60 x 60px

Open Graph in de praktijk

In de praktijk maakt nog lang niet elke marketeer gebruik van Open Graph. En daarmee laten bedrijven kansen liggen. Want door Open Graph goed toe te passen heb je controle op hoe je pagina’s via bijv. Facebook getoond worden als anderen jouw pagina’s delen.
Ik heb eens een aantal websites bekeken en gekeken wat er gebeurt als de homepage van de site op Facebook gedeeld wordt:

Rabobank en ABN AMRO laten kansen liggen.

fb rabobank

Van een coöperatieve bank verwacht je dat ze ‘samenwerken’ met hun klanten. Helaas, geen titel, geen beschrijving en al helemaal geen afbeelding.

fb abnamro

ABN AMRO doet het iets beter, wel een titel en een beschrijving, maar er is veel meer mogelijk. Helaas geen afbeelding.

fb albertheijn

Ook onze grootgrutter AH heeft nog kansen om Open Graph beter te implementeren. Genoeg geld voor dure reclames, maar social media wordt helaas niet voldoende benut. Ik had minimaal een afbeelding van een hamster verwacht. ;-)

 fb lidl

Bij de Lidl hebben ze er even over nagedacht, lijkt het, of toch niet?
Staat er nu echt een dummy image? Toch even in de code kijken...

 fb lidl og code

En inderdaad, og:image is netjes ingevuld met een dummy_600_600.png afbeelding.
En de og:description mag wat uitgebreider.

fb hema

De Hema heeft het goed begrepen; alles is netjes ingevuld en er wordt een actuele afbeelding getoond. (Op 16-11-2017 is deze snapshot gemaakt.)

fb cjbd

Ook de plaatselijke netwerkclub van jonge bedrijven doet het goed; logo, duidelijke titel en omschrijving. Maar dat is te verwachten, aangezien ik die site zelf optimaliseer. ;-)

Hoe integreer je Open Graph in je website?

Afhankelijk van welk CMS systeem je gebruikt zijn er plug-ins verkrijgbaar die dit voor je regelen. De ene plug-in zal rechttoe rechtaan gegevens van elke pagina opzoeken en in Open Graph metatags stoppen, zonder dat je daar zelf invloed op hebt. Met name bij afbeeldingen is dat niet altijd even handig; dit soort plug-ins hebben namelijk de neiging de eerste afbeelding van de webpagina te gebruiken.
Andere plug-ins bieden de mogelijkheid om per webpagina (artikel) de Open Graph metadata zelf in te voeren.
Zoeken op plug-ins met als zoekwoord ‘Open Graph’ zal genoeg plug-ins opleveren.

Gebruik Open Graph in ieder geval op je homepage en de belangrijkste pagina’s van je site die vaak gedeeld worden. Daarnaast kun je Open Graph plaatsen op pagina’s met vacatures, productlanceringen, actiepagina’s, landingspagina’s, persberichten, nieuws en blogpagina’s.

Waarom zou je Open Graph gebruiken?

Ben je verantwoordelijk voor de marketing van je bedrijf of de inhoud van de website dan is het goed inzetten van je site op social media belangrijk. Met Open Graph heb je veel meer invloed op hoe social media naar je site kijken. Met name de linkjes van je site die veelvuldig via social media gedeeld worden, zijn handig om te voorzien van de juiste Open Graph metatags, zodat je de juiste uitstraling op social media bereikt. Het Open Graph kaartje is dan goed vormgegeven (plaatje, juiste titel en tekst) en past beter op de tijdlijn, het zal meer likes en kliks krijgen en dat zorgt er weer voor dat het langer in de newsfeed blijft hangen. Kortom, al deze toepassingen zorgen voor meer bereik!

Verbeter je vindbaarheid ook in Facebook

Ook in Facebook kun je zoeken, bijv. naar een winkel of restaurant. Met Open Graph worden je links die op Facebook zijn gedeeld beter vindbaar; o.a. ook door het gebruik van Graph Search. Met de miljoenen Facebook gebruikers in Nederland is Facebook een significant medium waar je zeker ook goed gevonden wilt worden.

Helaas, Google zal de OpenGraph metadata niet gebruiken voor de indexering van je website in de zoekresultaten, maar het puur beschouwen als informatie voor social media.
Google daarentegen zal eerst op zoek gaan naar Schema.org microdata en als die niet wordt gevonden alsnog Open Graph metadata gebruiken.

Ondersteuning nodig met de implementatie van OpenGraph?

Met name voor Joomla websites helpen we je graag met het het installeren van een geschikte extensie voor Open Graph, Facebook like-buttons en de koppeling met Facebook, het aanmaken van een Facebook App ID en het inregelen van de extensie.

We bespreken wat je wensen zijn omtrent het delen van informatie via social media en installeren dan eenmalig de benodigde extensies. Via een onderhoudscontract zorgen we ervoor dat je voorzien wordt van de nieuwste updates van de extensie die we voor je installeren.

Contact

1-2-appletree
tel: 078-6179510
info@1-2-appletree.nl

Offerte aanvragen

KvK: 24316247

Internetburo Dordrecht

Als internet bureau helpen wij ZZP-ers, bedrijven en organisaties uit heel Nederland met het ontwikkelen van websites. Vanuit onze vestiging in Dordrecht werken wij voor regionale (Dordrecht, Rotterdam) en nationale opdrachtgevers.

1-2-appletree werkt mee in BizzMix:
BizzMix small