Open Graph: hoe je link eruitziet als iemand hem deelt

Een tevreden klant deelt je pagina in een appgroep. Of je zet zelf een bericht op LinkedIn. Wat er dan verschijnt, bepaal jij, al weten de meeste ondernemers dat niet. Zonder instelling pakt het netwerk zelf iets: je logo, een willekeurige foto of helemaal niets.

Dat is precies op het moment dat je gedeeld wordt. De aandacht is er, en dan staat er een grijs vlak.

Ik richt dit daarom standaard in bij een oplevering. Het kost een kwartier en het werkt daarna jaren.

Bij bestaande sites is het een van de dingen die ik als eerste nakijk. Het valt niemand op tot het misgaat. Dan is het te laat om nog bij te sturen.

Open Graph uitgelegd in het webdesign woordenboek van Project Direct
Bepaal zelf hoe je link eruitziet als iemand hem deelt.

Wat is Open Graph?

Open Graph is een set metatags die bepaalt wat er verschijnt als iemand je pagina deelt. Het is ontwikkeld door Facebook en inmiddels overal de standaard.

De tags staan in de kop van je pagina, net als je andere metatags. Je bezoeker ziet ze niet rechtstreeks.

Waar het werkt

Op vrijwel alle sociale media, maar ook in chatberichten. WhatsApp, Signal, Slack en Teams gebruiken dezelfde tags voor hun voorbeeldweergave.

Dat laatste wordt vaak vergeten. Er wordt meer gedeeld in appgesprekken dan op sociale netwerken.

Welke tags je nodig hebt

Vier, en die dekken alles af.

De basisset

  1. Een titel, die mag afwijken van je paginatitel.
  2. Een omschrijving van een of twee zinnen.
  3. Een afbeelding bij delen.
  4. Het adres van de pagina zelf.

Die derde is veruit het belangrijkst. Een deelbericht zonder beeld valt weg in een tijdlijn.

X gebruikt daarnaast een eigen set die grotendeels overlapt. Een goede SEO-plugin vult die automatisch mee.

Het formaat van je afbeelding

Reken op 1200 bij 630 pixels. Dat is de verhouding die vrijwel elk netwerk gebruikt.

Houd belangrijke tekst uit de randen, want die worden op sommige plekken bijgesneden. Zet je boodschap in het midden.

Gebruik geen afbeelding met kleine letters. In een tijdlijn wordt hij op een telefoon een paar centimeter breed.

Waarom het verkeerde beeld verschijnt

Bijna altijd door opslag. Netwerken bewaren je deelvoorbeeld nadat ze het een keer hebben opgehaald.

Wijzig je je afbeelding, dan blijven ze de oude tonen. LinkedIn is daar berucht in.

Elk groot netwerk heeft een hulpmiddel om die opslag te verversen. Je plakt je adres erin en vraagt om opnieuw ophalen.

Instellen in WordPress

Je thema regelt dit meestal niet. Het loopt via je SEO-plugin, bij de instellingen van elke pagina.

Stel eerst een standaardafbeelding in voor je hele site. Doe daarna het instellen per pagina voor je belangrijkste pagina’s en je artikelen.

Test het resultaat met het hulpmiddel van het netwerk voordat je iets deelt. Geef je afbeelding ook een fatsoenlijke alt-tekst. Controleer meteen je favicon, want die hoort bij dezelfde ronde.

Andere tekst dan voor Google

Je titel en omschrijving mogen hier afwijken van wat er in de zoekresultaten staat. Dat is zelfs verstandig.

In een tijdlijn werkt een prikkelende zin beter dan een zakelijke omschrijving met een zoekwoord erin. Schrijf voor iemand die scrolt.

Test het als klant

Stuur jezelf een bericht met je eigen link erin, via WhatsApp op je telefoon. Dat is de eerlijkste test die er is.

Zo ziet je klant het namelijk ook. Doe die test niet op je laptop, want daar is de weergave groter en vriendelijker.

Let op je bestandsgrootte

Een afbeelding van drie megabyte laadt traag in een voorbeeldweergave. Soms wordt hij dan helemaal niet getoond.

Houd hem onder de paar honderd kilobyte. Dat is ruim genoeg voor 1200 bij 630 pixels en het voorkomt een leeg vlak. Meer over dat gewicht lees je bij pagespeed. Meer over het beheer lees je bij CMS.

Meer vragen over Open Graph

Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.

  • Wat is Open Graph?
  • Welke Open Graph tags heb je nodig?
  • Welk formaat heeft een Open Graph afbeelding?
  • Waarom toont LinkedIn de verkeerde afbeelding?
  • Werkt Open Graph ook voor WhatsApp?
  • Hoe stel je Open Graph in bij WordPress?
Vier, en die dekken alles af. Een titel, die mag afwijken van je paginatitel. Een omschrijving van een of twee zinnen. Een afbeelding. En het adres van de pagina zelf. Die derde is veruit het belangrijkst. Een deelbericht zonder beeld valt weg in een tijdlijn, hoe goed je titel ook is. X gebruikt daarnaast een eigen set tags die grotendeels overlapt. Een goede SEO-plugin vult die automatisch mee, dus daar hoef je meestal niets voor te doen. Je kunt de titel en omschrijving bewust anders schrijven dan voor Google. In een tijdlijn werkt een prikkelende zin beter dan een zakelijke omschrijving met een zoekwoord erin. Stel eerst een standaardafbeelding in voor je hele site. Dat vangt alle pagina’s op waar je verder niets aan doet. Maak daarna een afbeelding op maat voor je homepage, je belangrijkste dienstenpagina en je artikelen. Zo heb je in een kwartier je hele site gedekt zonder elke pagina langs te gaan.
Open Graph is een set metatags die bepaalt wat er verschijnt als iemand je pagina deelt. Het is ontwikkeld door Facebook en inmiddels overal de standaard. De tags staan in de kop van je pagina, net als je andere metagegevens. Je bezoeker ziet ze niet rechtstreeks. Zonder instelling pakt het netwerk zelf iets. Je logo, een willekeurige foto uit je pagina of helemaal niets. Dat is precies op het moment dat je gedeeld wordt. De aandacht is er, en dan staat er een grijs vlak of een afbeelding die nergens over gaat. Het kost een kwartier om dit goed in te stellen en het werkt daarna jaren. Toch is het een van de dingen die bij een oplevering het vaakst wordt overgeslagen. Meer daarover lees je bij metatag. Deel je eigen homepage eens in een appgesprek met jezelf. Wat je dan ziet, is wat je klanten ook zien. Staat er een grijs vlak of een willekeurige foto, dan weet je dat dit nog niet is ingesteld.
Reken op 1200 bij 630 pixels. Dat is de verhouding die vrijwel elk netwerk gebruikt. Houd belangrijke tekst uit de randen, want die worden op sommige plekken bijgesneden. Zet je boodschap dus in het midden. Gebruik geen afbeelding met kleine letters. In een tijdlijn wordt hij op een telefoon een paar centimeter breed, en dan is niets meer leesbaar. Let ook op het bestandsformaat. Een afbeelding van drie megabyte laadt traag in een voorbeeldweergave, en soms wordt hij dan helemaal niet getoond. Een goede standaardafbeelding voor je hele site is het minimum. Voor je belangrijkste pagina’s en je artikelen maak je er daarna een op maat. Houd je belangrijkste boodschap uit de randen van je afbeelding. Die worden op sommige plekken bijgesneden zonder waarschuwing. Gebruik ook geen kleine letters, want in een tijdlijn is je beeld een paar centimeter breed. Zet je boodschap in het midden en houd de tekst groot en kort.
Bijna altijd door opslag. Netwerken bewaren je deelvoorbeeld nadat ze het een keer hebben opgehaald. Wijzig je je afbeelding, dan blijven ze de oude tonen. Soms weken achter elkaar. LinkedIn is daar berucht in, maar Facebook en WhatsApp doen het ook. Het is dus geen fout in je instellingen. Elk groot netwerk heeft een hulpmiddel om die opslag te verversen. Je plakt je adres erin en vraagt om opnieuw ophalen. Daarna klopt het meestal binnen een minuut. Doe dat altijd voordat je iets belangrijks deelt. Zeker als je de pagina recent hebt aangepast, want dan is de kans op een oude weergave het grootst. Gebruik het hulpmiddel van het netwerk om de opslag te verversen voordat je iets belangrijks deelt. Dat kost je tien seconden en het voorkomt dat je oude afbeelding nog wekenlang meegaat bij elke deling. Doe dat ook na elke aanpassing aan je pagina, want dan is de kans op een oude weergave het grootst.
Ja, en dat wordt vaak vergeten terwijl daar het meeste gedeeld wordt. WhatsApp, Signal, Slack en Teams gebruiken dezelfde tags voor hun voorbeeldweergave. Je regelt het dus in een keer voor allemaal. In een appgesprek is de weergave kleiner dan op een sociaal netwerk. Je titel wordt eerder afgekapt en je afbeelding is een postzegel. Dat pleit voor een korte titel en een afbeelding zonder kleine details. Test het door jezelf een bericht te sturen met je eigen link erin. Dat is de eerlijkste test die er is, want zo ziet je klant het ook. Doe die test op een telefoon en niet op je laptop. Vergeet de appgesprekken niet, want daar wordt het meeste gedeeld. Dezelfde instellingen werken voor WhatsApp, Signal, Slack en Teams. Test het daar op een telefoon, want die weergave is krapper dan op een sociaal netwerk. Daar is de weergave krapper, dus wat daar werkt, werkt overal.
Ziet jouw link er rommelig uit als iemand hem deelt? Stuur me de link via het formulier hieronder. Ik controleer je deelinstellingen, kijk of je afbeelding het juiste formaat heeft en test hoe hij eruitziet in een appbericht. Vermeld je plaats, dan weet ik meteen waar je zit.

Waar kan ik je mee helpen?