# Linkin esikatselukuva puuttuu: syyt ja korjaukset

[Canonical HTML page](https://gradiently.design/fi/guide/link-preview-image)

Liität linkin keskusteluun ja saat harmaan laatikon, väärän kuvan tai puoliksi rajatun logon. Lähes jokainen rikkinäinen esikatselu johtuu yhdestä kahdeksasta syystä, ja ne kaikki voi korjata minuuteissa.

## The short version

- Linkin esikatselukuva on alustan URL-osoitetta jaettaessa näyttämä kuva, joka tulee sivun og:image-tagista.
- Yleisimmät syyt puuttuvaan esikatselukuvaan ovat puuttuva og:image-tagi, suhteellinen kuvaosoite, indeksoijalle saavuttamaton kuva ja JavaScriptillä latauksen jälkeen lisätyt tagit.
- Alustat tallentavat esikatselut välimuistiin, joten sivun korjaamisen jälkeen tarvitset usein vianmääritystyökalun tai uuden URL-osoitteen ennen kuin uusi kuva näkyy.
- 1200×630-kuva, jonka sanat ovat keskellä, toimii esikatseluna lähes kaikilla alustoilla.
- Linkin lähettäminen itsellesi yksityisviestissä on nopein tapa nähdä, mitä muut näkevät.

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

| Mitä näet | Todennäköinen syy | Korjaus |
| --- | --- | --- |
| Kuvaa ei näy lainkaan | Sivulta puuttuu `og:image`-tagi | Lisää tagi sivun `head`-osaan |
| Kuvaa ei näy, vaikka tagi on olemassa | Suhteellinen URL kuten `/share.png` | Käytä täydellistä `https://`-alkuista osoitetta |
| Kuva puuttuu vain joistakin sovelluksista | Tagit lisätään JavaScriptillä | Piirrä tagit palvelimella ensimmäiseen HTML-vastaukseen |
| Kuva puuttuu, vaikka URL on oikea | Kuva on kirjautumisen, palomuurin tai `robots.txt`-säännön takana | Tee kuvasta julkisesti saavutettava |
| Vanha kuva muutoksen jälkeen | Alusta tallensi ensimmäisen haun välimuistiin | Hae uudelleen vianmääritystyökalulla tai muuta kuvan URL |
| Pieni neliö suuren kortin sijaan | Kuva on liian pieni tai X:n suuren kortin tagi puuttuu | Käytä kokoa 1200×630 ja lisää `twitter:card` arvolla `summary_large_image` |
| Kuvan sivut leikkautuvat | Sanat ovat lähellä reunoja | Pidä teksti kuvan keskellä |
| Kuva latautuu hitaasti tai aikakatkaistaan | Tiedoston koko on useita megatavuja | Pakkaa kuva; muutama sata kilotavua riittää |

Käy lista läpi järjestyksessä. Kun esikatselu on tyhjä, vastaus löytyy lähes aina neljältä ensimmäiseltä riviltä.

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

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

Täydellinen tagijoukko. Huomaa absoluuttinen https-kuvaosoite; polku kuten /share/autumn.png on erittäin tavallinen virhe.

> **Katso lähdekoodia, älä sivua** Indeksoijat lukevat palvelimesi lähettämää raakaa HTML:ää, eivätkä useimmat suorita JavaScriptiä. Avaa sivusi, valitse Näytä sivun lähdekoodi ja etsi `og:image`. Jos sitä ei ole lähdekoodissa, keskustelusovellus ei löydä sitä, vaikka se näyttäisi oikealta selaimen tarkastelutyökalussa.

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](https://gradiently.design/fi/guide/dynamic-og-images) 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. **LinkedIn** Liitä URL [LinkedIn Post Inspectoriin](https://www.linkedin.com/post-inspector/). Se hakee sivun uudelleen ja näyttää täsmälleen, mitä LinkedIn näkee.
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. **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. **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](https://gradiently.design/fi/guide/open-graph-image-size) -oppaassa.

- Open Graph 1200×630: 1200 × 630
- LinkedIn-linkki 1200×627: 1200 × 627
- Neliövaraversio 1200×1200: 1200 × 1200

1200×630-kortti, LinkedInin lähes samanlainen linkkikuva ja neliö, johon osa sovelluksista rajaa. Keskitetyt sanat säilyvät kaikissa kolmessa.

Linkin esikatselukuva, jossa otsikko on liukuvärin kirkkaalla alueella ja vaikeasti luettava

Sanat kulkevat taustan kirkkaimman kohdan läpi ja katoavat pikkukuvakoossa.

Sama linkin esikatselukuva, jossa otsikon takana on liukuvärin tummempi ja rauhallisempi alue

Sama kortti, mutta sanojen takana on rauhallinen ja vahvan kontrastin alue. Luettava vilkkaassakin keskustelussa.

### Vältä

- Pelkkää logoa valkoisella
- Kuvakaappausta itse sivusta
- Pitkiä lauseita pienellä tekstillä
- Reunoihin osuvaa tekstiä
- Samaa kuvaa joka sivulla

### Tee näin

- Lyhyt sivun sisältöön sopiva otsikko
- Tausta, jonka ihmiset tunnistavat omaksesi
- Teksti, joka erottuu 300 pikselin leveydessä
- Selkeä marginaali joka puolella
- Oma kuva jokaiselle tärkeälle sivulle

Esikatselu on keskusteluketjussa pieni, joten [pikkukuvien tekstin](https://gradiently.design/fi/guide/typography-for-thumbnails) 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](https://gradiently.design/fi/guide/social-media-image-sizes).

## 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](https://gradiently.design/fi/guide/website-hero-background) -opas käsittelee pääkuvaa, josta esikatselut usein lainaavat.

## FAQ

### Miksi linkkini esikatselukuva ei näy?

Yleensä sivulta puuttuu og:image-tagi, tagissa on suhteellinen URL, kuva on estetty indeksoijilta tai tagit lisätään JavaScriptillä. Tarkista ensin sivun raaka lähdekoodi.

### Miten päivitän vanhaa kuvaa näyttävän esikatselun?

Alustat tallentavat esikatselut välimuistiin. Pyydä URL:n uutta hakua LinkedIn Post Inspectorilla tai Metan Sharing Debuggerilla tai nimeä kuvatiedosto uudelleen, jotta sen URL muuttuu.

### Minkä kokoinen linkin esikatselukuvan pitäisi olla?

1200×630 pikseliä. Pidä sanat keskellä, sillä jotkin sovellukset rajaavat sivut tai näyttävät kortin neliönä.

### Miksi X näyttää pienen pikkukuvan suuren kuvan sijaan?

Lisää `twitter:card`-metatagi arvolla `summary_large_image` ja varmista, että kuva on riittävän suuri, mieluiten 1200×630.

### Toimivatko linkkien esikatselut yksisivuisissa sovelluksissa?

Vain jos Open Graph -tagit ovat palvelimen lähettämässä HTML:ssä. Useimmat indeksoijat eivät suorita JavaScriptiä, joten selaimessa lisätyt tagit eivät näy niille.