# Linkpreviews: waarom gedeelde links kapot lijken, en de oplossing [Canonical HTML page](https://gradiently.design/nl/guide/link-preview-image) Je plakt je link in een chat en krijgt een grijs vak, de verkeerde afbeelding of een logo dat doormidden is gesneden. Bijna elke kapotte preview komt door een van acht oorzaken, en ze zijn allemaal in minuten te verhelpen. ## The short version - Een linkpreview-afbeelding is het beeld dat een platform toont als iemand een URL deelt, en het komt uit de og:image-tag van de pagina. - De meest voorkomende redenen dat een linkpreview-afbeelding ontbreekt zijn geen og:image-tag, een relatieve afbeeldings-URL, een afbeelding die de crawler niet kan bereiken en tags die door JavaScript worden toegevoegd nadat de pagina is geladen. - Platforms cachen previews, dus na het herstellen van een pagina heb je vaak een debugtool of een gewijzigde URL nodig voordat de nieuwe afbeelding verschijnt. - Een afbeelding van 1200×630 met woorden in het midden toont op bijna elk platform goed als preview. - Een link testen in een privébericht aan jezelf is de snelste manier om te zien wat anderen te zien krijgen. 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. | Wat je ziet | Waarschijnlijke oorzaak | Oplossing | | --- | --- | --- | | Helemaal geen afbeelding | Geen `og:image`-tag op de pagina | Voeg de tag toe aan de `head` van de pagina | | Geen afbeelding, tag aanwezig | Relatieve URL zoals `/share.png` | Gebruik het volledige adres, beginnend met `https://` | | Alleen in sommige apps geen afbeelding | Tags die door JavaScript worden ingevoegd | Render de tags op de server, in de eerste HTML-respons | | Geen afbeelding, URL klopt | Afbeelding achter een login, firewall of `robots.txt`-regel | Maak de afbeelding openbaar bereikbaar | | Oude afbeelding na een wijziging | Het platform heeft de eerste ophaling gecachet | Scrape opnieuw met een debugger of wijzig de afbeeldings-URL | | Klein vierkantje in plaats van een grote kaart | Afbeelding te klein, of geen tag voor een grote kaart op X | Gebruik 1200×630 en voeg `twitter:card` toe met waarde `summary_large_image` | | Afbeelding aan de zijkanten afgesneden | Woorden dicht bij de randen geplaatst | Houd tekst in het midden van het beeld | | Afbeelding laadt traag of verloopt | Bestand is enkele megabytes | Comprimeer het; een paar honderd kilobytes is ruim voldoende | Werk de lijst af. Als de preview leeg is, zit het antwoord bijna altijd in de eerste vier rijen. ## 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. ```html Autumn menu | Hearth Bakery ``` Een complete set. Let op de absolute https-afbeeldings-URL; een pad als /share/autumn.png is een veelgemaakte fout. > **Bekijk de bron, niet de pagina** Crawlers lezen de ruwe HTML die je server verstuurt en de meeste voeren nooit JavaScript uit. Open je pagina, kies Paginabron weergeven en zoek naar `og:image`. Staat het niet in die bron, dan vindt geen chat-app het, hoe goed het ook lijkt in de inspector van je browser. 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](https://gradiently.design/nl/guide/dynamic-og-images). ## 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. **LinkedIn** Plak de URL in de [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/). Die haalt de pagina opnieuw op en toont precies wat LinkedIn ziet. 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. **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. **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](https://gradiently.design/nl/guide/open-graph-image-size). - Open Graph 1200×630: 1200 × 630 - LinkedIn-link 1200×627: 1200 × 627 - Vierkante terugval 1200×1200: 1200 × 1200 De kaart van 1200×630, de bijna identieke linkafbeelding van LinkedIn en het vierkant waarop sommige apps bijsnijden. Gecentreerde woorden overleven alle drie. Een linkpreview-afbeelding waarbij de kop over een helder deel van het kleurverloop staat en moeilijk leesbaar is De woorden lopen dwars over het helderste deel van de achtergrond en verdwijnen op miniatuurformaat. Dezelfde linkpreview-afbeelding met een donkerder, rustiger deel van het kleurverloop achter de kop Dezelfde kaart met een rustig gebied met hoog contrast achter de woorden. Leesbaar, zelfs in een drukke chat. ### Vermijd - Alleen je logo op wit - Een screenshot van de pagina zelf - Lange zinnen in kleine letters - Tekst die de randen raakt - Dezelfde afbeelding voor elke pagina ### Doe - Een korte kop die bij de pagina past - Een achtergrond die mensen als de jouwe herkennen - Letters groot genoeg om op 300 pixels breed te lezen - Een duidelijke marge rondom - Eén afbeelding per belangrijke pagina Een preview is piepklein in een chatthread, dus de regels van [tekst op thumbnails](https://gradiently.design/nl/guide/typography-for-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](https://gradiently.design/nl/guide/social-media-image-sizes). ## 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](https://gradiently.design/nl/guide/website-hero-background) de hoofdafbeelding waaruit die previews vaak putten. ## FAQ ### Waarom wordt mijn linkpreview-afbeelding niet getoond? Meestal heeft de pagina geen og:image-tag, gebruikt de tag een relatieve URL, is de afbeelding voor crawlers geblokkeerd of worden de tags door JavaScript toegevoegd. Controleer eerst de ruwe paginabron. ### Hoe werk ik een linkpreview bij die een oude afbeelding toont? Platforms cachen previews. Vraag een nieuwe scrape van de URL aan met de LinkedIn Post Inspector of de Sharing Debugger van Meta, of hernoem het afbeeldingsbestand zodat de URL verandert. ### Hoe groot moet een linkpreview-afbeelding zijn? 1200×630 pixels. Houd de woorden in het midden, want sommige apps snijden de zijkanten af of tonen de kaart als vierkant. ### Waarom toont X een kleine miniatuur in plaats van een grote afbeelding? Voeg een `twitter:card`-metatag toe met waarde `summary_large_image` en zorg dat de afbeelding groot genoeg is, bij voorkeur 1200×630. ### Werken linkpreviews met single-page-apps? Alleen als de Open Graph-tags in de HTML staan die de server verstuurt. De meeste crawlers voeren geen JavaScript uit, dus tags die in de browser worden toegevoegd zijn voor hen onzichtbaar.