Open Graph-meta tags: wat je moet weten

Do you want people to notice your social media posts?

Elke dag verschijnen er meer dan 4 miljoen blogposts, dus het is essentieel dat je je werk op sociale media deelt. Open Graph is een van de belangrijkste onderdelen om je bereik te vergroten.

Not all folks have known about the importance of Open Graph. What is it anyway? How can it help you get noticed?

What is Open Graph?

Open Graph-tags, net als metabeschrijvingen en meta-titels, bepalen hoe URL's worden weergegeven wanneer je ze deelt op sociale media.

Dankzij het Open Graph-project van Facebook kun je paginainhoud op sociale netwerken eenvoudiger definiëren, omdat het sociale informatie tussen websites standaardiseert.

Deze tags geven sociale netwerkdiensten in de head van een webpagina informatie zoals de paginatitel, -beschrijving en uitgelichte afbeelding. Zo blijft de getoonde informatie consistent en authentiek.

Why use Open Graph?

Open Graph is supported in various social networks such as:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

According to Google, the protocol improves “Recommended Content Blocks.”

What happens if Open Graph is not used?

Als Facebook niet zeker weet welke afbeelding het in de voorvertoning moet tonen, selecteert het zomaar een afbeelding — soms zelfs een advertentiebanner of iets uit je header.

As a result, Facebook is unable to determine which sections of the preview to display.

• Open Graph creates previews for social media-related websites.
• Open Graph tags help individuals locate material in social feeds, which leads to increased site visits.

Hoe hoger je content op een webpagina staat, hoe meer aandacht het krijgt terwijl bezoekers naar beneden scrollen. Zo krijgen bezoekers alvast een voorproefje voordat ze klikken.

Use OG tags to help people locate your material on Facebook and other social media platforms.

OG-meta-elementen genereren een snippet wanneer je URL's deelt in privégesprekken op sites die het Open Graph-protocol ondersteunen.

The significance of Open Graph protocol for your business

Het Open Graph-protocol van Facebook maakt dit type interactie eenvoudig. Open Graph-markup is een methode om previewgegevens te organiseren en te volgen. Daarmee heb je volledige controle over hoe je content op andere sociale netwerken wordt weergegeven.

Rich graph-objecten vergemakkelijken integratie en delen de standaardkenmerken van Facebook. Facebook controleert de informatiestroom van externe bronnen (of van 'likes', enz.). Die informatie geven Open Graph meta tags mee in de header van een website.

Omdat veel mensen een pagina via sociale media bezoeken, zijn Open Graph-tags belangrijker dan ooit. De CTR kan stijgen wanneer de weergave in zoekresultaten verbetert. Open Graph maakt delen op sociale media eenvoudiger. Veel sociale netwerksites ondersteunen Open Graph. De Open Graph-tags van Twitter/X zijn een goed voorbeeld; Twitter/X ondersteunt Open Graph.

What exactly does this mean?

Waarom zou je je server-side content van Open Graph-tags voorzien? Kunnen die extra tags de prestaties van je website verbeteren en meer bezoekers aantrekken? Dit zijn redenen waarom wij geloven dat Open Graph een groot verschil kan maken.

Most prominent social networks utilize open graph tags

Heb je geen tijd om HTML te leren? Gebruik dan Facebook Open Graph-tags. Daarmee stel je de titels, beschrijvingen en afbeeldingen in die op alle belangrijke sociale netwerken verschijnen.

Open Graph tags are indeed for social media

Open Graph is ontworpen om voorbeeldweergaven van informatie in sociale netwerken te tonen. Het organiseert informatie op manieren die verder gaan dan alleen het delen van een webpagina.

Feature optimized image

Je kunt Open Graph-tags gebruiken om te bepalen welke afbeelding in de preview op social media verschijnt. Je hoeft niet de standaardafbeelding te gebruiken. Mensen klikken sneller op links naar je blogpost of website als die er aantrekkelijk uitzien.

It is about social previews, not search previews

Zowel zoekmachineoptimalisatie (SEO) als social media marketing zijn cruciaal, maar ze vragen elk een andere aanpak. Open Graph-componenten losten een oud SEO-probleem op: voorvertoningen van berichten op sociale netwerken hadden onaantrekkelijke titels en beschrijvingen.

Zorg dat de pagetitel, metabeschrijvingen, Open Graph-titel en -beschrijving, URL en afbeeldingstags allemaal uniek zijn om je content te optimaliseren voor zoekmachines en social media.

You have control on your material

Of je je content zelf plaatst of door iemand anders laat plaatsen, jij hebt volledige controle over hoe het op social media verschijnt.

Zelfs als je elke socialmediapost personaliseert, negeren de meeste bezoekers de voorvertoning. Bezoekers die wél je content delen, doen dat met een zorgvuldig gekozen afbeelding, titel en beschrijving — mits je Open Graph-tags zo goed mogelijk zijn. Dat is belangrijk, want zo bepaal je precies welke informatie er over je bedrijf verspreid wordt.

Types of Open Graph tags

Open Graph-tags zoals og:title, og:image, og:type en og:url zorgen ervoor dat sociale netwerken je informatie kunnen weergeven. Je moet deze cruciale tags gebruiken, maar je kunt gerust ook andere tags toevoegen.

A Facebook screenshot containing connections to the components og:image, og:url, og:title, and og:description.

og:site_name

De og:site_name-tag moet de domeinnaam bevatten waarop je content te vinden is. Zo vervangt deze de merknaam die anders in de meta title zou staan en daarom niet in de og:title-tag mag voorkomen.

De og:site_name-tag moet de naam van je site of merk bevatten, terwijl de og:title-tag de titel van je artikel moet bevatten.

og:site_name Code <meta property="og:site_name" content="Your Site Name" />

Use the same site name tag across your whole website.

og:title

Gebruik de og:title-tag om de paginatitel in te stellen. Het werkt vergelijkbaar met hoe meta titles in SEO worden gebruikt. Gebruik je een bestaande meta title, houd de og:title-tag vrij van content die specifiek is voor je merk of website.

og:title Code <meta property="og:title" content="Title" />

Zorg dat deze tag op elke pagina van je website staat die een gebruiker zou willen delen op Facebook, Twitter/X of een andere sociale netwerksite.

Keep the title between 40 and 50 characters long; else, it will be chopped off.

If you want more people to visit your website, the title must do more than simply describe it.

In tegenstelling tot metatitels voor zoekmachines moet je je domeinnaam of andere informatie die jou kan identificeren niet opnemen.

og:type

Gebruik de og:type tag om het type materiaal dat je deelt aan te geven. Zo laat je het sociale netwerk weten welk soort content het is, bijvoorbeeld een blogpost, webpagina, video of audiobestand.

og:type Code <meta property="og:type" content="article" />

Use the article object type for information that requires explanation, such as blog posts.

Add the website type to the website’s other pages.

Gebruik het juiste bestandsformaat wanneer je een bestand wilt overdragen dat zowel tekst als audio of video bevat. Op deze pagina vind je een lijst van alle Object Categories.

og:locale

De og:locale-tag geeft aan in welke taal de gedeelde content is geschreven. Je moet gebruikers van sociale netwerken erop wijzen dat content op websites in meerdere talen zichtbaar kan zijn.

og:locale Code <meta property="og:locale" content="en_GB" />

Facebook gaat ervan uit dat alles zonder og:locale-tag in Amerikaans Engels is geschreven. Als je een website in de Verenigde Staten hebt die volledig uit Engelstalige content bestaat, kun je die tag (en_US) gerust weglaten.

Is je content in een andere taal dan Amerikaans Engels geschreven? Gebruik dan de juiste OG tag.

og:url

Simply use the og:url tag to specify where you wish to publish the content.

og:url Code <meta property="og:url" content="https://www.yourdomain.com/title.html" />

This tag must provide the page’s canonical URL.

og:description

De tekst in de og:description-tag moet kort, helder en zo aantrekkelijk mogelijk zijn om lezers naar je website te trekken.

Je mag de informatie hergebruiken zolang die relevant is; zoekmachines gebruiken namelijk een vergelijkbare tag.

og:description Code <meta property="og:description" content="Your description." />

Houd je beschrijving tussen de 50 en 100 tekens. Facebook-berichten moeten tussen de 2 en 4 woorden zijn; berichten langer dan 4 woorden worden vaker verwijderd.

Wil je zoveel mogelijk klikken en aandacht voor het materiaal dat je aanbiedt, maak dan je beschrijving zo gedetailleerd en overtuigend mogelijk.

og:image

Geef via het og:image-element de URL van de afbeelding op die je in de social excerpt wilt gebruiken. Kies een afbeelding die zowel intrigerend als direct relevant is voor de inhoud van het artikel om de kans te vergroten dat mensen doorklikken naar je website.

Dit OG-element werkt op dezelfde manier als image schema markup, dat zoekmachines gebruiken om rich results te tonen.

og:image Code <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Wil je dat deelbare pagina's van je website hoger scoren in image SEO? Gebruik opvallende foto's die bij je branding passen. Zelfs als je verwacht dat mensen een pagina niet vaak zullen delen, is het slim om er je logo op te zetten — voor het geval iemand het later toch deelt.

Om te voorkomen dat je originele afbeelding pixelig of van lage kwaliteit oogt, moet deze een beeldverhouding van 1.91:1 hebben en een resolutie van minimaal 1200 x 630 pixels.

Met de og:image:width- en og:image:height-tags verschijnen eerder gedeelde afbeeldingen correct. Installeer Yoast op je WordPress-site als je dat nog niet hebt; Yoast voegt ze dan automatisch toe. Als je Yoast nog niet hebt geïnstalleerd, vind je hieronder de code:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Add Open Graph to WordPress

Het toevoegen van OG-tags aan WordPress is de makkelijkste, meest voorkomende en eenvoudigste manier om dit te doen, en kan met de Yoast SEO-plugin. Deze plugin zou al geïnstalleerd moeten zijn als je site zo is opgezet dat zoekmachines hem makkelijk kunnen vinden.

Update the page or article where Open Graph should be inserted using Yoast SEO’s “social” option.

Fill in the og:image, og:title, and og:description boxes on the Facebook accordion.

Yoast stelt de og:url-tag, de Twitter/X Card en de afbeeldingsformaten voor je in. Als je Yoast niet expliciet een specifieke afbeelding aanwijst, gebruikt het de hoofdafbeelding van het bericht.

Als je je website deelt, verschijnt er standaard geen afbeelding. Je kunt dit aanpassen door een screenshot van de hele site te uploaden. Deze fout ontstaat wanneer de afbeeldings-URL geen og:image tag bevat.

On Yoast’s main settings page, you may select the sitewide og:image.

Adding OG tags in your WordPress blog is really easy. You just need to go to:

WordPress Sidebar : Yoast>Social>Facebook.

Schakel de schakelaar om en sla daarna de bestaande afbeelding op. We vinden dat je een logo moet selecteren. Dat kun je ook doen voor Twitter/X en Pinterest.

Add Open Graph manually

If you know how to code and aren’t utilizing one of the previous systems, OG tags are simple to install.

You can copy and paste the content below onto your website, but please modify it to suit your needs.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Testing your Open Graph meta tags

Let’s assume you’ve understood how to include an Open Graph onto your website.

Als je website correct is geclassificeerd, ziet hij er uitstekend uit wanneer je hem op social media deelt. Test altijd je werk voordat je het publiceert.

Before you share a URL, double-check that your OG tags are being pulled through and shown appropriately.

These tools may be useful for testing your OG tags:

• Pinterest Rich Pins Validator
• Twitter/X Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector

Voer een URL in bij een van deze tools om de originele metatags te bekijken. Als je de URL deelt, krijg je direct een indruk van hoe die voor anderen verschijnt.

Controleer de preview-afbeelding, titel en beschrijving voordat je verdergaat. Je kunt meldingen ontvangen over tags die je niet nodig hebt; die kun je toevoegen of negeren.

Als de URL-test faalt, probeer het opnieuw met een andere tag. Controleer of elke tool werkt door de bijbehorende URL te bezoeken. Je kunt erover chatten zodra het klaar is.

Verdict

Het is essentieel dat je controle houdt over wat je op social media deelt. Je krijgt meer verkeer en hogere conversieratio's wanneer Open Graph rijke voorvertoningen toont. Begin met één enkele blogpost. Zodra je het resultaat ziet, wordt het veel makkelijker om in de toekomst Open Graph-tags in je volgende posts toe te passen.

Frequently asked questions