Terug naar blog
Heb je je ooit afgevraagd waarom links die je deelt op Facebook of Twitter er soms vreemd uitzien? Weet je hoe je de weergave van je gedeelde blogposts op deze social media kunt beïnvloeden?
Als je niet zeker weet of je alles hebt gedaan om de informatie over je blogpost of pagina die op Facebook en Twitter wordt weergegeven te optimaliseren, lees dan verder. We laten je zien hoe het gebruik van de juiste social media tags je kan helpen de look & feel van je post-previews te verbeteren.
Wanneer je een link naar een artikel deelt, wil je dat je post er goed uitziet wanneer deze op social media wordt gepubliceerd. Je wilt dat deze een kwalitatieve afbeelding, de juiste naam, beschrijving en URL bevat. Facebook, Twitter en andere socialemediaplatformen halen deze parameters van je website.
Je kunt bepalen wat ze uit de post ophalen door social media meta tags (bijvoorbeeld Open Graph tags) op te nemen in de HTML-code van je posts.
Als de Facebook meta tags (=Open Graph meta tags) aanwezig zijn, bepaal jij wat er in de Facebook-post wordt weergegeven. Als je deze Open Graph (og) meta properties niet toevoegt, zal Facebook nog steeds informatie over je blogpost weergeven, maar waarschijnlijk niet zoals jij dat zou willen. Dit werkt op dezelfde manier voor Twitter meta tags. Laten we het gebruik van social media meta tags en het delen van links op Facebook demonstreren.
Webcontent delen op Facebook
Facebook is een geweldig socialemediaplatform voor het delen van je nieuwe content. Een nieuwe post maken vanuit een artikel op je website is net zo eenvoudig als de link in een nieuw Facebook-postvak plakken.
Laten we dit proces eens bekijken. We gebruiken onze post over Facebook Marketing Strategie als voorbeeld.
Na het invoegen van de URL in het nieuwe postvak, haalt Facebook de data op van de doel-URL en maakt een mooi geformatteerde post voor ons. Het format wordt direct getoond in de preview – zowel voor desktop als mobiel. Als je Kontentino gebruikt om je social media content te beheren, is de preview direct beschikbaar in de Kontentino-kalender.
Meta tags begrijpen in de HTML-code van de webpagina
Meta properties voor zoekmachines
Helemaal bovenaan zien we verschillende eigenschappen die de parameters van dit artikel definiëren, ook wel meta tags of meta properties genoemd. Sommige daarvan worden door zoekmachines gebruikt om te begrijpen wat de content van de website is, door extra informatie te bieden die niet op de pagina zelf wordt weergegeven. Dit zijn bijvoorbeeld meta tags zoals:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
De onderstaande afbeelding toont de HTML-code voor deze Kontentino post. Je ziet deze meta tags gemarkeerd met de kleur groen.
Identificeren van meta tags in de HTML-code van de post Facebook Ads Target Audiences 101: The Ultimate Guide
Snelle tip: Weet je niet zeker hoe je de HTML-code van je website weergeeft? Druk simpelweg op CTRL+U in je webbrowser op Windows of Option + Command + U op Mac
Dankzij deze meta tags weten zoekmachines dat het indexeren van deze webpagina (post) en de parameters zijn ingesteld op volgen (dofollow). De ingevoerde meta title en meta description worden door zoekmachines gebruikt om de link naar deze post weer te geven in hun zoekresultaten (op hun zoekresultatenpagina – SERP). Zoals je ziet, zijn de meta title en meta description eigenschappen ingesteld op:
- Meta title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta description: ‘Find out how to reach the right people with Facebook Ads target audiences.’
We weten dat deze meta tags geen optimale lengte hebben, maar we zijn hier niet om over SEO of Google te praten. Laten we meteen doorgaan naar de meta tags hieronder, die de tekst ‘og:’ bevatten.
Deze meta tags of meta properties worden soms sociale meta tags, social media meta tags of simpelweg og meta properties genoemd.
Zoals je ziet, zijn er 7 verschillende og meta properties in de HTML-code van onze blogpost. Dit zijn:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Daarnaast zijn er nog meer Facebook meta tags – de og: properties geassocieerd met de og:image meta tag, waaronder:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Twitter meta tags
Naast deze vind je ook enkele speciale sociale meta tags voor Twitter in de HTML-code, zoals:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Laten we teruggaan naar ons voorbeeld van het delen van een Facebook-post. We moeten de inhoud van de ‘og:’ meta properties begrijpen, decoderen en bewerken om de weergave van onze nieuwe FB-post met de ingesloten link te beïnvloeden.
Lees verder en ontdek meer over: i) Het decoderen van de og: meta properties; ii) Richtlijnen voor het schrijven van content voor sociale meta tags; en iii) Het bewerken van de inhoud van deze sociale meta properties in het CMS van je website.
Publiceren op Facebook en Twitter met Kontentino
Meld je aan voor een 14-daagse proefversie van Kontentino en krijg de social media meta tags samen met ons onder de knie. Bekijk de post-preview in Kontentino voordat je de post publiceert.
De ‘og:’ in de HTML-code van je website staat voor ‘Open Graph’. Het is een acroniem van een Open Graph-protocol waarmee je Facebook kunt vertellen hoe je gedeelde content moet worden weergegeven. Zoals we al vermeldden (en zoals Facebook aangeeft in hun instructies voor developers), ‘gebruikt de Facebook Crawler zonder deze Open Graph tags interne heuristieken om een beste inschatting te maken van de titel, beschrijving en preview-afbeelding voor je content.’ Door deze informatie expliciet te definiëren met Open Graph tags zorg je voor de hoogste kwaliteit van posts op Facebook.
Zoals je ziet, zijn deze og meta tags extreem belangrijk voor Facebook. Als je er nog niet eerder van hebt gehoord of denkt dat ze vrij nieuw zijn, zul je verbaasd zijn te horen dat het Open Graph-protocol al 10 jaar geleden (in 2010) door Facebook werd gelanceerd. Tegenwoordig wordt het echter beheerd door de Open Web Foundation.
Het Open Graph-protocol bouwt voort op diverse bestaande technologieën en schema’s om ontwikkelaars te helpen elke webpagina rijk weer te geven binnen de social graph. Genoeg geschiedenis en definities; laten we in de details duiken van de verschillende og meta tags. We bekijken er slechts 4 in detail – degenen die verantwoordelijk zijn voor de weergave van onze ingesloten post op Facebook: og:title, og:image, og:url en og:description.
og:title meta property
Deze meta property is een van de vier basis-metadata binnen het Open Graph-protocol (dat zijn: og:title, og:type, og:image, og:url). Door de og:title te specificeren, stellen we de titel van ons object in (in dit geval – een blogpost), zoals deze binnen de social graph moet verschijnen. Facebook haalt vervolgens deze og:title op en geeft deze weer als de post-titel (net onder de URL bij onze eerste afbeelding).
og:image meta property
We voegen een URL van de afbeelding toe die ons object (artikel) moet vertegenwoordigen binnen de social graph. In dit geval moet de link naar de uitgelichte afbeelding (featured image) in deze eigenschap worden opgenomen. Door de og:image te specificeren, zorgen we ervoor dat precies deze afbeelding op Facebook wordt weergegeven.
Anders kan Facebook een andere afbeelding uit onze post kiezen; dit kan de hoofdafbeelding zijn die in onze postlijst en bovenaan ons artikel wordt weergegeven, of elke andere afbeelding die in de blogpost voorkomt.
og:url meta property
Deze meta tag bevat de canonieke URL van ons object die zal worden gebruikt als de permanente ID in de social graph. In ons geval is de URL in de og:url https://www.kontentino.com/blog/facebook-ads-target-audiences/.
og:description meta property
Tot slot zou het specificeren van de og:description meta tag ons moeten helpen om de beschrijving weer te geven bij het delen van deze post. Zoals je in de HTML-code afbeelding kunt zien, is het nu: ‘Find out how to reach the right people with Facebook Ads target audiences.’
Twitter meta tags
Twitter meta tags werken analoog aan de Open Graph meta tags en specificeren de content die Twitter ophaalt wanneer een webpagina op dit socialemediaplatform wordt gedeeld.
Og meta tags onder de knie krijgen
Facebook en Twitter bieden richtlijnen voor het gebruik van de bovengenoemde meta tags. In onze tabel hieronder vatten we de basisinformatie over deze tags samen, samen met de respectievelijke aanbevelingen.
Nu we de verschillende soorten sociale meta tags en hun implicaties begrijpen, is het tijd om in ons webpagina-CMS te duiken en uit te vinden waar en hoe we ze kunnen bewerken. We laten je voorbeelden zien van WordPress CMS, verreweg het nummer 1 CMS ter wereld.
Als je een SEO-plugin gebruikt, zoals Yoast SEO, Rank Math, All in One SEO of vergelijkbaar, komen deze goed van pas bij het bewerken van deze sociale metadata. Bijna alle goede SEO-plugins stellen je in staat om de meta tags voor Facebook en Twitter afzonderlijk te wijzigen. In de volgende tekst laten we je zien hoe je deze instelt in Rank Math.
We beginnen met het bewerken van de post en klikken op het SEO-tabblad. Daar moet het ‘social’-tabblad worden geopend.
De plek vinden om social media meta tags te bewerken in je CMS
Rank Math bevat een live preview-functie waarmee je kunt zien hoe de gemaakte wijzigingen de insluiting (embedding) van je post op Facebook of Twitter beïnvloeden. Klik op de knop ‘Preview & Edit Social Media’.
De Facebook meta tags bewerken
Allereerst zien we de preview van de Facebook-post en daaronder de social media meta tags die kunnen worden aangepast.
Voorvertoning van gedeelde link gegenereerd door je CMS – in dit geval de Rank Math-plugin
In ons geval zijn de og:image, og:title en og:description eigenschappen nog niet gespecificeerd. Zoals je ziet, toont de simulator (preview snippet editor) de waarden van de basis-metadata die voor zoekmachines worden gebruikt.
Social media meta tags bewerken: de og:title en og:description tags van je blogpost
In onze allereerste afbeelding in deze blogpost zien we dat de ontbrekende titel het meest problematisch is. We vullen echter zowel de titel als de beschrijving in.
Vervolgens moeten we, na het opslaan van de wijzigingen, bekijken hoe de bijgewerkte post eruitziet wanneer deze op Facebook wordt gedeeld.
Nieuwe social media meta tags ingevuld voor de post
Hoewel Facebook aanbeveelt om 2 tot 4 zinnen te gebruiken voor de og:description meta tag, houden we het voor deze demonstratie bij één zin. We willen zien of Facebook deze überhaupt weergeeft, dankzij de ruimte die ontstaat op de kaart door de lengte van de og:title parameter te verkorten.
Voordat we het resultaat controleren, moeten we andere oplossingen noemen waarmee je de Open Graph-parameters in WordPress kunt bewerken. Als je geen SEO-plugin gebruikt, kun je een speciale Open Graph-plugin zoals OG gebruiken of de sociale metadata handmatig in de HTML-code van je webpagina invoegen. Dit laatste is ook nuttig voor andere CMS’en. WIX heeft een ingebouwde oplossing voor het invoegen van og meta properties, net als andere grote contentmanagementsystemen.
Zodra je klaar bent met het bewerken van de Facebook of Twitter meta tags, is het tijd om te proberen je post op deze socialemediaplatformen te delen. Laten we kijken hoe onze post er nu op Facebook uit zou zien. We kunnen de Facebook Debugger (officieel Facebook Sharing Debugger genoemd, soms ook aangeduid als FB preview tool) gebruiken om de gewijzigde posts op Facebook te bekijken. Vergeet voordat je dit doet niet je cache te wissen of tijdelijke Safari-bestanden te verwijderen (als je deze browser gebruikt) als deze niet automatisch zijn gewist na het opslaan van de post.
Open Graph meta tags in Facebook Link Sharing Debugger
Link preview in de Facebook Sharing Debugger die je social media meta tags in actie toont
Zoals je hierboven kunt zien, ziet alles er goed uit en zijn de wijzigingen aan de Facebook meta tags doorgevoerd.
Veelvoorkomende misvattingen over social media meta tags
Mythe 1: Social media meta tags zijn alleen voor SEO-doeleinden.
Meta tags zijn niet alleen voor zoekmachines – ze spelen een cruciale rol in hoe je content wordt weergegeven op sociale netwerken. Social media meta tags zoals og:image en og:title optimaliseren specifiek je posts voor platformen zoals Facebook en Twitter, wat de engagement verbetert.
Mythe 2: Alle afbeeldingen worden perfect weergegeven op social media.
Niet elke afbeelding uit je post wordt correct weergegeven bij het delen. Zonder og:image te specificeren of een Twitter Card te gebruiken, kunnen sociale platformen een generieke afbeelding selecteren of de visual verkeerd formatteren, wat de uitstraling van je post beïnvloedt.
Mythe 3: Meta tags zijn alleen belangrijk voor single-page websites.
Meta tags zijn essentieel voor websites die uit meerdere pagina’s bestaan. Of je site nu blogs of productvermeldingen bevat, het gebruik van og:type en andere meta tags zorgt voor een consistente en geoptimaliseerde weergave op meerdere sociale platformen.
Mythe 4: Je kunt erop vertrouwen dat socialemediaplatformen je content correct weergeven.
Vertrouwen op Facebook of Twitter om je post automatisch te formatteren is riskant – op zijn zachtst gezegd. Zonder handmatig belangrijke meta tags zoals og:url en og:description in te stellen, kunnen sociale platformen onjuiste of onvolledige data ophalen, wat ten koste gaat van de visuele aantrekkingskracht van je content.
Mythe 5: Sociale meta tags zijn moeilijk te implementeren zonder codeervaardigheden.
WordPress-plugins en tools zoals Rank Math vereenvoudigen het proces van het toevoegen en beheren van social media meta tags. Je hoeft geen webdeveloper te zijn om ervoor te zorgen dat je posts geoptimaliseerd zijn voor het delen op social media.
Mythe 6: Twitter Cards werken alleen met statische afbeeldingen.
Twitter Cards ondersteunen verschillende mediaformaten, waaronder GIF-formaten en video’s. Je kunt foto’s of andere media aan je summary card toevoegen, waardoor je posts dynamischer en aantrekkelijker worden op dit sociale netwerk.
Mythe 7: Meta tags zijn alleen voor je eigen content.
Meta tags gaan niet alleen over je eigen website; ze helpen ook wanneer je content op andere websites wordt gedeeld. Door meta property=”og:image” en meta property=”og:title” correct in te stellen, zorg je ervoor dat je content er professioneel uitziet, ongeacht waar deze wordt gedeeld.
Conclusie
We hopen dat dit artikel je heeft geholpen de og meta properties en hun belang voor het delen van links op Facebook en Twitter te begrijpen. Als je je social media marketing naar een hoger niveau wilt tillen, probeer dan zeker Kontentino (als je dat nog niet hebt gedaan). Het is een gebruiksvriendelijke tool voor het creëren van social media content, die efficiënte teamsamenwerking en contentgoedkeuring ondersteunt.
Onze contentkalender integreert de preview-functie, zodat je nergens anders heen hoeft om te zien hoe je nieuwe link-post eruit zal zien. Dit bespaart je kostbare tijd bij het controleren en optimaliseren van je social media meta tags.
En wat is er beter dan het instellen van UTM-tags om de post-prestaties in je webanalytics bij te houden, een toekomstige publicatiedatum in te stellen, of een promotiebudget aan de post toe te wijzen voor een groter bereik?
FAQ
Wat is een social media meta tag?
Een social media meta tag biedt cruciale data zoals titels, afbeeldingen en beschrijvingen voor socialemediaplatformen bij het delen van webpagina’s. Het is essentieel voor het vergroten van de gebruikersbetrokkenheid op grote sociale platformen.
Wat zijn voorbeelden van meta tags?
Voorbeelden zijn meta property=”og:title”, meta property=”og:image” en meta property=”og:url” content, die het delen op sociale netwerken zoals Facebook en Twitter optimaliseren, zodat je content goed wordt weergegeven.
Wat is social media metadata?
Social media metadata omvat open graph date zoals een beknopte titel, beschrijving en hoogwaardige afbeeldingen, die de weergave van social media posts op platformen zoals Twitter en Facebook verbeteren.
Wat zijn social media tags?
Social media tags zijn identificatoren zoals Twitter Card tags of og tags die in het HTML-bestand zijn ingesloten om te beïnvloeden hoe webpagina’s worden weergegeven wanneer ze op sociale platformen worden gedeeld, wat de sociale exposure vergroot.
Hoe maak je meta tags aan?
Om meta tags te maken, voegt een webdeveloper een paar regels code toe aan het HTML-bestand van een webpagina, inclusief parameters zoals de title-tag, description-tag en een unieke afbeelding die de content vertegenwoordigt.
Welke social media gebruiken meta tags?
Meta tags worden gebruikt door grote sociale platformen zoals Facebook, Twitter en LinkedIn om te optimaliseren hoe webpagina’s en social media posts verschijnen wanneer ze over netwerken worden gedeeld, wat de gebruikersbetrokkenheid verbetert.
Is een meta tag noodzakelijk?
Ja, meta tags zijn cruciaal voor online marketing omdat ze bepalen hoe je content eruitziet op sociale platformen. Ze zorgen ervoor dat de juiste afbeelding en titel worden getoond, wat het delen en de betrokkenheid vergroot.
Hoe vind ik meta tags?
Je kunt het HTML-bestand van een website inspecteren om meta tags te vinden. Tools zoals Facebook Debugger en andere online diensten helpen je ook om specifieke meta properties zoals og:image of og:type te bekijken.
Hoeveel meta tags moet ik gebruiken?
Gebruik essentiële meta tags zoals og:title, og:image, og:url en Twitter Card tags om je sociale exposure te optimaliseren. Geef prioriteit aan kwaliteit boven kwantiteit door te focussen op tags met veel impact voor sociaal delen.
Wat is een Facebook meta tag?
Een Facebook meta tag, zoals meta property=”og:title”, maakt deel uit van het Open Graph-protocol. Het helpt bepalen hoe je webpagina’s of social media posts op Facebook verschijnen en zorgt voor betere gebruikersbetrokkenheid.
Wat is de meta property og:title content?
De meta property og:title content definieert de titel van je webpagina zoals deze verschijnt wanneer deze wordt gedeeld op socialemediaplatformen zoals Facebook.
Wat is de meta property og:image content?
De meta property og:image content specificeert de URL van de afbeelding die zal verschijnen wanneer je content wordt gedeeld op socialemediaplatformen.
Wat is de meta property og:type content?
De meta property og:type content definieert het type content (bijv. artikel, website) dat wordt gedeeld, waardoor sociale platformen het op de juiste manier kunnen categoriseren en weergeven.
Wat is metadata? 3 voorbeelden?
Voorbeelden van metadata zijn de description-tag, sessievariabelen voor gebruikersidentificatie-parameters en de meta property=”og:image” tag, die platformen helpt de juiste afbeelding te selecteren voor sociaal delen.
