Wat is het Open Graph Protocol en hoe (en waarom) gebruik je het?

Dit artikel verscheen eerder op Twinklemagazine.nl.

Veel websites zijn bezig met social media. Ze doen hun best om content interessant en deelbaar te maken. Wanneer de website of een gebruiker de content echter deelt op de verschillende platformen dan ziet het er nooit hetzelfde uit. Verschillende social media-websites grijpen verschillende elementen van een website, waardoor de ‘snippet’ er niet uitziet zoals we dat eigenlijk graag zouden willen. Maar dat kán wel! Het Open Graph Protocol maakt dit mogelijk. Het is ooit opgezet door Facebook, maar inmiddels maken meerdere social media-platforms er gebruik van. Wat is het nu precies en hoe gebruik je het?

 

Wat is het?

De Open Graph integreert content van externe sites in een speciale ‘social feed’, die als gelinkte post of share makkelijk deelbaar is. Aanvankelijk opgezet door Facebook, maar inmiddels wordt het ook gebruikt door o.a. Twitter, LinkedIn, Pinterest en Instagram. Het is een protocol, een manier om content gestructureerd aan te bieden zodat deze altijd hetzelfde worden uitgelezen door de verschillende social media-websites. Concreet betekent dit niks anders dan het toevoegen van enkele meta-elementen aan de <head> van je website. Jouw blogs worden dankzij Open Graph gezien als een object, wat terug zal komen op een tijdlijn, feed en in de zoekresultaten van een social media-platform.

 

Waarom zou ik het gebruiken?

Controle! Iedereen die serieus met social media bezig is, zou ook Open Graph (en Twitter Cards) zeer serieus moeten nemen. Door data met behulp van Open Graph (en andere microdata) gestructureerd aan te bieden, heb je invloed op hoe gedeelde content er uitziet op de verschillende social media. Jij bepaalt welke afbeelding, titel en omschrijving in eerste instantie gebruikt zal worden. Zo voorkom je problemen als dat verschillende platforms lukraak informatie van de pagina gaan uitlezen en gebruiken, waarbij de keuzes voor de afbeelding en de tekst soms heel raar kunnen uitpakken:

 

 

Hoe doe ik dat dan?

Wij richten ons in dit artikel op de drie belangrijkste sociale netwerken voor zakelijk gebruik: Facebook, LinkedIn en Twitter. Om Open Graph te implementeren zal de code van een website aangepast moeten worden. Websites die gebruikmaken van populaire cms-systemen kunnen gebruikmaken van plugins zoals WordPress SEO van Yoast of verschillende Joomla en Magento-plugins. Anderen zullen het er zelf in moeten coderen. De vier verplichte elementen van Open Graph-implementatie zijn:

  • og:title – De titel van het object. Dit is de anchor tekst (linktekst) die gebruikt zal worden om te linken naar je content.
  • og:type – Het type van het object (pagina, product, blog, artikel, etc.)
  • og:image – Een URL naar de bijbehorende afbeelding
  • og:url – De canonical URL naar het object

Interessante optionele elementen zijn:

  • og:description – Een omschrijving van het object in één of twee zinnen. Je hebt hier meer ruimte dan bij je normale meta-description.
  • og:locale – Standaard wordt Open Graph-content als Engelstalig gezien. Met deze variable zet je dat op Nederlands.
  • og:site_name – Wanneer een object onderdeel is van een groter geheel (bijvoorbeeld een artikel op een website) dan kan hier de website genoemd worden.

 

Facebook & LinkedIn

Facebook en LinkedIn gebruiken beiden Open Graph, en zien er als post grotendeels hetzelfde uit. Toch zijn er verschillen, die we later verder zullen toelichten. Snippets van gedeelde links op Facebook en LinkedIn bestaan uit vier elementen:

  1. Linkafbeelding
  2. Linktitel
  3. Linkdomein
  4. Linkomschrijving

 

De link-snippet wordt verder aangevuld door een profielafbeelding van diegene die deelt en eventueel commentaar van die deler. Facebook gebruikt het genoemde Open Graph protocol om de data die ze nodig heeft te vinden. Idealiter gebruik je minimaal de volgende 5 open graph-tags voor pagina’s:

  • og:title – De titel die Facebook zal gebruiken in de snippet. Tegelijkertijd anchor text voor de URL die wordt gedeeld. Er is geen limiet aan het aantal karakters, maar het beste is om tussen de 60 en 95 karakters te blijven. Langere titels worden afgekort, bijvoorbeeld alles langer dan 100 karakters wordt door Facebook afgekort naar 88!
  • og:type – Zal ‘website’ of ‘article’ zijn voor de gedeelde content.
  • og:image – Hiermee kun je aangeven welke afbeelding er gebruikt moet worden. Maak hierin de keuze of je een share wil met een thumbnail of met een ‘grote’ afbeeldingen. Facebook hanteert het minimum van 600 × 315 voor een grote afbeelding, het platform adviseert zelf 1200 × 630 voor een betere resolutie. LinkedIn adviseert 1200 × 627.  Thumbnails kunnen ook, die worden links van de tekst geplaatst. Facebook hanteert hier een minimum van 200 × 200 en LinkedIn 110 × 150. Afbeeldingen kunnen maximaal 5 Mb zijn, maar het advies voor digitaal gebruik is altijd onder 1 Mb te blijven.
  • og:description – Dit is de omschrijving die in de snippet vertoont wordt. Ook hier is geen limiet aan het aantal karakters, maar bijv. Facebook laat niet meer dan 297 karakters zien. Wij adviseren ongeveer 150 karakters te gebruiken i.v.m. mobile. LinkedIn is een vreemde eend in de bijt: een share op dit platform zal nooit een description erbij tonen. Zorg dus dat deze content ofwel uit de titel, ofwel uit jouw post blijkt!
  • og:url – De canonical URL voor de content die wordt gedeeld.

 

Facebook en LinkedIn hanteren in principe hanteert geen harde limieten als het gaat om lengte van de titel (en voor Facebook ook voor de omschrijving), maar alles wat te lang is wordt afgebroken. Gedeelde content mag gebruikmaken van vijf regels waarin minimaal de titel, het domein en de omschrijving naar voren zullen komen. Het domein is altijd maar één regel, maar de opties zijn dus:

  • 1 regel voor de titel, 1 regel voor het domein, 3 regels voor de omschrijving. Bij deze optie heb je ongeveer 150 karakters voor de omschrijving.
  • 2 regels voor de titel, 1 regel voor het domein, 2 regels voor de omschrijving.
  • 3 regels voor de titel, 1 regel voor het domein en 1 regel voor de omschrijving. Bij deze optie heb je maximaal 95 tekens voor de titel.

Bij het invullen van de Open Graph-tags kan hier dus rekening mee gehouden worden. Het is een afweging om de titel of omschrijving langer te maken.

 

Geen Open Graph? Dan zal Facebook dit doen:

Wanneer een website geen Open Graph protocol hanteert, zal Facebook op zoek gaan naar metadata en de ‘beste gok’ gebruiken om te bepalen wat ze moet laten zien. Dit kan dus van alles zijn en zeker niet de afbeeldingen en titels die je zou willen.

 

Twitter

Twitter heeft haar eigen protocol bedacht om websites goed te begrijpen en de content ervan deelbaar te maken. Ze doen dit met ‘Twitter cards’. Ze maken verschil tussen drie soorten kaarten; summary, photo en player. De eerste is het meest geschikt voor websites. De tweede zet een foto centraal in de gedeelde content en player maakt het mogelijk om video’s en andere interactieve content te kunnen delen op Twitter.

De ‘summary card’ van Twitter laat de volgende elementen zien:

  1. 1. Linkafbeelding
  2. 2. Linktitel
  3. 3. Schrijver (op Twitter)
  4. 4. Linkomschrijving
  5. 5. Website (op Twitter)

 

Twitter geeft en gebruikt de volgende onderdelen om die data op hun site in te laden:

  • twitter:card – Het kaarttype. Dit kan ‘summary’, ‘photo’, of ‘player’ zijn. Standaard staat dit op ‘summary’, ‘photo’ is het meest ideaal voor een post met een plaatje.
  • twitter:url – Canonical URL van de content.
  • twitter:title – Titel van de content zoals deze in de kaart moet worden weergegeven. Deze is wederom de anchor tekst van de link. Maximaal 70 karakters.
  • twitter:description – Omschrijving van de content. Maximaal 200 karakters.
  • twitter:image – Een URL naar de afbeelding die bij de content hoort. Net als Facebook en LinkedIn biedt Twitter de mogelijkheid om ofwel een thumbnail ofwel een groot plaatje te gebruiken. In het geval van een thumbnail moet een plaatje minimaal 144 × 144 pixels zijn en maximaal 1 Mb. Grotere afbeeldingen worden gebruikt vanaf 300 × 157, tot 4096 × 4096 (verkleind).

 

In de summary card kunnen ook profieldata geladen worden. Wanneer dit artikel gedeeld wordt en we alle data goed inladen, zou je kunnen zien dat het geschreven is door ons (@riff) en onderdeel van het @riffonline.com. Dit kan opgemaakt worden met de volgende Twitter Card-data:

  • twitter:site – @username voor de website / wordt gebruikt in de footer van de snippet
  • twitter:creator – @username voor de auteur

 

Geen Twitter Cards? Dan doet Twitter dit:

Twitter en Facebook gebruiken verschillende maxima voor het aantal karakters en afmetingen voor afbeeldingen, dus het is goed om hier rekening mee te houden. Hier kan het Twitter Card protocol goed voor gebruikt worden. Wanneer Twitter Card-data echter niet beschikbaar zijn, zal Twitter terugvallen op Open Graph. De verhouding is als volgt:

 

PropertyCardValueOpen Graph alternatief
twitter:card“summary”, “photo”, or “player”
twitter:siteall@username of website
twitter:site:idallSame as twitter:user, but the user’s Twitter ID
twitter:creatorall@username of content creator
twitter:creator:idallTwitter user ID of content creator
twitter:urlallCanonical URL of the card contentog:url
twitter:descriptionallDescription of content (maximum 200 characters)og:description
twitter:titleallTitle of content (max 70 characters)og:title
twitter:imageallURL of image to use in the cardog:image
twitter:image:widthallWidth of image in pixelsog:image:width
twitter:image:heightallHeight of image in pixelsog:image:height
twitter:playerplayerHTTPS URL of player iframe
twitter:player:widthplayerWidth of iframe in pixels
twitter:player:heightplayerHeight of iframe in pixels
twitter:player:streamplayerURL to raw video or audio stream

Bron: https://dev.twitter.com/docs/cards

 

Structuur in je werkzaamheden

Dana Lookadoo van YoYoSEO heeft een 10-stappenplan ontwikkeld om heel gestructureerd om te gaan met het delen van content. Zij maakt hierin ook gebruik van social media en ik kan het aanraden om haar Whiteboard Friday-presentatie te kijken en haar pagina hierover te bekijken.

Het is in ieder geval handig om de volgende getallen in een overzicht te zien:

 

PlatformTitelAfbeeldingOmschrijving
FacebookTussen de 60 – 95 wordt geadviseerd, bij >100 wordt de tekst afgebroken.Minimaal 200 × 200 voor een thumbnail, minimaal 630 × 315 voor een grote afbeelding (1200 × 630 wordt geadviseerd).Maximaal 297 karakters.
LinkedInTussen de 60 – 95 wordt geadviseerd.Minimaal 80 × 150 voor een thumbnail, voor een grote afbeelding wordt 1200 × 627 geadviseerd.LinkedIn gebruikt geen omschrijving! Zorg dat deze content in je titel of in je post staat.
TwitterMaximaal 70 karakters.Minimaal 144 × 144 voor een thumbnail, minimaal 300 × 157 voor een grote afbeelding (maximaal 4096 × 4096).Maximaal 200 karakters.

 

Teksten & fixen

Een belangrijke tool om jouw social shares te testen is de Sharing Debugger van Facebook (of de Twitter Cards debugger). In deze tools krijg je een preview van jouw webpagina als social post, met de foutmeldingen van missende Open Graph-data. Mist er data, wordt er ongeldige data uitgelezen of zijn er andere fouten? Kijk dan of je dit zelf kan oplossen via een plug-in in jouw cms-systeem, of vraag het na bij jouw websitebouwer.

 

Meer weten?

Wil je meer weten over hoe je social media slim kan inzetten en de kansen voor jouw organisatie? Neem contact op met een van onze social media-specialisten. Houd onze blog in de gaten voor meer interessante artikelen over alles wat met online marketing te maken heeft.

Partners