Helyes beállítások a megosztásokhoz – az Open Graph Protocol és a WordPress

Amikor meg akarod osztani az egyik bejegyzésedet (leginkább a Facebookon), akkor értelemszerűen az az elvárásod, hogy a bejegyzésed linkjének beszúrásakor jelenjen meg az adott bejegyzés címe, rövid tartalma, és az a kép, amelyet direkt azért tettél fel a bejegyzésbe, hogy azt lássák a megosztás előnézetében. Sok bosszúságot okozhat, ha mindez nem így történik. Mit tehetsz, hogy csinosak legyenek a megosztásaid?

Így néz ki egy szép megosztás

(Ez például egy csinos megosztás 🙂 )

A megosztások esetében az a weboldal, amelyen a link megjelenik (a mostani példában, illetve persze legtöbb esetben amúgy is ez a Facebook, de lehet más weboldal is) lekéri az információkat a blogodból / weblapodból, és azok alapján igyekszik megjeleníteni, amire az olvasóknak szükségük lesz. Ezen információk egységesítésére (azaz hogy mindenhol ugyanúgy jelenjenek meg) találták ki az Open Graph Protocol szabványt, amelyről itt olvashatsz részletes, angol nyelvű leírást »

Ez egy meglehetősen technikai szöveg, programozóknak, webfejlesztőknek készült elsősorban, hiszen az ő dolguk, hogy a weboldalakat felkészítsék a szabványnak megfelelően. A WordPress weboldalak esetében természetesen erre egészen más, sokkal felhasználóbarátabb megoldás született, ahogyan azt már megszokhattuk: hogy aki nem programozó, az se legyen elvágva a lehetőségtől.

(Ettől persze még beleírhatod a szükséges kódokat a weblapod fejrészébe, ha tudod, mit csinálsz – ez csak segíteni fog. Ilyenkor természetesen child theme-et, azaz “gyerek-sablont” kell használnod.)

Egyrészt a modern (főleg a prémium, azaz fizetős) WordPress sablonok maguktól is tudják az OGP előírásait, és többé-kevésbé ügyesen meg is jelenítik a szükséges információkat a megosztott linkek mellett. A leírást a bejegyzésszerkesztő alatti kivonat dobozodból veszik (úgyhogy ezt érdemes kitölteni), a megosztási kép pedig a beállított Kiemelt kép lesz.

Ha a Te sablonod ezt nem tudja, vagy nem jól tudja, akkor pedig – mint mindig – van hozzá bővítmény. És ebben az esetben ne hallgass arra, aki azt mondja, hogy “a lehető legkevesebb bővítményt használd, ne tegyél fel feleslegeset” – mert ez tényleg nem felesleges.

A legjobb ilyen bővítmény, amelyet találtam, és amelyet én magam is használok, az Open Graph for Facebook, Google+ and Twitter Card Tags nevet viseli. Ha a sablonod nem elég ügyes, ezzel beállíthatod az OGP információkat. A cím eleve adott (a WordPress alapból, teljesen logikusan, a bejegyzés címét ajánlja fel), de a leírást és a képet Te határozhatod meg. Az OGP doboz a bejegyzésszerkesztő alá költözik be:

Az Open Graph Protocol és a WordPress

Ahogy a képen is látható, a képet a szokott módon feltöltheted vagy kiválaszthatod a Médiatárból, a leírást pedig vagy ide írod be, vagy a Kivonat dobozba, és akkor onnan fogja szedni, vagy ha egyik helyen sincs semmi, akkor a tartalomból fog kivenni valamit – de ezt nagyon nem ajánlom, hiszen éppen az a cél, hogy Te magad határozd meg, mi lássanak az olvasóid megosztáskor.

Ez így nagyon egyszerűnek tűnik, de van egy csapda.

Nem a WordPress, és nem is a bővítmény oldalán van a gond, hanem azzal, hogy a Facebook néhány hónappal ezelőtt megváltoztatta az egyik protokollját (micsoda meglepetés…), és már nem engedi, hogy a megosztásokat külső programok befolyásolják. Csak és kizárólag akkor engedélyezi ezt, ha létrehozol egy Facebook Appot erre a célra. De ne ijedj meg, ez nem olyan bonyolult, amilyennek elsőre hangzik.

A fenti bővítmény weboldalán olvashatsz erről egy részletes cikket, de hogy egyszerűsítsem a dolgodat (különösen ha nem vagy nagy angol-tudor), és mert pár képernyő azóta már nem pont úgy néz ki, mint a cikkben, ezért inkább leírom, hogy mi a dolgod.

1. Menj a https://developers.facebook.com/apps/ oldalra, és kattints a zöld “+ Add a New App” feliratú gombra a jobb felső sarokban. (Ehhez be kell legyél jelentkezve a Facebookba. Van, aki ki szokott jelentkezni?… 🙂 )

2. A felugró ablakban nevezd el az appodat (teljesen mindegy, milyen nevet adsz neki), add meg azt az e-mail címedet, amellyel a Facebookon regisztráltál, majd kattints a kék “Create App ID” gombra. Ezután kapsz egy captcha-t, azon még át kell verekedned magad.

Facebook App létrehozása

Figyelj: ha egynél több weboldalon akarod majd használni a szolgáltatást, akkor is elég egy appot létrehoznod, és mindegyiken használhatod ugyanazokat a kódokat (amelyeket mindjárt megkapsz).

3. Tulajdonképpen ennyi lenne az egész, de hogy bosszantson 🙂 (vagy hogy elbizonytalanítson), a Facebook betesz ide még egy képernyőt. Ne törődj vele, hogy miket ír, nincs itt semmi tennivalód. Keresd meg jobboldalt alul a szándékosan fehérre hagyott “Skip” gombot és kattints rá.

Facebook App létrehozása

4. Jutalmul megkapod a következő képernyőt – csak hogy megint ki kelljen szedned egy-két felesleges zavaró tényezőt.

Facebook App létrehozása

Nyugodtan kapcsold ki a jobboldali panelt (amelyen értelemszerűen a saját nevedet fogod látni, nem az enyémet 🙂 ), és akkor megjelenik az “App Secret” pontjai mellett a “Show” gomb – erre kattints rá, és a felugró ablakban (biztonsági okokból) add meg a Facebook-jelszavadat. A “Submit” gombbal küldheted el, és akkor végre látni fogod a lényeget, ami miatt ezt az egészet csináltad: az “App ID” és az “App Secret” kódokat.

Facebook App létrehozása

(Nem izgattam magam azon, hogy a képen látszanak az én appom adatai – ez csak egy teszt app, a bejegyzés megírása után úgyis törlöm 🙂 )

Ezen a képernyőn, ha akarod, megadhatod (de nem kötelező), hogy melyik domain(ek)en akarod majd használni az appot, belinkelheted az Adatkezelési tájékoztatódat és az Általános használati feltételeidet, feltölthetsz egy logót, megadhatod, hogy milyen iparágban vagy, illetve kiválaszthatod, hogy saját célodra vagy mások számára készítetted az appot – vagy hagyhatod az egészet a csudába, és jobboldalt alul a kék “Save Changes” gombra kattintva befejezheted a procedúrát.

5. Ezután már csak egy lépés van hátra: a Beállítások alatt menj a bővítmény menüpontjába, illeszd be ide az előbb megkapott kódokat, és kattints a kék “Módosítások mentése” gombra.

Az Open Graph Protocol bővítmény beállítása

Meg kell mondjam, hogy megcsinálni mindezt valójában sokkal egyszerűbb, mint leírni. Úgyhogy örülök, hogy túl vagyok rajta 🙂

Sok sikert kívánok a megosztásokhoz! És ha elakadsz valahol, kérj segítséget a hozzászólások között!

Oszd meg Te is:

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ezek is érdekesek lehetnek számodra: 

Iratkozz fel hírlevelünkre!

Javasolt eszközök:

Banner250x250.png
Elementor Pro
Generatepress Logo White Asset
GeneratePress
Divi 4.0
Divihello
Prémium támogatás és ajándék Divi licence
Adatvedelem.png
ADATVÉDELEM minta
Aszf.png
Webshop ÁSZF minta

“Helyes beállítások a megosztásokhoz – az Open Graph Protocol és a WordPress” bejegyzéshez 5 hozzászólás

  1. Köszi Moni, megint ráéreztél, mit nem tudok (még 🙂 ).

    Megcsináltam az FB-appot, megvannak a kódok, csak mivel én Yoast SEO-t használok, nem tudom, hova kell betenni őket.
    Mindenképpen az általad írt plugint használjam?
    Most a developers.facebook . com két hibaüzenetet dob:
    1. Invalid URL a képre, amit beállítottam
    2. Invalid App ID – The specified ‘fb:app:id’ property is not a valid app ID.

    Hogyan tudom ezt megoldani?

    Köszönöm a választ előre is!

    Válasz
    • A Yoast SEO bővítmény, szerintem nem is lenne logikus, hogy ott legyen ennek helye.

      Az FB app akkor kell CSAK, ha ezt a bővítményt használod, vagy ha a sablonod (azaz gyereksablonod) fejrészébe írod be a szükséges Open Graph kódokat (meta property og:description, meta property og:image, stb, az ogp.me oldalon ezek részletesen le vannak írva).

      De abban sajnos nem tudok segíteni, hogy a developers oldal miért ír ki hibát, ez már a Facebook részéről van. De egyáltalán MIKOR ír ki hibát, milyen esetben, ha nem is használod még az appot? Ezt nem is értem…

      Válasz
  2. Én sem értem, pont ezért örültem ennek a cikknek 🙂
    Szinte minden weboldalon használom a YS-t, és mindegyiknél kiírja a developers ezt a két hibát, bár Facebookon általában megjeleníti rendesen a beállított képet. Általában.

    Az ogp.me-n nézelődök, nagyon köszönöm a tippet.
    Egy oldalon pedig kipróbálom az általad írt Open Graph for Facebook, Google+ and Twitter Card Tags-t is.
    Köszi!

    Válasz
  3. A Yoast ha megfelelően van beállítva, akkor a postoknál felkínálja a facebook (twitter) adatok kitöltését. A címet (!), leírást és a képet is lehet módosítani.

    Válasz

Szólj hozzá!

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..