Waarvoor zijn social media-snippets nodig op een site?
Veel sites hebben tegenwoordig social share-knoppen waarmee pagina’s gemakkelijk gedeeld kunnen worden. De meeste social media kanalen bieden een visuele manier om gedeelde pagina’s te tonen, alleen hier zijn specifieke snippets voor nodig. In deze blog zullen de drie meest gebruikte kanalen toegelicht worden.
Er zijn verschillende manieren om een pagina op Facebook te delen. Om dit visueel aantrekkelijker te maken moet er gebruik gemaakt worden van “Open Graph”. Wanneer de volgende “tags” binnen de <head>-tag worden toegevoegd, zal er meer informatie getoond worden.
<meta property="og:type" content="website" />
<meta property="og:url" content="[URL VAN DE PAGINA]" />
<meta property="og:title" content="[TITEL VAN DE PAGINA] " />
<meta property="og:image" content="[DE LINK NAAR DE AFBEELDING DIE GETOOND MOET WORDEN] " />
<meta property="og:description" content="[OMSCHRIJVING VAN DE PAGINA]" />
Hieronder staan een voorbeeld hoe de facebook share eruit ziet met en zonder de Open Graph-tags.
Site zonder Open Graph delen (https://www.wehkamp.nl/):
Site met Open Graph delen (https://sigmasolutions.nl/):
Zoals in de afbeeldingen te zien bevat de afbeelding van Wehkamp geen titel en geen beschrijving in tegenstelling tot de afbeelding van Sigma Solutions. In de volgende afbeelding is de Open Graph-code te zien die op sigmasolutions.nl wordt gebruikt.
Via de volgende link kan nagekeken worden of een site de (juiste) Open Graph tags bevat:
https://developers.facebook.com/tools/debug/sharing/
Twitter maakt gebruik van dezelfde functionaliteit als Facebook alleen zijn hier weer andere code voor nodig. Hoewel Twitter gebruik maakt van Open Graph, wordt er ook gebruik gemaakt van de “twitter:card”.
Wanneer er alleen gebruik gemaakt wordt van de twitter-snippet moet de volgende code toegevoegd worden:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="[GEBRUIKERSNAAM VAN SITE OP TWITTER]" />
<meta name="twitter:title" content="[TITEL VAN SITE OF PAGINA]" />
<meta name="twitter:description" content="[OMSCHRIJVING VAN DE PAGINA]" />
<meta name="twitter:image" content="[DE LINK NAAR DE AFBEELDING DIE GETOOND MOET WORDEN]" />
Wanneer de Open Graph al is toegevoegd aan de site, hoeft alleen de volgende regel toegevoegd te worden om de site goed te tonen in de twitter-card.
<meta name="twitter:card" content="summary" />
Ook de twitter-card kan gecontroleerd worden of deze goed werkt op de site. Via de volgende link kan de site gecheckt worden: https://cards-dev.twitter.com/validator.
Wanneer de twitter card goed geïmplementeerd is wordt het volgende scherm getoond.
Als laatste wordt er tegenwoordig vaker pagina’s gedeeld via LinkedIn. LinkedIn met net zoals Facebook gebruik van de Open Graph-tags. De volgende tags zijn van belang om een pagina op een visuele manier te kunnen delen:
- og:title
- og:image
- og:description
- og:url
Het is dus gunstig om social share-snippets te activeren op een site. Wanneer Open Graph is toegevoegd op een site is er al veel mogelijk wanneer gebruikers de site willen delen. Door het toevoegen van één regel extra toe te voegen werkt het delen ook goed voor Twitter.
Andere blogartikelen
