Kortversjonen
- 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.
På denne siden
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.
Sannsynlig årsak
og:image-tagg på sidenLøsning
headSannsynlig årsak
/share.pngLøsning
https://Sannsynlig årsak
Løsning
Sannsynlig årsak
robots.txtLøsning
Sannsynlig årsak
Løsning
Sannsynlig årsak
Løsning
twitter:card satt til summary_large_imageSannsynlig årsak
Løsning
Sannsynlig årsak
Løsning
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.
<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>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.
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. 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.
Open Graph 1200×630
1200 × 630
LinkedIn-lenkebilde 1200×627
1200 × 627
Kvadratisk reserve 1200×1200
1200 × 1200
Ordene går rett over den lyseste delen av bakgrunnen og forsvinner i miniatyrstørrelse.
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 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.
En test på to minutter før du deler
- Se på sidekilden og bekreft at
og:imageer der med en fullstendig https-URL. - Åpne bilde-URL-en i et privat nettleservindu. Laster den ikke der, kan ikke crawlere laste den heller.
- Kjør URL-en gjennom LinkedIn Post Inspector eller Metas feilsøkingsverktøy for å se de tolkede taggene.
- Send lenken til deg selv i WhatsApp eller Slack og se på den på en telefon.
- 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 hovedbildet forhåndsvisningene ofte låner fra.
Spørsmål folk stiller
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.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår