Iedereen wil dat zijn content opvalt, eruit springt, getuige daarvan zijn de hoge marketingbudgetten binnen een bedrijf. Toch zijn er een paar zaken die goedkoop (of zelfs gratis) te implementeren zijn en je zichtbaarheid een niet te verwaarlozen boost geven. Een van deze zaken is de implementatie van Open Graph data op je website.
Wanneer je je website deelt op social media, hoe ziet de weergave er dan precies uit? Grote kans dat het er als volgt uitziet:
Weinig indrukwekkend. De link nodigt niet meteen uit tot klikken. Vergelijk dit nu even met deze weergave:
De tweede weergave slaagt er al veel beter in om je aandacht te grijpen. De kans dat iemand op de link klikt, is veel groter bij de tweede weergave.
Wat is het verschil tussen deze twee weergaves? Bij de tweede weergave (met de foto) werd er Open Graph data toegevoegd aan de website.
Velen vergeten deze Open Graph tags toe te voegen aan hun website, maak dus van de gelegenheid gebruik om je te onderscheiden!
Telkens wanneer er een link naar je website wordt wordt gedeeld op een sociaal netwerk, gaat het platform de link ‘verpakken’ in een rich object. Denk maar aan de kaders die je ziet met een titel, beschrijving en een foto. Vaak wordt onterecht gedacht dat je geen inspraak hebt op welke foto en tekst hiervoor wordt gebruikt. Het goede nieuws is dat je perfect zelf kan definiëren welke inhoud wordt getoond in je rich snippet. Het betere nieuws is dat de implementatie een behoorlijk gering taakje is!
Welke afbeelding wordt gebruikt in social media shares?
In de praktijk zal je vaak de eerste afbeelding van een artikel zien terugkomen als afbeelding in een rich snippet. Dit is echter niet de eerste plaats waar het social media platform gaat zoeken. Het platform scant de code van je pagina op zoek naar open graph tags.
In deze tags wordt expliciet opgegeven welke afbeelding, titel en beschrijving sociale netwerken moeten gebruiken bij het visualiseren van je links.
Wat gebeurt er als je deze open graph informatie niet opgeeft? In het beste geval wordt er geen afbeelding getoond, in het slechtste geval wordt er een irrelevante afbeelding getoond. Uiteraard wil je liever niets aan het toeval overlaten en zelf een afbeelding instellen die getoond moet worden.
Hoe kan ik Open Graph toevoegen aan mijn website?
6 regels code zijn voldoende om Open Graph toe te voegen aan een pagina op je website. Gebruik je WordPress? Dan kan je al deze tekst overslaan en meteen verderscrollen naar het einde van het artikel! #feelsgoodman
We beginnen eenvoudig, voeg dit attribuut toe aan je <html>-tag:
<html prefix=”og: http://ogp.me/ns#" lang=”nl”>
Voeg deze code toe aan de head-sectie van elke pagina die je wil voorzien van Open Graph data:
<meta property=”og:title” content=”Yeti Media | We believe in it.”/>
<meta property=”og:description” content=”Yeti Media wil bedrijven naar een hoger niveau tillen door in te zetten op state-of-the-art gebruiksvriendelijke websites. Met onze unieke aanpak en onstilbare honger naar kwaliteit willen we onze pootafdruk nalaten op het wereldwijde web.”/>
<meta property=”og:type” content=”website”/><meta property="og:url" content="http://yeti.media" /><meta property=”og:image” content=”http://yeti.media/assets/images/og-logo.png"/>
Volgende zaken dien je aan te passen in de code:
og:title → De titel van de pagina. In het Yeti Media voorbeeld wordt deze in de rich snippet vet gedrukt weergegeven onder de afbeelding.
og:type → Hiermee geef je aan wat voor content er precies gedeeld wordt. Je kan hier niet zomaar wat ingeven, maar dient te kiezen uit een lijst met mogelijke opties. Meestal ga je hier kiezen voor de optie website of article.
og:image → De locatie waar de afbeelding te vinden is. Gebruik een volledige url (inclusief http:// of https://).
og:url → De url van de pagina waar het open graph object naar verwijst. Merk op dat het geen goed idee is om relatieve url’s te gebruiken. Geef de volledige url op, inclusief http:// (of https://).
og: description → Een beschrijving van de pagina. Deze beschrijving wordt in de rich snippet getoond onder de titel. Deze tag is eigenlijk optioneel, maar is toch zo belangrijk dat hij eigenlijk verplicht zou moeten zijn. Het is namelijk deze tekst (in een of twee korte zinnetjes) die de bezoeker over de brug kan halen om op de link te klikken. Persuasieve tekst gebruiken is hier de boodschap.
De totale Open Graph code op de Yeti Media website ziet er bijvoorbeeld als volgt uit. Probeer dezelfde structuur en positionering van de code te hanteren:
<!DOCTYPE html>
<html lang=”nl” prefix=”og: http://ogp.me/ns#">
<head>
<title>Yeti Media</title>
<meta charset=”utf-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<!-- Twitter cards -->
<meta name=”twitter:card” content=”summary_large_image” />
<meta name=”twitter:site” content=”@yetimedia_be” />
<meta name=”twitter:creator” content=”@yetimedia_be” />
<meta name=”twitter:title” content=”Yeti Media | We believe in it.” />
<meta name=”twitter:description” content=”Yeti Media wil bedrijven naar een hoger niveau tillen door in te zetten op state-of-the-art gebruiksvriendelijke websites. Met onze unieke aanpak en onstilbare honger naar kwaliteit willen we onze pootafdruk nalaten op het wereldwijde web.” />
<!-- Open Graph -->
<meta property=”og:title” content=’Yeti Media | We believe in it’ />
<meta property=”og:type” content=“website” />
<meta property=”og:url” content=“http://yeti.media“ /> <meta property=”og:image" content=”http://yeti.media/assets/images/og-logo.png" />
<meta property=”og:description” content=’Yeti Media wil bedrijven naar een hoger niveau tillen door in te zetten op state-of-the-art gebruiksvriendelijke websites. Met onze unieke aanpak en onstilbare honger naar kwaliteit willen we onze pootafdruk nalaten op het wereldwijde web.’/>
Dankzij de Open Graph tags die je net hebt toegevoegd, zullen je posts er veel professioneler en aantrekkelijker uitzien op sociale platformen die het Open Graph systeem gebruiken (zoals Facebook, LinkedIn, Google+en zelfs Twitter valt erop terug als er geen Twitter Cards code gevonden werd, zie hieronder).
Uitbreiding: Twitter Cards
Nu je toch de code van je website voor je hebt staan, kan je evengoed meteen de rich snippets voor een Tweet optimaliseren. De vereiste Twitter tags zijn gebaseerd op de Open Graph tags dus je zal je meteen thuis voelen. Onderstaande tags kan je toevoegen tussen de <head>-sectie van je website om visueel rijke Twitter cards te krijgen bij het tweeten van een link:
<meta name=”twitter:card” content=”summary_large_image” />
<meta name=”twitter:site” content=”@yetimedia_be” />
<meta name=”twitter:creator” content=”@yetimedia_be” />
<meta name=”twitter:title” content=”Yeti Media | We believe in it.” />
<meta name=”twitter:description” content=”Yeti Media wil bedrijven naar een hoger niveau tillen door in te zetten op state-of-the-art gebruiksvriendelijke websites. Met onze unieke aanpak en onstilbare honger naar kwaliteit willen we onze pootafdruk nalaten op het wereldwijde web.” />
twitter:card → Hiermee kan je instellen hoe je Twitter card er precies moet uitzien. De optie summary_large_image zal een grote afbeelding tonen waardoor je extra opvalt. Raadpleeg de Twitter website voor meer mogelijke opties.
twitter:site (optioneel)→ Twitter handle van de website.
twitter:creator (optioneel) → Twitter handle van de auteur.
twitter:description → De korte tekst die onder de afbeelding komt. Probeer ook om hier persuasieve copywriting te gebruiken zodat de kans op een klik groter wordt.
Meten is weten: test je Open Graph uit
Om uit te testen hoe je Open Graph er precies uitziet hoef je gelukkig niet een random persoon te spammen in Facebook Messenger of Tweets uit te sturen. Facebook biedt een handige debugger tool aan die de implementatie van je Open Graph code kritisch aan de tand voelt. Twitter voorziet ook een dergelijke preview tool aan waarmee je de weergave alvast kan controleren.
Wat met WordPress blogs?
Uiteraard wil je niet voor alle blogberichten dezelfde afbeelding en beschrijving tonen. Het is natuurlijk een veel betere tactiek om voor elk specifiek blogbericht een relevante afbeelding te selecteren die wordt gebruikt als Open Graph object.
Voor WordPress volstaat het om de Yoast SEO plugin te installeren (die je eigenlijk sowieso al zou moeten hebben op je website). Vervolgens kan je voor afzonderlijke pagina’s en posts de Open Graph data instellen.
Mensen die geen statische pagina gebruiken voor hun WordPress homepage, vragen zich waarschijnlijk nu af waar ze deze Open Graph data alsnog kunnen ingeven. Dit kan door in het SEO-menu te navigeren naar ‘Social’. Wie een statische voorpagina gebruikt, kan de open Open Graph tags opgeven door te navigeren naar het edit-scherm van de pagina.
Laat een reactie achter