Deelvoorbeeld

Zo gebruik je het

1. Vul het adres van een pagina in, zoals example.com/blog/launch, en klik op Controleren. Geen pagina bij de hand? Probeer een van de voorbeelden.
2. Bekijk de kaart die elke app ervan maakt: X, Facebook, LinkedIn, Slack, Discord, WhatsApp en iMessage. Een groene stip betekent dat de kaart er goed uitziet; een oranje of rode zegt onder de kaart wat er mis is.
3. Open Verbeteringen en tags tonen om elke gecontroleerde tag afzonderlijk te zien. Ontbrekende tags staan klaar om in je <head> te plakken: kopieer ze, vul de waarden in, publiceer de wijziging en controleer opnieuw.

Het adres van de controle staat in de adresbalk van je browser, dus je kunt het sturen naar wie de pagina beheert.

Hoe linkvoorbeelden werken

Als je een link in een bericht of chat plakt, haalt de crawler van de app de pagina één keer op en leest hij de tags in de <head>. Hij draait geen JavaScript, logt niet in en accepteert geen cookiebanners, dus tags die een script na het laden van de pagina toevoegt, ziet hij niet. De checker haalt de pagina op dezelfde manier op: één verzoek, geen JavaScript, en doorverwijzingen gevolgd zoals een crawler ze volgt.

Elke app leest dezelfde paar tags, met eigen terugvalopties:

• Open Graph (og:title, og:description, og:image, og:url, og:site_name) is wat Facebook, LinkedIn, Slack, Discord, WhatsApp en iMessage lezen.
• X leest eerst twitter:card, twitter:title, twitter:description en twitter:image, en valt terug op de Open Graph-tags. Zonder twitter:card toont het een kleine samenvattingskaart, ook als er een afbeelding is.
• Ontbreekt og:title, dan gebruiken de meeste apps de <title>. Ontbreekt og:description, dan gebruiken sommige de metabeschrijving en tonen andere helemaal geen tekst.
• Discord kleurt de zijkant van zijn kaart met theme-color.

De voorbeelden hier volgen die regels. Elke app verandert ook af en toe zijn ontwerp, dus zie ze als dichtbij, niet als exact.

De voorbeeldafbeelding

Eén afbeelding werkt overal: 1200 × 630 pixels (1,91:1), PNG of JPEG, op een volledig https://-adres.

• Onder 600 pixels breed tonen Facebook en LinkedIn een kleine miniatuur in plaats van een grote kaart. Onder 200 × 200 toont Facebook geen afbeelding.
• X neemt afbeeldingen tot 5 MB en Facebook tot 8 MB. WhatsApp laat afbeeldingen boven ongeveer 600 KB vaak weg, dus een goed gecomprimeerde JPEG is de veilige keuze.
• SVG wordt door geen van de grote apps ondersteund.
• Een relatief adres zoals /og.png werkt niet bij elke crawler. Schrijf de volledige URL.
• Vierkante uitsneden komen vaak voor (WhatsApp, iMessage bij kleine links), dus houd het belangrijke deel van de afbeelding dicht bij het midden.

De checker haalt ook de afbeelding op, meet haar via de bestandsheader en toont haar in de voorbeelden.

Waarom een voorbeeld er nog oud uitziet

Apps cachen wat ze hebben opgehaald, van minuten tot ongeveer een week. Nadat je je tags hebt verbeterd, toont de checker meteen de nieuwe versie, maar een link die al is gedeeld houdt het oude voorbeeld tot de app hem opnieuw ophaalt. De Sharing Debugger van Facebook en de Post Inspector van LinkedIn halen een pagina op verzoek opnieuw op. In Slack krijgt een link die na een tijdje opnieuw wordt gepost, een nieuw voorbeeld. Een querystring toevoegen, zoals ?v=2, laat elke app hem als een nieuwe link behandelen.

Veelgestelde vragen

Waarom heeft mijn voorbeeld geen afbeelding?

De gebruikelijke oorzaken, op volgorde: er is geen og:image-tag, het adres van de afbeelding is relatief of geeft een fout, de afbeelding is te klein of te groot, of de tag wordt na het laden van de pagina door JavaScript toegevoegd. De regel onder elke kaart noemt de oorzaak die van toepassing is.

Welke tags heb ik minimaal nodig?

og:title, og:description, og:image met een afbeelding van 1200 × 630, og:url en twitter:card ingesteld op summary_large_image. De Meta-taggenerator schrijft ze voor je.

Kan het pagina's controleren waarvoor je moet inloggen?

Nee. Crawlers loggen niet in, dus een pagina achter een login heeft nergens een voorbeeld. De checker ziet wat zij zien, en haalt alleen openbare adressen op: privé- en interne netwerken worden geweigerd.

Bewaart de checker de pagina's die hij ophaalt?

Nee. Hij haalt de pagina en haar afbeeldingen op als je op Controleren klikt, en stuurt je wat hij vond. Het resultaat blijft twee minuten bewaard, zodat een tweede controle van hetzelfde adres meteen klaar is, en wordt daarna weggegooid. Hij leest tot 2 MB HTML en 8 MB per afbeelding, en geeft het na 8 seconden op.

Waarom zegt hij dat mijn pagina 403 antwoordt terwijl ze in mijn browser gewoon opent?

Sommige sites en firewalls blokkeren verzoeken die niet van een browser komen, of van grote crawlers die ze kennen. Krijgt de checker een 403, dan krijgen Facebook of LinkedIn er misschien ook een: controleer de botinstellingen van je firewall.

Is er een limiet?

Twintig controles per minuut vanaf één adres. Elke site wordt ook hooguit 60 keer per minuut opgehaald, over iedereen die de checker gebruikt, zodat hij niet kan worden gebruikt om een site te overspoelen. Resultaten blijven twee minuten bewaard, dus hetzelfde adres dat kort daarna opnieuw wordt gecontroleerd, komt meteen terug; opnieuw op Controleren klikken op de pagina die je bekijkt, haalt haar altijd vers op.