Johannes Baas 28 Aug - 3 minuten lezen

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.