Clearsite Kennisbank

Open Graph protocol - The 'OG' for sharing

Marketing, SEO, Open Graph

Je kent het wel. Je deelt een linkje via What’s App, Facebook of bijvoorbeeld LinkedIn. En pats daar staat gelijk een bijbehorende thumbnail en omschrijving van de pagina. Dit heet een link preview. En als je je ooit hebt afgevraagd (waarschijnlijk niet) hoe dat zo snel kan. Nou daar is dus het Open Graph protocol voor in het leven geroepen.

Open Graph protocol

Open Graph is in het leven geroepen door Facebook. Het zorgt er in feite voor dat gedeelde links er wat grafischer en daardoor aantrekkelijker uit komen te zien. En het mooie is dat je er direct invloed op hebt. Maak er dan ook gebruik van.

In dit artikel gaan we verder in op de voordelen van Open Graph en hoe je het in de praktijk brengt.

Een voorbeeld

Om duidelijkheid te scheppen in wat ‘OG’ nou exact doet laat ik eerst maar eens even twee voorbeelden zien.

Link delen op Facebook zonder Open Graph

Link delen op Facebook met Open Graph

Hoe gebruik je het Open Graph protocol

Om van het Open Graph protocol gebruik te maken dien je de zogenaamde OG properties te voorzien van de juiste content. Wij gaan hier even in op de properties die wij het belangrijkst vinden. Maar laat het maar aan de tech nerds over om daar nog tientallen varianten voor te verzinnen. Wil je er echt helemaal induiken neem dan gerust een kijkje op de officiële maar redelijk droge en technische website van het Open Graph Protocol of (beter) neem een kijkje op de pagina van Facebook ‘A guide to sharing for webmasters’.

Open Graph properties

We zullen hieronder de meest gebruikte properties behandelen.

  • Og:url
    Deze tag gebruik je om de canonical URL van je content aan te geven. Een canonical URL gebruik je wanneer je content op meerdere URL's te benaderen is. Een voorbeeld wat je in webshop nog wel eens ziet is; https://www.example.com/shoes/ & https://www.exemple.com/shoes/?weergave=lijst
    <meta property="og:url" content="https://www.example.com" />
  • Og:type
    Hiermee geef je aan wat voor type content je deelt. Er zijn nogal wat verschillende soorten mogelijk (zie hier de volledige lijst). Maar de meeste voorkomende zijn de volgende: music, video, article, book, profile, website. Als je hier niks invult wordt er meestal teruggevallen naar de standaard van 'website', en dat zal in de meeste gevallen ook prima zijn.
    De content die je nu aan het lezen bent is een artikel, dan gebruik je de volgende code:
    <meta property="og:type" content="article" />
  • Og:title
    Gebruik deze tag om de titel van je content mee aan te geven. Probeer een titel te verzinnen van tussen ongeveer 60 en 90 karakters. In de meeste gevallen wordt je titel namelijk afgekapt op 88 karakters.
    <meta property="og:title" content="Open Graph Protocol - The 'OG' for sharing" />
  • Og:description
    En je raadt het al, deze tag gebruik je voor de omschrijving. Let er vooral op dat je hier een omschrijving neerzet die de bezoeker prikkelt om jouw content te gaan lezen. Het is vaak handig om dus niet zomaar klakkeloos de intro van een artikel te gebruiken.
    <meta property="og:description" content="Open Graph zorgt er voor dat gedeelde links er aantrekkelijker uit komen te zien. Lees hier hoe je er je voordeel mee doet." />
  • Og:image
    Hier plaats je de URL van de afbeelding die getoond gaat worden bij een link preview. Hou een formaat aan van 1200 x 627 pixels dan gebruik je de maximale ruimte van een preview. Let wel even op de je afbeelding niet groter dan 5MB mag zijn.
    Dit is de meest onderschatte van het OG protocol. Vaak zie je dat websites hier de afbeelding gebruiken die bijvoorbeeld al in de header staat. Maar het loont hier echt om met wat handwerk ook interessante copy in de afbeelding te plaatsen.

    Hieronder zie je een voorbeeld van een afbeelding (met copy) die wij gebruiken voor de Veiligbankieren.nl case op onze website. Daaronder zie je dezelfde afbeelding maar dan zonder copy. Met een kleine moeite bereik je zo toch een stuk beter resultaat.
Open Graph image met copy
Open Graph image zonder copy

Hoe plaats je de Open Graph properties

Hoe je de OG properties in de code van je website plaatst hangt volledig af van waar je website mee gemaakt is. Hier bij Clearsite maken wij maatwerk WordPress websites. Ik zal je dan ook laten zien hoe je met behulp van Yoast SEO op een eenvoudige manier je OG properties kan vullen.

OG beheren met Yoast SEO

Er vanuitgaande dat je al een beetje bekend bent met Yoast SEO is het eigenlijk vrij simpel. Je opent in je WordPress CMS het bericht waar je mee bezig bent en van dat bericht open je het Yoast SEO tabje. Daar zie je het meest rechtse tabje genaamd 'Sociaal'. Wanneer je daar op klikt kan je de volgende properties beheren; Facebook image, Facebook title en Facebook description.

Zoals je ziet heeft Yoast het over Facebook properties. Dat is wat verwarrend, je gaat al snel denken dat je het dan ook ook nog ergens voor bijvoorbeeld LinkedIn moet vullen. Maar dat hoeft niet (behalve voor Twitter). Deze properties zijn dus gewoon de algemene OG properties.
De properties Type & URL missen binnen dit Yoast paneel. Maar wanneer je website goed is ingericht wordt dit op een hoger niveau afgevangen. Vraag je websitebouwer om hier even goed naar te kijken.

🥴 Wel een hoop werk zo!

Weer een ding erbij waar je op moet letten. Ja klopt en het kan inderdaad soms wat bewerkelijk zijn. En zoals bij alles moet je je natuurlijk afvragen wat het je kan opleveren. Wij proberen altijd een balans te vinden. Zijn het bijvoorbeeld hele belangrijke pagina's voor een website dan besteden we hier ook genoeg aandacht aan. Maar er zijn ook vast pagina's te verzinnen waar dit wat minder belangrijk is. Zo vinden wij het bijvoorbeeld voor een Privacy & Disclaimer pagina onzin om hier al te veel tijd aan te gaan besteden.

💁🏻‍♂️ Geen zin of tijd om het zelf te doen?

In de meeste gevallen kan je dit natuurlijk prima zelf doen. Maar heb je er geen tijd voor of gewoon geen zin. Of waneer je behoefte hebt aan professioneler OG afbeeldingen, dan kan je dit natuurlijk altijd aan ons vragen. Neem gerust contact op met ons om de mogelijkheden te bespreken.