Open Graph-tags

Techniek & infrastructuur

Metatags die bepalen hoe content eruitziet wanneer deze wordt gedeeld op socialemediaplatformen zoals Facebook.

Definitie

OG-tags (Open Graph-tags) zijn HTML-[meta tags](/glossary/meta-tags) in de `<head>`-sectie van een webpagina die bepalen hoe die pagina eruitziet wanneer de URL wordt gedeeld op sociale mediaplatforms, messaging-apps en andere diensten die linkvoorbeelden genereren. Het protocol werd oorspronkelijk in 2010 door Facebook ontwikkeld en is sindsdien de universele standaard geworden voor linkvoorbeelden op het web. OG-tags definiëren vier kerneigenschappen: `og:title` (de kop in het voorbeeld), `og:description` (de samenvattingstekst), `og:image` (de voorbeeldminiatuur) en `og:url` (de canonieke link). Aanvullende eigenschappen zoals `og:type`, `og:site_name` en `og:locale` bieden verdere context. Zonder OG-tags proberen platforms te raden wat ze moeten tonen door de pagina te scannen, wat vaak leidt tot kapotte afbeeldingen, afgekapt tekst of irrelevante content.

Waarom Het Belangrijk Is

Elke link die op sociale media wordt gedeeld, genereert een voorbeeldkaart. Die kaart is het eerste en vaak het enige wat mensen zien voordat ze beslissen of ze klikken. Een goed geconfigureerde OG-afbeelding, duidelijke titel en overtuigende beschrijving kunnen de doorklikpercentages vermenigvuldigen vergeleken met een generiek of ontbrekend voorbeeld. Voor uitgevers die [flipbooks](/glossary/flipbook) via sociale kanalen verspreiden, fungeert de voorbeeldkaart als een miniatuuradvertentie voor de content. OG-tags beïnvloeden ook hoe links verschijnen in messaging-apps zoals WhatsApp, Slack en iMessage, wat betekent dat ze het klikgedrag ver buiten de sociale mediafeeds beïnvloeden.

Hoe Het Werkt in FlipLink

De functie [SEO en sociale voorbeelden](/features/seo-and-social-previews) van FlipLink stelt u in staat om OG-tags te configureren voor elke publicatie. U stelt een aangepaste titel, beschrijving en voorbeeldafbeelding in via de publicatie-instellingen, en FlipLink genereert automatisch de correcte `og:title`, `og:description`, `og:image`, `og:url` en `og:type` meta tags. Dit betekent dat elke gedeelde [flipbook](/glossary/flipbook)-link een gepolijste, merkgerichte voorbeeldkaart toont zonder HTML-bewerking. De OG-afbeelding kan de omslagpagina van uw flipbook zijn of een aangepaste afbeelding ontworpen voor sociaal delen.

Installatie Checklist

Volg deze stappen om OG-tags correct te configureren voor maximaal effect bij sociaal delen: 1. **Stel og:title in** — Houd het onder 60 tekens. Gebruik een beschrijvende titel die het contentonderwerp bevat, niet alleen uw merknaam. Voorbeeld: "Voorjaarscollectie Catalogus | UwMerk" in plaats van alleen "UwMerk." 2. **Schrijf og:description** — Mik op 120-155 tekens. Voeg een waardepropositie of call-to-action toe. Beschrijf wat de lezer in de flipbook zal vinden. 3. **Kies og:image** — Gebruik een afbeelding van minimaal 1200x630 pixels. De omslagpagina van de flipbook werkt goed, maar een aangepaste sociale afbeelding met tekstoverlay kan beter presteren. Vermijd afbeeldingen met te veel kleine tekst, want ze worden als miniaturen weergegeven. 4. **Controleer og:url** — Dit moet de [canonieke URL](/glossary/canonical-url) van de publicatie zijn. Als uw flipbook via meerdere URL's toegankelijk is, moet og:url naar de primaire verwijzen. 5. **Stel og:type in** — Gebruik "website" voor landingspagina's en "article" voor individuele publicaties of blogposts. 6. **Test voor het delen** — Gebruik Facebook's Sharing Debugger, Twitter's Card Validator of LinkedIn's Post Inspector om te bekijken hoe uw link eruit zal zien voordat u deze publiekelijk deelt.

Veelgestelde Vragen

**Wat gebeurt er als ik geen OG-tags instel?** Het sociale platform zal proberen uw pagina te analyseren en de titel, beschrijving en afbeelding te raden. De resultaten zijn onvoorspelbaar: u kunt een willekeurige afbeelding van de pagina krijgen, een afgekapte HTML-titel of helemaal geen voorbeeld. Het instellen van expliciete OG-tags elimineert dit giswerk volledig. **Beïnvloeden OG-tags SEO-rankings?** OG-tags beïnvloeden zoekmachineposities niet direct. Ze beïnvloeden echter aanzienlijk de doorklikpercentages op gedeelde links, wat verkeer genereert. Meer verkeer en betrokkenheid kunnen indirect uw zoekzichtbaarheid in de loop van de tijd verbeteren. **Zijn OG-tags hetzelfde als Twitter Cards?** Twitter heeft eigen meta tags (`twitter:card`, `twitter:title`, `twitter:image`), maar valt terug op OG-tags wanneer Twitter-specifieke tags niet aanwezig zijn. De meeste platforms, waaronder LinkedIn, WhatsApp, Slack en iMessage, gebruiken OG-tags als primaire bron voor linkvoorbeelden.

Technische Details

OG-tags volgen een eenvoudige HTML-structuur binnen het `<head>`-element: - `og:title` — De titel die in het voorbeeld wordt weergegeven. Moet verschillen van de `<title>`-tag van de pagina als de paginatitel navigatie-breadcrumbs of sitewijde achtervoegels bevat die geen zin hebben in een sociale context. - `og:description` — Een beknopte samenvatting. Anders dan de meta description voor zoekmachines moet de OG-beschrijving worden geoptimaliseerd voor de sociale context: korter, directer en actiegericht. - `og:image` — Een absolute URL naar het afbeeldingsbestand. Facebook raadt 1200x630 pixels aan. Afbeeldingen kleiner dan 200x200 pixels worden mogelijk niet weergegeven op sommige platforms. - `og:type` — Categoriseert de content. Veelvoorkomende waarden zijn "website", "article", "product" en "video.other". - `og:url` — De canonieke URL. Dit voorkomt dubbele voorbeeldkaarten wanneer dezelfde content via meerdere URL's toegankelijk is. - `og:locale` — Specificeert de taal van de content (bijv. "en_US", "nl_NL"). Handig voor meertalige publicaties. Wanneer een URL wordt gedeeld, haalt de crawler van het platform de pagina op, leest de OG-tags uit de HTML en slaat het resultaat op in de cache. Daarom worden wijzigingen in OG-tags niet onmiddellijk van kracht op platforms die het oude voorbeeld al hebben gecacht. Gebruik de debug-tool van elk platform om een hernieuwde scan te forceren na het bijwerken van tags.

Gerelateerde termen

Betalingsgateway

Een dienst die online betalingen verwerkt, zoals Stripe, waarmee documentverkoop via FlipLink mogelijk wordt.

PDF.js

Mozilla's opensourcebibliotheek in JavaScript die PDF-bestanden rechtstreeks in webbrowsers weergeeft.

Progressive Web App (PWA)

Een webapplicatie die offline werkt en op apparaten kan worden geïnstalleerd als een native app.

Responsief design

Lay-out en content automatisch aanpassen zodat ze goed werken op schermen van alle formaten en apparaten.

Responsieve embed

Een embedcode die de flipbookgrootte automatisch aanpast aan elke container of schermbreedte.

Gerelateerde functies

Seo And Social Previews

Beschikbaar in andere talen

Klaar om je PDF's
te transformeren?

Sluit je aan bij duizenden bedrijven die FlipLink gebruiken om boeiende, interactieve content van hun PDF's te maken. Begin gratis — geen creditcard nodig.

Maak je eerste flipbook Bekijk prijzen