Blog Facebook Debugger használata WordPress képhibák kiküszöbölésére
facebook debugger használata cover
Írta:

Facebook Debugger használata WordPress képhibák kiküszöbölésére

Valószínűleg a WordPress, vagy akár más CMS használók közül legtöbben találkoztunk már azzal a problémával, hogy miután írtunk egy új posztot, vagy készítettünk egy új oldalt, és ezt megosztottuk Facebookon akár posztként, akár üzenetben küldtük el ismerőseinknek, a megjelenített kép nem tetszett. Nem az volt, mint amit vártunk, vagy egyáltalán nem jelenített meg képet. Akár még akkor sem, ha egyébként beállítottuk, hogy milyen képet húzzon be a weboldalról a Facebook. Szerencsére az ilyen problémák megoldására a Facebook Debugger használata egyszerűen nyújt megoldást.

Hogyan gyűjti a Facebook az Open Graph adatokat?

Ha egy új oldalt élesítesz a weboldaladon, akkor a Facebook cache-elni fogja az itt talált (vagy nem talált) képet a saját CDN szerverein. Ugyanúgy működik ez mint a cache-elés a saját oldalad esetében. Ahhoz, hogy utána más információt töltsön be, üríteni kell a cache memóriát, mert korábbi változatot tárol itt.

Ugyanez vonatkozik a Facebookra is. Eltárolt egy korábbi, vagy egy rossz változatot az Open Graph adatok közül, így ha módosult a tartalom, akkor továbbra is a korábbi elemeket fogja használni. Ennek a javításához először üríteni kell a memóriát, majd újra rávenni a Facebookot, hogy gyűjtse le a szükséges információkat.

Ez vonatkozik a saját linkjeinkre és tartalmainkra is. Az úgynevezett Open Graph adatokat gyűjtik össze az oldalainkról. Ezekből tudják kialakítani azt, amit a közösségi média felületen később látunk. Ha Facebook bejegyzésben linket helyezzünk el, például a linképítés szuperposzt esetében így néz ki:

facebook open graph debugger link előnézet

ennek a megjelenítéséhez pedig ennek kell bekerülnie az oldal kódjába:

<meta property=”og:locale” content=”hu_HU” />
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”Linképítés szuperposzt: minden, amit a linképítésről tudni kell!” />
<meta property=”og:description” content=”Ebben a posztban linképítéssel, linkszerzéssel és linkekkel kapcsolatban felmerülő szakmai kérdéseket válaszoltam meg. Olyan témák kerültek elő mint, hogy milyen a jó link, mi a topic modeling, a link velocity, milyenek a káros linkek.” />
<meta property=”og:url” content=”https://thepitch.hu/linkepites-szuperposzt/” />
<meta property=”og:site_name” content=”The Pitch” />
<meta property=”article:publisher” content=”https://www.facebook.com/ThePitchHU” />
<meta property=”article:author” content=”https://www.facebook.com/buvarszivattyu” />
<meta property=”article:section” content=”Blog” />
<meta property=”article:published_time” content=”2018-02-07T10:29:24+00:00″ />
<meta property=”article:modified_time” content=”2018-04-13T14:55:18+00:00″ />
<meta property=”og:updated_time” content=”2018-04-13T14:55:18+00:00″ />
<meta property=”fb:admins” content=”732255215″ />
<meta property=”og:image” content=”https://thepitch.hu/wp-content/uploads/2018/02/linkepites-szabalyok-keresooptimalizalas.png” />

Amire ezek közül nekünk szükségünk lesz, az az „og:image”. Ez adja meg a Facebooknak a kiemelt kép elérési útvonalát.

Ha nem tudod, hogy használsz-e ilyeneket, a kódban egyszerűen rá tudsz keresni. Mi a The Pitchnél a Yoast SEO plugint használjuk, ahol rendkívül egyszerű ezeket az adatokat megadni. Ezzel nem csak a Facebook, hanem a Twitter és Google+ platformokra is tudunk kapásból optimalizálni.

Korábban írtunk arrók, hogy tartalmi SEO elemzésnél külön érdemes figyelni az OG adatok használatára.

Facebook Debugger használata

Persze mint minden elképzelés megvalósításában, itt is akadnak hibák. A Facebook nem mindig jól húzza be az adatokat, vagy az általa tárolt verzió nem mindig a legfrissebb, mert közben cseréltük már.

Pontosan ezért, a Facebook debugolására hozták létre a Facebook link debuggert.

Debug magyarul: hiba kiküszöbölés.

A debuggert a Facebook Developers Tools & Support menüjében éritek el. Ezt érdemes is eltenni könyvjelzők közé a későbbiekre.

facebook debugger developers menü

Ahhoz, hogy egy oldalról begyűjtse az információkat a Facebook, egyszerűen be kell másolni a linkjét és a Debug gombra kattintani. Ekkor a legutóbb cache-elt változatot fogja betölteni a program. Ez az, amit ha most megosztjuk a linket, akkor látni fogunk.

facebook debugger cache

facebook debugger cache 2

Ha ezeket az adatokat szeretnénk frissíteni, két lépést kell elvégezni:

  1. üríteni kell az URL cache-ét WordPressben
  2. újra kell futtatni a debuggert Facebookon

URL cache ürítése WordPressben

Erre a lépésre akkor van szükség, ha most cseréltük le az OG képet és szeretnénk azonnal módosítani Facebookon is. Ilyenkor nem csak a Facebook cache memóriáját kell ürítenünk, hanem azt megelőzően a saját oldalunkét is. Hiszen ha lefuttatjuk a Debuggert és az a régi információkhoz fér csak hozzá, semmi sem fog változni.

Ha egy poszt vagy oldal módosításakor az adott oldal cache-e automatikusan törlődik, akkor jók vagyunk, nincs teendő. Ha azonban más módszert, plugint használsz, akkor bele kell nézni a dokumentációba, hogyan is kell törölni a cache-t. Ezek közül talán a leggyakoribbak a WP Rocket, Cache Enabler, és a WP Fastest Cache.

Facebook OG Debugger használat újra

Ha ez a lépés megvan, egyszerűen újra kell scrape-elnünk az oldalt Facebook Debuggerben.

facebook debugger újra scrapelés

Ilyenkor néha hibába, vagy hibaüzenetbe futhatsz. Van, hogy egyszerűen nem működik. Emiatt ne aggódj, egyszerűen futtasd le másodszor is. Ez rendszeresen előfordul, de második próbálkozásra mindig működik.

Ezután már a jó képet kell hogy használjon a Facebook.

facebook OG debugger új kép

Fontos, hogy a már korábban megosztott posztok képei emiatt nem fognak változni. Csak a jövőbeli megosztásokat tudjuk befolyásolni.

Extra Open Graph Debugger tippek

Nem csak a Facebook poszt képét lehet a Facebook Debugger használatával módosítani, de a címet és a leírást is, mivel azok is Open Graph meta adatok. Ahhoz, hogy ezt megtedd, ugyanezeken az Open Graph műveleteken kell végigmenni, csak képcsere helyett szövegezés módosítással.

Ezen túl a Debugger felhívja a figyelmünket arra is, ha hibát talál.

facebook debugger hibaüzenet

Ezeknek természetesen érdemes utánajárni és javítani őket.

Ha hozzánk hasonlóan Yoast SEO plugint használsz, akkor érdemes odafigyelni az Open Graph adatok megadására minden egyes esetben. Főleg akkor, ha az oldalaid cover képeinek a méretei nem egyezik meg a Facebook posztok képméreteivel. Vagy még rosszabb, ha nem is használsz cover képet, nem tudod megfelelően irányítani a megosztásoknál megjelenő képet.

yoast seo open graph adatok

Yoastban rendkívül könnyen be lehet állítani az Open Graph címet, képet és leírást.

Remélem hogy ez az összefoglalás a Facebook Debuggerről segít, hogy magabiztosan használd a programot és ne származzon gondod az esetleges Open Graph adatok módosításaiból.

Ha szeretnél további hasznos anyagokat kapni tőlünk, nézd meg online marketing képzéseinket és iratkozz fel a hírlevelünkre!

Minorics Dávid
Minorics Dávid

SEO tanácsadó


Hozzászólások

Moderáld magad – vagy mi fogunk. :)
Na jó, nem fogunk, szóval csak ésszel!