Open Graph

Open Graph protocol? Het wat, waarom en hoe!

Als ondernemer ben je vast ook actief op social media en wil je dus dat bezoekers van deze media een goede indruk krijgen van jouw bedrijf als je een pagina van je website deelt. Als je niet het Open Graph protocol gebruikt zullen de social media een afbeelding van die pagina (meestal de eerst die ze tegenkomen) laten zien, de titel en een stukje tekst van deze pagina. Maar je kan dit dus zelf bepalen met het Open Graph protocol.

Wat is Open Graph protocol?

Open Graph is oorspronkelijk bedacht door Facebook en het integreert websites in een “social graph”. Website (pagina’s) worden in Open Graph gezien als object waarmee de gebruikers zelf de connecties kunnen leggen tussen Facebook en hun website. Het protocol maakt gebruik van gestructureerde data zodat deze door verschillende social media platformen hetzelfde uitgelezen en getoont kan worden. Het betekent niets anders dan een paar extra regels in de van je website.

Waarom is het goed om Open Graph te gebruiken?

Jij wilt toch bepalen wat de social media tonen als jij een link van je website deelt? En niet dat ze er zelf wat van maken? Daarom is het goed Open Graph te gebruiken. Met Open Graph bepaal jij de titel, omschrijving en de getoonde afbeelding.

Dat is zeker een heel technische bedoeling?

Op Graph gebruiken lijkt heel technisch maar dat valt best mee. Laten we eens kijken hoe we het op een website kunnen toepassen voor Facebook en Twitter.

Er zijn 4 verplichte regels:

• og:title - Hier zet je de gewenste titel van de pagina, deze zal linkbaar gemaakt worden
• og:type - Het type van het object (pagina, product, blog, etc)
• og:image - Een link naar je gewenste afbeelding
• og:url - De link naar de pagina

Dan zijn er nog extra regels mogelijk:

• og:description - De beschrijving van de pagina in een of twee zinnen
• og:locale - Standaard wordt de content als Engels gezien met deze regel zet je hem op Nederlands
• og:site_name - Wanneer het object een pagina is van een website kun je hier de website naam zetten

Facebook gebruikt de volgende 4 elementen:

1. Afbeelding og:image
2. Titel og:title
3. URL og:url
4. Omschrijving og:description

Twitter heeft haar eigen protocol en noemt deze “Twitter Cards”. Er is niet veel verschil tussen de “Twitter Cards” en Open Graph die Facebook gebruikt, alleen het type aanduiding. Twitter kent als types; Summary (het best te gebruiken voor een website (pagina), photo en player.

Je kunt de volgende regels gebruiken:

• twitter:card - Dit is het type
• twitter:url - De link de pagina
• twitter:description - De beschrijving van de pagina in een of twee zinnen
• twitter:image -  Een link naar je gewenste afbeelding

Daarbij kun je nog de volgende regels gebruiken:

• twitter:site - @username voor de website
• twitter:creator - @username voor de auteur

Hoe voeg je die Open Graph regels nu toe aan je code?

In de open source platformen zijn er plug-ins te vinden waar je deze mee kunt toevoegen aan je website.

In WebBloxz kun je ze per pagina toevoegen (als je wilt) door bij het overzicht van de pagina’s op het tandwiel achter de paginanaam te klikken. Hiermee open je de instellingen van die pagina. Daar vindt je onder “Code” een blok met de naam “Head” hieronder staat een invulveld. Daar kun je de code zetten. De afbeelding kun je bovenaan uploaden via “Afbeelding” onderaan even op “Opslaan” klikken, website publiceren en klaar. 

Hoe ziet zo’n code er dan uit?

Je moet de code natuurlijk wel goed opmaken, hieronder de code zoals wij hem voor deze blog hebben gebruikt (de afbeelding hoef je dus niet meer te doen, die heb je bovenaan bij de instellingen al gekozen):

Wij gebruiken geen Twitter, dus deze hebben wij niet toegevoegd, maar deze zou er zo uit kunnen zien:

Dit kun je dus per pagina doen, hoeft niet. Doe het vooral wel bij de pagina’s die je wilt delen via social media.