Link Previews op Facebook – De Open Graphocalypse

Moord! Brand! Lelijke social posts!

Maar enkele kreten die deze week uit de monden van vele community managers & social advertisers kwamen. Facebook heeft onlangs een nieuwe update uitgerold waarbij je de previews van je geposte links niet meer kan aanpassen. Dit doen ze om fake news tegen te gaan. Toen ik dit gewaar werd spuwde ik zowaar mijn covfefe uit over mijn scherm.

Niet getreurd, kinderen van de Sociale Media. Facebook zegt dat ze oplossingen zullen bieden. *ik rol overduidelijk met mijn ogen*. Wie professioneel bezig is met Facebook weet dat dit nog even kan duren. De optie Link Ownership die Facebook naar voor schuift als oplossing, lijkt momenteel nog niet voor iedereen toepasbaar (meer daarover hier). En de helpdesk van FB raadplegen is enkel voor de geduldigen onder ons.

Stop met huilen en verman uzelf. Onze ware redder is immers al een tijdje onder ons. Hij kan er voor zorgen dat je je helemaal geen zorgen meer hoeft te maken over die lelijke social post. De naam van deze redder is Open Graph.

Wat is Open Graph? 

Open Graph is een protocol in de code van je pagina’s die de scrapers van Facebook (en andere social media) zeggen wat ze moeten gebruiken als preview voor de gedeelde link. Als dit in orde is hoef je dus helemaal niet meer te leunen op de aanpassingsfuncties van Facebook. Bij het correct toepassen van het Open Graph protocol wordt de preview van je link onmiddellijk opgemaakt zoals jij dat wil. 

Hoe implementeer je Open Graph?

Voor de minder technische personen onder ons is dit het moment waar je een developer bij de arm neemt. Je kan natuurlijk ook een plugin voor je CMS download (zoals Yoast op Wordpress). Hier is alvast de technische kant.

Om de basis lay-out van je Facebook preview zelf in de hand te hebben, zijn enkel deze 3 properties nodig: 

• og:title - De titel van je link
• og:image - de locatie van je afbeelding
• og:description - een korte beschrijving van wat je link inhoud (200 tekens max) 

Dit ziet er dan zo uit in de code:

Het praktisch voorbeeld 

Als dat in orde staat, zoals in onze laatste blogpost, krijg je dit:

 1) <meta property="og:image" content="https://www.invisiblepuppy.com/hubfs/Blogpost_Laurens/MicroMoments/Laurens%20Gozin%20Micro%20Moments.png#keepProtocol”>

2) <meta property="og:title" content="Micro Moments: Begrijp, pas toe en win">

3) <meta property="og:description" content="Wat zijn Micro Moments nu precies? En waarom zijn ze zo belangrijk voor bedrijven en merken. Hoe kan je ze winnen? Deze vragen en meer worden hier opgelost. ">

Afsluiter

Beste developers, help je marketeers en pas het Open Graph protocol toe op je pagina’s en zorg dat de juiste properties bij de juiste onderdelen komen staan. Alleen zo sleuren we ons heelhuids uit de Open Graphocalypse!

Meer over het Open Graph protocol lees je hier

God zegen en bewaar u in deze duistere tijden,

Laurens

PS: Als je ons een filmpje kan sturen waar je 5 keer na elkaar “Open Graphocalypse” perfect na elkaar kan zeggen, maak je kans om gefeatured te worden in deze post!