# Linkvisning: derfor ser dine delte links ødelagte ud, og løsningen
[Canonical HTML page](https://gradiently.design/da/guide/link-preview-image)
Du indsætter dit link i en chat og får en grå boks, det forkerte billede eller et logo, der er skåret over på midten. Næsten alle ødelagte linkvisninger skyldes én af otte årsager, og alle kan rettes på få minutter.
## The short version
- Et billede i linkvisningen er det billede, en platform viser, når nogen deler en URL, og det kommer fra sidens og:image-tag.
- De hyppigste grunde til, at billedet i en linkvisning mangler, er manglende og:image-tag, en relativ billed-URL, et billede som crawleren ikke kan nå, og tags der tilføjes af JavaScript, efter siden er indlæst.
- Platforme cacher visninger, så efter en rettelse skal du ofte bruge et fejlsøgningsværktøj eller en ændret URL, før det nye billede dukker op.
- Et billede på 1200×630 med ordene holdt i midten ser godt ud i visningen på næsten alle platforme.
- Den hurtigste måde at se, hvad andre vil se, er at teste linket i en privat besked til dig selv.
Et **billede i linkvisningen** kommer fra én linje i din sides HTML: `og:image`-tagget. Når en platform som WhatsApp, Slack, LinkedIn eller iMessage ser et link, henter en crawler siden, læser det tag og downloader billedet. Hvis visningen er tom eller forkert, er noget i den kæde gået galt: tagget mangler, billedadressen er relativ, crawleren er blokeret, eller platformen viser stadig en gammel kopi fra sin cache.
## Hvorfor linkvisninger går i stykker: en diagnosetabel
Start med det symptom, du kan se. Tabellen nedenfor dækker de otte årsager bag ødelagte visninger, med de sædvanlige mistænkte først.
| Hvad du ser | Sandsynlig årsag | Løsning |
| --- | --- | --- |
| Slet intet billede | Intet `og:image`-tag på siden | Tilføj tagget i sidens `head` |
| Intet billede, selvom tagget er der | Relativ URL som `/share.png` | Brug den fulde adresse, der starter med `https://` |
| Intet billede kun i nogle apps | Tags indsat af JavaScript | Skriv tagsene på serveren, i det første HTML-svar |
| Intet billede, selvom URL'en er rigtig | Billedet ligger bag login, firewall eller en `robots.txt`-regel | Gør billedet offentligt tilgængeligt |
| Gammelt billede efter en ændring | Platformen cachede den første hentning | Hent siden igen med et fejlsøgningsværktøj, eller skift billedets URL |
| Lille firkant i stedet for et stort kort | Billedet er for lille, eller der er intet tag til stort kort til X | Brug 1200×630, og tilføj `twitter:card` sat til `summary_large_image` |
| Billedet er skåret af i siderne | Ord placeret tæt på kanterne | Hold teksten i midten af billedet |
| Billedet indlæses langsomt eller timer ud | Filen fylder flere megabytes | Komprimér den; et par hundrede kilobytes er rigeligt |
Arbejd dig ned ad listen. Når visningen er tom, ligger svaret næsten altid i de første fire rækker.
## De tags, en fungerende visning har brug for
Du skal overraskende lidt til. En titel, en beskrivelse, en fuld billed-URL, billedets størrelse og én ekstra linje, så X viser et stort kort i stedet for en miniature. Sidens kanoniske URL i `og:url` hjælper platforme med at samle delinger af den samme side.
```html
Autumn menu | Hearth Bakery
```
Et komplet sæt. Læg mærke til den absolutte https-URL til billedet; en sti som /share/autumn.png er en meget almindelig fejl.
> **Se kilden, ikke siden** Crawlere læser den rå HTML, din server sender, og de fleste kører aldrig JavaScript. Åbn din side, vælg Vis sidens kilde, og søg efter `og:image`. Står det ikke i den kilde, finder ingen chatapp det, uanset hvor korrekt det ser ud i browserens inspektør.
Frameworks gør det let at tage fejl her. En single page-app, der sætter tags efter indlæsning, vil få en fin visning nogle få steder og fejle de fleste. Brug i stedet dit frameworks metadatafunktion på serversiden, eller generér billedet for hver side som beskrevet i [dynamiske OG-billeder](https://gradiently.design/da/guide/dynamic-og-images).
## Sådan opdaterer du en cachet linkvisning
Platforme henter en side én gang og gemmer resultatet et stykke tid, så en rettelse af dine tags retter ikke opslag, som folk allerede har delt, og nogle gange heller ikke nye delinger. Brug platformens egne værktøjer, hvor de findes, og skift URL'en, hvor de ikke gør.
1. **LinkedIn** Indsæt URL'en i [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/). Den henter siden igen og viser præcis, hvad LinkedIn ser.
2. **Facebook, Instagram og WhatsApp** Metas Sharing Debugger i deres udviklerværktøjer viser de tags, den fandt, og har en knap til at hente siden igen. WhatsApp kan være længere om at følge med.
3. **Slack, Discord, iMessage og andre** De fleste har intet offentligt opdateringsværktøj. Omdøb billedfilen, for eksempel `autumn-v2.png`, og opdater tagget, så crawleren ser en ny adresse.
4. **Genstridige tilfælde** Del siden med en harmløs query-streng som `?v=2`. Platforme behandler den som et nyt link og henter det på ny.
## Sådan designer du et billede, der ser godt ud overalt
Når tagsene virker, er det billedet selv, der afgør, om nogen trykker. Lav det i 1200×630, et bredt billede på cirka 1,91 til 1, som alle de store platforme accepterer. Nogle apps viser det mindre eller beskærer lidt fra siderne, og nogle få falder tilbage til en firkant, så hold ordene i midten. Hele historien om mål finder du i [OG-billedets størrelse](https://gradiently.design/da/guide/open-graph-image-size).
- Open Graph 1200×630: 1200 × 630
- LinkedIn-link 1200×627: 1200 × 627
- Firkantet reserve 1200×1200: 1200 × 1200
Kortet på 1200×630, LinkedIns næsten identiske linkbillede og den firkant, nogle apps beskærer til. Centrerede ord overlever alle tre.
Et billede i en linkvisning, hvor overskriften ligger over et lyst område af farveforløbet og er svær at læse
Ordene løber lige hen over den lyseste del af baggrunden og forsvinder i miniaturestørrelse.
Det samme billede i linkvisningen med et mørkere, roligere område af farveforløbet bag overskriften
Det samme kort med et roligt område med høj kontrast bag ordene. Læseligt selv i en fyldt chat.
### Undgå
- Dit logo alene på hvid
- Et skærmbillede af selve siden
- Lange sætninger i lille skrift
- Tekst, der rører kanterne
- Det samme billede til hver side
### Gør
- En kort overskrift, der passer til siden
- En baggrund, folk genkender som din
- Skrift, der er stor nok til at læse ved 300 pixels bredde
- En tydelig margen hele vejen rundt
- Ét billede til hver vigtig side
En visning er lille i en chattråd, så reglerne fra [tekst på miniaturer](https://gradiently.design/da/guide/typography-for-thumbnails) gælder: få store ord, stærk kontrast, én idé. I Gradiently holder et designs Mark sit roligste område bag ordene og vælger lys eller mørk skrift for hver linje, så overskriften forbliver læselig, uanset hvordan platformen skalerer kortet. Start fra størrelsen Linkvisning i Studio, så kan det samme design blive dit blogbanner på 1200×600 og resten af dine [størrelser til billeder på sociale medier](https://gradiently.design/da/guide/social-media-image-sizes).
## En test på to minutter, før du deler
1. Se sidens kilde, og bekræft, at `og:image` er der med en fuld https-URL.
2. Åbn billedets URL i et privat browservindue. Indlæses det ikke der, kan crawlere heller ikke indlæse det.
3. Kør URL'en gennem LinkedIn Post Inspector eller Metas debugger for at se de læste tags.
4. Send linket til dig selv i WhatsApp eller Slack, og se det på en telefon.
5. Hvis noget er forældet, så skift billedfilens navn, og test igen.
Gør det én gang for hver skabelon på dit site, ikke for hver side, så er ødelagte visninger ikke længere en overraskelse. Hvis du bygger et site fra bunden, dækker guiden om [baggrund til hjemmesidens heltesektion](https://gradiently.design/da/guide/website-hero-background) det hovedbillede, disse visninger ofte låner fra.
## FAQ
### Hvorfor vises billedet i min linkvisning ikke?
Som regel mangler siden et og:image-tag, tagget bruger en relativ URL, billedet er blokeret for crawlere, eller tagsene tilføjes af JavaScript. Tjek først sidens rå kilde.
### Hvordan opdaterer jeg en linkvisning, der viser et gammelt billede?
Platforme cacher visninger. Bed om en ny hentning af URL'en med LinkedIn Post Inspector eller Metas Sharing Debugger, eller omdøb billedfilen, så dens URL ændres.
### Hvor stort skal et billede i en linkvisning være?
1200×630 pixels. Hold ordene i midten, fordi nogle apps beskærer siderne eller viser kortet som en firkant.
### Hvorfor viser X en lille miniature i stedet for et stort billede?
Tilføj et `twitter:card`-metatag sat til `summary_large_image`, og sørg for, at billedet er stort nok, helst 1200×630.
### Virker linkvisninger med single page-apps?
Kun hvis Open Graph-tagsene står i den HTML, serveren sender. De fleste crawlere kører ikke JavaScript, så tags tilføjet i browseren er usynlige for dem.