# Lenkeforhåndsvisning: hvorfor delte lenker ser ødelagte ut
[Canonical HTML page](https://gradiently.design/nb/guide/link-preview-image)
Du limer inn lenken i en chat og får en grå boks, feil bilde eller en logo kuttet i to. Nesten alle ødelagte forhåndsvisninger skyldes en av åtte årsaker, og alle kan rettes på få minutter.
## The short version
- Bildet i en lenkeforhåndsvisning er bildet en plattform viser når noen deler en URL, og det kommer fra sidens og:image-tagg.
- De vanligste grunnene til at bildet i lenkeforhåndsvisningen mangler, er at og:image-taggen ikke finnes, at bildeadressen er relativ, at crawleren ikke når bildet, og at taggene legges til med JavaScript etter at siden har lastet.
- Plattformer bufrer forhåndsvisninger, så etter at du har rettet en side, trenger du ofte et feilsøkingsverktøy eller en endret URL før det nye bildet dukker opp.
- Et bilde på 1200×630 med ordene holdt i midten forhåndsvises godt på nesten alle plattformer.
- Å teste en lenke i en privat melding til deg selv er den raskeste måten å se det andre vil se.
Bildet i en **lenkeforhåndsvisning** kommer fra én linje i sidens HTML: `og:image`-taggen. Når en plattform som WhatsApp, Slack, LinkedIn eller iMessage ser en lenke, henter en crawler siden, leser taggen og laster ned bildet. Er forhåndsvisningen tom eller feil, har noe i den kjeden feilet: taggen mangler, bildeadressen er relativ, crawleren er blokkert, eller plattformen viser fortsatt en gammel kopi fra hurtigbufferen.
## Hvorfor lenkeforhåndsvisninger svikter: en diagnosetabell
Start med symptomet du ser. Tabellen under dekker de åtte årsakene bak ødelagte forhåndsvisninger, med de vanligste først.
| Det du ser | Sannsynlig årsak | Løsning |
| --- | --- | --- |
| Ikke noe bilde i det hele tatt | Ingen `og:image`-tagg på siden | Legg taggen inn i sidens `head` |
| Ikke noe bilde, men taggen finnes | Relativ URL som `/share.png` | Bruk hele adressen, som starter med `https://` |
| Ikke noe bilde i bare noen apper | Tagger satt inn med JavaScript | Gjengi taggene på serveren, i det første HTML-svaret |
| Ikke noe bilde, URL-en er riktig | Bildet ligger bak innlogging, brannmur eller en regel i `robots.txt` | Gjør bildet offentlig tilgjengelig |
| Gammelt bilde etter en endring | Plattformen bufret den første hentingen | Hent på nytt med et feilsøkingsverktøy eller endre bilde-URL-en |
| Lite kvadrat i stedet for et stort kort | Bildet er for lite, eller det mangler tagg for stort kort på X | Bruk 1200×630 og legg til `twitter:card` satt til `summary_large_image` |
| Bildet er kuttet på sidene | Ordene står nær kantene | Hold teksten i midten av rammen |
| Bildet laster tregt eller tidsavbrytes | Filen er flere megabyte | Komprimer den; noen hundre kilobyte er mer enn nok |
Gå nedover listen. Når forhåndsvisningen er tom, ligger svaret nesten alltid i de fire første radene.
## Taggene en fungerende forhåndsvisning trenger
Du trenger overraskende lite. En tittel, en beskrivelse, en fullstendig bilde-URL, bildestørrelsen og én ekstra linje så X viser et stort kort i stedet for en miniatyr. Sidens kanoniske URL i `og:url` hjelper plattformer med å samle delinger av samme side.
```html
Autumn menu | Hearth Bakery
```
Et komplett sett. Legg merke til den absolutte https-adressen til bildet; en sti som /share/autumn.png er en svært vanlig feil.
> **Se på kildekoden, ikke siden** Crawlere leser den rå HTML-en serveren sender, og de fleste kjører aldri JavaScript. Åpne siden, velg Vis sidekilde og søk etter `og:image`. Står den ikke i kilden, finner ingen chatapp den, uansett hvor riktig den ser ut i nettleserens inspeksjonsverktøy.
Rammeverk gjør det lett å ta feil her. En enkeltsideapp som setter tagger etter lasting, forhåndsvises fint noen steder og feiler de fleste. Bruk heller rammeverkets funksjon for metadata på serversiden, eller lag bildet per side som beskrevet i [dynamiske OG-bilder](https://gradiently.design/nb/guide/dynamic-og-images).
## Slik oppdaterer du en bufret lenkeforhåndsvisning
Plattformer henter en side én gang og beholder resultatet en stund, så å rette taggene retter ikke innlegg folk allerede har delt, og noen ganger heller ikke nye delinger. Bruk plattformens egne verktøy der de finnes, og endre URL-en der de ikke gjør det.
1. **LinkedIn** Lim inn URL-en i [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/). Den henter siden på nytt og viser nøyaktig det LinkedIn ser.
2. **Facebook, Instagram og WhatsApp** Metas Sharing Debugger, i utviklerverktøyene deres, viser taggene den fant, og har en knapp for å hente på nytt. WhatsApp kan bruke lengre tid på å ta igjen.
3. **Slack, Discord, iMessage og andre** De fleste har ikke noe offentlig verktøy for oppdatering. Gi bildefilen nytt navn, for eksempel `autumn-v2.png`, og oppdater taggen, så ser crawleren en ny adresse.
4. **Sta tilfeller** Del siden med en harmløs spørrestreng som `?v=2`. Plattformene behandler den som en ny lenke og henter den på nytt.
## Design et bilde som forhåndsvises godt overalt
Når taggene virker, er det selve bildet som avgjør om noen trykker. Lag det i 1200×630, en bred ramme på omtrent 1,91 til 1, som alle de store plattformene godtar. Noen apper viser det mindre eller kutter litt fra sidene, og noen få faller tilbake til kvadrat, så hold ordene i midten. Hele historien om størrelser står i [størrelse på OG-bilder](https://gradiently.design/nb/guide/open-graph-image-size).
- Open Graph 1200×630: 1200 × 630
- LinkedIn-lenkebilde 1200×627: 1200 × 627
- Kvadratisk reserve 1200×1200: 1200 × 1200
Kortet på 1200×630, LinkedIns nesten identiske lenkebilde og kvadratet noen apper beskjærer til. Ord i midten overlever alle tre.
Et bilde for lenkeforhåndsvisning der overskriften ligger over et lyst område av gradienten og er vanskelig å lese
Ordene går rett over den lyseste delen av bakgrunnen og forsvinner i miniatyrstørrelse.
Det samme bildet for lenkeforhåndsvisning med et mørkere, roligere område av gradienten bak overskriften
Samme kort med et rolig område med høy kontrast bak ordene. Lesbart selv i en travel chat.
### Unngå
- Logoen alene på hvitt
- Et skjermbilde av selve siden
- Lange setninger i liten skrift
- Tekst som berører kantene
- Samme bilde for hver side
### Gjør
- En kort overskrift som stemmer med siden
- En bakgrunn folk kjenner igjen som din
- Skrift stor nok til å leses i 300 piksler bredde
- En tydelig marg rundt hele
- Ett bilde per viktig side
En forhåndsvisning er bitteliten i en chattråd, så reglene fra [tekst på miniatyrbilder](https://gradiently.design/nb/guide/typography-for-thumbnails) gjelder: noen få store ord, sterk kontrast, én idé. I Gradiently holder designets Mark det roligste området bak ordene og velger lys eller mørk skrift per linje, så overskriften forblir lesbar uansett hvordan plattformen skalerer kortet. Start fra størrelsen Lenkeforhåndsvisning i Studio, så kan det samme designet bli bloggbanneret ditt på 1200×600 og resten av [bildestørrelsene for sosiale medier](https://gradiently.design/nb/guide/social-media-image-sizes).
## En test på to minutter før du deler
1. Se på sidekilden og bekreft at `og:image` er der med en fullstendig https-URL.
2. Åpne bilde-URL-en i et privat nettleservindu. Laster den ikke der, kan ikke crawlere laste den heller.
3. Kjør URL-en gjennom LinkedIn Post Inspector eller Metas feilsøkingsverktøy for å se de tolkede taggene.
4. Send lenken til deg selv i WhatsApp eller Slack og se på den på en telefon.
5. Er noe utdatert, endrer du navnet på bildefilen og tester igjen.
Gjør dette én gang for hver mal på nettstedet, ikke for hver side, så slutter ødelagte forhåndsvisninger å være en overraskelse. Bygger du et nettsted fra bunnen, dekker guiden om [bakgrunn for toppfeltet på nettsiden](https://gradiently.design/nb/guide/website-hero-background) hovedbildet forhåndsvisningene ofte låner fra.
## FAQ
### Hvorfor vises ikke bildet i lenkeforhåndsvisningen min?
Som regel har siden ingen og:image-tagg, taggen bruker en relativ URL, bildet er blokkert for crawlere, eller taggene legges til med JavaScript. Sjekk den rå sidekilden først.
### Hvordan oppdaterer jeg en lenkeforhåndsvisning som viser et gammelt bilde?
Plattformer bufrer forhåndsvisninger. Be om en ny henting av URL-en med LinkedIn Post Inspector eller Metas Sharing Debugger, eller gi bildefilen nytt navn så URL-en endres.
### Hvilken størrelse bør et bilde for lenkeforhåndsvisning ha?
1200×630 piksler. Hold ordene i midten, fordi noen apper kutter sidene eller viser kortet som et kvadrat.
### Hvorfor viser X en liten miniatyr i stedet for et stort bilde?
Legg til en `twitter:card`-metatagg satt til `summary_large_image`, og sørg for at bildet er stort nok, helst 1200×630.
### Fungerer lenkeforhåndsvisninger med enkeltsideapper?
Bare hvis Open Graph-taggene ligger i HTML-en serveren sender. De fleste crawlere kjører ikke JavaScript, så tagger som legges til i nettleseren, er usynlige for dem.