Kennis - Het online marketing blog van Tribal

Online marketing is een vak apart en een wereld die snel verandert. Wij laten ons dagelijks inspireren door de nieuwste ontwikkelingen, tips & tools en allerlei nuttige toepassingen. Hieronder lees je welke kennis wij in huis hebben.

Geplaatst door

05 oktober 2012

Samen met mijn collega's en klanten streef ik graag naar het bereiken en overtreffen van gestelde doelen want, zoals Johan Cruijff al zei: "Zonder doel kun je niet scoren".

Lees meer over mij >>

Open Graph – Wat, waarom & hoe?!

Door: Paula Heesbeen

Geschatte leestijd: 6 minuten

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 en de ‘snippet’ ziet er niet uit 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 ook Twitter en Google+ maken er gebruik van. Wat is het nu precies en hoe gebruik je het?

Wat is het?

De Open Graph, (oorspronkelijk van Facebook) integreert externe sites in een ‘social graph’. Websites worden binnen Open Graph gezien als een object, waarmee gebruikers zelfstandig de connecties tussen websites en Facebook kunnen leggen (bron: Frankwatching). Het is een protocol, een manier om data 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.

Waarom zou ik het gebruiken?

Controle! 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 zullen worden. Voor Google+ is dit zelfs extra interessant in verband met ‘Plus your world‘. Deze zoekresultaten (in de VS reeds uitgerold) zijn persoonlijk en maken weer gebruik van Google+ berichten in de organische zoekresultaten. Des te meer reden om zelf te bepalen wat daar dan staat!

Hoe doe ik dat dan?

Ik richt me in dit artikel op de drie grootste sociale netwerken: Facebook, Google+ en Twitter. Om Open Graph te implementeren zal de code van een website aangepast moeten worden. 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

Snippets van gedeelde links op Facebook bestaan uit vier elementen:

  1. 1. Link afbeelding
  2. 2. Link titel
  3. 3. Link domein
  4. 4. Link omschrijving

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.
  • og:type – Zal ‘website’ of ‘article’ zijn voor de gedeelde content.
  • og:image – Hiermee kun je aangeven welke afbeelding er gebruikt moet worden. Facebook raadt een “thumbnail” afbeelding aan van ten minste 120×90 pixels. Wanneer een afbeelding te groot is, zal Facebook deze verkleinen zodat het past.
  • og:description – Zal de omschrijving zijn die in de snippet wordt weergegeven.
  • og:url – De canonical URL voor de content die wordt gedeeld.

Facebook hanteert geen harde limieten als het gaat om lengte van de titel en omschrijving. 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 100 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.

Facebook alternatieven

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 vanalles zijn en zeker niet de afbeeldingen en titels die je zou willen.

Twitter

Twitter heeft recent 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. Het is momenteel nog nodig om je aan te melden om hier gebruik van te maken!

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

  1. 1. Link afbeelding
  2. 2. Link titel
  3. 3. Schrijver (op Twitter)
  4. 4. Link omschrijving
  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’.
  • 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. Twitter geeft als advies een afbeelding te gebruiken die kleiner is dan 120×120 pixels, maar niet kleiner dan 60×60 pixels. Grotere afbeeldingen zullen verkleind worden. Kleinere afbeeldingen worden niet getoond.

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 mij (@paulalatifa) en onderdeel van het @easy blok. 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

Twitter alternatieven

Twitter en Facebook gebruiken verschillende maxima voor het aantal karakters en groottes voor afbeeldingen dus het is goed om hier rekening mee te houden en 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:

Property Card Value OpenGraph Fallback
twitter:card “summary”, “photo”, or “player”
twitter:site all @username of website
twitter:site:id all Same as twitter:user, but the user’s Twitter ID
twitter:creator all @username of content creator
twitter:creator:id all Twitter user ID of content creator
twitter:url all Canonical URL of the card content og:url
twitter:description all Description of content (maximum 200 characters) og:description
twitter:title all Title of content (max 70 characters) og:title
twitter:image all URL of image to use in the card og:image
twitter:image:width all Width of image in pixels og:image:width
twitter:image:height all Height of image in pixels og:image:height
twitter:player player HTTPS URL of player iframe
twitter:player:width player Width of iframe in pixels
twitter:player:height player Height of iframe in pixels
twitter:player:stream player URL to raw video or audio stream

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

Google+

Als laatste sociale netwerk is daar dan Google+. Zij maken een snippet op met drie onderdelen:

  • Link afbeelding
  • Link titel
  • Link omschrijving

Daarnaast gebruikt Google+, net als Facebook en Twitter, een profielafbeelding, profielnaam en het bericht dat de deler wenst te delen met haar/zijn bekenden in gekozen cirkels.

Google+ prefereert data die opgemaakt zijn met schema.org en kan elk schema dat daar staat gebruiken om een webpagina op te maken. De rich snippet testing tool is daar een grote hulp bij en kan gebruikt worden om voorbeelden te bekijken en eigen gecodeerde pagina’s te testen.

Een Google+ snippet zal een titel van ongeveer 140 karakters weergeven en er lijkt geen limiet te zijn voor de omschrijving, maar aangeraden wordt om deze maximaal 185 karakters te maken. Afbeeldingen voor Google+ moeten vierkant zijn en kunnen het beste rond de 150x150px liggen.

Zelf zou ik ook altijd author informatie toevoegen aan de pagina (en publisher informatie aan je homepagina). Hiermee vertel je Google(+) wie er achter de site zit en heb je naast de algemene informatie over de pagina, zoals titel en omschrijving, ook informatie over auteur en uitgever. Dit helpt niet alleen op Google+ maar maakt het resultaat in de Google zoekresultaten ook rijker. Auteurs- en uitgeversinformatie is onderdeel van de bredere mogelijkheden van rich snippets voor zoekresultaten.

Google alternatieven

De volgorde die Google aanhoudt om een pagina op te maken is als volgt:

  1. Schema.org
  2. Open Graph
  3. Traditionele elementen zoals <title> en meta-description
  4. Beste gok

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:

Titel Afbeelding Omschrijving
Facebook Titel = anchortekst Minstens 120×90. Als
het groter is wordt
het kleiner gemaakt
één of twee zinnen
Google Max 140 karakters Moet vierkant zijn.
Beste is 150×150
Ongeveer 185
karakters
Twitter Max 70 karakters Groter dan 60×60,
kleiner dan 120×120
als het groter is wordt
het kleiner gemaakt
Maximaal 200
karakters
Advies YoYoSEO 134 karakters Beste=150x150px
Minimaal: 120px
Max. 188
karakters

En nu?

Websites die gebruikmaken van populaire Content Management Systemen kunnen gebruikmaken van plugins zoals WordPress SEO van Yoast of verschillende Joomla en Magento plugins. Anderen zullen het er zelf in moeten coderen. Iedereen die serieus met social media bezig is, zou ook Open Graph, Twitter Cards en schema.org zeer serieus moeten nemen. Wie doet dat al? En hoe doen jullie het?

Discussie- 5 reacties

Roald

5 oktober 2012, 17:31

Hey Paula,

Super cool artikel!
Ik ben erg benieuwd naar jouw bevindingen mbt het delen van content al dan niet opgemaakt met Open Graph. Zie je verschil in interactie/delen van content wanneer de Open Graph data is geïmplementeerd?

Lijkt me ook cool om te testen wat voor soort afbeeldingen bijvoorbeeld meer opvallen, waardoor een bericht meer gelezen/gedeeld zou kunnen worden.

Reageer hier op

    Paula

    8 oktober 2012, 10:29

    Hoi Roald,
    Bedankt voor je reactie! Erg interessante vragen. We hebben dit nog niet kunnen testen. Het zijn dingen die we in de toekomst zeker uit willen gaan proberen!

Thomas

3 januari 2017, 11:11

Nuttig artikel, Thnx!

Reageer hier op

Johan Stam

21 juni 2017, 22:33

Ik zie in de van mijn website echtemeneer.nl 3 x dezelfde meta description (ik gebruik Yoast SEO). Is dit oke? Als ik site:echtemeneer.nl bekijk dan zie ik voor alle pagina’s een zelfde omschrijving…wat gaat er mis?

Reageer hier op

    Linda

    28 juni 2017, 15:22

    Hoi Johan,

    Ik heb een SEO collega gevraagd om ernaar te kijken. Volgens hem staan de instellingen per pagina wel goed. Zou jij ons jouw contactgegevens door willen sturen, zodat we je verder kunnen helpen?

Blijf op de hoogte van handige kennis en het laatste nieuws van je favoriete online marketing bureau:

INSCHRIJVEN VOOR ONZE NIEUWSBRIEF