Open Graph-metataggenerator

De tags waaruit een linkpreview wordt opgebouwd

Wanneer iemand je link in een bericht plakt, stuurt de app een crawler naar de pagina en leest die een handvol <meta>-tags in de <head>. Die tags komen uit het Open Graph-protocol, dat er vier als verplicht noemt:

• og:title: de titel zoals die in de preview moet verschijnen.
• og:type: wat de pagina is. website past bij de meeste pagina's en article bij een blogpost. Het protocol definieert ook types als profile, book, video.movie en music.song.
• og:image: de URL van de afbeelding die de pagina vertegenwoordigt.
• og:url: de canonieke URL, die het protocol het permanente ID van het object noemt.

Het protocol definieert ook optionele tags, en de generator schrijft de nuttige: og:description, og:site_name, en de afbeeldingsdetails og:image:width, og:image:height en og:image:alt. Over alt-tekst is het protocol duidelijk: als een pagina og:image opgeeft, moet die ook og:image:alt opgeven, en die tekst beschrijft wat er op de afbeelding staat, geen bijschrift.

Wat X toevoegt: twitter:card

X leest Open Graph ook. De cards-markupreferentie (de ontwikkelaarsdocumentatie van X, hier gelinkt via het Internet Archive omdat de originele pagina nu doorverwijst) noemt de fallback voor elke tag: twitter:title valt terug op og:title, twitter:description op og:description, twitter:image op og:image en twitter:image:alt op og:image:alt. De enige tag die het waard is om toe te voegen is dus twitter:card, die de lay-out kiest. Laat je hem weg, dan zegt dezelfde referentie dat X kan terugvallen op een kleine samenvattingskaart, ook als je de grote wilde:

• summary_large_image: een afbeelding over de volle breedte boven de titel. De pagina over de grote afbeeldingskaart van X zegt dat afbeeldingen hiervoor een verhouding van 2:1 ondersteunen, met minimale afmetingen van 300 × 157 en een maximum van 4096 × 4096 pixels, onder 5MB, in JPG, PNG, WEBP of GIF. SVG wordt niet ondersteund.
• summary: een kleinere kaart met een vierkante afbeelding. De pagina over de samenvattingskaart van X zegt dat de afbeelding een verhouding van 1:1 ondersteunt, van 144 × 144 tot 4096 × 4096 pixels, en op alle platforms tot een vierkant wordt bijgesneden.

Dezelfde referentie noemt app- en player-kaarten, die extra velden voor de app store of videospeler nodig hebben, dus die laten we hier weg. Ook documenteert het de limieten die de bovenstaande controles gebruiken: 70 tekens voor een titel, 200 voor een beschrijving en 420 voor alt-tekst.

Afbeeldingsformaten die de platforms opgeven

• LinkedIn: de gids om een website deelbaar te maken vraagt om og:title, og:image, og:description en og:url, en noemt een maximale bestandsgrootte van 5 MB, een minimum van 1200 × 627 pixels en een aanbevolen verhouding van 1.91:1.
• Meta: de best practices voor delen zeggen dat je afbeeldingen van minstens 1080 pixels breed moet gebruiken voor schermen met hoge resolutie, en minstens 600 pixels breed om advertenties met afbeeldingslinks weer te geven. Dezelfde pagina vraagt om og:image:width en og:image:height, zodat de crawler de afbeelding meteen kan renderen zonder die eerst te hoeven downloaden en verwerken.

Een afbeelding van 1200 × 630 voldoet aan al deze eisen: hij is minstens 1200 × 627 voor LinkedIn, breder dan 1080 voor Meta, en 1.905:1, binnen 5% van de 2:1 van X.

Controleer het en vernieuw oude voorbeelden

Apps bewaren wat ze hebben opgehaald in de cache, dus het repareren van de tags herstelt geen voorbeeld dat al is opgeslagen. Beide grote netwerken geven je hiervoor een tool:

• De Sharing Debugger van Meta toont de tags die de crawler ophaalt, met eventuele fouten of waarschuwingen, en start een nieuwe ophaalactie. De webmastergids van Meta beschrijft dit, en de best practices-pagina vermeldt dat opgehaalde content anders volgens een standaardperiode van 24 uur wordt bijgewerkt.
• De Post Inspector van LinkedIn vernieuwt een URL in de cache. De helppagina van LinkedIn merkt op dat de vernieuwing alleen nieuwe posts beïnvloedt: posts die de URL al bevatten, behouden het oude voorbeeld.

Wat deze tool niet doet

Het haalt je pagina of je afbeelding niet op, dus het kan niet zien wat er daadwerkelijk live staat, en het voorbeeld hierboven is een tekstschets in plaats van een render. Het schrijft de tags; je site moet die nog steeds aanleveren in de <head> van de pagina, in de HTML die de crawler ontvangt. Tags die later door JavaScript worden toegevoegd, worden mogelijk nooit gezien. En het schrijft geen app- of player-kaarten, of de extra eigenschappen die types zoals book of video.movie definiëren.

Als je dit liever niet met de hand schrijft

Hermoso is marketing op de automatische piloot: het onderzoekt de advertenties die al werken in jouw markt, maakt beeld- en video-advertenties die bij je merk passen, plant de posts in en voert betaalde campagnes uit op je eigen advertentieaccounts. Het werkt in de webapp, of binnen Claude, ChatGPT en Cursor via de MCP-server.

Gratis tools: UTM-linkbouwer · QR-codegenerator · Formaatgids voor social media

Veelgestelde vragen

Welke Open Graph-tags zijn verplicht?

Het Open Graph-protocol noemt vier verplichte eigenschappen: og:title, og:type, og:image en og:url. og:description, og:site_name en de og:image-tags voor breedte, hoogte en alt zijn optioneel maar het toevoegen waard.

Heb ik twitter:title en twitter:image nodig als ik og:-tags heb?

Nee. De cards-markupreferentie van X zegt dat twitter:title, twitter:description, twitter:image en twitter:image:alt terugvallen op hun og:-equivalenten. De tag die het toevoegen waard is, is twitter:card, die de card-lay-out kiest.

Welk formaat moet een Open Graph-afbeelding hebben?

LinkedIn vraagt om minstens 1200 × 627 pixels in 1.91:1 en onder 5 MB. Meta raadt minstens 1080 pixels breed aan. De grote-afbeeldingskaart van X ondersteunt 2:1 van 300 × 157 tot 4096 × 4096. Een afbeelding van 1200 × 630 past bij alle drie.

Waarom toont mijn link nog steeds een oude afbeelding nadat ik de tags heb gewijzigd?

De app heeft de oude scrape gecachet. Haal de URL opnieuw op via Meta's Sharing Debugger of LinkedIn's Post Inspector. LinkedIn merkt op dat posts die de URL al delen het oude voorbeeld behouden.

Waarom zijn aanhalingstekens en ampersands in de output gewijzigd?

Ze zijn HTML-escaped zodat de tag geldig blijft. Een titel als Tom & Jerry's "Sale" wordt Tom & Jerry's "Sale" binnen het content-attribuut, en browsers en crawlers lezen dat terug als de originele tekst.

Laadt de tool mijn afbeelding?

Nee. Niets van wat je typt wordt ergens naartoe gestuurd en de afbeeldings-URL wordt nooit opgehaald, en daarom toont het voorbeeld een placeholder in plaats van de afbeelding.