A WhatsApp link-előnézet nem jelenik meg? Javítsa ki az og:image-et

A WhatsApp link-előnézet nem megjelenése szinte mindig öt ok valamelyikére vezethető vissza: az oldalon nincs og:image címke, a kép URL-je nem érhető el nyilvánosan, a kép alakja nem megfelelő, ezért a WhatsApp levágja, a vágás rendben van, de az előnézet elavult, vagy a bolt SEO-bővítménye egy versengő címkét ír ki. Ez az útmutató mindegyik okot tárgyalja, azt is, hogy miért nem kényszerítheti a WhatsAppot frissítésre, és mit kell módosítani egy WooCommerce-boltban.

Rövid válasz

A WhatsApp a weboldal Open Graph címkéiből építi fel a link előnézetét. Ha a og:image hiányzik, nem érhető el, vagy nem 1200×630-as kártya formájú, akkor a megosztás csupasz linkként, szürke csempeként vagy rosszul levágott termékfotóként érkezik meg. A legtöbb WooCommerce-áruház termékoldalaihoz egyáltalán nem állítanak be og:image értéket – az SEO-bővítmény a statikus kiemelt képre esik vissza, és egy négyzet vagy álló termékfotó oldalai vagy teteje levágódnak.

1. Nincs og:image címke az oldalon

Ez a leggyakoribb ok egy webáruház esetében. A WordPress és a WooCommerce alapból nem bocsát ki og:image címkét termék-, kategória- vagy boltoldalakon, és egy olyan téma, amely nem kezeli az Open Graph protokollt, teljesen kihagyja a címkét.

Megoldás: nézze meg az oldal forráskódját, és ellenőrizze, hogy egy og:image címke jelen van-e, abszolút URL-lel (teljes https://… URL, soha ne relatív elérési út), és szerveroldalon renderelt-e — nem pedig JavaScripttel beszúrt a betöltés után. A WhatsApp nem futtatja az Ön JavaScriptjét.

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

Az üres eredmény a válasz: a WhatsAppnak nincs megjeleníthető képe.

2. A kép URL-je nem érhető el nyilvánosan

A WhatsApp-feltérképező ugyanúgy tölti le a képet, mint bármelyik névtelen kliens. A bejelentkezés mögött lévő, localhost-en tárolt, nyers IP-címen lévő vagy robots.txt által blokkolt útvonalon található URL hibát fog eredményezni.

Javítás: ellenőrizze, hogy az URL hitelesítő adatok nélkül is visszaadja a képet.

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

200 OK-re és Content-Type-re van szüksége, amelynek értéke image/png vagy image/jpeg.

A robots.txt csapda. A közösségi feltérképezők tiszteletben tartják a robots.txt-öt, ezért ha egy szabály blokkolja a képeket tartalmazó útvonalat, az elrontja az előnézetet – ráadásul olyan módon, amelyet könnyű félrediagnosztizálni. A Meta hibakeresője ezután azt jelzi, hogy „a képet nem lehetett feldolgozni. Lehet, hogy sérült, vagy érvénytelen formátumú", ami pontosan úgy hangzik, mint egy hibás megjelenítés. A curl ezt soha nem reprodukálja, mert a curl figyelmen kívül hagyja a robots.txt-öt. Ha a képei olyan útvonalról érkeznek, amelyre Disallow: szabály vonatkozik, az előnézet akkor is hibás lesz, ha a fájl egyébként érvényes. Mi magunk is belefutottunk ebbe a FastOG saját megjelenítési útvonalán, és egy leghosszabb egyezésű Allow: felülbírálással oldottuk meg.

3. A WhatsApp levágja a termékképét – és a kép szerkesztése sem oldja meg

Ezt a tünetet írják le a kereskedők úgy, hogy „a termékképeim le vannak vágva a WhatsAppon”, és ezt érdemes alaposan megérteni.

A platform minden kapott képet 1200×630-as keretre vág. A négyzet vagy álló formátumú termékfotó oldalait vagy tetejét levágja; a logóképet pedig megnyújtja. A forrásfotó kézi levágása a Photoshopban vesztes játszma, mert a WhatsApp a kártya képaránya alapján dönt a vágásról, nem pedig az Ön által választott kompozíció alapján – és a következő termékfotó megint más alakú lesz.

A megoldás az, hogy a kiszolgált képet változtatja meg, nem pedig a birtokolt fotót. Küldjön olyan kártyát, amely már eleve 1200×630-as méretben van összeállítva, a termékfotóval a kereten belülre illesztve. A platformnak így nem marad mit levágni.

4. A WhatsApp-link-előnézeti kép megfelelő mérete

A szabványos Open Graph képméret 1200×630 pixel — 1,91:1 képarány —, és ez az a forma, amelyet minden jelentős platform, beleértve a WhatsAppot is, elvár. Ha 1200×630-as képet szolgál ki, az előnézet a várt módon jelenik meg; ha viszont 1000×1000-es négyzetet ad meg, a WhatsApp levágja, hogy kitöltse a keretet.

Tartsa a fájlt 5 MB alatt. Egy 1200×630-as szöveg- és termékkártya általában 200 KB és 500 KB között van PNG formátumban.

Az OG-képméret: 1200×630 magyarázata című cikkben olvashatja, miért vált ez a képarány a szabvánnyá.

5. Az előnézet elavult – és a WhatsAppot nem lehet frissítésre kényszeríteni

Ha a címke, az URL és a formátum is helyes, az előnézet mégis hibás, akkor gyorsítótárral (cache) van dolga.

A WhatsApp gyorsítótárazza az előnézetet. Az a címzett alkalmazásában tárolódik, ami azt jelenti, hogy semmilyen eszköz nem kérheti a WhatsAppot a frissítésre – sem debugger, sem API, sem mi. A WhatsApp semmilyen programozott frissítést nem tesz elérhetővé, így nincs gomb, amit megnyomhatna. Aki mást állít, az a Facebook viselkedését írja le, nem a WhatsAppét.

Amit tehet, hogy gondoskodik róla, hogy a helyes kép várja a WhatsAppot, amikor legközelebb beolvassa az oldalt. Ezért a FastOG borítókép-URL-jei tartalom-alapú címzést használnak: ha a termék címe, ára vagy képe változik, az URL is változik vele, így a következő beolvasás nem veheti át a régi kártyát. Hogy mikor történik ez a beolvasás, az a WhatsAppon múlik.

Két kapcsolódó platform ugyanígy viselkedik – a LinkedIn és az X sem tesz elérhetővé érvénytelenítő API-t, és jellemzően körülbelül egy héten belül olvassa újra. A saját ellenőrző eszközeik segíthetnek ebben, ha siet:

A Facebook debugger használata WhatsApp-problémához. Érdemes az URL-t a Sharing Debuggerbe illeszteni, még akkor is, ha az nem tudja frissíteni a WhatsAppot, mert ugyanúgy kéri le az oldalt, ahogy a WhatsApp fogja, és jelenti, amit valójában talált – hiányzó címkéket, elérhetetlen képeket, hibás formátumokat. Tekintse a címkék ellenőrzőjének, nem pedig a WhatsApp-gyorsítótár javításának.

6. A probléma javítása WooCommerce-áruházon

WooCommerce esetén érdemes pontosan rögzíteni a munkafolyamatot, mert a hibamód általában nem a témából, hanem az SEO-bővítményből ered:

• A címke alapból nem létezik. A WooCommerce nem tartalmaz og:image-et a product, product_cat vagy a boltoldal számára.
• Az SEO-bővítmény rosszul tölti be a hiányt. A Yoast, a Rank Math, az All in One SEO és a SEOPress kinyomtat egy og:image-et – de egy termék esetében a statikus kiemelt képet (featured image) veszik elő. Ez egy négyzet vagy álló formátumú fotó, amelyet a WhatsApp pontosan ezért vág meg.
• Figyeljen a duplikált címkékre. Ha két bővítmény is nyomtat og:image-et, a platform az egyiket választja, és lehet, hogy nem azt, amelyikre számított. Nézze meg a forráskódot, és számolja meg, hány og:image címkét ad ki az oldal.

A FastOG for WooCommerce más utat választ: egy 1200×630-as kártyát renderel élő katalógusadatokból (cím, ár, akciós jelvény, értékelés, termékfotó) a saját renderelő szolgáltatásán, majd átadja ezt a borítóképet annak az SEO-bővítménynek, amelyet Ön már használ, ahelyett hogy versengő címkét nyomtatna. Így egyetlen og:image marad az oldalon, és az egy 1,91:1-es kerethez komponált kártya, nem pedig egy nyers termékfotó.

Mivel a borítóképek élő katalógusadatokból készülnek, a kártyán szereplő ár megegyezik az oldalon látható árral, és a kedvezményes termék akciós jelvényt kap. Amikor a felhasználó elment egy terméket, a bővítmény arra is kéri a Facebookot, hogy olvassa újra az oldalt – a Facebook az egyetlen platform, amely programozott frissítést kínál. A WhatsApp, a LinkedIn és az X a saját ütemezését követi, és a bővítmény ezt egyértelműen közli, ahelyett hogy olyan frissítést ígérne, amelyet nem tud teljesíteni.

• Telepítés: FastOG for WooCommerce a WordPress.org oldalán
• Részletek és GYIK: WooCommerce-integrációs oldal

Ellenőrizze, mit fog valójában látni a WhatsApp

Mielőtt bármit módosítana, nézze meg az oldalt úgy, ahogy egy crawler látja. Illesszen be bármilyen termék-URL-t a See Your Links The Way Buyers Do oldalra – ez lekéri az oldalt, beolvassa az aktuális Open Graph címkéket, és megmutatja az eredményül kapott előnézetet úgy, ahogy a WhatsApp, az X és a Messenger megjeleníti, egy FastOG-borító mellett, amely ugyanazokból a termékadatokból készült. Regisztráció nem szükséges.

Inkább a nyers címkéket vizsgálná? Használja az Open Graph Meta Tag Generator eszközt a markup megtekintéséhez, vagy nézze meg a referenciát az og:image Not Showing? How to Fix It oldalon.

GYIK

Miért vágja le a termékfotómat a WhatsApp?

A WhatsApp minden kapott képet 1200×630-as keretre vág. Egy négyzetes vagy álló formátumú termékfotó elveszíti az oldalait vagy a tetejét. Ha már eleve 1200×630-as méretben, a termékfotót a kártyába illesztve szolgálja ki a kártyát, a platformnak nem marad mit levágni.

Kényszeríthetem a WhatsAppot a link előnézet frissítésére?

Nem. A WhatsApp nem biztosít frissítési API-t vagy hibakeresőt, és a gyorsítótárazott előnézet a címzett alkalmazásában él. Csak azt tudja biztosítani, hogy a helyes kép várja a következő beolvasást. A Facebook a kivétel, és kínál programozott újra-begyűjtést.

Miért mutatja a Facebook Sharing Debugger a képemet, de a WhatsApp semmit?

Mert külön gyorsítótárakról van szó, és a hibakereső az oldal címkéiről ad jelentést, amelyeket mindkét platform olvas. Ha a hibakereső helyes képet mutat, de a WhatsApp egyet sem, akkor a címkék rendben vannak, és egy frissítetlen WhatsApp-gyorsítótárat lát. Ha a hibakereső sem mutat semmit, a címke hiányzik, vagy a kép nem érhető el — menjen végig az 1. és 2. okon.

A WhatsApp az og:image vagy a twitter:image címkét használja?

og:image. Állítsa be az Open Graph címkéket. A twitter:image az X-hez való.

Szükségem van bővítményre, vagy magam is hozzáadhatom a címkét?

Magától is hozzáadhat egy statikus og:image címkét a témájához — működik, és sokkal jobb, mint a semmi. Amit nem tud megtenni, az az, hogy termékenként egyedi kártyát hozzon létre anélkül, hogy termékenként egy képet kézzel készítene, és minden árváltozáskor elavulttá válik. Ezen a ponton éri meg a dinamikus borítókép.

Az oldalam nincs a FastOG-n. Ez akkor is segít?

Igen — az öt ok platform-viselkedés, nem FastOG-viselkedés. Menjen végig rajtuk sorrendben a curl, az oldal forráskódja és a hibakereső segítségével.

Kapcsolódó

• Az og:image nem jelenik meg? Így javíthatja
• Azonnali WhatsApp-képfrissítés WooCommerce-hez
• WooCommerce-ár szinkronizálása a WhatsApp-előnézetben
• Facebook Open Graph gyorsítótár kényszerített frissítése
• OG-képméret: 1200×630 magyarázat
• OG-képek gyorsítótárazása
• Aláírt OG-kép URL-ek
• Open Graph meta címke generátor