Länkförhandsvisning: därför ser delade länkar trasiga ut

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.

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.

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

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.

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

   LinkedIn

   Klistra in URL:en i LinkedIns Post Inspector. Den hämtar sidan igen och visar exakt vad LinkedIn ser.

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

En förhandsvisning är pytteliten i en chatttråd, så reglerna från text på miniatyrer 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.

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 upp huvudbilden som de här förhandsvisningarna ofta lånar från.