# Länkförhandsvisning: därför ser delade länkar trasiga ut
[Canonical HTML page](https://gradiently.design/sv/guide/link-preview-image)
Du klistrar in länken i en chatt och får en grå ruta, fel bild eller en logotyp som klippts på mitten. Nästan varje trasig förhandsvisning beror på en av åtta orsaker, och alla går att åtgärda på några minuter.
## The short version
- Bilden i en länkförhandsvisning är den bild en plattform visar när någon delar en URL, och den kommer från sidans og:image-tagg.
- De vanligaste orsakerna till att bilden saknas är att og:image-taggen saknas, att bildens URL är relativ, att sökroboten inte når bilden och att taggar läggs till med JavaScript efter att sidan laddats.
- Plattformar cachar förhandsvisningar, så efter att du lagat en sida behöver du ofta ett felsökningsverktyg eller en ändrad URL innan den nya bilden syns.
- En bild på 1200×630 med texten i mitten förhandsvisas bra på nästan alla plattformar.
- Att testa länken i ett privat meddelande till dig själv är det snabbaste sättet att se vad andra kommer att se.
Bilden i en **länkförhandsvisning** kommer från en enda rad i sidans HTML: taggen `og:image`. När en plattform som WhatsApp, Slack, LinkedIn eller iMessage ser en länk hämtar en sökrobot sidan, läser taggen och laddar ner bilden. Är förhandsvisningen tom eller fel har något i kedjan gått snett: taggen saknas, bildadressen är relativ, sökroboten är blockerad eller plattformen visar fortfarande en gammal kopia ur sin cache.
## Därför går länkförhandsvisningar sönder: en diagnostabell
Börja med symptomet du kan se. Tabellen nedan går igenom de åtta orsakerna bakom trasiga förhandsvisningar, med de vanligaste misstänkta först.
| Det du ser | Trolig orsak | Åtgärd |
| --- | --- | --- |
| Ingen bild alls | Ingen `og:image`-tagg på sidan | Lägg till taggen i sidans `head` |
| Ingen bild, taggen finns | Relativ URL som `/share.png` | Använd hela adressen, med början `https://` |
| Ingen bild bara i vissa appar | Taggar som läggs in av JavaScript | Rendera taggarna på servern, i det första HTML-svaret |
| Ingen bild, URL:en stämmer | Bilden ligger bakom inloggning, brandvägg eller en regel i `robots.txt` | Gör bilden offentligt åtkomlig |
| Gammal bild efter en ändring | Plattformen cachade den första hämtningen | Hämta på nytt med ett felsökningsverktyg eller byt bildens URL |
| Liten ruta i stället för stort kort | Bilden är för liten, eller ingen tagg för stort kort på X | Använd 1200×630 och lägg till `twitter:card` satt till `summary_large_image` |
| Bilden är avklippt i sidorna | Text placerad nära kanterna | Håll texten i mitten av bilden |
| Bilden laddas långsamt eller får timeout | Filen är flera megabyte | Komprimera den, några hundra kilobyte räcker gott |
Arbeta dig nedåt i listan. När förhandsvisningen är tom finns svaret nästan alltid i de fyra första raderna.
## Taggarna en fungerande förhandsvisning behöver
Du behöver förvånansvärt lite. En titel, en beskrivning, en fullständig bild-URL, bildens storlek och en extra rad så att X visar ett stort kort i stället för en miniatyr. Sidans kanoniska URL i `og:url` hjälper plattformar att gruppera delningar av samma sida.
```html
Autumn menu | Hearth Bakery
```
En komplett uppsättning. Lägg märke till den absoluta https-adressen till bilden, och att en sökväg som /share/autumn.png är ett mycket vanligt misstag.
> **Titta på källkoden, inte på sidan** Sökrobotar läser den råa HTML som din server skickar och de flesta kör aldrig JavaScript. Öppna sidan, välj Visa sidans källa och sök efter `og:image`. Finns den inte där hittar ingen chattapp den, hur rätt det än ser ut i webbläsarens inspektör.
Ramverk gör det lätt att göra fel. En ensidesapp som sätter taggar efter att sidan laddats får en fungerande förhandsvisning på några ställen och misslyckas på de flesta. Använd i stället ramverkets funktion för metadata på serversidan, eller generera bilden per sida enligt [dynamiska OG-bilder](https://gradiently.design/sv/guide/dynamic-og-images).
## Så uppdaterar du en cachad länkförhandsvisning
Plattformar hämtar en sida en gång och sparar resultatet en stund, så att rätta dina taggar rättar inte inlägg som redan delats, och ibland inte nya delningar heller. Använd plattformens egna verktyg där de finns och ändra URL:en där de saknas.
1. **LinkedIn** Klistra in URL:en i [LinkedIns Post Inspector](https://www.linkedin.com/post-inspector/). Den hämtar sidan igen och visar exakt vad LinkedIn ser.
2. **Facebook, Instagram och WhatsApp** Metas Sharing Debugger, bland utvecklarverktygen, visar taggarna den hittade och har en knapp för att hämta på nytt. WhatsApp kan ta längre tid på sig att hänga med.
3. **Slack, Discord, iMessage med flera** De flesta saknar ett offentligt uppdateringsverktyg. Byt namn på bildfilen, till exempel `autumn-v2.png`, och uppdatera taggen, så att sökroboten ser en ny adress.
4. **Envisa fall** Dela sidan med en ofarlig frågesträng som `?v=2`. Plattformar behandlar den som en ny länk och hämtar den färskt.
## Designa en bild som förhandsvisas bra överallt
När taggarna fungerar är det bilden själv som avgör om någon trycker. Gör den 1200×630, en bred bild på ungefär 1,91 till 1 som alla stora plattformar accepterar. Vissa appar visar den mindre eller beskär lite från sidorna, och ett fåtal faller tillbaka på en kvadrat, så håll texten i mitten. Hela storleksberättelsen finns i [storlek på OG-bild](https://gradiently.design/sv/guide/open-graph-image-size).
- Open Graph 1200×630: 1200 × 630
- LinkedIn-länk 1200×627: 1200 × 627
- Kvadratisk reserv 1200×1200: 1200 × 1200
Kortet på 1200×630, LinkedIns nästan identiska länkbild och kvadraten som vissa appar beskär till. Centrerad text klarar alla tre.
En länkförhandsvisning där rubriken ligger över ett ljust parti av gradienten och är svår att läsa
Orden går rakt över den ljusaste delen av bakgrunden och försvinner i miniatyrstorlek.
Samma länkförhandsvisning med ett mörkare, lugnare parti av gradienten bakom rubriken
Samma kort med ett lugnt, kontrastrikt parti bakom orden. Läsbart även i en fullpackad chatt.
### Undvik
- Enbart din logotyp på vitt
- En skärmbild av själva sidan
- Långa meningar i liten stil
- Text som nuddar kanterna
- Samma bild på varje sida
### Gör så här
- En kort rubrik som matchar sidan
- En bakgrund som folk känner igen som din
- Text som är stor nog att läsa i 300 pixlars bredd
- Tydlig marginal runt om
- En bild per viktig sida
En förhandsvisning är pytteliten i en chatttråd, så reglerna från [text på miniatyrer](https://gradiently.design/sv/guide/typography-for-thumbnails) gäller: några få stora ord, stark kontrast, en idé. I Gradiently håller en designs Mark sitt lugnaste parti bakom orden och väljer ljus eller mörk text per rad, så rubriken förblir läsbar hur plattformen än skalar kortet. Utgå från storleken Länkförhandsvisning i Studio, så kan samma design bli din bloggbanner på 1200×600 och resten av dina [bildstorlekar för sociala medier](https://gradiently.design/sv/guide/social-media-image-sizes).
## Ett test på två minuter innan du delar
1. Visa sidans källa och bekräfta att `og:image` finns där med en fullständig https-URL.
2. Öppna bildens URL i ett privat webbläsarfönster. Laddas den inte där kan sökrobotar inte ladda den heller.
3. Kör URL:en genom LinkedIns Post Inspector eller Metas debugger för att se de tolkade taggarna.
4. Skicka länken till dig själv i WhatsApp eller Slack och titta på den i en telefon.
5. Är något inaktuellt byter du bildfilens namn och testar igen.
Gör det här en gång för varje mall på din sajt, inte för varje sida, så slutar trasiga förhandsvisningar att vara en överraskning. Bygger du en sajt från grunden tar guiden om [hero-bakgrund för webbplatser](https://gradiently.design/sv/guide/website-hero-background) upp huvudbilden som de här förhandsvisningarna ofta lånar från.
## FAQ
### Varför visas inte bilden i min länkförhandsvisning?
Oftast saknar sidan en og:image-tagg, taggen har en relativ URL, bilden är blockerad för sökrobotar eller så läggs taggarna till av JavaScript. Kontrollera sidans råa källa först.
### Hur uppdaterar jag en länkförhandsvisning som visar en gammal bild?
Plattformar cachar förhandsvisningar. Begär en ny hämtning av URL:en med LinkedIns Post Inspector eller Metas Sharing Debugger, eller byt namn på bildfilen så att dess URL ändras.
### Vilken storlek ska en bild i en länkförhandsvisning ha?
1200×630 pixlar. Håll orden i mitten, eftersom vissa appar beskär sidorna eller visar kortet som en kvadrat.
### Varför visar X en liten miniatyr i stället för en stor bild?
Lägg till en metatagg `twitter:card` satt till `summary_large_image` och se till att bilden är tillräckligt stor, helst 1200×630.
### Fungerar länkförhandsvisningar med ensidesappar?
Bara om Open Graph-taggarna finns i den HTML servern skickar. De flesta sökrobotar kör inte JavaScript, så taggar som läggs till i webbläsaren är osynliga för dem.