WhatsApp-linkin esikatselu ei näy? Korjaa og:image

WhatsApp-linkin esikatselun puuttuminen johtuu lähes aina yhdestä viidestä syystä: sivulla ei ole og:image-tunnistetta, kuvan URL ei ole julkisesti haettavissa, kuva on väärän muotoinen ja WhatsApp rajaa sen, rajaus on kunnossa mutta esikatselu on vanhentunut, tai kaupan SEO-liitännäinen tulostaa kilpailevan tunnisteen. Tämä opas käsittelee jokaisen syyn, miksi et voi pakottaa WhatsAppia päivittämään, ja mitä muuttaa WooCommerce-kaupassa.

Lyhyt vastaus

WhatsApp rakentaa linkin esikatselun (link preview) sivun Open Graph ‑tunnisteista. Jos og:image puuttuu, on tavoittamattomissa tai ei ole 1200×630-kortin muotoinen, jako saapuu paljaana linkkinä, harmaana laattona tai huonosti rajattuna tuotekuvana. Useimmat WooCommerce-kaupat eivät aseta og:image:ää tuotesivuille lainkaan — SEO-liitännäinen (SEO plugin) putoaa takaisin staattiseen pääkuvaan (featured image), ja neliönmuotoisesta tai korkeasta tuotekuvasta leikkautuvat sivut tai yläosa.

1. Sivulla ei ole og:image-tagia

Tämä on yleisin syy verkkokaupassa. WordPress ja WooCommerce eivät oletusarvoisesti lisää og:image-tagia tuote-, luokka- tai kauppasivuille, ja teema, joka ei käsittele Open Graphia, jättää tagin kokonaan pois.

Korjaus: tarkastele sivun lähdekoodia ja varmista, että og:image-tagi on läsnä, absoluuttinen (täysi https://…-URL, ei koskaan suhteellinen polku) ja palvelimen renderöimä — ei JavaScriptin latauksen jälkeen lisäämä. WhatsApp ei suorita JavaScriptiäsi.

curl -s https://your-store.com/product/example | grep -i 'og:image'

Tyhjä tulos on vastauksesi: WhatsAppilla ei ole kuvaa näytettävänä.

2. Kuvan URL-osoite ei ole julkisesti haettavissa

WhatAppin hakurobotti hakee kuvan samalla tavalla kuin mikä tahansa anonyymi asiakas. URL-osoite, joka on kirjautumisen takana, localhost-palvelimessa, raa'assa IP-osoitteessa tai robots.txt-säännön estämällä polulla, epäonnistuu.

Korjaus: varmista, että URL-osoite palauttaa kuvan ilman tunnistautumista.

curl -I https://your-store.com/wp-content/uploads/product.jpg

Haluat 200 OK-arvon ja Content-Type-arvon, joka on image/png tai image/jpeg.

robots.txt-ansa. Sosiaalisen median hakurobotit noudattavat robots.txt-sääntöjä, joten sääntö, joka estää kuviasi sisältävän polun, rikkoo esikatselun – ja se rikkoo sen tavalla, joka on helppo diagnosoida väärin. Metan debuggeri raportoi tällöin "could not be processed as an image. It may be corrupted or may have an invalid format", mikä kuulostaa täsmälleen rikkinäiseltä renderöinniltä. curl ei koskaan toista ongelmaa, koska curl ohittaa robots.txt-säännöt. Jos kuviasi palvellaan polusta, jota Disallow:-sääntö kattaa, esikatselu epäonnistuu riippumatta siitä, kuinka kelvollinen tiedosto on. Törmäsimme tähän itse FastOG:n omalla renderöintipolulla ja korjasimme sen pisimmän täsmäyksen Allow:-yliajolla.

3. WhatsApp rajaa tuotekuvasi — eikä kuvan muokkaaminen korjaa asiaa

Tämä on se oire, jota kauppiaat kuvailevat "tuotekuvani rajautuvat WhatsAppissa", ja se on oikeasti ymmärtämisen arvoinen.

Alusta rajaa sille annetun kuvan 1200×630-kehykseen. Neliönmuotoisesta tai korkeasta tuotekuvasta leikkautuvat sivut tai yläosa; logolaatta venytetään. Valokuvan rajaaminen käsin Photoshopissa on häviävä peli, koska WhatsApp päättää rajauksen kortin kuvasuhteen perusteella, ei sinun valitsemasi sommittelun — ja seuraava tuotekuva on taas eri muotoinen.

Ratkaisu on muuttaa kuvaa, jonka tarjoat, ei valokuvaa, jonka omistat. Lähetä kortti, joka on jo sommiteltu 1200×630-kokoon, ja tuotekuva sovitettuna sen sisään. Alustalle ei jää silloin mitään rajattavaa.

4. Oikea WhatsApp-linkin esikatselukuvan koko

Standardin mukainen Open Graph -kuvan koko on 1200×630 pikseliä — suhde 1.91:1 — ja se on muoto, jota jokainen suuri alusta, WhatsApp mukaan lukien, odottaa. Kun käytät 1200×630-kuvaa, esikatselu renderöityy tarkoitetulla tavalla; jos käytät 1000×1000-neliötä, WhatsApp rajaa sen täyttääkseen kehyksen.

Pidä tiedosto alle 5 Mt:n kokoisena. 1200×630-teksti- ja tuotekortti on yleensä PNG-muodossa 200 kt:n ja 500 kt:n välillä.

Katso OG-kuvan koko: 1200×630 selitettynä, miksi tästä suhteesta tuli standardi.

5. Esikatselu on vanhentunut — etkä voi pakottaa WhatsAppia päivittämään sitä

Jos tunniste, URL-osoite ja muoto ovat kaikki oikein ja esikatselu on silti väärä, kyseessä on välimuisti.

WhatsApp tallentaa esikatselun välimuistiin. Se säilytetään vastaanottajan sovelluksessa, mikä tarkoittaa, että mikään työkalu ei voi pyytää WhatsAppia päivittämään sitä — ei debuggeri, ei API, emmekä me. WhatsApp ei tarjoa minkäänlaista ohjelmallista päivitystä, joten painettavaa painiketta ei ole. Jokainen, joka väittää muuta, kuvailee Facebookin toimintaa, ei WhatsAppin.

Mitä voit tehdä, on varmistaa, että oikea kuva odottaa seuraavaa kertaa, kun WhatsApp lukee sivun. Siksi FastOG:n kansikuvien URL-osoitteet ovat sisältöosoitteisia: kun muutat tuotteen otsikkoa, hintaa tai kuvaa, URL-osoite muuttuu sen mukana, joten seuraava luku ei voi poimia vanhaa korttia. Milloin luku tapahtuu, on WhatsAppin päätettävissä.

Kaksi muuta alustaa toimii samalla tavalla — LinkedIn ja X eivät myöskään tarjoa invalidaatio-APIa, ja ne tyypillisesti lukevat uudelleen noin viikon kuluessa. Niiden omat tarkistustyökalut voivat nopeuttaa asiaa, jos on kiire:

Facebookin debuggerin käyttäminen WhatsApp-ongelmaan. On silti hyödyllistä liittää URL-osoite Sharing Debuggeriin, vaikka se ei voi päivittää WhatsAppia, koska se hakee sivun samalla tavalla kuin WhatsApp ja raportoi, mitä se todella löysi — puuttuvat tunnisteet, tavoittamattomat kuvat, virheelliset muodot. Käsittele sitä tunnisteiden validaattorina, ei korjauksena WhatsAppin välimuistiin.

6. Tämän korjaaminen WooCommerce-kaupassa

WooCommercessa työnkulku kannattaa käydä tarkasti läpi, koska tyypillinen vikatila johtuu yleensä SEO-liitännäisestä, ei teemasta:

• Tunnistetta ei ole oletuksena. WooCommerce ei sisällä og:image-tunnistetta product-, product_cat- tai kauppasivulle.
• SEO-liitännäinen täyttää aukon huonosti. Yoast, Rank Math, All in One SEO ja SEOPress tulostavat og:image-tunnisteen — mutta tuotteen kohdalla ne käyttävät staattista pääkuvaa (featured image). Se on neliön- tai pystykuva, joka on juuri se kuva, jonka WhatsApp sitten rajaa.
• Varo päällekkäisiä tunnisteita. Jos kaksi liitännäistä tulostavat molemmat og:image-tunnisteen, alusta valitsee toisen, eikä se välttämättä ole se, jota odotat. Katso sivun lähdekoodia ja laske, kuinka monta og:image-tunnistetta sivu tuottaa.

FastOG for WooCommerce toimii toisin: se renderöi 1200×630-kortin live-katalogidatasta (otsikko, hinta, alemerkki, arviointi, tuotekuvat) omassa renderöintipalvelussaan ja antaa sen kuvan käytössä olevallesi SEO-liitännäiselle sen sijaan, että tulostaisi kilpailevan tunnisteen. Näin sivulla on yksi og:image-tunniste, ja se on 1.91:1-kehykseen sommiteltu kortti, ei raaka tuotekuva.

Koska kannet piirretään live-katalogidatasta, kortin hinta vastaa sivun hintaa, ja alennettu tuote saa alemerkin. Kun tallennat tuotteen, liitännäinen pyytää myös Facebookia lukemaan sivun uudelleen — Facebook on ainoa alusta, joka tarjoaa ohjelmallisen päivityksen. WhatsApp, LinkedIn ja X noudattavat omaa aikatauluaan, ja liitännäinen kertoo tämän suoraan lupaamatta päivitystä, jota se ei voi toimittaa.

• Asennus: FastOG for WooCommerce WordPress.orgissa
• Tiedot ja UKK: WooCommerce-integraatiosivu

Tarkista, mitä WhatsApp todella näkee

Ennen kuin muutat mitään, katso sivua samalla tavalla kuin hakurobotti sen näkee. Liitä mikä tahansa tuote-URL-osoite See Your Links The Way Buyers Do -työkaluun — se hakee sivun, lukee sen nykyiset Open Graph -tagit ja näyttää tuloksena olevan esikatselun sellaisena kuin WhatsApp, X ja Messenger sen renderöivät, sekä FastOG-kannen, joka on rakennettu samoista tuotetiedoista. Rekisteröitymistä ei vaadita.

Haluatko mieluummin tarkastella raakatageja? Käytä Open Graph Meta Tag Generator -työkalua nähdäksesi merkinnän, tai katso viiteartikkeli og:image Not Showing? How to Fix It.

UKK

Miksi tuotekuvani rajautuu WhatsAppissa?

WhatsApp rajaa sille annetun kuvan 1200×630-kehykseen. Neliönmuotoinen tai pystysuuntainen tuotekuva menettää sivunsa tai yläosansa. Kun tarjoilet kortin, joka on jo koottu 1200×630-kokoon — tuotekuvan ollessa sovitettuna kortin sisään — alustalle ei jää mitään rajattavaa.

Voinko pakottaa WhatsAppin päivittämään linkin esikatselun?

Et. WhatsApp ei tarjoa päivitys-APIa tai virheenjäljitystyökalua, ja välimuistissa oleva esikatselu sijaitsee vastaanottajan sovelluksessa. Voit vain varmistaa, että oikea kuva odottaa seuraavaa lukukertaa. Facebook on poikkeus ja tarjoaa ohjelmallisen uudelleenhauinnan.

Miksi Facebookin Sharing Debugger näyttää kuvani, mutta WhatsApp ei näytä mitään?

Koska ne ovat erillisiä välimuisteja, ja debugger raportoi sivun tunnisteista, joita molemmat alustat lukevat. Jos debugger näyttää oikean kuvan mutta WhatsApp ei näytä mitään, tunnisteet ovat kunnossa ja kyseessä on päivittämätön WhatsApp-välimuisti. Jos debugger ei myöskään näytä mitään, tunniste puuttuu tai kuva ei ole tavoitettavissa — käy läpi syyt 1 ja 2.

Käyttääkö WhatsApp og:image- vai twitter:image-tunnistetta?

og:image. Aseta Open Graph -tunnisteet. twitter:image on X:ää varten.

Tarvitsenko liitännäisen vai voinko vain lisätä tunnisteen itse?

Voit lisätä staattisen og:image-tunnisteen teemaasi itse — se toimii ja on paljon parempi kuin ei mitään. Se ei kuitenkaan pysty tuottamaan erillistä korttia jokaista tuotetta kohden ilman, että kirjoitat käsin yhden kuvan jokaista tuotetta varten, ja se vanhenee joka kerta, kun hinta muuttuu. Siinä vaiheessa dynaaminen kansikuva on sen arvoista.

Sivustoni ei ole FastOG:ssa. Auttaako tämä silti?

Kyllä — viisi syytä ovat alustan käyttäytymistä, eivät FastOG:n käyttäytymistä. Käy ne läpi järjestyksessä curl:n, sivun lähdekoodin ja debuggerin avulla.

Aiheeseen liittyvää

• og:image ei näy? Näin korjaat sen
• WhatsApp-kuvan hetkellinen päivitys WooCommerceen
• WooCommerce-hintojen synkronointi WhatsApp-esikatselussa
• Pakota Facebookin Open Graph -välimuistin päivitys
• OG-kuvan koko: 1200×630 selitettynä
• OG-kuvien välimuistitus
• Allekirjoitetut OG-kuvan URL-osoitteet
• Open Graph -meta-tägien generaattori