Die stomme hamburgerknop

“Elke keer wanneer ik een linkje op Facebook deel, dan toont ie die stomme hamburgerknop in plaats van ons logo.” Dat was de strekking van een telefoongesprek wat ik vorige week voerde. Ze had al van alles geprobeerd; het logo goed ingesteld in haar webwinkel, de hostingprovider gebeld, de Facebook Link Debugger gebruikt… het mocht niet baten. De drie horizontale streepjes van het icoon waarmee het menu wordt in- of uitgeklapt bleven hardnekkig staan bij elke link. “Es, kan jij helpen?”

Social sharing, hoe het werkt

Wanneer je een link deelt op Facebook, LinkedIn of een ander sociaal platform, wordt er een bijpassend plaatje bij gezocht van de pagina die je deelt. Dit gaat in veel gevallen automatisch goed. Heb je bijvoorbeeld een WordPress website, dan pakt het platform meestal de uitgelichte afbeelding van het bericht of de pagina die je deelt. Maar zoals je hierboven kon lezen, gaat het niet altijd automatisch goed. Wanneer het niet nadrukkelijk duidelijk is welk plaatje er moet worden gebruikt, dan gebruikt het platform het eerste plaatje wat het tegenkomt.

Drie horizontale streepjes. Een icoon wat wordt gebruikt voor het in- en uitklappen van een menubalk.
De Hamburgerknop. Met een beetje fantasie zie je er een broodje hamburger in.

In dit geval; de hamburgerknop.

OpenGraph

Gelukkig kun je Facebook een handje helpen door aan te wijzen welk plaatje je graag wilt gebruiken. Hiervoor heeft Facebook het OpenGraph protocol in het leven geroepen. OpenGraph is een set meta tags die je in de HTML van je pagina kunt opnemen om zo te bepalen hoe jouw pagina gedeeld wordt.

Meta tags? Protocollen? Klinkt technisch. Valt op zich mee. In de bron van elke website staat allemaal informatie die niet zichtbaar is voor bezoekers van je pagina, maar die wel wordt gelezen door andere software, zoals bijvoorbeeld Facebook wanneer je een link deelt. De Meta informatie staat helemaal bovenaan en wordt als eerste gelezen. Hierin staat bijvoorbeeld de naam van je site of de omschrijving voor op Google. Hier zet je de OpenGraph tags neer.

In dit geval heb ik één regel toegevoegd:

<meta property="og:image" content="https://www.mijnsite.nl/mijn-logo.jpg" />

Deze regel doet niets anders dan Facebook, LinkedIn en andere platforms die OpenGraph gebruiken vertellen dat ze mijn-logo.jpg moeten gebruiken.

Er is meer

Je kunt met OpenGraph veel meer dan alleen het plaatje aanwijzen. Het is ook mogelijk om de naam of omschrijving van je link te beïnvloeden of om filmpjes te delen. OpenGraph biedt je de mogelijkheid om invloed uit te oefenen op de connectie tussen jouw webpagina en je Social Media.

Niet elk platform gebruikt OpenGraph. Twitter heeft bijvoorbeeld een eigen protocol, net als Google.

Mocht jij nou ook tegen de situatie aanlopen dat jouw pagina niet goed wordt gedeeld op Social Media? Vraag je je af hoe dat komt? Goede kans dat het op te lossen is met OpenGraph. Kom je er zelf niet uit? Vraag dan degene die het technisch beheer voert om de tags voor je toe te voegen. Of neem contact op met Simply Present. Ik help je graag verder.