Linkvisning: derfor ser dine delte links ødelagte ud, og løsningen

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.

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.

<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 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.

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. 1

   LinkedIn

   Indsæt URL'en i LinkedIn Post Inspector. Den henter siden igen og viser præcis, hvad LinkedIn ser.

2. 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. 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. 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.

En visning er lille i en chattråd, så reglerne fra tekst på miniaturer 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.

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 det hovedbillede, disse visninger ofte låner fra.