Open Graph tags — share-cards perfect maken

Wat MKB moet weten

Open Graph is een protocol dat Facebook in 2010 introduceerde om sites overzichtelijk te kunnen delen op sociale media. Inmiddels lezen alle grote platformen het: LinkedIn, WhatsApp, Slack, Discord, Telegram, Signal, iMessage en zelfs Microsoft Teams. Eén keer OG-tags goed instellen op je homepage en belangrijke landingspagina's, en elk gedeelde link toont een nette voorvertoning in plaats van een naakt URL.

Vier verplichte OG-tags: og:title (60 chars), og:description (155 chars), og:image (1200×630 PNG), og:url. Plus og:type="website" of "article". Voor Twitter ook twitter:card="summary_large_image". Test met opengraph.dev.

Waarom dit voor MKB telt

Drie redenen waarom Open Graph voor een hovenier, klusbedrijf of B2B-consultant in De Ronde Venen serieus telt:

WhatsApp en LinkedIn zijn lead-kanalen. Bezoekers delen jouw site-URL via WhatsApp-groepen, LinkedIn-berichten of e-mail naar collega's. Een naakte link werkt minder goed dan een nette voorvertoning met logo, kop en omschrijving. Het verschil in click-through is empirisch 30-50% — bevestigd door LinkedIn's eigen analytics.

Vertrouwen. Een link zonder voorvertoning oogt minder professioneel dan een keurig OG-blokje. Voor B2B-prospects die jouw site doorsturen naar collega's of inkopers, telt elk visueel signaal.

Sociale media adverteren. Wanneer je een organische post of advertentie plaatst met een link naar je site, gebruikt het platform de OG-tags voor de voorvertoning. Verkeerd ingestelde tags = verkeerde voorvertoning = lagere CTR op je campagne.

De vier verplichte tags in detail

og:title is de kop van de voorvertoning. Maximaal 60 tekens, anders wordt hij afgekapt. Verschilt van je <title>-tag in HTML (die kan langer zijn voor SEO). Voorbeeld: "DesignCheck — webdesign voor MKB in Mijdrecht".

og:description is de tekst onder de kop. Maximaal 155 tekens, vergelijkbaar met de meta-description voor Google. Concrete propositie, geen wollig taalgebruik. "Snelle, moderne websites voor MKB. Refresh €1.995, Rebuild €3.995. Gratis audit binnen 48u."

og:image is de afbeelding. Optimale afmetingen 1200×630 pixels (1.91:1 verhouding). Minimaal 600×315. Maximale bestandsgrootte 8MB voor LinkedIn, 5MB voor Facebook. PNG of JPG, geen WebP — sommige platformen lezen WebP nog niet correct. Plaats relevante tekst (niet meer dan 20% van de afbeelding) en je logo zichtbaar.

og:url is de canonical-URL van de pagina. Moet exact overeenkomen met de URL waarop bezoekers terechtkomen na klikken op de voorvertoning. Bij afwijking ontstaan share-cards die naar de verkeerde pagina linken.

Twitter Cards — een aparte set

Twitter (sinds 2023 X) leest Open Graph maar geeft voorrang aan zijn eigen Twitter Card-tags. Voor een grote afbeelding boven de kop gebruik je twitter:card="summary_large_image". Plus aanvullend:

• twitter:title — overschrijft og:title op X (mag identiek zijn).
• twitter:description — idem voor description.
• twitter:image — idem voor image.
• twitter:site — je X-account (@designcheck).
• twitter:creator — auteur-account voor blogposts.

Voor de meeste MKB-sites die niet actief op X zijn, is dit optioneel. Voor B2B-consultancy en techbedrijven wel relevant.

Wat een goede og:image laat zien

Een effectieve share-card heeft drie elementen: je logo (linksboven, klein), een korte titel (centraal of links) en eventueel een product-shot of foto. Vermijd te veel tekst — onderzoek toont dat lange teksten in OG-images de click-through verlagen. Vier formules die werken:

• Logo + kop + USP. Voor een hovenier: logo links, midden "Tuinaanleg in De Ronde Venen", onderaan "Bel vandaag voor een offerte".
• Logo + foto van werk. Een schilder of klusbedrijf met een dramatische voor/na-foto. Trekt direct aandacht.
• Logo + één concreet cijfer. "150+ projecten in De Ronde Venen" of "9,2 gemiddeld op Google reviews". Sociaal bewijs.
• Branded-template per blogpost. Eén consistente layout met variabele titel, gegenereerd per artikel. Maakt elke share herkenbaar.

Veelgemaakte fouten

1. og:image is te klein. Onder 600×315 toont LinkedIn de link als klein vierkant in plaats van groot. Direct slechte CTR.
2. og:image niet absolute URL. Pad als "/og.png" werkt niet — moet "https://designcheck.nl/og.png" zijn. Sommige platforms doen geen relative-resolve.
3. og:url niet de canonical. Wanneer iemand /prijzen?utm_source=newsletter deelt en og:url staat op /prijzen — dat is correct (UTM strippen). Wijst og:url naar /home terwijl de gedeelde URL /prijzen is, dan klikken bezoekers naar /home en raken verward.
4. WhatsApp-cache. WhatsApp cachet OG-tags 7 dagen. Wijziging niet zichtbaar? Test met andere URL of wacht tot het cachet verloopt.
5. Verschillende og:image per browser-type. Server-side rendering soms inconsistent. Test in incognito modus.
6. Te lange og:title. Boven 60 tekens kapt elk platform anders af. Houd korte titel aan.
7. Geen og:type ingesteld. Sommige platforms vallen terug op generieke voorvertoning. Standaard "website" voor homepage, "article" voor blogposts.

Testen op alle platforms

• opengraph.dev — voorvertoning voor LinkedIn, WhatsApp, X, Facebook, Slack in één scherm.
• metatags.io — vergelijkbare functionaliteit plus directe code-generator.
• LinkedIn Post Inspector — linkedin.com/post-inspector, geforceerde cache-refresh.
• Facebook Sharing Debugger — developers.facebook.com/tools/debug, krachtigste tool voor cache-busting bij Facebook.
• Twitter Card Validator — cards-dev.twitter.com/validator, alleen voor X-cards.
• WhatsApp test. Stuur je site naar jezelf in WhatsApp Web. Geen apart tool, maar de meest gebruikte deel-app in NL.

Hoe je het instelt per platform

• WordPress met Yoast SEO. Automatisch generated voor elke pagina. Aanpasbaar via Yoast-paneel onder elke editor. Voor 95% MKB: niets aanpassen, gewoon laten staan.
• WordPress met Rank Math. Vergelijkbaar met Yoast, eveneens automatisch.
• Webflow. Per pagina via "Page Settings" → "SEO & Sharing". Aparte velden voor OG en Twitter.
• Shopify. Standaard OG-tags op productpagina's, customisatie via theme.liquid.
• Squarespace. Per pagina via "Page SEO". Beperkt aanpasbaar.
• Statische HTML (zoals deze site). Per pagina handmatig in <head>. Bij build-tools (Astro, Next.js, 11ty): dynamisch via template.

Checklist: 11 stappen naar perfecte share-cards

1. Maak een centrale og:image van 1200×630 (PNG of JPG) met logo en USP.
2. Voeg og:title, og:description, og:image, og:url toe aan je homepage.
3. Voeg og:type="website" toe op homepage, og:type="article" op blogposts.
4. Voeg twitter:card="summary_large_image" toe op alle pagina's.
5. Maak per landingspagina een unieke og:image die de inhoud van die pagina representeert.
6. Test op opengraph.dev, controleer alle vijf platformen.
7. Forceer LinkedIn-cache-refresh via Post Inspector.
8. Forceer Facebook-cache-refresh via Sharing Debugger.
9. Stuur je site via WhatsApp naar jezelf, controleer voorvertoning.
10. Documenteer de OG-template in een centraal bestand of CMS-template.
11. Bij elke nieuwe landingspagina automatisch en consistent OG-tags genereren.

Hoe vaak je dit aanpakt

Eén keer per landingspagina. Een hovenier in Mijdrecht hoeft niet maandelijks zijn og:image te vernieuwen — wel bij elke significante rebranding, nieuwe dienst of belangrijke landingspagina. Voor blogposts is automatische generatie via templates ideaal: elke post krijgt automatisch een og:image met de titel erin gegenereerd. Bij DesignCheck zit dit standaard in elke Rebuild en Premium build.

Wat een goed ingestelde set oplevert

Een hovenier in De Ronde Venen die zijn site na rebranding deelde via 3 WhatsApp-groepen, 1 LinkedIn-post en 2 e-mails naar netwerkcontacten zag 47 unieke bezoekers binnen 24 uur — versus 19 bezoekers bij dezelfde share zonder ingerichte OG-tags drie maanden eerder. Verschil: dezelfde inhoud werd meer aangeklikt omdat de voorvertoning aantrekkelijker was. Geen advertentie, geen SEO-werk, alleen technische set-up van de share-cards.

Onderhoud en doorlopende controle

Twee momenten in het jaar zijn voldoende voor een doorlopende controle: na elke significante site-update (nieuwe pagina's, rebranding, prijswijziging) en bij de jaarlijkse SEO-check. Per gelegenheid: stuur je homepage en drie belangrijkste landingspagina's naar jezelf via WhatsApp, controleer de voorvertoning. Klopt het beeld, klopt de tekst, klopt de URL? Klaar voor weer een half jaar. Een kwartiertje werk, voorkomt verloren leads op je beste kanalen.

Bij grote relaunches of nieuwbouwprojecten van DesignCheck-klanten lopen we deze check standaard mee na go-live. Een vergeten OG-tag op een nieuwe campagne-landingspagina kan een marketing-budget van duizenden euro's onverklaard slechter laten presteren.

De geschiedenis van Open Graph en wat dat betekent voor 2026

Open Graph werd in 2010 door Facebook ontwikkeld om sites op een gestandaardiseerde manier te kunnen delen. De ironie: vandaag de dag is Facebook qua deelvolume voor MKB minder belangrijk dan WhatsApp en LinkedIn — maar het protocol dat Facebook ooit bedacht regeert nog steeds. Reden: het is breed geadopteerd, eenvoudig, en niemand heeft een betere standaard ontwikkeld.

Voor 2026 betekent dit: Open Graph blijft de standaard. Verwacht geen drastische wijzigingen, geen nieuwe protocollen die OG verdringen. Bij elke nieuwbouw of refresh implementeren we OG-tags op dezelfde manier als drie jaar geleden — alleen de og:image-specificaties zijn enigszins geëvolueerd (groter, hogere kwaliteit) omdat smartphones steeds scherpere displays krijgen.

De ene uitbreiding die wel adoptie wint: structured product-data via OG-tags voor e-commerce (product:price:amount, product:availability) en og:video voor video-deeplinks. Voor MKB nog niet relevant in de meeste gevallen, maar voor webshops met productdeling via WhatsApp Business of LinkedIn relevant om te kennen.

Wat OG-tags niet doen — onbegrip vermijden

Veel MKB-eigenaren verwarren OG-tags met SEO. Belangrijk onderscheid: OG-tags beïnvloeden niet je Google-ranking direct. Ze beïnvloeden alleen hoe je site eruitziet wanneer iemand de link deelt op sociale platformen of in chat-apps. Goede OG-tags + slechte SEO = nog steeds geen organisch verkeer. Goede SEO + slechte OG-tags = wel organisch verkeer, maar weinig share-traffic.

Het is een aanvullende techniek, geen vervanging voor SEO of content. Voor een complete MKB-set hoort het naast canonical-tags, Schema.org-data, sitemap.xml en HTTPS — geen prioriteit boven die fundamenten, maar wel verwacht door bezoekers anno 2026. Ontbrekende OG-tags worden niet meer geaccepteerd als "ach, kan later" — het signaal is direct: deze site is niet helemaal afgemaakt.

Dynamische og:image-generatie

Voor sites met veel landingspagina's of blogposts is handmatig per pagina een og:image maken praktisch onhaalbaar. De moderne oplossing: dynamische generatie via edge-functies of een templating-engine. Vercel biedt @vercel/og, een library die per pagina een unieke og:image rendert op basis van de paginatitel, datum en eventueel een uitgelichte afbeelding.

Hoe werkt het: in plaats van een statisch PNG-bestand wijst og:image naar een dynamische URL zoals /api/og?title=Webdesign-Mijdrecht. De server (of edge-functie) genereert on-the-fly een PNG met die titel ingelaste in een vooraf gedefinieerde template. Wijzigt de titel, dan wijzigt automatisch ook de share-card. Voor MKB met meer dan 20 landingspagina's een directe productiviteitswinst.

Alternatief is een tool als Bannerbear of OG Image Studio die handmatig templates laat opzetten. Voor MKB met een handvol pagina's overkill, voor agencies of multi-product sites uitstekend.

Open Graph en moderne zoekmachine-techniek

Open Graph is ontstaan als sociaal-media-protocol, maar moderne zoekmachines lezen de tags ook. Google gebruikt og:image bijvoorbeeld als fallback voor de afbeelding in zoekresultaten als er geen Schema.org Article-image-tag is ingesteld. Pinterest leest og:image en og:description voor automatische pins. Microsoft Teams en Slack tonen voorvertoningen op basis van OG-tags zonder dat je iets extra hoeft te doen.

De combinatie van OG-tags + Schema.org-data is krachtig. Schema.org Article-tags zijn voor zoekmachines (Google rich snippets), OG-tags voor sociaal delen. Bij Keurmeesters bijvoorbeeld zijn beide gelaagd ingesteld: Schema.org-data drijft Google's rich snippets met openingstijden en prijzen, OG-tags drijven LinkedIn- en WhatsApp-shares met een visueel rapport-blad als og:image. Resultaat: zichtbaarheid in alle kanalen vanuit één bron.

Veelvoorkomende cache-problemen en hoe ze op te lossen

Het lastigste aan OG-tags is dat ze gecachet worden door elk platform afzonderlijk, en elk platform heeft een ander refresh-mechanisme:

• Facebook. Cache wordt elke 30 dagen ververst. Forceer via Sharing Debugger: voer URL in, klik "Scrape Again".
• LinkedIn. Cache 7 dagen. Forceer via Post Inspector: voer URL in, krijg directe terugkoppeling én forceer refresh.
• WhatsApp. Cache 7 dagen op IP-basis. Geen officiële refresh-tool. Workaround: voeg querystring toe (?v=2).
• X (Twitter). Cache 7 dagen. Card Validator forceert refresh.
• Slack. Cache enkele uren. Plak link opnieuw in nieuwe message voor refresh.
• Telegram en Signal. Cache enkele minuten tot uren. Meestal automatisch ververst.
• iMessage en Microsoft Teams. Cache afhankelijk van device en versie. Geen tools, gewoon afwachten of nieuw delen.

Praktische regel: zet je OG-tags één keer goed, dan hoef je nooit te forceren. Test bij eerste implementatie via alle vijf bovenstaande tools, fix wat fout staat, klaar. Bij latere wijzigingen alleen forceren op de platforms waar je actief deelt.

Branche-specifieke share-card-strategieën

Per type bedrijf landt een ander beeld het best bij de doelgroep. Voorbeelden voor MKB in en rond De Ronde Venen, Wilnis, Vinkeveen en Utrecht:

• Hoveniers. Voor- en na-foto van een opgeleverd project, met overlay-tekst "Tuinaanleg in [stad]". Bij elke nieuwe portfolio-pagina een unieke og:image. Direct effect bij offerteaanvraag via WhatsApp.
• Klusbedrijven en schilders. Detailfoto van vakwerk (bijvoorbeeld een afgewerkt kozijn), zwart-wit-conversie met één gekleurd element. Onderscheidt zich van concurrentie.
• Boekhouders, advocaten, makelaars. Portret van de eigenaar of partners, formele setting. Vertrouwen-signaal voor B2B-prospects.
• Restaurants en cafés. Sfeerfoto van het interieur of een populair gerecht. Per blogpost (recept, nieuws) een specifieke foto.
• Kapsalons en schoonheidssalons. Voor- en na-foto van een behandeling. Sterke conversiedrijver via Instagram-stijl beelden.
• Energielabel-bureaus. Visualisatie van een label (A+++ tot G) of een rapportblad. Communiceert direct het product.
• SaaS en techbedrijven. Product-screenshot met UI-elementen zichtbaar. Per pagina/feature een unieke voorvertoning.

De relatie met meta-description en SEO

Open Graph en de meta-description voor Google overlappen deels maar werken anders. De meta-description verschijnt in Google-zoekresultaten en is zoekmachine-gericht. og:description verschijnt op sociale platformen en is share-gericht. Beide mogen identiek zijn op kleine sites, maar voor optimalisatie kun je verschillen.

Voorbeeld: meta-description "Webdesign voor MKB door DesignCheck in Mijdrecht. Refresh €1.995, Rebuild €3.995. Gratis audit binnen 48u." is SEO-vriendelijk met keywords. og:description "Mooie, snelle websites voor jouw bedrijf. Refresh vanaf €1.995." is share-vriendelijk met directe propositie. Allebei prima, dezelfde landingpagina, ander doel.

Wat doe je vandaag?

Wat krijg je bij DesignCheck?

Elke Rebuild (€3.995) en Premium (€6.995) inclusief volledige OG-set op alle pagina's plus dynamische og:image-generator per blogpost. Refresh (€1.995) voegt ontbrekende OG-tags toe aan een bestaande site, inclusief één centrale og:image. Vanuit Mijdrecht voor klanten in De Ronde Venen, Wilnis, Vinkeveen, Utrecht en daarbuiten (remote werkbaar tot wereldwijd). Geen aparte facturen voor share-card-setup — zit standaard erbij.

Veelgestelde vragen

Verder lezen