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
Plate in top 100 SaaS-bedrijven van Nederland

Plate in top 100 SaaS-bedrijven van Nederland


Pieter Versloot - 2 min. lezen

In memoriam: Nico van Dijck

In memoriam: Nico van Dijck


Johannes Baas - 2 min. lezen

Waarom is Content Governance belangrijk?

Waarom is Content Governance belangrijk?


Pieter Versloot - 37 min. lezen

Vergroot de internationale adoptie van je multisite door rekening te houden met culturele verschillen

Vergroot de internationale adoptie van je multisite door rekening te houden met culturele verschillen


Pieter Versloot - 4 min. lezen

Welke SEO strategie is het best bij meertalige websites?

Welke SEO strategie is het best bij meertalige websites?


Pieter Versloot - 8 min. lezen

Drie maanden SEO Challenge: Terugblik op de resultaten

Drie maanden SEO Challenge: Terugblik op de resultaten


Pieter Versloot - 3 min. lezen

Plate in actie zien?

Neem contact op voor een gratis adviesgesprek