open graph
Az Open Graph definíciója
Az Open Graph egy HTML adatjelölési szabvány, ami a közösségi platformokon megosztott tartalmak megjelenését szabályozza. A közösségi webhelyeken minden Open Graph tagekkel (címkékkel) ellátott oldal egy bővített objektumként szerepel.
Az Open Graph protokoll segítségével lehet például megszabni, hogy milyen kép jelenjen meg, amikor megosztják egy tartalmadat a Facebookon vagy más közösségi platformokon.
Az Open Graph nélkül a közösségi platformok maguktól választják ki, hogy hogyan jelenítsék meg a megosztott weboldalakat. Ilyenkor könnyedén előfordulhat, hogy a megosztás előnytelen címmel, leírással vagy képpel jelenik meg a többi felhasználó számára.
Minden nagyobb közösségi médiás platform (Facebook, Twitter, LinkedIn stb.) használja az Open Graph tageket. Az Open Graph tehát egy nagyon népszerű és fontos szabvány, amit lényegében az összes olyan weboldalon érdemes alkalmazni, amit valaki később megoszthat egy közösségi platformon.
Az Open Graph tagek típusai
Az Open Graph címkéket az oldalak HTML forráskódjában kell elhelyezned, a
szakaszban. Ezeket a tageket az „og:” meta tulajdonságok jelölik a forráskódban.Íme a legalapvetőbb és leggyakrabban használt Open Graph tagek:
og:type
Az type meta tag az oldal tartalmának típusát jelöli. Ez lehet például webhely, zene, videó, cikk stb. A megadott típus befolyásolja, hogy a tartalom hogyan jelenik majd meg, amikor megosztják azt egy közösségi platformon.
Egyes típusok használatakor egy további tulajdonságot is meg kell adni. Ha például a music (zene) típust választod, akkor azon belül megadhatod, hogy egy dalról (music:song) vagy egy albumról (music:album) szól az adott oldal.
Ha nem adsz meg semmilyen típust, akkor az alapértelmezett típus mindig a webhely (website) lesz.
og:url
Az URL Open Graph tag az oldal URL címét jelöli. Ez a tartalom fix azonosítója. Ha megváltoztatod az URL-t, akkor a tartalom korábbi megosztásai nem működnek majd a közösségi platformokon.
Használj egyszerű, rövid URL-eket, és foglalkozz kanonizálással.
og:title
A title tag az oldal címét jelöli – például egy blogbejegyzés címét. Ez a cím jelenik meg a megosztásokban is, ezért ügyelj rá, hogy ne legyen túl hosszú (legfeljebb 60 karakteres), és kattintásra ösztönözze a felhasználókat.
og:description
A description tag egy rövid leírást tartalmaz az oldal tartalmáról. Ez szintén megjelenhet a megosztásokban, ezért ajánlott 200 karakternél rövidebbre fogni.
og:image
Az image Open Graph tag az oldal megosztásakor megjelenítendő kép URL címét tartalmazza. Ez az egyik legfontosabb OG címke, hiszen a felhasználók sokkal szívesebben kattintanak rá egy olyan linkre, amihez egy jó szemléltető kép is tartozik.
Ügyelned kell a kép felbontására, fájlméretére és kiterjesztésére. Az 1200 x 628 például egy ideális felbontás a közösségi megosztásokhoz (a minimum méret 200 x 200, habár ez a legtöbb helyre túl kicsi lesz).
Fájltípusok közül a legtöbb közösségi platform képes kezelni a JPEG, GIF és PNG fájlokat. A fájlméret ne haladja meg az 5MB-t.
og:site_name
A site_name Open Graph tag a webhely (nem a weboldal) címét jelöli. Az oldal címe alatt szokott megjelenni a megosztásokban.
Habár az URL-el, a címmel, a leírással és a képpel ellentétben nem muszáj megadni, nem is árthat, ha jelen van.
og:video
Az og:video tag a tartalom egyik videójának URL-jét jelöli. A címke megadásával például egy YouTube videót jeleníthetsz meg a megosztásokkor.
Amikor ezt a címkét használod, akkor további tulajdonságokat is megadhatsz, úgymint szélesség (og:video:width) és magasság (og:video:height).
og:locale
Ez a címke a tartalom nyelvét jelöli. Mivel az alapértelmezett érték minden esetben amerikai angol (en_US), fontos, hogy a megfelelő nyelvi jelölést add meg, ha tartalmaid más nyelveken íródnak.
A Twitter saját jelölő címkéket is létrehozott, amelyek hasonlóan működnek, mint az Open Graph. Szerencsére a Twitter a szabványos Open Graph címkéket is figyelembe veszi, és automatikusan ezeket használja majd, ha nem talál „Twitter kártyákat” az oldal forrásában.
Miért olyan fontos az Open Graph használata?
Az Open Graph Protokoll jobb felhasználói élményt biztosít. Nem csak a tartalom láthatóságát javítja, hanem vonzóbbá is teszi azt a felhasználók számára.
Az Open Graph tagekkel kiegészített megosztott tartalmak:
• több forgalmat vonzanak webhelyedre,
• javítják a tartalom rangsorolását a keresőtalálatok között,
• javítják a konverziós arányt,
• erősítik a márka hírnevét és a célközönség bizalmát,
• segítenek értékes visszahivatkozásokat szerezni,
• javítják az aktivitási arányokat,
• segítenek több közösségi megosztást és követőt szerezni,
• javítják a megosztott tartalmak átkattintási arányát,
• segítenek a közösségi platformoknak tartalmaid értelmezésében.
Az Open Graph címkék tehát megszabják a közösségi platformok számára, hogy mit és hogyan jelenítsenek meg, valahányszor egy felhasználó megosztja rajtuk tartalmaidat.
Az Open Graph címkék elhelyezése a weboldalon
Az Open Graph címkéket az oldal
szakaszában kell elhelyezni.A megosztott tartalmak megfelelő megjelenése érdekében négy og: tulajdonságot kötelező megadni:
• og:url
• og:title
• og:description
• og:image
Amennyiben valamilyen modern CMS-t használsz, akkor valószínűleg a felhasználói felületén is könnyedén megadhatod ezeket a címkéket, vagy használhatsz valamilyen ehhez készült beépülő modult.
Open Graph és Schema – Mi a különbség?
A különböző adatjelölések kapcsán jogosan merülhet fel a kérdés, hogy ha az ember már használja valamelyiket, akkor szüksége van-e a másikra is. Például, ha már használod a Schema jelöléseket webhelyed oldalain, akkor van-e értelme az Open Graph-ot is bevezetni (vagy épp fordítva)?
Habár mindketten a HTML adatjelölés eszközei, az Open Graph és a Schema eltérő célokat szolgálnak, és nem helyettesíthetik egymást:
Az Open Graph kifejezetten a közösségi platformok számára jött létre. Az OG tageket csak a közösségi platformok használják, hogy megfelelően jeleníthessék meg a rajtuk megosztott tartalmakat. Habár az Open Graph több hasznos információt is képes jelölni, mint a kép, cím és a leírás, ezekkel a címkékekel nem adhatsz meg részletes adatokat emberekről, helyekről, termékekről, eseményekről és sok egyébről sem.
A Schema célja, hogy a webes tartalmak szerzői több információt biztosítsanak a keresőmotorok számára. A Google, a Bing és más keresőmotoroknak az oldalon használt Schema jelölések is segíthetnek az tartalom értelmezésében. Minél több információt talál egy keresőmotor egy-egy oldalról, annál több releváns keresésre tudja megjeleníteni azt.
A Schema jelölések a keresőtalálatok megjelenését befolyásolhatják. Például tartalmazhatnak csillagos értékeléseket, egy recept elkészítéséhez szükséges időtartamot és így tovább.