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.

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.


Andere blogartikelen

  • Waarom developers het zo leuk vinden bij ons

    Geschreven door: op woensdag 13 november 2019

    Bij ons op kantoor werkt een team van betrokken specialisten, waaronder 4 backend developers en 4 UX developers. Zij zorgen voor een belangrijk fundament binnen dit bedrijf. Een goede reden om te zorg ...

    Bekijk het artikel »
  • Beachvolleyballen voor het goede doel!

    Geschreven door: op vrijdag 25 oktober 2019

    Afgelopen vrijdag 11 oktober  hebben diverse betrokken specialisten uit ons team de handen ineen geslagen met een van onze opdrachtgevers. Samen met De Monchy International B.V. hebben we meegeda ...

    Bekijk het artikel »
  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten