OG-afbeelding: 1200×630 linkvoorbeelden die overal werken

Het formaat voor een OG-afbeelding dat bijna overal werkt is 1200×630 pixels, een liggende verhouding van ongeveer 1,91 op 1. Facebook, LinkedIn, X, Slack, Discord en de meeste berichtenapps bouwen hun linkvoorbeelden uit dit ene beeld, dat je opgeeft in de og:image-tag van je pagina. LinkedIn noemt voor zijn linkafbeelding 1200×627, dichtbij genoeg om beide met één bestand van 1200×630 te bedienen.

Open Graph 1200×630

1200 × 630

LinkedIn-linkafbeelding 1200×627

1200 × 627

Middenvierkant 630×630

630 × 630

Wat een Open Graph-afbeelding is, en hoe voorbeelden worden opgehaald

Open Graph is een set meta-tags in de head van een webpagina. Wanneer iemand je link in een post of chat plakt, stuurt het platform een crawler naar de pagina, leest die tags, downloadt het beeld en tekent de voorbeeldkaart. Dat doet het één keer, en daarna bewaart het het resultaat in de cache, soms dagenlang.

Over drie details struikelen de meeste mensen. Het adres van het beeld moet een volledige URL zijn die begint met https://, geen relatief pad. Het moet voor iedereen laden, zonder inlogscherm of cookiebanner ertussen. En de tags moeten in de HTML staan die je server verstuurt, want de meeste crawlers voeren geen JavaScript uit, dus tags die een script toevoegt nadat de pagina is geladen, worden nooit gezien.

<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />

Een OG-afbeelding ontwerpen die leest op thumbnailformaat

Een beeld van 1200×630 wordt zelden op 1200 pixels gezien. In een feed op een telefoon krimpt het tot een strook zo breed als het scherm, en in een chat kan het nog kleiner zijn. Ontwerp voor de kleine versie: een korte kop, grote letters, sterk contrast, en niets in de hoeken dat ertoe doet.

• Drie tot zeven woorden. De paginatitel ingekort tot de kern, niet de volledige titel.
• Grote letters. Op het canvas van 1200×630 blijft een kop van zo’n 64 tot 96 pixels hoog leesbaar wanneer het voorbeeld krimpt.
• Marges van ongeveer 60 pixels of meer, zodat niets een rand raakt die een platform kan afronden of bijsnijden.
• Eén kleine merksignatuur, zoals een woordmerk of de naam van je site, op elk beeld op dezelfde plek.
• Een consistente achtergrond, zodat mensen je links herkennen voordat ze ze lezen.

Contrast telt op kleine formaten zwaarder, niet lichter. Controleer of je kop de verhoudingen in kleurcontrast haalt, en test bij een achtergrond met kleurverloop het contrast op de plek waar de woorden echt staan. Tekst op een kleurverloop laat zien hoe je de rustige zone vindt.

Eén OG-afbeelding voor de hele site, of één per pagina

Elke site heeft een standaardbeeld nodig voor pagina’s die niets beters hebben. Maar met een standaardbeeld op elke pagina ziet elke gedeelde link er hetzelfde uit, en kan niemand aan het voorbeeld zien welke pagina het is. De pagina’s die mensen het meest delen, verdienen een eigen beeld.

Voor elk artikel met de hand een apart beeld maken schaalt niet. De meeste moderne frameworks kunnen een OG-afbeelding uit een template renderen wanneer de pagina wordt gebouwd of voor het eerst wordt opgevraagd; dynamische OG-afbeeldingen loopt de aanpak door.

Zo test je je linkvoorbeelden

1. 1

   Controleer de tags

   Open de pagina, bekijk de bron en zoek naar og:image. Staat het niet in de bron, dan zien crawlers het niet.

2. 2

   Open het adres van het beeld

   Plak de og:image-URL in een privévenster van je browser. Het beeld hoort direct te laden, via https, zonder inloggen.

3. 3

   Gebruik de inspector van het platform

   De LinkedIn Post Inspector laat zien hoe LinkedIn een URL ziet en ververst de cache. Facebook heeft een vergelijkbare Sharing Debugger.

4. 4

   Stuur het naar jezelf

   Plak de link in een chatapp en in een conceptpost. Bekijk het voorbeeld op een telefoon, waar het het kleinst is.

5. 5

   Omzeil de cache na wijzigingen

   Blijft er een oud beeld verschijnen, geef het nieuwe beeld dan een nieuw adres, bijvoorbeeld door ?v=2 aan de URL toe te voegen, en inspecteer opnieuw.

Bestandsformaat en gewicht

Gebruik PNG voor ontworpen kaarten met letters en vlakke kleur, en JPEG voor fotografische beelden. Vermijd SVG, dat de meeste crawlers niet accepteren voor voorbeelden, en wees voorzichtig met nieuwere formaten die sommige platforms misschien niet lezen. Houd het bestand licht, zodat de crawler het snel ophaalt; een ontworpen kaart hoeft zelden groot te zijn. Een vleugje korrel voorkomt banding in een kleurverloop wanneer een platform het opnieuw comprimeert.

In Gradiently is Linkvoorbeeld (Open Graph) 1200×630 een van de ingebouwde formaten, dus je kunt een post met kopiëren naar formaten opnieuw opmaken als voorbeeld en één look houden over post en link. Bij een lancering is de OG-afbeelding één punt op een langere lijst; visuals voor je lanceerdag heeft de volledige checklist.