share Open Graph & Twitter Card generator star

Hoe het werkt

Het Open Graph-protocol werd in 2010 door Facebook geïntroduceerd zodat elke webpagina zichzelf kon beschrijven als een rijk sociaal object — welke titel, beschrijving, afbeelding en sitenaam moeten verschijnen wanneer iemand de link in een feed of chat plakt. Deze tool genereert de vier dragende tags (og:title, og:description, og:image, og:url) plus de bijbehorende twitter:-set, en toont een live voorbeeld van de resulterende kaart, zodat u ziet wat Facebook, LinkedIn, WhatsApp of X daadwerkelijk zullen tonen voordat u iets publiceert.

Het veld og:type (website, article, product...) is niet louter cosmetisch — sommige platforms veranderen het gedrag van de kaart op basis daarvan: een type article kan een auteur/datumregel tonen, een type product kan prijsweergave activeren op platforms die de Open Graph-commerce-extensies ondersteunen. Concreet voorbeeld: een receptpagina ingesteld op og:type=article met een og:image van 1200×630 krijgt op X een kaart met een foto over de volle breedte (via twitter:card=summary_large_image) en een bijpassende preview op WhatsApp — stelt u het verkeerd in of laat u og:image weg, dan valt de meeste platforms terug op gokken, meestal door de eerste afbeelding op de pagina te kiezen of helemaal geen afbeelding.

Naast de kernvier zijn er een paar optionele velden die het resultaat verfijnen: og:site_name toont uw merk naast de titel op sommige platforms, og:locale stelt de taal/regio in (en_US, nl_NL) zodat meertalige sites de juiste variant renderen, en twitter:site koppelt de kaart aan een accountnaam op X. De waarde twitter:card zelf heeft naast summary en summary_large_image nog een derde optie — player — voor het rechtstreeks insluiten van video of audio in de tijdlijn, al vereist dat extra player-specifieke markup die deze generator niet dekt. De cacheduur verschilt ook per platform: sommige debuggers verversen binnen een dag na een nieuwe scrape, terwijl andere platforms een verouderd voorbeeld een week of langer kunnen vasthouden omdat ze per link cachen in plaats van per crawl — daarom is een door de debugger afgedwongen nieuwe scrape vaak de enige snelle oplossing.

Wat u moet weten

• 1200×630px (een verhouding van 1,91:1) is de veilige universele afbeeldingsgrootte op alle platforms; houd het bestand onder ongeveer 1MB zodat het betrouwbaar laadt, en gebruik altijd een absolute URL (https://...) — relatieve paden falen stilzwijgend.
• Caching is de meest voorkomende klacht: zodra een platform een URL heeft gescraped, kan het dagenlang de oude titel of afbeelding blijven tonen, zelfs nadat u de tags hebt gecorrigeerd. Facebook's Sharing Debugger, LinkedIn's Post Inspector en vergelijkbare tools dwingen een nieuwe scrape af.
• X valt voor titel, beschrijving en afbeelding grotendeels terug op Open Graph-waarden, maar twitter:card is een eigen instelling (summary versus de volle-breedte summary_large_image) en wordt niet afgeleid — stel die expliciet in.
• Helemaal geen tags betekent niet geen voorbeeld — het platform raadt op basis van wat het op de pagina vindt, en die gok is zelden flatterend.
• og:url moet naar de canonieke versie van de pagina wijzen — verwijzen naar een URL met trackingparameters of naar een redirect-doel splitst het deelsignaal over twee verschillende adressen in plaats van het op één te bundelen.
• Test op meer dan één platform voordat u publiceert: Facebook, LinkedIn en X parsen Open Graph elk net iets anders, en een kaart die er op de ene goed uitziet, kan op de andere de afbeelding bijsnijden of de beschrijving weglaten.