Linkpreviews: waarom gedeelde links kapot lijken, en de oplossing

Een linkpreview-afbeelding komt uit één regel in de HTML van je pagina: de og:image-tag. Zodra een platform zoals WhatsApp, Slack, LinkedIn of iMessage een link ziet, haalt een crawler de pagina op, leest die tag en downloadt de afbeelding. Is de preview leeg of fout, dan is iets in die keten mislukt: de tag ontbreekt, het afbeeldingsadres is relatief, de crawler is geblokkeerd of het platform toont nog een oude kopie uit de cache.

Waarom linkpreviews kapotgaan: een diagnosetabel

Begin met het symptoom dat je ziet. De tabel hieronder behandelt de acht oorzaken achter kapotte previews, met de gebruikelijke verdachten eerst.

De tags die een werkende preview nodig heeft

Je hebt verrassend weinig nodig. Een titel, een beschrijving, een volledige afbeeldings-URL, het afbeeldingsformaat en één extra regel zodat X een grote kaart toont in plaats van een miniatuur. De canonieke URL van de pagina in og:url helpt platforms om shares van dezelfde pagina te groeperen.

<head>
  <title>Autumn menu | Hearth Bakery</title>
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/autumn">
  <meta property="og:title" content="Our autumn menu is here">
  <meta property="og:description" content="Pumpkin loaf, apple buns and spiced coffee, baked every morning.">
  <meta property="og:image" content="https://example.com/share/autumn-1200x630.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Autumn menu at Hearth Bakery">
  <meta name="twitter:card" content="summary_large_image">
</head>

Frameworks maken dit makkelijk fout. Een single-page-app die tags na het laden zet, toont op een paar plekken prima een preview en faalt op de meeste. Gebruik in plaats daarvan de metadatafunctie van je framework op de server, of genereer de afbeelding per pagina zoals beschreven bij dynamische OG-afbeeldingen.

Een gecachete linkpreview verversen

Platforms halen een pagina één keer op en bewaren het resultaat een tijdje, dus het herstellen van je tags herstelt geen posts die mensen al hebben gedeeld, en soms ook geen nieuwe shares. Gebruik de eigen tools van het platform waar ze bestaan en wijzig de URL waar ze ontbreken.

1. 1

   LinkedIn

   Plak de URL in de LinkedIn Post Inspector. Die haalt de pagina opnieuw op en toont precies wat LinkedIn ziet.

2. 2

   Facebook, Instagram en WhatsApp

   De Sharing Debugger van Meta, in de ontwikkelaarstools, toont de gevonden tags en heeft een knop om opnieuw te scrapen. WhatsApp kan er langer over doen om bij te komen.

3. 3

   Slack, Discord, iMessage en andere

   De meeste hebben geen openbare verversingstool. Hernoem het afbeeldingsbestand, bijvoorbeeld autumn-v2.png, en pas de tag aan, zodat de crawler een nieuw adres ziet.

4. 4

   Hardnekkige gevallen

   Deel de pagina met een onschuldige querystring zoals ?v=2. Platforms behandelen dat als een nieuwe link en halen hem vers op.

Een afbeelding ontwerpen die overal goed toont

Zodra de tags werken, bepaalt de afbeelding zelf of iemand tikt. Maak hem 1200×630, een breed beeld van ongeveer 1,91 op 1, dat elk groot platform accepteert. Sommige apps tonen hem kleiner of snijden iets van de zijkanten af en enkele vallen terug op een vierkant, dus houd de woorden in het midden. Het volledige verhaal over formaten staat bij OG-afbeeldingsformaat.

Een preview is piepklein in een chatthread, dus de regels van tekst op thumbnails gelden: een paar grote woorden, sterk contrast, één idee. In Gradiently houdt de Mark van een ontwerp zijn rustigste gebied achter de woorden en kiest per regel lichte of donkere letters, zodat de kop leesbaar blijft hoe het platform de kaart ook schaalt. Begin vanaf het formaat Linkpreview in de Studio en hetzelfde ontwerp kan je blogbanner van 1200×600 worden en de rest van je afbeeldingsformaten voor social media.

Een test van twee minuten voordat je deelt

1. Bekijk de paginabron en controleer dat og:image er staat met een volledige https-URL.
2. Open die afbeeldings-URL in een privévenster van je browser. Laadt hij daar niet, dan kunnen crawlers hem ook niet laden.
3. Haal de URL door de LinkedIn Post Inspector of de debugger van Meta om de verwerkte tags te zien.
4. Stuur de link naar jezelf in WhatsApp of Slack en bekijk hem op een telefoon.
5. Is er iets verouderd, wijzig dan de bestandsnaam van de afbeelding en test opnieuw.

Doe dit één keer voor elk sjabloon op je site, niet voor elke pagina, en kapotte previews zijn geen verrassing meer. Bouw je een site helemaal opnieuw, dan behandelt de gids over de heroachtergrond van een website de hoofdafbeelding waaruit die previews vaak putten.