Blog - Open Graph hands on gids.

1 maand geleden

Technisch

Socials

Wat is Open Graph?

Open Graph is een protocol dat veel sociale media platforms gebruiken om content te beschrijven en te delen middels tags.

Het stelt websites en apps in staat om hun gedeelde pagina's te 'verrijken' met metadata, zoals titel, omschrijving en afbeeldingen.

Open Graph maakt het delen van je kopje koffie op sociale media net iets meer met een duimpje omhoog!

Welke sociale media gebruikt Open Graph?

Facebook: Gebruikt OG-tags voor het weergeven van titels, afbeeldingen en beschrijvingen in gedeelde inhoud.
Twitter: Standaard ingesteld op Open Graph-tags wanneer Twitter Card-tags niet beschikbaar zijn.
LinkedIn: Maakt gebruik van Open Graph-tags voor het presenteren van gedeelde inhoud.
Pinterest: Maakt gebruik van Open Graph-tags voor gedetailleerde inhoudspresentatie, vooral pins en borden.
WhatsApp: Gebruikt Open Graph-tags voor het genereren van linkvoorbeelden.
Telegram: Gebruikt Open Graph voor voorbeelden van berichtlinks.
Slack: Creëert linkvoorbeelden in berichten met behulp van Open Graph-tags.

Instagram heeft geen support voor Open Graph, maar gebruik een eigen systeem om informatie uit de link te krijgen.
Zoekmachines: Gebruiken al lang Meta gegevens voor SERP resultaten, maar gebruiken de laatste jaren soms ook Open Graph-gegevens als aanvulling op de index.

Waarom heb je Open Graph tags nodig op je website?

Heb je geen Open Graph gedefinieerd op je site, zal bij het delen, iets "meest soortgelijk" gekozen worden. Zoals bijvoorbeeld vaak je <title> naar og:title vertaald wordt. In het geval van de titel, meestal niet zo'n probleem, maar in het geval van de afbeelding, gaat het lang niet altijd goed.

Zie hier hoe Facebook de OG tags van een OG-loze webpagina over wandelen in Coevorden probeert te lezen (ook wel scrapen genoemd). De afbeelding gekozen door het scrape systeem van Facebook, is in dit geval een vierkante hoogtekaart van Drenthe. Niet echt een relevante foto als het gaat om een stadswandeling in Coevorden. Terwijl er op de pagina zelf, genoeg foto's van de wandelroute op staan. Verder is de hoogtekaart een vierkante afbeelding, en vallen de boven- en onderkant van de afbeelding, gedeeltelijk weg.

Open Graph scrape van een OG loze pagina. Een oude scrape van een pagina zonder Open Graph. Facebook zal de deelactie zo weergeven. Gevolg is in dit geval een niet relevante foto die ook nog eens maar half wordt vertoond.

Gids voor de 4 belangrijkste Open Graph tags.

Ieder sociale media kanaal, heeft onderling wat verschillen in het gebruik van de tags. Onderstaande tips zijn dan ook waarden die in het "veilige" of "gemiddelde" gebied liggen van de verschillen.

1. Open Graph tag: OG:title: De og:title beschrijft de titel van je webpagina onderwerp. Bedenk een pakkende of goed beschrijvende titel voor jou doelgroep. Hou in de gaten dat je afbeelding aanvullend kan werken op de titel en andersom.
Eigenschappen en tips OG:title.: ✔︎ Titel kan zonder merknaam omdat die gebruikt wordt in og:site_name tag.
✔︎ Lengte maximaal 55 karakters. Is dit (veel) hoger kan de OG:description soms volledig vervallen.
✔︎ Hoeft minder als <title> rekening te houden met SEO onderwerpen als zoektemen.
Gebruikte code in de <head> voor OG:title.: Open graph voor titel
<meta property="og:title" content="Titel" />

2. Open Graph tag: OG:image: De OG:image heeft als content de url van je afbeelding. Hoe mooier of pakkender je foto, hoe beter het resultaat.
Eigenschappen en tips OG:image.: De meeste verschillen tussen de afhandeling van social media kanalen onderling zien we bij OG:image. Algemeen zou ik de volgende veilige opties kiezen:

✔︎ Alleen .jpg of .png bestanden.
✔︎ 16/9 of 7/5 bestandsverhouding.
✔︎ Voor de langste kant, kan je 900 tot 1300 pixels aanhouden.
✔︎ Bestands grootte is maximaal 250kb. En ik gebruik tynypng of squoosh om de afbeelding te verkleinen.
Gebruikte code in de <head> voor OG:image.: Open graph voor image
<meta property="og:image" content="https://diagfragmaat.com/afbeelding.jpg" />

3. Open Graph tag: OG:type: De OG:type heeft als content het object type. Vaak zal dit voor ons content="website" of "article" zijn. Veelgebruikte voorbeelden zijn: article, book, profile, website, music.song, music.album, video.movie of video.tv_show.
Eigenschappen en tips OG:type.: Type wordt gezien als een van de 4 belangrijkste OG tags. Voeg deze daarom altijd toe in je head.
Gebruikte code in de <head> voor OG:type.: Open graph voor type
<meta property="og:type" content="website" />

4. Open Graph tag: OG:url: De OG:url heeft als content het object url. Dus inclusief https:// en berijkbare pad.
Eigenschappen en tips OG:url.: Gebruik altijd de canonieke URL. Het helpt bij het consolideren van alle verbonden gegevens, zoals vind-ik-leuks, over alle geposte dubbele URL's.
Gebruikte code in de <head> voor OG:url.: Open graph voor url
<meta property="og:url" content="https://diafragmaat.com" />

Optionele Open Graph tags.

5. Open Graph tag: OG:description: De OG:description beschrijft kort het onderwerp van je webpagina. Bedenk hiervoor een pakkende, korte en relevante beschrijving voor jou doelgroep. Hou in de gaten dat je afbeelding samen met de beschrijving mensen zouden triggeren om actie te ondernemen of geïnteresseerd te raken.
Eigenschappen en tips OG:description.: ✔︎ De lengte is maximaal 55 karakters.
✔︎ Je hoeft weinig rekening te houden met SEO onderwerpen als bijvoorbeeld zoektemen.
✔︎ Let erop dat je niet dezelfde text als in de OG:title gebruikt, want dan zien mensen dit dubbel.
Gebruikte code in de <head> voor OG:description.: Open graph voor description
<meta property="og:description" content="omschrijving" />

6. Open Graph tag: OG:locale: De OG:locale beschrijft de taal waarin gecommuniceerd wordt.
Eigenschappen en tips OG:locale.: ✔︎ Standaard staat dit op en_US, dus voor de Nederlandse taal kunnen we hier beter nl-NL of België nl-BE van maken.
Gebruikte code in de <head> voor OG:locale.: Open graph voor locale
<meta property="og:locale" content="nl-NL" />

7. Open Graph tag: OG:site_name: De OG:site_name beschrijft de naam van je site, en gebruiken hiervoor in mijn geval "Diafragmaat".
Eigenschappen en tips OG:site_name.: ✔︎ Als het object dat je deelt, onderdeel is van een grotere website, kan je de naam voor de gehele site weergegeven. bijvoorbeeld "diafragmaat.com" of "Diafragmaat".
Gebruikte code in de <head> voor OG:site_name.: Open graph voor site_name
<meta property="og:site_name" content="Diafragmaat.com" />

Welke tags gebruikt de pagina die je nu leest?

Open graph gebruik voor deze pagina:
<head>
	...
	<meta property="og:type" content="website" />
	<meta property="og:title" content="Diafragmaat.com Blog - Open Graph hands on gids." />
	<meta property="og:url" content="https://diafragmaat.com/blog/hoe-gebruik-je-open-graph-voor-facebook-twitter-linkedin" />
	<meta property="og:image" content="https://diafragmaat.com/images/delen-met-open-graph-op-social-media.webp" />
	{{-- + eventueel de volgende tags--}}
	<meta property="og:description" content="Open graph gebruiken voor perfecte deelacties op je socials." />
	<meta property="og:site_name" content="Diafragmaat.com" />
	<meta property="og:locale" content="nl-NL" />
	...
</head>

Conclusie over Open Graphs.

Ik heb in het verleden al eens gemerkt, dat delen vanuit je CMS omgeving bij Facebook minder hoog in de vertoning statistieken komt. Tenminste in vergelijk met het maken van een bericht op facebook zelf.

Desondanks is Open Graph een krachtig hulpmiddel om je sociale media content een professionele look & feel te geven. Temeer omdat anderen ook je content kunnen delen zoals jij dat hebt bedoeld.

Het deel resultaat op Facebook. Open Graph maakt het delen van je kopje koffie op sociale media net iets meer met een duimpje omhoog!

In mijn website pagina's streef ik ernaar om minimaal de volgende 4 Open Graph tags te hebben. Dit geeft veelal het gewenste resultaat, en brengt ons niet al te veel extra werk.

og:title

In mijn geval meestal een kopie van de pagina <title>.

og:image

De afmeting van mijn afbeeldingen zijn vaak 900 x 506. en dat is in de 16:9 verhouding. Puur praktisch toch: Ik gebruik deze afmeting omdat A): Dit de meest gebruikte maximale breedtes in mijn websites zijn. En B): Dit formaat een mooi compromie is tussen bestandgrootte en fotokwaliteit. Verder is 16:9 is een standaard setting op mijn camera, en verschilt weining van 1.91:1, zodat er nauwelijks afgeknipt wordt. Niks meer aan doen!

og:type
og:url

En nu koffie!

Door Guido

Eigenaar Diafragmaat

Navigatie