Open Graph jelentőségének növekedése a Facebook posztokban

Nem újkeletű dolog az Open Graph Protokoll, amelynek használatát (igen/nem) mi is vizsgáljuk elemzéseink során.

A Facebook újításának köszönhetően a weboldaladra hivatkozó linkek esetében hamarosan megszűnik a poszt előnézet javítási lehetősége.

Eddig, ha a Facebookon szeretted volna megosztani a weboldalad egyik tartalmát, akkor ott írtál egy kis posztot, majd mögé biggyesztetted a linket. A Facebook behúzta a weboldalon talált hivatkozásból a képet, címet és leírást, amelyek módosítására volt lehetőség. Pl. kiixelhetted a behúzott képet és feltölthettél mást helyére.

Ez a lehetőség már van akinél meg is szűnt, de hamarosan mindenkinél módosításra kerül.

Miért szűnteti meg a Facebook ezt az egyszerű linkmegosztási lehetőséget?

Az ok egyszerű: nagyon sok olyan poszttal találkoztál már te is, ahol egy kép, vagy szöveg arra ösztönzött, hogy rákattints arra a hivatkozásra, mert olyat ígért, ami felkeltette az érdeklődésed. Viszont az a weboldal, ahová jutottál, egyáltalán nem azt adta, ahova kerülni szerettél volna. A kamuhírek ilyen megjelentetését hivatott ez a változás visszaszorítani. (Ismerős? A Google már évekkel korábban elkezdte tiltani a kapu oldalak használatát a hasonló spammer tevékenység miatt.)

Mit tehetsz ezután?

Ha jól szerkesztetted eddig is weboldalad, akkor sok változást nem kell eszközölnöd, lehet észre sem veszed ezt a Facebook lépést, mert eddig sem kellett trükköznöd. A varázskulcs: Open Graph Protokoll
Ahogy WordPressben, más weboldalakon is automatizálható ennek használata. E segítségével irányítani tudod a Facebook posztokat, nem csak a Facebookon megírt posztokra vonatkozólag, hanem a weblapodról a cikkeid megosztását is. A weboldalban megtalálható "og" elemek alapján készíti el a posztlinked előnézetét a Facebook. Ha ezek nincsenek beállítva, akkor az fog ott megjelenni, amit a program talál: képet, szöveget.

Előző cikkünkben már kiemeltük a legfontosabb elemeket, de mélyüljünk bele jobban (pl. Facebook poszt során alkalmazva)

Facebook esetében használható legfontosabb OG címkék:

• og:title - A tartalom címsora pl. Open Graph jelentőségének növekedése a Facebook posztokban
• og:site_name - A tartalom weboldalának címe pl. https://seosiker.hu/
• og:image - A tartalomhoz rendelt kép, amit szeretnél, hogy megosztásnál megjelenjen (a kép elérési útvonalát rendeld hozzá) Pl. https://seosiker.hu/images/blog/Nepszerusegi-blog/Facebook-OG.jpg
• og:description - A tartalom hosszabb leírása Pl. A Facebook posztok irányítására a legalkalmasabb az Open Graph protokoll használata. Ha eddig nem használtad, akkor most jött el az ideje!
• og:type - A tartalom típusa Pl. article
• og:url - A tartalom megtalálási URL-je (kononikus URL, mert felhasználói azonosítót, számlálót, stb. nem tartalmazhat) Pl. https://seosiker.hu/open-graph-jelentosegenek-novekedese-a-facebook-posztokban
• og:locate - A tartalom nyelvi jelölése Pl. hu_HU
• og:video - A tartalomhoz rendelt videó URL-je

Objektum típusok:

• article
• book
• books.author
• books.book
• books.genre
• business.business
• fitness.course
• game.achievement
• music.playlist
• music.radio_station
• music.song
• place
• product
• product.group
• product.item
• profile
• restaurant.menu
• restaurant.menu_item
• restaurant.menu_section
• restaurant.restaurant
• video.episode
• video.movie
• video.other
• video.tv_show
• website

Egyes elemek tartalmazhatnak további metaadokat, amelyek az előző jelöléshez kapcsolódnak további információt megadva arról.

Pl. a képek esetében:

• "..meta property="og:image" content="https://seosiker.hu/images/blog/Nepszerusegi-blog/Facebook-OG.jpg"..."
• "..meta property="og:image:type" content="image/jpeg"..."
• "..meta property="og:image:width" content="500"..."
• "..meta property="og:image:height" content="334"..."

Ha a tartalom több képet is tartalmaz, akkor minden kép adata bekerülhet az OG elembe.

Az elsőnek bekerült kép lesz az elsődleges! Pl.

• "..meta property="og:image" content="https://seosiker.hu/images/blog/Nepszerusegi-blog/Facebook-OG.jpg"..."
• "..meta property="og:image:url" content="https://seosiker.hu/images/blog/Nepszerusegi-blog/Facebook-OG.jpg"..." - ez megegyezik az og:image-vel
• "..meta property="og:image:type" content="image/jpeg"..." - lehet még: image/gif vagy image/png
• "..meta property="og:image:width" content="500"..."
• "..meta property="og:image:height" content="334"..."
• "..meta property="og:image" content="https://seosiker.hu/images/blog/Nepszerusegi-blog/OG-kod.jpg"..."
• "..meta property="og:image:width" content="660"..."
• "..meta property="og:image:height" content="129"..."

Érdemes a fenti bővített megjelöléseket alkalmazni ahhoz, hogy a megosztásnál optimálisan jelenjen meg a képed. Fontos! Ha közzétetted a cikked és szeretnéd, hogy mégsem az a kép jelenjen meg, akkor nem elég, hogy kicseréled a képet, az is kell, hogy más néven legyen mentve az a kép, mert a képek URL alapján tárolódnak és nem frissülnek csak akkor, ha az URL is megváltozik!

Amikor első alkalommal történik egy kép megosztása, akkor nem fog megjelenni a megosztási ablakban a kép előnézete.

Oka, hogy a  FB robotnak be kell járnia a megosztási helyet, le kell menteni a képet és metaadatokat. Megelőzheted, hogy ha vagy a Megosztási hibakereső segítségével lefuttatod az URL-t a metaadok előzetes lekérésére (canonical URL-t), vagy az OG címkéknél használod az og:image:width és og:image:height-et és így azonnal megjeleníti a képet.

Jelenleg a képekre vonatkozóan a FB ezeket az ajánlásokat adja:

• legalább 600x315 pixeles képet használj
• legfeljebb 1200x630 pixeles képet használj
• maximális képméret 8 MB
• ha a képed kisebb, mint 600x315 pixel, akkor az előnézeti képed nem full széles lesz, hanem a leírással osztott elhelyezésben lesz
• ajánlott képarány: 1,91:1
• minimális képméret 200x200 pixel (ha ennél kisebbet próbálsz megjelölni, akkor hibaüzenetet kapsz)

Videókat is közzétehetünk a weboldalunkról. A kódok megegyeznek a image lehetőségeivel:

• og:video  - a videó URL-je
• og:video:url -  ugyanaz, mint az og:video
• og:video:secure_url - ha biztonságos helyen van a videó, akkor az URL-je: https://...
• og:video:type - a videó MIME típusa: application/x-shockwave-flash vagy video/mp4
• og:video:width - a videó szélessége pixelben (ez szükséges)
• og:video:height - a videó magassága pixelben (ez szükséges)
• og:image - kép URL-je, amely előnézete lesz a vidónak a hírcsatornában

A meta elemeket a html head részében kell elhelyezni, ahogy a többi meta elemet is.

Facebook megosztási hibakereső

Ha úgy érzed, hogy minden elemet megadtál, akkor érdemes megnézni, hogy hogyan fog megjelenni a cikked a Facebook hírfolyamban. A hiányzó og címkéket is meg fogja adni ez a program. Ha hibát talált a hibakereső a html kódodban, vagy kicserélted a megjeleníteni kívánt képet, akkor ezzel a programmal frissíteni is tudod a tartalmad. (Fontos! A címet ,- hogy ha már közzétett poszt volt és érkezett rá több mint 50 like, megosztás, vagy megjegyzés -; és az objektum típusát nem szerkesztheted!)

Sikeres Facebook posztokat kívánok!

Élesné G. Szilvia
SEO szakértő