Az Open Graph Protokoll használata-részletes magyarázatokkal!

Te is találkoztál már azzal, hogy a tartalmaid a Facebookon nem úgy jelentek meg megosztáskor, ahogyan azt te szeretted volna? Ennek az az oka, hogy nem volt megfelelően beállítva az OG protokoll. Ez a cikk egy rövid útmutatót tartalmaz a legfontosabb elemeiről, és a megfelelő beállításokról.

Ahhoz, hogy a weboldalaink a lehető legjobb teljesítményt nyújthassák számunkra, és ez által több bevételt teremtsenek, szükséges lehet az úgynevezett technikai SEO beállítások pontos használata, és annak megléte.

Az egyik talán legkézenfekvőbb módja a weboldalunk tartalmainak másokkal való megismertetésére a közösségi média: itt szeretnénk a tartalmainkat megosztani, azokat perfekt megjelenéssel kísérve. Hogyan érhetjük el mindezt? Itt jön szóba az úgynevezett  OG prokoll (Open Graph Protocoll).

Mi az az OG protokoll?

Az OG protokoll egy technikai SEO beállítás, ennek a segítségével érhetjük el, hogy a weboldalaink tartalmai pontosan olyan módon jelenjenek meg egy közösségi médiában való megosztáskor, ahogyan mi azt szeretnénk.

Bizonyára mindenki találkozott már azzal a helyzettel, hogy mikor egy tartalmat meg akart osztani az idővonalán, akkor a megosztásnál nem jelent meg kép, vagy talán az rossz minőségben történt, nem a hangsúlyos részekkel. Az OG protokoll ennek a kiküszöbölésére való.

Nem csupán a Facebook képes értelmezni, hanem a legtöbb nagyobb közösségi média platform is, például az Instagram, vagy a Twitter. Eredetileg 2010-ben hozták létre, ma már pedig gyakorlatilag minden egyes weboldal normális technikai SEO optimalizálásához hozzá tartozik.

Az OG protokoll elemei

Az OG protokollt nem úgy kell elképzelni, mint egy szimpla meta tag-et, amit megadunk: valójában ahhoz, hogy a szükséges eredményeket érhessük el, és a megfelelő összhatást, több mindent meg kell adnunk. A legfontosabb az og image, title, és description lesz, de ezeken kívül még számos egyéb dolgot megadhatunk.

Og title

Amikor megosztunk valamit Facebookon, akkor a kép alatt rendszerint egy nagyobb betűvel szedett cím jelenik meg. Ennek az értékét pontosan az Og title segítségével adhatjuk meg. Abban az esetben, ha nem adjuk meg, akkor automatikusan az oldalunk meta title-ja lesz ekként értelmezve.

Tulajdonképpen funkcionalitását tekintve ehhez lehetne nagyon hasonlítani: egy rövid címszöveg, aminek az a célja, hogy felkeltse a figyelmet mindenki számára, és ez által egy kattintás szülessen.

A technikai megadása az alábbi módon történhet meg, a fejlécünkben. Érdemes nem túl hosszúra megadni, ugyanis 100 karakter felett a Google levágja a végét a szövegnek.

Og description

Az Og leírás az az elem, ami a tartalmunk rövid leírását adja. Facebook-megosztás esetén például a vastaggal kiemelt cím alatt megjelenő hosszabb szöveges leírás. Ez tulajdonképpen a meta description megfelelője, ha az og title a meta címmel volt párhuzamba hozható. Nagyjából 200 karakterben érdemes maximálni a méretét.

Og Image

Amikor valamit meg szeretnénk osztani a közösségi médiában, akkor ott szerencsés, ha megjelenik egy kép is a megosztáskor, illetve a megfelelő módon. Ez azért is lehet nagyon fontos, mert a statisztikák szerint nagyjából 2,3-szor jobban teljesítenek a Facebookon megosztott bejegyzések képekkel, mint azok nélkül. 

Ezen felül, a követőinkben bizalmatlanságot ébreszthet, és igénytelen képet alakíthatunk ki a cégünkről, amennyiben ezt nem állítjuk be a megfelelő módon.

Nekem volt már olyan ügyfelem, aki arra panaszkodott, hogy a megosztások alkalmával mindig egy magyar zászló jelent meg neki: a Facebook automatikusan a navigationban szereplő nyelvválasztót tette be megosztási képnek.

Szintén ide sorolható az image width, és image height og elem. Ezeknek a lényege, hogy a megosztáskor megjelenő kép nagyságát, és oldal arányát arányát tudjuk vele beállítani. Az image width érték 291-től 1484-ig terjedhet, a height 167-től 1200-ig.

A megadásuk az alábbi módon eszközölhető: 

Og:Url

Az Og:Url tulajdonképpen akkor használható remekül, ha több hasonló tartalmunk van az oldalunkon, mondjuk egy webáruház esetén több URL alatt található ugyanaz a termék. Ekkor a hasonló oldalak közül kiválasztunk egyet, és az összes Facebook-megosztás az itt megjelölt URL-re fog vonatkozni.

Megadása a következő módon történhet:

Ekkor az összes oldal, melynek a fejlécében megjelenik ez a tartalom, megosztáskor a /igazi-termek URL alatti tartalmat fogja megosztani.

Og type

Ez tulajdonképpen azt adja meg, hogy milyen típusú tartalmat szeretnénk megosztani. Lehet például weboldal, blogbejegyzés, kép, vagy videó.

Ha nem adjuk meg, akkor weboldal (website) lesz az alapértelmezett.

A megadása az alábbi módon történik:

Og Locale

Az Og Locale abban lehet a segítségünkre, hogy a megfelelő nyelven történhessen a megosztás. Ugyanis lehetséges, hogy egy külföldi megosztás esetén nem a magyar nyelvű elemek lennének az ideálisak a megosztó idővonalára. Ennek a megadása az alábbi módon tehető meg:

Hogyan adhatjuk meg WordPress oldalak esetén?

Felmerülhet bennünk a kérdés, hogy amennyiben nem statikus oldalról lenne szó-tehát nem manuálisan kellene a kódba beszúrni az adott elemet-akkor milyen módon lenne megtehető ez, ha például egy CMS-el rendelkezünk.

Szinte minden egyes normális CMS-nek van manapság erre bővítménye, WordPress esetén a Yoast SEO lehet ilyen téren a segítségünkre, de ugyanígy van bővítmény például Drupal, és Joomla oldalakra is.

Hogyan érdemes megadnunk a különböző elemeket tartalmilag?

Felmerülhet bennünk az a kérdés, hogy ha már tudjuk, hogy hogyan adhatjuk meg az OG elemeket, akkor pontosan miket adjunk neki tartalmilag? A legfontosabb minden bizonnyal ezek közül az image, title, és description attribútumok.

A konvencionalitás általában arra törekszik, hogy a weboldalunk szokásos tartalmi elemeivel eggyezzenek meg: egy termék, bejegyzés esetén annak fő képe legyen az og image, az og title a meta cím, az og description pedig a legtöbbször lehet ugyanaz, mint a meta leírás, ami a keresőben is megjelenik.

Természetesen érdemes lehet szem előtt tartanunk azt, hogy a Facebook, és a Google kicsit más céllal használható marketingre: máshogy érdemes az ott, és az itt megjelenő címet kialakítanunk-ugyanis a Facebookra szórakozni mennek az emberek, míg a Google keresőjébe sokszor már konkrét vételi szándékkal keresnek rá valamire.

Egy kiváló ellenőrző eszköz

Felmerülhet bennünk a kérdés, hogy lenne-e valamilyen remek eszköz arra, hogy ellenőrizzük az oldalunk OG beállításait, és esetleg javaslatokat kapjunk arra vonatkozóan, hogy mit kellene még tennünk.

Nos, pontosan erre való a Facebook Debug eszköze, melyet direkt erre készítettek el. Nincs más dolgunk, mint a pontos URL-t megadni itt, és láthatjuk is majd, hogy mik a legfőbb OG elemeink az adott oldalon. 

Rangsorolási tényező a protokoll megléte?

Sokszor felmerül az emberekben a kérdés egy technikai SEO elem kapcsán: pusztán azért, mert azt nem állítjuk be, hátrébb fogja rangsorolni a Google a weboldalunkat a találati listán?

A válasz az, hogy ez nem fog megtörténni. Önmagában véve nem rangsorolási szempont, noha a Google több, mint 200 ilyennel rendelkezik. Ennek ellenére igencsak ajánlott a használata, ugyanis nem kicsi közösségi média forgalomtól eshet el a weboldalunk, ha nem használjuk ezt a protokollt.

Összefoglalás

Véleményem szerint az OG beállítások minden egyes weboldal fontos technikai optimalizálásához tartoznak, és jóval többet ki lehet hozni ezekből, mint azt elsőre hinnénk.

Ha valaki már foglalkozott közösségi médiában található tartalmak optimalizálásával, az bizony tudja, hogy ez is egy külön műfaj, és habár nem kell a legprofibb módon értenünk mindenhez, fontos lehet tisztában lennünk azzal, hogy pontosan hogyan is működik az OG protokol.