Open Graph checker: test OG-tags en linkvoorbeelden
Voer een URL in om te zien hoe die eruitziet als hij op Facebook, X, LinkedIn en chatapps wordt gedeeld. De checker leest elke og:*- en twitter:*-tag, meet de voorbeeldafbeelding en vertelt precies wat je moet herstellen.
Linkvoorbeelden (bij benadering: elk platform past zijn eigen indeling, bijsnijding en cache toe)
Controles
Voorbeeldafbeelding
Gevonden tags
| Veld | Waarde |
|---|
Voorgestelde tags
Je huidige waarden, met plaatshouders waar iets ontbreekt. Plak ze in de <head> van de pagina en pas de TODO-regels aan.
Een Open Graph checker toont wat een crawler ziet als iemand je link in een bericht of chat plakt: de titel, beschrijving en afbeelding die zijn opgegeven in de og:*- en twitter:*-metatags van je pagina. Toont een voorbeeld de verkeerde afbeelding, geen afbeelding of je sitenaam in plaats van de artikeltitel, dan zit de oorzaak bijna altijd in die paar regels HTML, en deze pagina vertelt je welke regel.
Zo controleer je je Open Graph-tags
- Voer de URL in van de pagina die je wilt delen en druk op Tags controleren. Redirects worden gevolgd en de uiteindelijke URL wordt geanalyseerd.
- Bekijk de voorbeelden. Dat zijn benaderingen van hoe Facebook, X, LinkedIn en chatapps een linkkaart indelen, gebouwd uit de tags die elk platform leest.
- Loop de controles door. Fouten breken voorbeelden, waarschuwingen maken ze op sommige platforms slechter, opmerkingen zijn goede praktijk. Elk punt zegt wat je moet aanpassen.
- Herstel en controleer opnieuw. Het vak Voorgestelde tags geeft je een bewerkbaar blok tags met je huidige waarden al ingevuld.
- Ververs de caches van de platforms nadat je de oplossing hebt uitgerold (zie hieronder), anders houden oude shares het oude voorbeeld.
Voor een staging-site, een pagina achter een login of alles op localhost schakel je over naar HTML plakken: plak de paginabron en dezelfde controles draaien in je browser.
De Open Graph-tags die elke pagina nodig heeft
Open Graph is het protocol achter de meeste linkvoorbeelden. Het markeert vier eigenschappen als verplicht voor elke pagina (ogp.me), en LinkedIn noemt titel, afbeelding, beschrijving en URL als de tags die moeten bestaan voor zijn deelvoorbeelden (LinkedIn Help).
| Tag | Wat het doet | Tip |
|---|---|---|
og:title | De kop van de kaart. Verplicht. | Schrijf hem voor een tijdlijn, niet voor zoekmachines: je merknaam hoeft er niet in. |
og:type | Het soort object, bijvoorbeeld website of article. Verplicht. | Gebruik article voor berichten; dat ontgrendelt article:*-tags. |
og:image | De voorbeeldafbeelding. Verplicht. | Gebruik een volledige https://-URL; stel ook breedte, hoogte en alt in. |
og:url | De canonieke URL van het object, gebruikt als zijn vaste ID. Verplicht. | Laat hem overeenkomen met je <link rel="canonical">. |
og:description | Een of twee zinnen onder de titel. Optioneel in het protocol, verplicht bij LinkedIn. | Zeg wat de lezer krijgt, niet wat de pagina is. |
og:site_name | De naam van de site als geheel. | In veel chatapps boven de titel getoond. |
og:image:alt | Een beschrijving van de afbeelding. Het protocol zegt dat een pagina die og:image opgeeft, ook dit moet opgeven. | Beschrijf de afbeelding, niet de pagina. |
og:image:width / og:image:height | Afbeeldingsformaat in pixels. | Facebook zegt ze op te geven zodat de afbeelding de eerste keer dat de link wordt gedeeld goed laadt. |
og:locale | De taal en regio van de inhoud, bijvoorbeeld nl_NL. | Facebook raadt het aan samen met og:type. |
Komt een tag twee keer voor, dan wint de eerste: het protocol geeft bij conflicterende waarden voorrang aan de eerste tag van boven naar beneden. Dubbele tags ontstaan meestal doordat een thema en een SEO-plug-in allebei tags schrijven; de checker markeert ze.
Twitter-cardtags (X)
X leest zijn eigen twitter:*-tags en valt voor de meeste terug op Open Graph, volgens de naslag voor cardmarkup van X (documentatie voor ontwikkelaars van X, gearchiveerd, Engels):
twitter:card: het kaarttype,summary(kleine vierkante afbeelding) ofsummary_large_image(brede afbeelding). Ontbreekt hij maar bestaanog:type,og:titleenog:description, dan kan een samenvattingskaart worden getoond.twitter:title: maximaal 70 tekens; valt terug opog:title.twitter:description: maximaal 200 tekens; valt terug opog:description.twitter:image: onder 5 MB; JPG, PNG, WEBP en GIF (alleen het eerste beeld); SVG wordt niet ondersteund. Valt terug opog:image.twitter:image:alt: tot 420 tekens; valt terug opog:image:alt.
In de praktijk dekken Open Graph plus één regel, <meta name="twitter:card" content="summary_large_image">, X af.
og:image-formaat: wat elk platform vraagt
| Platform | Gedocumenteerde eis |
|---|---|
| Minimaal 1200 × 627 px, aanbevolen verhouding 1,91:1, maximale bestandsgrootte 5 MB (LinkedIn Help) | |
Minstens 1080 px breed voor de beste weergave op apparaten met hoge resolutie; geef og:image:width en og:image:height op (Meta, beste praktijken voor delen) | |
| X, kaart met grote afbeelding | Verhouding 2:1, minimaal 300 × 157, maximaal 4096 × 4096 px, onder 5 MB (X-documentatie, gearchiveerd) |
| X, samenvattingskaart | Verhouding 1:1, minimaal 144 × 144, maximaal 4096 × 4096 px, onder 5 MB, bijgesneden tot een vierkant (X-documentatie, gearchiveerd) |
Eén afbeelding kan aan alle eisen voldoen: 1200 × 630 pixels, PNG of JPEG, onder 5 MB. Ze haalt het minimum van LinkedIn en de breedteaanbeveling van Facebook, zit op ruwweg 1,91:1 en X snijdt haar licht bij voor de 2:1 grote kaart. Houd tekst en logo’s uit de buurt van de randen, zodat de bijsnijding ze niet afkapt. X vraagt ook om een unieke afbeelding per pagina in plaats van een algemeen sitelogo, een verstandige regel overal.
Waarom je linkvoorbeeld niet klopt en hoe je het herstelt
De oude afbeelding of titel blijft verschijnen
Platforms cachen voorbeelden. Facebook cachet afbeeldingen op URL en werkt ze niet bij tenzij de URL verandert (Meta for Developers), dus upload een gewijzigde afbeelding onder een nieuwe bestandsnaam en laat de pagina daarna door deSharing Debugger lopen, die een nieuwe scan start. Gebruik op LinkedIn dePost Inspector om de URL te verversen.
Helemaal geen afbeelding
Bekijk de tabel Voorbeeldafbeelding hierboven. Veelvoorkomende oorzaken: og:image is een relatief pad, de afbeelding geeft een 403 of 404 aan crawlers (hotlinkbeveiliging, een beschermde map, een CDN-regel), het is een SVG of ze is groter dan 5 MB. LinkedIn merkt op dat een afbeelding die aan de eisen voldoet toch kan mislukken als de site LinkedIn blokkeert om haar op te halen.
Tags bestaan in de browser maar niet hier
De tags worden waarschijnlijk door JavaScript toegevoegd nadat de pagina is geladen. Crawlers lezen de HTML die de server verstuurt, dus verplaats de tags naar op de server gerenderde of vooraf gebouwde HTML. Single-page-apps hebben voor deelvoorbeelden meestal rendering aan de serverkant of prerendering nodig.
Het verkeerde voorbeeld wordt getoond
Stuurt de URL door, dan tonen crawlers de uiteindelijke pagina. De checker toont het aantal redirects; deredirect checker toont elke hop. Zorg er ook voor dat og:url naar de pagina zelf verwijst en niet naar je homepage, een veelgemaakte sjabloonfout.
Open Graph-tags versus SEO-metatags
De <title>, metabeschrijving en canonieke link zijn voor zoekmachines; Open Graph- en Twitter-tags zijn voor shares. Ze mogen verschillen, een deelkop mag pakkender zijn dan een zoektitel, maar de canonieke URL en og:url horen overeen te komen, en een noindex-robotsdirectief is goed om te kennen voordat je een pagina promoot. De checker meldt ze allemaal, ook een X-Robots-Tag-HTTP-header.
Wat de checker met je URL doet
Onze server vraagt de pagina één keer op, volgt maximaal acht redirects, leest hooguit de eerste 600 KB (hij stopt aan het eind van de <head>) en downloadt het eerste deel van maximaal twee voorbeeldafbeeldingen om hun formaat en afmetingen te lezen. Hij haalt alleen openbare http(s)-adressen op standaardpoorten op en weigert privé-, lokale en cloud-metadata-IP’s, ook als een redirect daarheen wijst. Er wordt niets opgeslagen. De voorbeeldkaarten laden de afbeelding daarna rechtstreeks in je browser. Deel je een campagnelink, bouw hem dan met deUTM-builder; deel je die van iemand anders, haal dan eerst de tracking weg met deURL-opschoner.
Veelgestelde vragen
Wat doet een Open Graph checker?
Hij haalt een pagina op zoals een crawler voor linkvoorbeelden dat doet, leest de Open Graph-tags (og:*) en Twitter-cardtags (twitter:*) in de HTML-head en toont hoe een gedeelde link eruitziet. Deze downloadt ook de voorbeeldafbeelding om formaat, pixelafmetingen en bestandsgrootte te controleren, en somt elke ontbrekende of ongeldige tag op met een oplossing.
Welke Open Graph-tags zijn verplicht?
Het Open Graph-protocol noemt vier verplichte eigenschappen: og:title, og:type, og:image en og:url. LinkedIn zegt dat og:title, og:image, og:description en og:url moeten bestaan voor zijn voorbeelden, dus stel in de praktijk alle vijf in, plus og:image:alt voor de afbeelding.
Welk formaat moet mijn og:image hebben?
Er is geen enkel officieel formaat. LinkedIn vraagt minstens 1200 × 627 pixels met een verhouding van 1,91:1 en minder dan 5 MB. Facebook raadt afbeeldingen van minstens 1080 pixels breed aan. De kaart met grote afbeelding van X gebruikt een verhouding van 2:1 met een minimum van 300 × 157 en een limiet van 5 MB. Een PNG of JPEG van 1200 × 630 onder 5 MB voldoet aan al die eisen.
Waarom tonen Facebook of LinkedIn nog mijn oude voorbeeld?
Platforms cachen linkvoorbeelden. Facebook cachet afbeeldingen op URL en ververst ze pas als de URL verandert, dus publiceer een bijgewerkte afbeelding onder een nieuwe bestandsnaam en laat de pagina daarna door de Sharing Debugger van Facebook lopen om een nieuwe scan te starten. De Post Inspector van LinkedIn doet hetzelfde voor LinkedIn.
Heb ik Twitter-cardtags nodig als ik al Open Graph-tags heb?
X valt voor de meeste velden terug op Open Graph: twitter:title valt terug op og:title, twitter:description op og:description en twitter:image op og:image. Zonder twitter:card kan X nog steeds een kleine samenvattingskaart tonen op basis van og:type, og:title en og:description. Voeg twitter:card met de waarde summary_large_image toe voor de indeling met grote afbeelding.
Voert de checker JavaScript uit?
Nee. Hij leest de HTML die de server teruggeeft, wat de meeste crawlers voor linkvoorbeelden ook lezen. Verschijnen je tags pas nadat JavaScript aan de clientzijde draait, dan ontbreken ze hier en waarschijnlijk ook bij echte shares. Render ze op de server of tijdens de build.
Kan ik een staging- of localhost-pagina controleren?
Niet via een URL: om veiligheidsredenen haalt de checker alleen openbare adressen op en blokkeert hij privé-, lokale en cloud-metadata-IP’s. Gebruik in plaats daarvan het tabblad HTML plakken: plak de paginabron en die wordt volledig in je browser geanalyseerd, met lokaal gemeten afbeeldingsafmetingen.
Zijn de voorbeelden precies wat elk platform toont?
Nee, het zijn benaderingen, gebouwd uit de tags die elk platform documenteert. Elk netwerk past zijn eigen indeling, bijsnijding, afkapping en cache toe en wijzigt die in de loop van de tijd. Gebruik de voorbeelden om ontbrekende afbeeldingen en slechte titels op te sporen en bevestig dan met de debugger van het platform zelf vóór een grote lancering.
