Technisch · 4 min lezen
Open Graph
Open Graph bepaalt hoe jouw pagina eruitziet als iemand de link deelt op sociale media. Zonder deze tags gokt het platform wat het toont, en dat valt zelden goed uit.
Inhoudsopgave
Je hebt net een strak blogartikel gepubliceerd en deelt de link op LinkedIn. Maar wat verschijnt er? Een lege rechthoek, een willekeurige zin van diep in de tekst, of erger: de naam van je CMS . Open Graph-tags voorkomen precies dat. Ze vertellen Facebook, LinkedIn, WhatsApp en andere platforms welke titel, beschrijving en afbeelding ze moeten tonen. Jij stuurt het beeld dat jouw bezoeker als eerste ziet, nog vóór hij op de link klikt.
De voorkant van je website op sociale media
Denk aan Open Graph als de omslag van een boek. Het boek zelf is je webpagina, maar de omslag is wat mensen zien in de boekhandel. Zonder omslag ligt er een naakt manuscript tussen duizenden andere boeken. Met een goede omslag pak je direct aandacht.
Open Graph is in 2010 door Facebook ontwikkeld en sindsdien overgenomen door vrijwel elk sociaal platform. De techniek bestaat uit een reeks <meta>-tags in de HTML van je pagina. Ze zijn onzichtbaar voor bezoekers op de pagina zelf, maar platforms als LinkedIn en WhatsApp lezen ze in de seconde dat iemand een link plakt.
De vier tags die je altijd nodig hebt:
- og:title -- de koptekst boven de preview. Gebruik je paginatitel, kort en pakkend.
- og:description -- de zin onder de titel. Vergelijkbaar met een meta description , maar specifiek voor sociale media.
- og:image -- de afbeelding in de preview. Gebruik minimaal 1200 bij 630 pixels voor een scherpe weergave op alle platforms.
- og:url -- de canonical URL van de pagina, zodat alle shares naar hetzelfde adres verwijzen.
Waarom een slechte preview je bereik halveert
Stel: een tevreden klant deelt de link naar jouw dienstenpagina met zijn netwerk. Zonder Open Graph-tags ziet dat netwerk een kale URL of een willekeurige zin. De klikratio daalt direct. Mensen scrollen door.
Met de juiste tags zien ze een scherpe foto, een heldere koptekst en een zin die nieuwsgierig maakt. Dat is het verschil tussen een link die scoort en een link die verdwijnt.
Een paar concrete risico's als je Open Graph negeert:
- Platforms tonen een placeholder of de eerste afbeelding op de pagina, ook als dat een pixel-tracking-plaatje is.
- De titels en beschrijvingen zijn te lang, te kort of gewoon verkeerd.
- Elke share van dezelfde URL ziet er anders uit, afhankelijk van het platform.
- Je hebt geen controle over de conversieratio van gedeelde links.
Open Graph heeft geen directe invloed op je positie in Google, maar meer klikken via sociale media betekent meer bezoekers. En meer bezoekers is een positief signaal.
Zo stel je Open Graph in voor jouw site
Als je werkt met WordPress , installeert Yoast SEO of Rank Math automatisch Open Graph-ondersteuning. In het plugin-instellingenmenu zet je sociale previews aan en upload je per pagina of bericht een eigen preview-afbeelding.
Bouw je een website op maat of in een ander framework? Dan voeg je de tags handmatig toe in de <head> van elke pagina:
<meta property="og:title" content="Jouw paginatitel" />
<meta property="og:description" content="Jouw pakkende omschrijving" />
<meta property="og:image" content="https://jouwsite.nl/preview.jpg" />
<meta property="og:url" content="https://jouwsite.nl/jouw-pagina" />
<meta property="og:type" content="website" /> Controleer het resultaat met de gratis Facebook Sharing Debugger op developers.facebook.com/tools/debug. Plak je URL en je ziet precies wat Facebook inleest, inclusief waarschuwingen als de afbeelding te klein is of tags ontbreken. LinkedIn heeft een vergelijkbare tool: de Post Inspector op linkedin.com/post-inspector.
Een paar tips voor betere previews:
- Maak een aparte og:image per pagina. Een blogpost krijgt de blogfoto, een dienstenpagina de sterkste productfoto.
- Houd og:title onder de 60 tekens en og:description onder de 160 tekens. Langer wordt afgekapt.
- Voeg voor Twitter/X ook
twitter:card,twitter:titleentwitter:imagetoe. Twitter leest og-tags ook, maar eigen Twitter-tags hebben voorrang. - Test na elke grote aanpassing. Platforms cachen previews soms dagenlang.
Wil je zeker weten dat jouw website overal goed oogt? Neem een kijkje bij onze SEO-optimalisatie , of laat ons een nieuwe website laten maken met alle technische details van meet af aan op orde.
Klein stukje code, groot verschil in bereik
Open Graph is een van die details die je pas mist als het misgaat. Eén gedeelde link met een lege preview op een drukke LinkedIn-tijdlijn, en je verliest misschien tientallen potentiële bezoekers. Vijf minuten werk om de juiste tags in te stellen, en elke gedeelde link werkt voor je in plaats van tegen je.
Combineer het met een goede webdesign -strategie en Google Analytics om bij te houden hoeveel verkeer via sociale media binnenkomt. Dan zie je ook direct wat goed werkt.
Veelgestelde vragen
Heeft Open Graph invloed op mijn positie in Google?
Niet direct. Google gebruikt Open Graph-tags niet als rankingfactor. Indirect kan het wel helpen: meer klikken via sociale media levert meer bezoekers op, en dat is een signaal dat Google meeneemt bij het beoordelen van de relevantie van je pagina.
Welke afbeeldingsgrootte werkt het beste voor Open Graph?
Gebruik minimaal 1200 bij 630 pixels voor Facebook en LinkedIn. Dat is een verhouding van 1,91:1 en geeft de scherpste weergave op vrijwel alle platforms. Maak een aparte og:image per pagina voor het beste resultaat.
Kan ik per pagina een andere Open Graph-afbeelding instellen?
Ja, en dat is ook de bedoeling. Met een CMS als WordPress en Yoast SEO stel je per bericht of pagina een eigen social preview in. Op een maatwerk-website pas je de og:image-tag per template aan.
Wat is het verschil tussen Open Graph en Twitter Cards?
Twitter Cards zijn Twitters eigen versie van dezelfde techniek. Twitter leest og-tags wel uit, maar als je eigen twitter:card-tags toevoegt, hebben die voorrang. Voor de meeste sites volstaat Open Graph aangevuld met een twitter:card-tag.
Hoe controleer ik of mijn Open Graph-tags correct zijn?
Gebruik de Facebook Sharing Debugger (developers.facebook.com/tools/debug) en de LinkedIn Post Inspector (linkedin.com/post-inspector). Beide tools zijn gratis, tonen welke tags worden ingelezen, en waarschuwen als er iets ontbreekt of de afbeelding de verkeerde afmetingen heeft.
Veelgestelde vragen
Heeft elke website Open Graph-tags nodig?
Ja, als je wilt dat gedeelde links er professioneel uitzien op sociale media. Zonder Open Graph-tags kiest het platform zelf welke afbeelding en tekst het toont, wat vaak leidt tot een lelijke of onvolledige preview. Dat kost je klikken en vertrouwen.
Hoe controleer ik mijn Open Graph-tags?
Gebruik de Facebook Sharing Debugger op developers.facebook.com/tools/debug. Vul je URL in en je ziet direct welke tags worden uitgelezen en of er iets ontbreekt. Voor LinkedIn is er de LinkedIn Post Inspector op linkedin.com/post-inspector.
Wat is de ideale afbeeldingsgrootte voor Open Graph?
1200 bij 630 pixels is de aanbevolen afmeting. Dat formaat ziet er scherp uit op Facebook, LinkedIn en WhatsApp. Gebruik een afbeelding van minimaal 600 bij 315 pixels als absolute ondergrens, maar houd het liever op de grotere maat voor de beste kwaliteit.
Werkt Open Graph ook voor Instagram?
Nee. Instagram leest geen Open Graph-tags uit wanneer je een link deelt, omdat Instagram geen klikbare links in reguliere posts ondersteunt. Voor Instagram gebruik je andere methoden, zoals een link in de bio via tools als Linktree.
Gerelateerde begrippen
Klaar voor een website die klanten oplevert?
Vertel kort wat je nodig hebt. Je krijgt binnen 24 uur een eerlijk antwoord en een vaste prijs.