Open Graph-afbeeldingsformaat: één bestand voor elk platform

Eén afbeelding van 1200 bij 630 pixels, als PNG of JPEG, onder ongeveer 1 MB, met de belangrijke inhoud binnen de middelste 1080 bij 600. Dat bestand voldoet aan de gepubliceerde specs van Meta en LinkedIn, en dat is voor bijna elke site het hele antwoord op de vraag naar het Open Graph-afbeeldingsformaat.

De afmetingen zijn het makkelijke deel. Ze zijn meestal ook niet wat misgaat. Wat misgaat is tekst die te dicht bij een rand staat die één platform afsnijdt, een afbeelding die nooit wordt bijgewerkt omdat een crawler maanden geleden de oude in de cache zette, of een kaart die zonder plaatje wordt weergegeven omdat het bestand 4 MB was op een trage origin. De vraag naar het OG-afbeeldingsformaat is eigenlijk drie vragen, en slechts één ervan gaat over pixels. Deze gids behandelt de specificatie, de veilige zone, het cachegedrag waardoor mensen denken dat hun tags fout zijn en hoe previews worden bepaald als het gedeelde ding een korte link is. Ontbreekt je preview helemaal in plaats van slecht bijgesneden te zijn, dan is linkpreview wordt niet getoond de diagnosegids.

Het formaat en waarom het dat formaat is

De verhouding 1,91:1 komt voor in zowel de documentatie van Meta als die van LinkedIn. Het Open Graph-protocol zelf (geraadpleegd op 2026-10-25) stelt geen formaat vast; de voorbeelden zijn 400x300 en 300x300, en het vraagt om og:image:alt zodra je een afbeelding opgeeft. Rond de getallen van de platformen is een de-factostandaard ontstaan.

De bronnen zijn de afbeeldingsrichtlijnen van Meta en de helppagina van LinkedIn over linkpreviews. X documenteert zijn kaarten apart, maar die documentatie wilde niet laden, dus controleer haar voordat je op een formaat voor X vertrouwt.

De veilige zone waar niemand over praat

Een kaart wordt zelden getoond in de verhouding waarin je hem hebt ontworpen. De eigen pagina van LinkedIn zegt dat vierkante en staande afbeeldingen kunnen worden bijgesneden, en alles onder 401 px breed wordt een kleine miniatuur. De zone van 1080 bij 600 hieronder is onze vuistregel, geen platformgetal.

Houd alles wat moet overleven binnen de middelste 1080 bij 600, gecentreerd, en beschouw de buitenste band als decoratie die je kunt missen. In de praktijk betekent dat: de kop staat midden-links in plaats van strak tegen de rand, het logo staat binnen de marge in plaats van in de hoek en er is geen dunne rand, want een rand is het enige ontwerpelement dat kapot lijkt zodra het wordt bijgesneden.

Ook contrast speelt mee. Kaarten staan in sommige clients op een lichte achtergrond en in andere op een donkere, dus een afbeelding die voor afscheiding op zijn omgeving rekent, kan zijn randen kwijtraken.

De tags rond de afbeelding

Vier tags doen het werk. Twee daarvan worden door mensen overgeslagen.

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

Gebruik een absolute URL met schema en host, want een crawler leest de tag zonder paginacontext. Meta zegt dat breedte en hoogte zijn crawler de afbeelding bij de eerste share laten renderen zonder hem eerst op te halen. En og:image:alt is de toegankelijkheidstag die niets kost en bijna overal ontbreekt.

Waarom je nieuwe afbeelding niet verschijnt

Dit is degene die supporttickets oplevert. Je hebt de afbeelding gerepareerd, je ziet het nieuwe bestand op zijn URL en de kaart toont nog steeds het ontwerp van vorig kwartaal.

De docs van Meta zeggen dat zijn crawler afbeeldingen op URL cachet en dat het wijzigen van de afbeelding previews van bestaande shares niet bijwerkt. Drie uitwegen, in de volgorde waarin ik ze zou proberen:

• Forceer een nieuwe scrape met de Sharing Debugger van Facebook. LinkedIn heeft ook een Post Inspector, al beschrijft de helppagina die we lazen de caching ervan niet.
• Publiceer de afbeelding onder een nieuwe bestandsnaam, wat een andere URL is zonder cache-item. Meta beveelt dit aan en het is de betrouwbare.
• Wijzig de gedeelde URL zelf, wat triviaal makkelijk is wanneer je een korte link deelt die je zelf beheert in plaats van een permanent paginaadres.

Voordat je publiceert, haalt de gratis Open Graph-checker een URL op en toont de titel, beschrijving, afbeelding, sitenaam en een Twitter-kaartpreview die hij vindt. Hij leest alleen tags. Hij meldt geen afbeeldingsafmetingen en wist de cache van geen enkel platform.

Previews wanneer je een korte link deelt

Een korte link heeft geen eigen Open Graph-tags en heeft er ook geen nodig. De edge van Elido beantwoordt crawlers met de gewone redirect, omdat linkpreviews in chat-apps die moeten volgen, en telt die ophaalacties niet als klikken (het botfilter is een user-agentlijst, dus sommige gescripte ophaalacties kunnen erdoor glippen). De kaart wordt opgebouwd uit de tags van de bestemming. Is hij fout, repareer dan de bestemming.

Twee dingen hangen wel van de linklaag af. Een redirect aan de serverkant is de veilige keuze, nog een reden om de keten kort te houden. En een korte link herrichten verandert de preview, al blijven platformen die de oude kaart in de cache hebben die tonen.

Eén gat: Elido heeft geen OG-afbeelding of titel per link die je kunt overschrijven, dus een korte link kan geen andere kaart dragen dan zijn bestemming. Microsite-pagina's hebben wel een OG-afbeeldingsveld. Heb je kaarten per link nodig, laat het ons weten; het staat op onze backlog.

Om de link en de klikdata op één plek te krijgen, start je een werkruimte op je eigen domein en controleer je de kaart vóór de verzending.

Een checklist die het bewaren waard is

• 1200 bij 630, PNG of JPEG, absolute HTTPS-URL, onder 1 MB volgens onze gewoonte. Dat is de hele beslissing over het OG-afbeeldingsformaat.
• Niets van belang buiten de middelste 1080 bij 600 (onze vuistregel), geen dunne randen.
• og:image:width, og:image:height en og:image:alt aanwezig.
• twitter:card ingesteld op summary_large_image als je de grote kaart op X wilt.
• Nieuwe afbeelding, nieuwe bestandsnaam, en dan opnieuw scrapen voordat je iets aankondigt.

Krijg die vijf eenmalig goed, zet ze als sjabloon in je paginakop en Open Graph-afbeeldingen zijn niet langer iets waar je over nadenkt. Dat is de juiste hoeveelheid aandacht ervoor.

Lees de cornerstone-serie

Dit artikel staat in het tutorialscluster. Voor previews die helemaal mislukken in plaats van slecht bijgesneden te worden, is linkpreview wordt niet getoond de oplossing per platform, en een klikbare link maken behandelt de laag eronder.

Gerelateerd op de blog

• Linkpreview wordt niet getoond? Oorzaken en oplossingen
• Een link verkorten voor X (Twitter): wat t.co ermee doet
• Social-medialinks tracken: klikken per kanaal
• Wat is een branded link, en waarom converteert hij beter
• Een URL doorsturen: zes manieren en wanneer elke past
• Korte links met eigen domein: DNS, TLS en de edge