Het delen van van inhoud kan je zien als 2 richting verkeer. Je kan jou website inhoud delen op sociale media, en andersom kan je sociale media content delen op jou website.
Delen vanaf social media naar je website.
Het delen van video gebeurt meestal van sociale media naar je website. Middels een embedded code, ook wel iframe genoemd, haal je de video in je pagina. Binnen de iframe, komt de de inhoud van het betreffende kanaal. Voordeel is dat je de vaak grote video's niet vanaf jou internet provider hoeft te streamen, nadeel is dat je geen inbreng hebt wat er anders getoond wordt. Zoals vervolg video's of links naar andere (advertentie) adressen. Verder worden er cookies geplaatst door deze diensten die je verplicht bent goed te laten keuren, en kan je niet zien wat er gebeurt binnen de iframe.
Delen vanaf je website naar social media.
Delen vanaf je website, gebeurt met behulp van Open Graph tags in je pagina. Hier ga ik je het een en ander over uitleggen, en wat tips geven.
Wat zijn Open Graph tags?
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 presentatie, vooral pins en borden.
WhatsApp: Gebruikt Open Graph-tags voor het genereren van link voorbeelden.
Telegram: Gebruikt Open Graph voor voorbeelden van bericht links.
Slack: Creëert link voorbeelden 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.
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 <meta property="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 zoektermen.
Eigenschappen en tips voor gebruik van OG:image zijn helaas niet is steen gegraveerd. Verschillende social media kanalen gebruiken verschillende verhoudingen. Ook zijn de maximale en minimale bestandgroottes (weliswaar ruim) maar onderling afwijkend.
Facebook raadt aan om afbeeldingen te gebruiken die minimaal 1200 x 630 pixels zijn, met een verhouding van 1.91:1.
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.
1.91:1, 16/9 of 7/5 bestandsverhouding.
Voor de langste kant, kan je 1200 pixels aanhouden.
Bestandsgrootte is maximaal 250kb. Gebruik de gratis programma's als Tynypng
of Squoosh
om de afbeelding te verkleinen.
Afmetingen en aspect ratio's aanbevelingen voor verschillende populaire sociale media kanalen.
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.
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.
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".
Welke Open Graphs 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-1200.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!
Open Graph maakt het delen van je kopje koffie op sociale media net iets meer met een duimpje omhoog!
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.
Het deel resultaat op Facebook. Open Graph maakt het delen van je kopje koffie op sociale media net iets meer met een duimpje omhoog!
