Het Open Graph-protocol (OG) is een set meta-tags die oorspronkelijk in 2010 door Facebook is gemaakt. Deze tags bevinden zich in de <head> van uw HTML en vertellen sociale-mediaplatforms precies hoe ze uw inhoud moeten weergeven wanneer iemand een link deelt. Zonder deze tags proberen platforms een voorbeeld samen te stellen op basis van wat ze op de pagina kunnen vinden, en het resultaat is meestal niet geweldig.
Waar Open Graph-tags in de praktijk verschijnen
Wanneer iemand een link plakt in Facebook, LinkedIn, WhatsApp, Telegram, Slack of Discord, haalt het platform de pagina op en leest het de OG-tags. Die tags bepalen de voorbeeldtitel, beschrijving en afbeelding die in het bericht of de berichtweergave verschijnen. Dit voorbeeld is vaak de eerste indruk die mensen van uw inhoud krijgen, dus het is belangrijk om dit te beheersen. Een link met een duidelijke afbeelding en een aansprekende titel krijgt aanzienlijk meer kliks dan een link met een kapotte miniatuur of een algemene beschrijving die uit de paginavoettekst is gehaald.
Vereiste versus optionele Open Graph-tags
De Open Graph-specificatie definieert vier vereiste eigenschappen:
og:title: de titel van uw inhoud zoals deze in het sociale voorbeeld moet verschijnen.og:type: het type inhoud. Standaard "website" als deze wordt weggelaten.og:image: de URL van de afbeelding die in het voorbeeld moet worden weergegeven.og:url: de canonieke URL van de pagina.
Daarnaast worden enkele optionele tags vaak gebruikt:
og:description: een samenvatting van een tot twee zinnen van de pagina.og:site_name: de naam van uw algemene website (bijv. "InspectWP").og:locale: de taal en het gebied (bijv.en_US,nl_NL).og:video: een URL naar een videobestand dat bij de inhoud hoort.
De waarden van og:type begrijpen
De tag og:type vertelt platforms welk soort inhoud de pagina vertegenwoordigt. De meest voorkomende waarden zijn:
- website: gebruik deze voor uw homepage en algemene pagina's. Dit is de standaard als er geen type is opgegeven.
- article: gebruik deze voor blogberichten, nieuwsartikelen en alle geschreven inhoud met een publicatiedatum. Dit type ontgrendelt extra tags zoals
article:published_time,article:authorenarticle:section. - product: gebruikt door e-commerce-sites om producten te beschrijven. Ondersteunt tags zoals
product:price:amountenproduct:price:currency. - profile: voor pagina's die een persoon vertegenwoordigen. Ondersteunt
profile:first_nameenprofile:last_name.
Vereisten en best practices voor og:image
De voorbeeldafbeelding is het visueel meest prominente onderdeel van een sociale share, dus het is belangrijk om dit goed te doen. Hier zijn de specificaties:
- Minimumgrootte: Facebook adviseert ten minste 1200 x 630 pixels voor schermen met hoge resolutie. Afbeeldingen kleiner dan 600 x 315 pixels worden mogelijk niet correct weergegeven of verschijnen als een kleine miniatuur in plaats van een grote kaart.
- Beeldverhouding: 1,91:1 is de standaard voor grote linkvoorbeelden op de meeste platforms. Vierkante afbeeldingen (1:1) werken ook, maar produceren een andere indeling.
- Bestandsgrootte: houd afbeeldingen onder 8 MB. Facebook en LinkedIn kunnen langzaam zijn bij het renderen van zeer grote afbeeldingen.
- Formaat: JPEG en PNG worden universeel ondersteund. WebP werkt op sommige platforms, maar niet op alle.
- Gebruik altijd absolute URL's: de afbeeldings-URL moet beginnen met
https://. Relatieve paden werken niet, omdat het sociale platform de afbeelding van zijn eigen servers ophaalt.
Hoe de Facebook Sharing Debugger werkt
Facebook cachet uw OG-gegevens agressief. Als u uw OG-tags bijwerkt, kan het oude voorbeeld nog steeds worden weergegeven wanneer iemand uw link deelt. Met de Facebook Sharing Debugger (developers.facebook.com/tools/debug/) kunt u een URL invoeren en precies zien wat Facebook ervan leest. U kunt op "Scrape Again" klikken om Facebook te dwingen de pagina opnieuw op te halen en de cache bij te werken. Deze tool is ook waardevol voor het oplossen van problemen zoals ontbrekende afbeeldingen, onjuiste titels of tags die niet correct worden geparseerd. LinkedIn heeft een vergelijkbare tool genaamd Post Inspector.
Open Graph en Twitter Cards
Twitter (nu X) ontwikkelde zijn eigen meta-tagsysteem genaamd Twitter Cards. Twitter Card-tags gebruiken het attribuut name in plaats van property:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />Het goede nieuws is dat Twitter terugvalt op Open Graph-tags wanneer Twitter Card-tags ontbreken. Dus als u og:title hebt maar geen twitter:title, gebruikt Twitter de OG-titel. De tag twitter:card zelf heeft echter geen OG-equivalent, dus u moet altijd ten minste deze ene Twitter-specifieke tag opnemen. Door deze in te stellen op summary_large_image wordt het visueel meest aantrekkelijke voorbeeld geproduceerd, met een grote afbeelding boven de tekst.
WordPress en het genereren van Open Graph-tags
WordPress core bevat standaard geen Open Graph-tags. U hebt een plug-in nodig om ze toe te voegen. De populairste opties zijn:
- Yoast SEO: genereert automatisch alle essentiële OG-tags op basis van de berichttitel, samenvatting en uitgelichte afbeelding. Hiermee kunt u OG-titel, -beschrijving en -afbeelding per bericht overschrijven via het tabblad "Sociaal" in de editor. Genereert ook Twitter Card-tags.
- Rank Math: vergelijkbaar met Yoast met automatische OG-generatie en overschrijvingen per bericht. Bevat een functie voor sociale voorbeelden die laat zien hoe het bericht eruitziet wanneer het wordt gedeeld.
- The SEO Framework: een lichtgewicht alternatief dat OG- en Twitter-tags genereert met minimale opzet. Minder configuratiemogelijkheden, maar solide standaardinstellingen.
Als u een paginabouwer zoals Elementor of een cachingplug-in gebruikt, zorg er dan voor dat de OG-tags aanwezig zijn in de gecachete HTML-uitvoer. Sommige agressieve cachingopstellingen kunnen meta-tags uit het <head>-gedeelte verwijderen.
WooCommerce-product Open Graph-tags
Voor WooCommerce-winkels worden OG-tags nog belangrijker, omdat productvoorbeelden direct van invloed zijn op aankoopbeslissingen. Een goed geconfigureerde productpagina moet og:type ingesteld hebben op "product", samen met de productnaam als titel, een aansprekende beschrijving en de hoofdproductafbeelding. SEO-plug-ins zoals Yoast WooCommerce SEO of Rank Math kunnen deze automatisch genereren. De productprijs en beschikbaarheid kunnen ook worden opgenomen via aanvullende OG-tags, die sommige platforms in het voorbeeld weergeven.
Veelvoorkomende Open Graph-fouten
- Verkeerde afbeeldingsgrootte: het gebruik van een afbeelding kleiner dan 600 x 315 pixels resulteert in een kleine miniatuur in plaats van een grote kaartvoorbeeldweergave. Gebruik altijd de aanbevolen 1200 x 630 pixels.
- Ontbrekende og:image-tag: zonder een afbeeldingstag tonen platforms ofwel geen afbeelding, ofwel kiezen ze een willekeurige afbeelding van de pagina, wat een zijbalkadvertentie of een logo kan zijn dat er als voorbeeld vreselijk uitziet.
- Relatieve URL's: alle OG-URL's moeten absoluut zijn.
/images/foto.jpgwerkt niet; het moethttps://example.com/images/foto.jpgzijn. - Dubbele OG-tags: het hebben van twee
og:title-tags op dezelfde pagina (bijvoorbeeld van twee verschillende plug-ins) veroorzaakt onvoorspelbaar gedrag. Controleer uw paginabron om er zeker van te zijn dat elke OG-tag slechts één keer voorkomt. - Niet testen na wijzigingen: OG-gegevens worden door sociale platforms gecachet. Wis na het bijwerken van tags altijd de cache met de Facebook Debugger of LinkedIn Post Inspector om te verifiëren dat de nieuwe tags werken.
Wat InspectWP controleert
InspectWP scant het <head>-gedeelte van uw pagina en rapporteert welke Open Graph- en Twitter Card-tags aanwezig zijn. Het toont de exacte waarden voor elke tag, waardoor het eenvoudig is om te verifiëren dat titels, beschrijvingen en afbeeldings-URL's correct zijn. Ontbrekende sociale-media-meta-tags worden gemarkeerd als een mogelijkheid voor SEO-verbetering, aangezien pagina's zonder OG-tags doorgaans minder betrokkenheid krijgen wanneer ze op sociale platforms worden gedeeld.