OG & Twitter Card Generator — Metatagbouwer, Auditor & Voorvertoning

Over dit hulpmiddel

Open Graph en Twitter Card meta tags bepalen hoe een link eruitziet zodra je hem plakt in Slack, iMessage, een tweet of een Discord-kanaal — een titel, beschrijving en afbeelding gekozen door de eigen <head> van de pagina, niet door wat het platform toevallig uit de zichtbare body scrapet. Deze tool is zowel een bouwer als een controleur, geen generieke template-invuller. In BOUW-modus vul je een titel, beschrijving, afbeelding-URL, canonical URL, contenttype en Twitter-kaarttype in, en de tool stelt het exacte <meta property="og:..."> en <meta name="twitter:..."> tagblok samen, klaar om in je <head> te plakken, waarbij lege velden worden overgeslagen in plaats van holle tags met lege content te genereren.

In AUDIT-modus plak je je bestaande <head>-opmaak of een volledige HTML-pagina en de tool parsed deze met de ingebouwde DOMParser van de browser om elke aanwezige og: en twitter: meta tag te extraheren en voert vervolgens de controles uit die er echt toe doen: de vier algemeen vereiste tags (og:title, og:description, og:image, og:url) worden gemarkeerd als ze ontbreken; og:title wordt gemeten tegen het punt rond de 60 tekens waar sommige platforms beginnen af te kappen en het punt rond de 90 tekens waar de meeste platforms dat doen; og:description wordt gemeten tegen het bereik van ongeveer 155 tot 200 tekens dat de meeste platforms toestaan voordat ze afbreken; twitter:card wordt gecontroleerd tegen de vier waarden die de Twitter Card-validator accepteert — summary, summary_large_image, app, player — en gemarkeerd als het iets anders is; en dubbele tags (hetzelfde attribuut dubbel gedeclareerd, een verrassend veel voorkomende copy-paste fout) worden bij naam genoemd.

Afbeeldingsafmetingen krijgen een eerlijke behandeling: deze tool kan de werkelijke pixelgrootte van je afbeelding niet verifiëren zonder deze op te halen, en dat doet hij met opzet nooit, in lijn met het no-external-request beleid van deze site. Als je HTML al og:image:width en og:image:height declareert, worden die opgegeven aantallen getoetst aan het algemeen aanbevolen minimum van 1200×630; zo niet, dan krijg je een duidelijke toelichting in plaats van een verzonnen voldoende of onvoldoende. Beide modi tonen dezelfde vier linkpreview-mockups — Twitter/X (wisselend tussen de compacte "summary" miniatuurweergave en de breedbeeld "summary_large_image"-weergave afhankelijk van de twitter:card-waarde), Facebook, LinkedIn en Discord — elk afzonderlijk realistisch vormgegeven volgens de typografie en lay-outconventies van dat platform in plaats van één vakje met een ander logo, en elk duidelijk gelabeld als een illustratieve benadering voor planningsdoeleinden, aangezien echte platforms hun preview-weergave in de loop van de tijd aanpassen en deze tool ze nooit ophaalt of scrapet om dit te controleren.