Miért néz ki csúnyán a weboldalad linkje WhatsAppon vagy Facebookon (és hogyan javítsd az OG-képet)
Elküldtél egy linket, és kép nélkül vagy rossz szöveggel jelent meg? Íme, miért történik, és hogyan javítsd ki az előnézetet néhány lépésben.
Elküldöd az ügyfélnek a weboldalad linkjét WhatsAppon, megnyomod a küldést, és... egy üres téglalap jelenik meg, kép nélkül, egy fura cím, vagy a nyers webcím elnyújtva rajta. Az első benyomás oda. Pedig te nem csináltál semmi rosszat a küldéskor: a probléma magában az oldalban rejlik.
Azt az előnézetet (a képet, címet és leírást, ami megjelenik, amikor beillesztesz egy linket) nem a WhatsApp vagy a Facebook varázsolja elő a semmiből. Te irányítod, az oldal kódjában elrejtett címkék segítségével, amiket Open Graphnak hívnak. Amikor ezek hiányoznak vagy rosszul vannak beállítva, az alkalmazás megpróbálja kitalálni, amit tud, és gyakran rosszul találja el. A jó hír: javítható, és általában nem is bonyolult. Nézzük meg pontosan, miért történik, és mit lehet tenni.
Mi is valójában az OG-kép (és miért látod mindenhol)
Az OG az Open Graph rövidítése, egy szabálygyűjtemény, amit a Facebook talált ki, és szinte mindenki átvett: WhatsApp, Facebook, LinkedIn, Telegram, Slack, még az iMessage is. Amikor valaki beilleszti a linkedet, az alkalmazás meglátogatja az oldalt, és beolvassa a kódban lévő speciális címkéket:
- `og:title` — az előnézetben megjelenő cím
- `og:description` — a cím alatti szövegsor
- `og:image` — a nagy kép
- `og:url` — az oldal hivatalos címe
Ha ezek a címkék léteznek és helyesek, egy tiszta kártyát kapsz a képeddel, a címeddel és egy világos leírással. Ha hiányoznak, az alkalmazás improvizál: felkapja az első címsort, amit talál, esetleg egy apró képet az oldalról, talán semmit sem. Innen jönnek az üres vagy furán kinéző kártyák.
A leggyakoribb okok, amiért nem jelenik meg a kép
Tapasztalatunk szerint szinte minden eset néhány egyszerű problémára vezethető vissza:
- Egyáltalán nincs `og:image` címke. Az oldal soha nem árulja el az alkalmazásnak, melyik képet mutassa, így egyet sem mutat.
- A kép túl kicsi vagy rossz alakú. A Facebook legalább 200x200 px-t szeretne; az ideális 1200x630 px (1,91:1 arány). A minimum alatt figyelmen kívül hagyja.
- A kép címe relatív, nem teljes. Egy teljes címnek kell lennie, ami `https://`-vel kezdődik, nem `/img/photo.jpg`. Az alkalmazás nincs a te oldaladon, nem tudja, honnan töltse le.
- A kép nem nyilvánosan elérhető — bejelentkezés mögött van, a robots.txt blokkolja, vagy az oldal nem HTTPS-en van.
- A fájl túl nagy. Különösen a WhatsApp dobja el a nagyon nagy képeket; tartsd néhány száz KB alatt.
Gyakran egyetlen ok van. Megtalálod, kijavítod, kész.
A rejtett bűnös: a gyorsítótár. Miért javítottad ki, és mégis rosszul néz ki
Ez az, ami az őrületbe kergeti az embereket: megváltoztatod az oldalt, újra beilleszted a linket, és az előnézet még mindig a régi (vagy még mindig üres). Nem rontottad el — a Facebook és a WhatsApp elmenti (gyorsítótárazza) az első verziót, amit látott, hogy ne kelljen minden megosztásnál újra letöltenie az oldalt. Így továbbra is a régi verziót mutatja.
A megoldás az, hogy rákényszeríted őket az oldal újraolvasására. A Facebooknak van egy ingyenes eszköze, a Sharing Debugger (keress rá: „Facebook Sharing Debugger”): illeszd be a linkedet, kattints a „Scrape Again” gombra, és rögtön látni fogod, melyik OG-címkéket olvassa be, milyen képet talál, és milyen hibák vannak. A WhatsApp ugyanazt a Facebook-gyorsítótárat használja, így miután ott lefuttattad a Scrape Againt, a WhatsApp is frissül. Egy kis biztonsági trükk: adj hozzá `?v=2`-t a link végéhez küldéskor, hogy az alkalmazás vadonatúj címként lássa.
Hogyan javítsd ki, lépésről lépésre
Ha van hozzáférésed az oldalhoz (vagy ahhoz, aki kezeli), a lépések a következők:
1. Készíts egy jó képet — 1200x630 px, a logóddal vagy egy tiszta vizuállal, nagy és minimális szöveggel, néhány száz KB alá mentve.
2. Add hozzá az OG-címkéket az oldal `<head>` részéhez: `og:title`, `og:description`, `og:image` (a teljes `https://` címmel), `og:url`.
3. HTTPS-en ellenőrizd, hogy a kép önmagában is megnyílik-e, közvetlenül egy böngészőben, bejelentkezés nélkül.
4. Futtasd le a Facebook Sharing Debuggert, kattints a Scrape Again gombra, és javítsd ki a jelzett hibákat.
5. Teszteld élesben — küldd el magadnak a linket WhatsAppon.
WordPressen egy SEO-bővítmény (Yoast, Rank Math) kód nélkül beállítja ezeket a mezőket. Egy tisztán, a nulláról épített oldalon egyszer beállítod, és mindenhol működik.
Amikor nem tudod magad megjavítani
Néha nincs hová kattintani: az oldal egy zárt platformon van, nem éred el a `<head>`-et, vagy egyszerűen nincs kedved a kóddal és bővítményekkel bajlódni egy zsúfolt délutánon. Ez teljesen rendben van.
Így dolgozunk mi az MPO Web Studiónál: olyan oldalakat építünk, ahol a WhatsApp- és Facebook-előnézet már az első megosztásnál jól néz ki, mert akkor állítjuk be, amikor megépítjük az oldalt, nem azután, hogy az első ügyfél panaszkodik. Távolról, országosan szállítunk, átlátható árakkal, és ingyenes demót készítünk neked, mielőtt bármit is fizetnél — pontosan látod, hogyan néz ki, mielőtt döntesz.
Ha csak azt szeretnéd, hogy kijavítsunk egy linket, ami most rosszul néz ki, írj nekünk WhatsAppon az oldal címével. Legtöbbször még aznap megmondjuk az okát.
Gyakran ismételt kérdések
Kijavítottam a képet, de még mindig nem jelenik meg WhatsAppon. Miért?+
Szinte biztosan a gyorsítótár az oka. A WhatsApp azokat az adatokat használja, amiket a Facebook elmentett, és azok régiek maradnak, amíg rá nem kényszeríted a frissítést. Menj a Facebook Sharing Debuggerhez, illeszd be a linket, kattints a „Scrape Again” gombra, majd küldd el újra a linket WhatsAppon. Ha még mindig nem frissül azonnal, adj hozzá `?v=2`-t a cím végéhez.
Mekkora legyen az előnézeti kép mérete?+
Ideális esetben 1200x630 px, 1,91:1 arányban — ez mindenhol jól néz ki. A Facebook által elfogadott minimum 200x200 px, de 1200 px alatt homályos lehet. Tartsd könnyűn a fájlt, néhány száz KB alatt, mert a WhatsApp néha eldobja a nagyon nagy képeket.
Használhatok minden oldalhoz más képet?+
Igen, és ez az ideális. Minden oldalnak lehet saját `og:image` címkéje és saját címe. A szolgáltatásaid oldala más képet mutathat, mint a kapcsolat oldalad. WordPressen ezt oldalanként állítod be a SEO-bővítményben.
Miért a webcím jelenik meg a cím helyett?+
Ez azt jelenti, hogy hiányzik az `og:title` (és valószínűleg a többi OG-címke is). Az alkalmazás nem talál világos címet, ezért azt jeleníti meg, ami épp kéznél van, gyakran magát az URL-t. Az OG-címkék hozzáadása azonnal megoldja.
Elromlik az előnézet, ha átköltöztetem az oldalt vagy megváltoztatom a képet?+
Igen, megváltozhat. Ha átnevezed vagy áthelyezed a képfájlt, a régi `og:image` cím sehova sem vezet, és az előnézet üressé válik. Bármilyen ilyen változtatás után futtasd le újra a Sharing Debuggert, és kattints a Scrape Again gombra.
7 hiba, amely elriasztja az ügyfeleket a weboldaláról
Adja meg az e-mail-címét, és azonnal itt megkapja az útmutatót. Spam nélkül.
Vrei să vezi cum ar arăta site-ul firmei tale?
Scrie-ne pe WhatsApp și îți pregătim GRATUIT un site demonstrativ, cu numele firmei tale. Îl vezi întâi — decizi după.