Linkin esikatselukuva puuttuu: syyt ja korjaukset

Linkin esikatselukuva tulee yhdeltä sivusi HTML-riviltä: og:image-tagista. Kun WhatsApp, Slack, LinkedIn, iMessage tai muu alusta näkee linkin, indeksoija hakee sivun, lukee tagin ja lataa kuvan. Jos esikatselu on tyhjä tai väärä, jokin tässä ketjussa epäonnistui: tagi puuttuu, kuvaosoite on suhteellinen, indeksoija on estetty tai alusta näyttää yhä vanhaa kopiota välimuististaan.

Miksi linkin esikatselu hajoaa: vianmääritystaulukko

Aloita näkyvästä oireesta. Alla on kahdeksan rikkinäisten esikatselujen syytä, tavallisimmat ensimmäisinä.

Toimivan esikatselun tarvitsemat tagit

Tarvitset yllättävän vähän: otsikon, kuvauksen, täydellisen kuvaosoitteen, kuvan koon ja yhden lisärivin, jotta X näyttää suuren kortin pikkukuvan sijaan. Sivun ensisijainen URL og:url-tagissa auttaa alustoja yhdistämään saman sivun jaot.

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

Ohjelmistokehykset tekevät tästä helpon virheen. Latauksen jälkeen tagit asettava yksisivuinen sovellus näyttää esikatselun oikein joissakin paikoissa mutta epäonnistuu useimmissa. Käytä kehyksen palvelinpuolen metatietotoimintoa tai luo kuva sivukohtaisesti dynaamisten OG-kuvien ohjeen mukaan.

Välimuistiin tallennetun esikatselun päivittäminen

Alustat hakevat sivun kerran ja säilyttävät tuloksen jonkin aikaa. Tagien korjaaminen ei siis korjaa jo jaettuja julkaisuja eikä aina uusia jakojakaan. Käytä alustan omia työkaluja, jos sellaisia on, ja muuta muuten URL-osoitetta.

1. 1

   LinkedIn

   Liitä URL LinkedIn Post Inspectoriin. Se hakee sivun uudelleen ja näyttää täsmälleen, mitä LinkedIn näkee.

2. 2

   Facebook, Instagram ja WhatsApp

   Metan kehittäjätyökalujen Sharing Debugger näyttää löytämänsä tagit ja tarjoaa painikkeen uuteen hakuun. WhatsAppin päivittyminen voi kestää kauemmin.

3. 3

   Slack, Discord, iMessage ja muut

   Useimmilla ei ole julkista päivitystyökalua. Nimeä kuvatiedosto uudelleen, esimerkiksi autumn-v2.png, ja päivitä tagi, jotta indeksoija näkee uuden osoitteen.

4. 4

   Itsepintaiset tapaukset

   Jaa sivu harmittomalla kyselymerkkijonolla kuten ?v=2. Alustat käsittelevät sitä uutena linkkinä ja hakevat sen uudestaan.

Suunnittele kaikkialla toimiva esikatselukuva

Kun tagit toimivat, itse kuva ratkaisee, napauttaako kukaan. Tee siitä 1200×630, leveä kuva noin suhteessa 1,91:1. Kaikki suuret alustat hyväksyvät sen. Jotkin sovellukset näyttävät kuvan pienempänä tai rajaavat hieman sivuja, ja muutamat käyttävät neliötä. Pidä siksi sanat keskellä. Tarkat mitoitusohjeet ovat OG-kuvan koko -oppaassa.

Esikatselu on keskusteluketjussa pieni, joten pikkukuvien tekstin säännöt pätevät: muutama suuri sana, vahva kontrasti ja yksi ajatus. Gradientlyssä suunnitelman Mark pitää rauhallisimman alueensa sanojen takana ja valitsee vaalean tai tumman tekstin rivikohtaisesti. Otsikko pysyy näin luettavana riippumatta siitä, miten alusta skaalaa korttia. Aloita Studion linkin esikatselukoosta. Sama suunnitelma voi muuttua 1200×600-blogibanneriksi ja muiksi sosiaalisen median kuvakooiksi.

Kahden minuutin testi ennen jakamista

1. Avaa sivun lähdekoodi ja varmista, että og:image löytyy täydellisellä https-osoitteella.
2. Avaa kuvaosoite yksityisessä selainikkunassa. Jos se ei lataudu siellä, indeksoijatkaan eivät voi ladata sitä.
3. Tarkista luetut tagit syöttämällä URL LinkedIn Post Inspectoriin tai Metan vianmääritystyökaluun.
4. Lähetä linkki itsellesi WhatsAppissa tai Slackissa ja katso sitä puhelimella.
5. Jos jokin on vanhentunutta, muuta kuvatiedoston nimeä ja testaa uudelleen.

Tee tämä kerran jokaiselle sivustosi sivupohjalle, ei jokaiselle sivulle. Näin rikkinäiset esikatselut eivät enää yllätä. Jos rakennat sivustoa alusta asti, verkkosivun pääosion tausta -opas käsittelee pääkuvaa, josta esikatselut usein lainaavat.