Waarom ziet je linkvoorbeeld er verkeerd uit, en hoe los je dat op met Open Graph

Je deelt een link naar je nieuwe landingspagina en het voorbeeld komt zonder foto, met de titel van je homepage of met een banner van twee campagnes geleden. De pagina zelf is prima. Het voorbeeld wordt opgebouwd uit iets anders: een paar regels code in de head van de pagina die de meeste mensen nooit zien.

Deze post behandelt de zes oorzaken achter de meeste kapotte voorbeelden, in de volgorde waarin je ze het best nagaat. Wil je dat de tags voor je worden geschreven, dan maakt de gratis Open Graph-generator ze, escapet ze correct en controleert ze tegen de onderstaande limieten.

Hoe een linkvoorbeeld wordt gemaakt

Wanneer een link in een post of bericht wordt geplakt, stuurt de app een crawler naar de pagina. De crawler leest de <meta>-tags in de <head> en tekent de kaart op basis daarvan. Die tags komen uit het Open Graph-protocol, dat er vier als verplicht benoemt:

• og:title: de titel van de pagina zoals die op de kaart moet verschijnen.
• og:type: wat de pagina is, meestal website of article.
• og:image: de afbeelding.
• og:url: de canonieke URL van de pagina, die het protocol zijn permanente ID noemt.

Voeg og:description toe en je hebt de kaart. Een volledige, minimale set ziet er zo uit:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Oorzaak 1: de tags ontbreken

Zonder og:-tags moet elke app terugvallen op wat ze verder op de pagina vindt, zoals de <title> of de eerste afbeelding, en wat ze kiezen hangt van die app af. Daardoor kan dezelfde link op de ene plek goed en op de andere kapot eruitzien. De oplossing is om op elke pagina die mensen zullen delen de vier verplichte tags plus een beschrijving op te nemen, niet alleen op de homepage. Een productpagina die de tags van de homepage gebruikt, toont de kaart van de homepage.

Oorzaak 2: de URL van de afbeelding is relatief

Dit is makkelijk over het hoofd te zien, want de pagina ziet er in je eigen browser prima uit. content="/images/og.jpg" werkt voor een browser die al op je site zit, maar de crawler staat daarbuiten. Schrijf het volledige adres, beginnend met https:// en je domein. Hetzelfde geldt voor og:url.

Oorzaak 3: de afbeelding heeft het verkeerde formaat of de verkeerde vorm

Elk platform vermeldt wat het wil, en ze zijn het toevallig eens over een brede afbeelding:

• LinkedIn zegt in zijn gids over het deelbaar maken van een website dat de afbeelding minstens 1200 × 627 pixels moet zijn, bij een aanbevolen verhouding van 1,91:1, en niet groter dan 5 MB.
• De best practices voor delen van Meta raden afbeeldingen aan die minstens 1080 pixels breed zijn voor schermen met een hoge resolutie, en minstens 600 breed om afbeeldingslinkadvertenties te tonen.
• De grote afbeeldingskaart van X ondersteunt een verhouding van 2:1 vanaf 300 × 157 tot 4096 × 4096 pixels, onder 5 MB, in JPG, PNG, WEBP of GIF, en ondersteunt geen SVG, volgens de ontwikkelaarsdocumentatie (de oorspronkelijke pagina verwijst nu door, dus deze link loopt via het Internet Archive).

Eén formaat past bij alle drie: 1200 × 630. Het haalt de minimale 1200 × 627 van LinkedIn, het is breder dan de 1080 van Meta, en de verhouding is 1200 ÷ 630 = 1,905, binnen 5% van de 2:1 van X. Een vierkante of hoge afbeelding wordt bijgesneden tot een brede kaart, dus houd het belangrijke deel in het midden. De rekenmachine voor beeldverhouding laat zien wat een bijsnijding in het midden bewaart.

Geef ook het formaat in de tags op. Meta vraagt om og:image:width en og:image:height, zodat de crawler de afbeelding meteen kan weergeven in plaats van die eerst te downloaden en te verwerken. De webmasterhandleiding zegt het eenvoudig: geef de hoogte en breedte op, zodat de afbeelding de eerste keer dat de pagina wordt gedeeld goed laadt.

Oorzaak 4: de tags worden door JavaScript toegevoegd

Sommige site-builders en single-page apps voegen metatags toe nadat de pagina in de browser is geladen. Een crawler die de HTML leest die je server verstuurt, voert die code misschien nooit uit en ziet de tags dus niet. Controleer de broncode van de pagina (Bekijk bron, niet de inspector, die de pagina toont nadat de scripts zijn uitgevoerd). Staan de tags niet in de bron, dan kan de crawler ze waarschijnlijk ook niet zien. De oplossing hoort in de instellingen van je site of in de server-side template.

Oorzaak 5: speciale tekens hebben de tag kapotgemaakt

Een titel met een dubbel aanhalingsteken erin, zoals The "only" linen you need, sluit het content="..."-attribuut te vroeg af en het rest van de titel gaat verloren. Tekens die er binnen een attribuut toe doen, moeten worden ge-escaped: " wordt ", & wordt &, en < wordt <. Browsers en crawlers zetten ze terug naar de oorspronkelijke tekens wanneer ze de tag lezen. De generator doet dit voor je, en dat is deels de reden om er een te gebruiken.

Oorzaak 6: de app onthoudt de oude versie

Je hebt de tags gerepareerd, opnieuw gedeeld, en de oude kaart staat er nog. Dat is de cache. Apps slaan op wat ze hebben opgehaald en hergebruiken het, en beide grote netwerken geven je een tool om om een verse versie te vragen:

• Facebook: plak de URL in de Sharing Debugger van Meta. De webmasterhandleiding van Meta zegt dat die laat zien welke tags de crawler heeft opgehaald, met eventuele fouten of waarschuwingen, en een nieuwe ophaalbeurt start. De best practices van Meta voegen toe dat opgehaalde inhoud anders bijwerkt op een standaardperiode van 24 uur.
• LinkedIn: haal de URL door de Post Inspector. De helppagina van LinkedIn is duidelijk over de limiet: de vernieuwing verandert het voorbeeld alleen voor nieuwe posts. Posts die de URL al bevatten, houden het oude voorbeeld.

Die LinkedIn-opmerking is er een om te onthouden voor een lancering. Controleer het voorbeeld voordat de eerste post eruit gaat, want een oude post repareer je niet door de pagina te repareren.

De twitter:card-tag: één regel, niet vier

X leest ook Open Graph. De referentie voor cardmarkup van X noemt voor elke tag een terugvalwaarde: 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. Je hoeft dus niet alles te herhalen. De ene regel die je toevoegt is twitter:card: summary_large_image voor een volbreedte afbeelding, of summary voor een klein vierkant beeld. Laat je hem weg, dan kan X volgens dezelfde referentie een kleine samenvattingskaart tonen, en daarom komt een grote afbeelding soms als miniatuur aan. Dezelfde referentie begrenst een titel op 70 tekens, een beschrijving op 200 en alt-tekst op 420.

Een controle van vijf minuten voor de lancering

1. Bekijk de bron van de pagina en zoek de og:-tags. Alle vier de verplichte, plus een beschrijving.
2. Controleer of og:image en og:url beginnen met https://.
3. Open de afbeelding-URL los in een browser. Ze moet laden, op 1200 × 630 of dichtbij.
4. Plak de URL in de Sharing Debugger en de Post Inspector en lees de kaarten.
5. Pas dan delen.

Waar Hermoso past

Hermoso is een AI-marketingagent: het onderzoekt de advertenties die in jouw markt al werken, maakt merkgetrouwe beeld- en videoadvertenties, plant de posts in op je eigen accounts en voert betaalde campagnes uit op je eigen advertentieaccounts. Een goed linkvoorbeeld maakt die posts de moeite waard om op te klikken. Hermoso werkt in de webapp, of in Claude, ChatGPT en Cursor via zijn MCP-server.

Veelgestelde vragen

Waarom toont mijn link geen afbeelding op Facebook of LinkedIn?

Meestal ontbreekt de og:image-tag, gebruikt die een relatief pad in plaats van een volledig https://-adres, of verwijst die naar een afbeelding die te klein is. LinkedIn vraagt minstens 1200 × 627 pixels. Herstel het en haal de URL daarna door de Sharing Debugger van Meta of de Post Inspector van LinkedIn, zodat ze hem opnieuw ophalen.

Welk formaat moet een Open Graph-afbeelding hebben?

1200 × 630 pixels werkt bij de grote netwerken. Het voldoet aan de minimale 1200 × 627 van LinkedIn bij ongeveer 1,91:1, is breder dan de 1080 pixels die Meta aanbeveelt, en ligt dicht bij de 2:1 die X ondersteunt voor grote afbeeldingskaarten.

Hoe werk ik een LinkedIn-linkvoorbeeld bij?

Los de tags op de pagina op en voer daarna de URL in de Post Inspector van LinkedIn in. Het vernieuwde voorbeeld geldt alleen voor nieuwe posts. Posts die de URL al bevatten, houden het oude voorbeeld.

Heb ik twitter:-tags nodig als ik og:-tags heb?

Alleen twitter:card. X valt terug op og:title, og:description, og:image en og:image:alt wanneer de twitter:-versies ontbreken.