Integreer Open Graph tags in je website
Johannes Baas

Johannes Baas

Integreer Open Graph tags in je website

Een klant wil graag zijn vacatures van zijn website delen op LinkedIn. Je denkt misschien: 'Dat is toch een kwestie van een link plaatsen?'. Echter kiest LinkedIn dan random informatie van je website en deze klant wilde graag specifieke content weergeven in zijn post. Daarom hebben we Open Graph geïntegreerd. Na het lezen van deze blog kun jij dat ook.

Wat is Open Graph?

Open Graph zorgt ervoor dat data op een webpagina gestructureerd wordt aangeboden, zodat sociale media websites zoals LinkedIn, maar ook Facebook het uit kunnen lezen. Open Graph doet daarmee hetzelfde als wat schema.org doet met je data, maar dan meer gericht op social media. Lees hier onze blog over Schema.org data in je Plate-website.

Hoe krijg je Open Graph in je website?

Op http://ogp.me/ vind je de meta tags die je in je website kunt plaatsen. Voor LinkedIn gebruiken we de onderstaande tags, die in de <head>-sectie moeten komen te staan:

	<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />

Open het thema van je website en ga naar je theme.plate of head.plate bestand. Pas nu de meta tags aan om ervoor te zorgen dat ze de juiste gegevens naar boven halen, zodra je link gedeeld wordt. Hieronder zie je een voorbeeld van een implementatie van de meta tags in een Plate-website:

	<meta property="og:title" content="{{ post.title }}" />
<meta property="og:description" content="{{ post.description }}" />
<meta property="og:url" content="{{ request.fullpath }}" />
{% if post.highlighted_image %}<meta property="og:image" content="{{ post.highlighted_image | img_url: 552, height: 368, mode: 'crop'}}" />{% endif %}

Voor og:title halen we de titel van een pagina (post) op, voor og:description de beschrijving die op de pagina wordt ingevuld. Met {{ request.fullpath }} wordt de volledige URL van een post opgehaald.

Voor de image kiezen we voor de ideale verhouding van een LinkedIn-post: 552 x 368 pixels. In Plate realiseer je dit met het img_url filter.

We voegen nog een if statement toe, om er zeker van te zijn dat er altijd een afbeelding wordt getoond in de OGP-tag.

Wil je testen hoe je URL op LinkedIn wordt weergegeven, gebruik dan de Post Inspector van LinkedIn.

Nieuws

Meer nieuws
Cybersecurity-lessen vanuit de praktijk

Cybersecurity-lessen vanuit de praktijk


David Kortleven - 4 min. lezen

Co-founder Kobus neemt afscheid van Plate

Co-founder Kobus neemt afscheid van Plate


Johannes Baas - 1 min. lezen

Nieuwe feature: groepeer content velden

Nieuwe feature: groepeer content velden


Kobus Post - 5 min. lezen

Nieuwe feature release: Plate Payments

Nieuwe feature release: Plate Payments


David Kortleven - 3 min. lezen

Fijne feestdagen 🎄 en een gezond 2023!

Fijne feestdagen 🎄 en een gezond 2023!


Johannes Baas - 1 min. lezen

Hoe bereken je Return on Content (ROI)?

Hoe bereken je Return on Content (ROI)?


Pieter Versloot - 14 min. lezen

Plate in actie zien?

Neem contact op voor een gratis adviesgesprek