Igen gyakran előfordul, hogy egy WordPress bejegyzés Facebookon történő megosztása esetén nem a hozzá tartozó megfelelő előnézeti kép jelenik meg, és ilyenkor még ha sikerül is kicserélnünk azt vagy beállítanunk másik fotót, akkor sem történik változás újbóli megosztáskor. A probléma szerencsére legtöbbször könnyen orvosolható, ebben fogunk most segíteni.
A weboldalak úgynevezett OpenGraph (og) HTML tagek segítségével közlik a Facebook-al a megosztásunk legfontosabb paramétereit, úgy mint az aktuálisan megosztott oldalhoz tartozó előnézeti képet, a leírást, szerzőt, címet és még sok egyéb más paramétert is. Ezekről bővebben a hivatalos OpenGraph leírásban olvashatsz. Ha valamelyik ilyen tag hiányzik vagy nem megfelelően van formázva, akkor történhetnek a megosztás során bizonyos anomáliák. Például a megosztási képért felelős “og:image” tag hiánya esetén a Facebook saját maga választ egy előnézeti képet az oldalon található fotók közül, ez pedig legtöbbször nem lesz számunkra megfelelő.
Az OpenGraph tagek minden esetben a HTML kód <head> és </head> része között találhatók, ahogy a következő példa is mutatja:
<html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="//ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
Ahhoz, hogy az oldalunk teljesen Facebook kompatibilis legyen kötelezően használnunk kell a fent található meta tageket. Ezeken kívül is vannak még természetesen opcionális tagek, de ezek a kötelezők:
og:title: Az oldal címe
og:type: Az oldal típusa
og:url: Az oldal linkje
og:image: Az oldal megosztási képe
WordPress esetén ezek a tagek alapértelmezetten nincsenek jelen, viszont nagyon sok bővítmény dolgozik velük, ilyen például a Yoast SEO, de az összes többi SEO plugin beállításaiban is lehetőségünk van testreszabni őket. Itt meg kell jegyezni, hogy alapértelmezetten a bejegyzéshez csatolt kiemelt kép lesz az oldal Facebook megosztási képe is.
Ha tehát nem a megfelelő kép jelenik meg egy bejegyzés megosztásakor, akkor az első lépésünk az legyen, hogy ellenőrizzük, hogy az oldal forráskódjában egyáltalán jelen vannak-e a fent is látható szükséges OpenGraph tagek. Amennyiben nincsenek, úgy telepítsük például az imént említett Yoast SEO-t, mely azon túl, hogy automatikusan elhelyezi a szükséges tageket még lehetőséget is ad minden bejegyzés/oldal esetén egyénileg megadni az OG leírást, címet és megosztási képet, ráadásul még a weblapunk keresőoptimalizálásában is segítséget nyújt.
Másik gyakori hibaforrás, hogy az og:image mérete kisebb, mint az oldalon található egyéb képek mérete, ilyen esetben a Facebook mindig a nagyobb méretű képeket fogja preferálni és ezen okból kifolyólag ignorálja az általunk beállított képet. A megoldás tehát annyi, hogy állítsunk be legalább 1200×630 pixel méretű megosztási (kiemelt) képet.
Az is probléma lehet, ha több ugyanolyan OpenGraph tag szerepel a forráskódban. Általában akkor fordul elő ilyesmi, ha több bővítményt is használunk erre a célra, ezek pedig hajlamosak összeakadni és felülírni egymás beállításait. Ha nem szeretnénk ebből problémát, akkor maradjunk csak egy pluginnál, például a Yoast SEO-nál.
Ha használunk valamilyen cache bővítményt, akkor azok is meg tudják kavarni a tagek viselkedését a gyorsítótárazott statikus tartalom miatt. Első körben ürítsük a gyorsítótárat, ha ez nem segít, akkor ideiglenesen kapcsoljuk ki a plugint a tesztelés idejére.
Csak, hogy ne legyen egyszerű a dolgunk fontos tudni, hogy a Facebook is gyorsítótáraz. Ez annyit jelent, hogy ha egyszer megosztottunk egy tartalmat, akkor a következő megosztás alkalmával már nem kéri le a weboldalról újra az ehhez tartozó tageket (így a képet sem), tehát még ha javítottuk is a problémát akkor is a régi (hibás) előnézeti kép köszön majd vissza. Kevesen tudják, de erre is van megoldás, mégpedig a Facebook saját hivatalos OpenGraph hibakereső eszköze: https://developers.facebook.com/tools/debug/
Másoljuk be a mezőbe a megosztott bejegyzés vagy oldal linkjét, majd kattintsunk a “Debug” gombra. A “Time Scraped” melletti idő mutatja, hogy legutóbb mikor lettek lekérve a weboldalról a tagek, de ezt mi manuálisan bármikor újra tudjuk olvastatni a “Scrape Again” gombbal. Ilyenkor frissíti a Facebook a megosztási gyorsítótárát és ha mindent jól csináltunk, akkor a”Link Preview” szekcióban (és ismételt megosztás esetén is) már a megfelelő kép/cím/leírás jelenik majd meg. Természetesen ha bármilyen hibát vagy figyelmeztetést dobna az eszköz, akkor azokat mindenképpen javítsuk. Jelzi, ha nem megfelelő méretű a képünk, de azt is, ha hiányoznak bizonyos tagek.
Összegezve: Ha nem megfelelő a megosztási képünk, akkor ellenőrizzük a forráskódban OG tageket, ha a helyükön vannak, akkor ellenőrizzük a kép méretét, ha nem kisebb, mint 1200×630, akkor futtassuk a Facebook hibakereső eszközét, ha van hiba javítsuk. Ha nem lennének jelen a szükséges tagek, akkor telepítsünk egy OpenGraph-et támogató bővítményt, például a Yoast SEO-t és igény esetén adjuk meg a hibásan megjelenő bejegyzés megosztási képét manuálisan. Bármilyen “og:image” taget érintő változás esetén olvastassuk újra az oldalt a Facebook debuggerrel, ha látni szeretnénk a változást élőben is.
