Open Graph

Open graph

Open Graph is een opmaak waarmee je controle kan uitoefenen op de uitingen van je content op social media. Denk aan: Whatsapp, Facebook en Twitter. De Open Graph opmaak is geen ranking factor. Ik denk echter dat Open Graph zoekmachines “structuur” geeft, net als structured data, tabellen, lijsten en semantic HTML5 dat doen. In deze blog leg ik uit wat Open Graph tags zijn, hoe je je Open Graph kan debuggen, zodat je het maximaal haalbare kliks uit je social media campagne krijgt.

Voorbeeld Open Graph

Het is je vast wel eens opgevallen: je deelt een link van je nieuwe aankoop of vakantiebestemming via Whatsapp of Facebook en plop… er verschijnt een afbeelding en titel bij de link. Mits de juiste gegevens aanwezig zijn, worden deze automatisch overgenomen van je website. Met Open Graph kan je hier zelf invloed op uitoefenen en onder andere bepalen hoe de afbeelding en titel er komen uit te zien.

Open Graph tags

Het controleren van je social media uitingen kan je met verschillende tags doen. Een aantal Open Graph tags zijn vereist: De url, de titel, de beschrijving en de afbeelding. Sommige tags zijn optioneel: type content en locatie.

OG:title

De OG:title is een vereiste tag die de titel van je artikel beschrijft. In het voorbeeld hierboven is dit “wat is SEO?”
In de HTML code ziet dit er als volgt uit:

<meta property=”og:title” content=”Wat is SEO?” />

Belangrijk om te weten:
• Gebruik niet je merknaam
• Zorg dat je titel niet langer is dan 55 karakters
• Is je titel langer dan 55 karakters, dan zal de beschrijving tag ( OG:description) niet gebruikt worden.
• Heb je geen OG:title, dan zal je title tag vaak gebruikt worden.

OG:description

De OG:description is een vereiste tag waar een korte beschrijving van je pagina in staat. Deze tag wijkt iets af van de Meta description. Je mag hier namelijk maar 55 tot 60 karakters voor gebruiken. In de HTML code ziet dit er als volgt uit:

<meta property=”og:description” content=”SEO is een engelse term dat staat voor Search engine optimization” />

Belangrijk om te weten:
• Beperk je tot 60 karakters
• Heb je geen OG:description, dan zal je meta description tag gebruikt worden

OG:url

De OG:url is een vereiste tag en beschrijft de url van je pagina.
In de HTML code ziet dit er als volgt uit:

<meta property=”og:url” content=”https://www.yellowbluemarketing.nl/wat-is-seo“/>

OG:image

De OG:image is een vereiste tag die vertelt welke afbeelding er getoond moet worden.
In de HTML code ziet dit er als volgt uit:

<meta property=”og:image” content=”https://www.yellowbluemarketing.nl/wp-content/uploads/2019/06/Wat-is-SEO-600×315.png” />

Belangrijk om te weten:
• Voor een grote afbeelding is het belangrijk dat je afbeelding minimaal 600 x 315 pixels groot is. Anders wordt de afbeelding naast de titel en beschrijving geplaatst.
• Voor een kleine afbeelding heb je minimaal 200 bij 200 pixels nodig. Anders wordt er helemaal geen afbeelding getoond.
• Zorg dat de afbeelding niet groter is dan 8MB.
• Kies je geen afbeelding, dan mag het desbetreffende kanaal zelf bepalen welke afbeelding er getoond wordt.
• Je kan je afbeelding verrijken met optionele OG tags.

OG:type

De OG:type tag is optioneel en beschrijft het type content dat je publiceert. Deel je bijvoorbeeld een spotify playlist, dan zal dit er in de HTML als volgt uit zien:

<meta property=”og:type” content=”music.playlist” />

Belangrijk om te weten:
• Er kan maar één type per pagina gebruikt worden
• Stel je geen type in, dan wordt standaard het type: website gebruikt.

OG:locale

De OG:locale tag is optioneel en beschrijft voor welke locatie je content bedoeld is. In ons voorbeeld zou dat Nederland kunnen zijn.
In de HTML code ziet dit er als volgt uit:

<meta property=”og:locale” content=”NL_NL” />

Belangrijk om te weten:
• Er dient een taalcode en Landcode meegegeven te worden (volgens ISO 369 en ISO 3166).

Twitter cards

Open graph twitter card

Twitter heeft zijn eigen Open Graph opmaak, genaamd twitter cards. Wordt jouw content veel gedeeld via Twitter, dan is het zeker de moeite waard eens naar de opmaak van twitter cards te kijken. Voor een optimaal resultaat is het handig om de volgende punten te controleren:
• De vereiste opmaak is opgenomen in je pagina (twitter:card en twitter:title)
• Houd je titel onder de 55 karakters en de beschrijving onder de 125 karakters.
• Wanneer je gebruik maakt van een afbeelding, zorg er dan voor dat de afbeelding minimaal 144 bij 144 pixels is en voor een grote afbeelding 300 bij 157 pixels. Verder is het belangrijk dat de afbeelding niet groter is dan 5mb.
• Zorg ervoor dat je robots.txt, twitter bot niet blokkeert. Het voorbeeld hieronder, is wat je niet in je robots.txt wilt hebben staan:

User-agent: Twitterbot
Disallow: /

• Controleer je twitter cards met de twitter validator

Open Graph Facebook debugger

Facebook heeft een handige tool op de markt gebracht om jouw Open Graph fouten op te sporen. Je kan dit eenvoudig doen door een url in te vullen en je pagina op te halen (zie afbeelding hieronder). Wil je meerdere urls tegelijkertijd debuggen? Plak dan al je urls, gescheiden door een komma, in de ‘bach invalidator’. Ben je iets technischer aangelegd, maak dan ook gebruik van de API die Facebook beschikbaar stelt.

Facebook debugger Open graph

Nu jij weer, merk je dat het aantal kliks uit je social media kanalen omhoog is gegaan? Loop je nog ergens tegen aan? Laat het achter in de comments hieronder.

Laat een reactie achter