Waarvoor zijn social media-snippets nodig op een site?

Geschreven door: op donderdag 30 maart 2017

Leestijd:

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.

Facebook

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/):
facebook-share-wehkamp.png

Site met Open Graph delen (https://sigmasolutions.nl/):
facebook-share-sigma-solutions.png

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.

open-graph-code-sigma-solutions.png

Via de volgende link kan nagekeken worden of een site de (juiste) Open Graph tags bevat:
https://developers.facebook.com/tools/debug/sharing/

Twitter

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.
twitter-share-sigma-solutions.png

LinkedIn

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.


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
allrig.jpg
aliancys.jpg
eriks.jpg
heinen_en_hopman.jpg
handicare_stairlifts.jpg
Onze Middelen en Technologieën
Microsoft partner
Adobe partner
Asp dotnet
Google analytics
Google adwords
TelefoonE-mail