Written by on

Het optimaliseren van je content voor delen op social media wordt vaak vergeten bij het bouwen van een website, maar eigenlijk moet je hier altijd even rekening mee houden. Hiermee maak je het voor je bezoekers makkelijker om jouw website te delen op social media op de manier zoals jou voor ogen staat.

Je kunt dit doen door wat code aan je website toe te voegen, waarbij je dan termen tegenkomt als Open Graph Protocol, Twitter cards, Rich Pins, etcetera. Door dit te doen zullen de resultaten van je website op social media er een stuk beter uit komen te zien.

Het problem: Incorrect tonen van je website in social media

Waarschijnlijk ben je zelf al wel eens tegen dit probleem aangelopen: je wilt een link naar een leuke website posten op Facebook. Je plakt de link, en Facebook maakt direct een soort preview voor je van hoe het er uit komt te zien. Het probleem is dan vaak dat of de tekst of het plaatje, of allebei niet de items zijn die je zelf zou kiezen. In plaats van bijvoorbeeld het hoofdplaatje krijg je een plaatje uit de footer te zien, mogelijk zelfs een irrelevante reclame-banner. Kijk als voorbeeld eens naar deze site voor een hotel (het is trouwens eigenlijk een stichting die onderwijs in Nicaragua ondersteunt) www.hotelconcorazon.com. Als ik nu deze link deel wil ik eigenlijk graag het bovenste plaatje gedeeld zien. In plaats daarvan pakt Facebook een minder relevant plaatje wat lager op de pagina staat:

Hetzelfde probleem kun je ondervinden op andere social media, like als Twitter, Google+, Pinterest, etcetera. Gelukkig hebben deze netwerken intussen maatregelen getroffen om het probleem op te lossen:

Open Graph Protocol, Twitter Cards en meer

Facebook heeft het initiatief voor een oplossing genomen met het ontwikkelen van het Open Graph Protocol. Dit is al vrij snel de standaard geworden, en het wordt geaccepteerd door onder andere Twitter, Google+, Pinterest, Instagram, etcetera. Alle accepteren ze Open Graph tags als input voor het delen van links. Om het toe te passen moet je specifieke stukjes code aan de head-sectie van je HTML toevoegen volgens dit Open Graph protocol. Je beschrijft ermee welk plaatje, welke titel, welk stukje tekst, etcetera je wilt gebruiken om de link te delen. De complete documentatie hiervoor vind je op www.ogp.me. Op mijn eigen site ziet de betreffende code voor mijn pagina over Performance er dan zo uit:

<meta property="og:locale" content="en_GB" />
<meta property="og:title" content="Joomla SEO | Performance & Speed for Joomla" />
<meta property="og:description" content="Optimizing your Joomla website for speed and performance is not complicated. With a few tricks ......" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://joomlaseo.com/performance/" />

Handig is om de titel en het plaatje uit het Joomla artikel te halen en bv de beschrijving uit de metabeschrijving.

Joomla Hosting tip: Siteground

Joomlaseo.com laadt in 0.5 - 1 seconden en heeft een Pingdom score van 100%!!! Daarom bevelen we Siteground hosting aan. Snelle servers, goede support, gratis SSL, etc. En niet duur...

 

 

Ook al accepteert Twitter de Open Graph code,ze hebben intussen ook een eigen oplossing gebouwd: Twitter Cards, min of meer volgens hetzelfde principe. Pinterest heeft dan weer Rich Pins en Google+ accepteerd naast Open Graph ook schema.org metatags. Of je pagina voldoet aan de correcte syntax kun je op verschillende plekken checken:

Implementatie van social media metatags

Gelukkig kun je deze "sociale metatags" vrij makkelijk implementeren in je Joomla site met nuttige extensies, dus je hoeft dit niet allemaal zelf te coderen. Trouwens, als je al een SEF of SEO extensie gebruikt heeft deze mogelijk al de tags ingebakken. Een aantal goede opties zijn:

Na installatie en configuratie van een van deze plugins zouden je gedeelde linkjes op Facebook en Twitter er perfect uit moeten zien ;)shared on social media.