Megosztó megosztások, avagy Open Graph a tökéletes közösségi megjelenésért

Bizonyára Te is találkoztál már olyan esettel, amikor egy weboldalt vagy egy hírt, blogcikket szerettél volna megosztani a közösségi média valamely platformján, de inkább letettél róla, mert az előnézet finoman szólva is csúnya volt. Noha más felületein ezen nem igazán tudsz javítani, saját vagy céges weboldaladon, esetleg blogodon beállíthatod, hogy az általad készített tartalmakat megosztva minden megfelelő legyen. Gyakorlatias tippeken keresztül mutatjuk meg a folyamatot és az Open Graph helyes konfigurációját. Vágj bele!

 

Mi is az az Open Graph?

Mielőtt fejest ugranánk a beállítások tengerébe, előtte érdemes tisztán látni az Open Graph lényegét és működési mechanizmusát. Hogy miért? Mert a beállításokat meg lehet tenni ugyan enélkül, de ha nem gondolod át és érted meg a lényegét, akkor hosszú távon hátrányba kerülhetsz azokkal szemben, akik szántak elég időt rá és ezért SEO-juk, valamint kommunikációs fogásaik jobban teljesítenek. Ne aggódj, ha még nem érted: a cikk végére minden világos lesz!

Az Open Graph protokoll (továbbiakban OG) lényegében egy korunk elvárásaihoz idomuló továbbfejlesztett, a klasszikus értelmezésnél bővebb SEO konfigurációs eszköz. Arra jó, hogy a megfelelő beállítások elvégzését követően weboldalad tartalmai olyan módon jelenjenek meg a közösségi térben való megosztáskor, ahogyan azt megálmodtad.

Gondolj csak bele milyen idegesítő az, amikor egy megosztott cikknél nem egy szép, kifejezetten megosztásra optimalizált elem jelenik meg, hanem egy rossz felbontású, egyáltalán nem a témához kapcsolódó semmitmondó kép és hozzá egy minden CTA-t nélkülöző cím és leírás. Végezz önreflexiót! Te rákattintanál?

A fenti kérdésből gondolom rájöttél, hogy az OG beállítások fontossága a konverzió mértékében is szerepet játszik. Minél megnyerőbb vagy, annál többen fognak Rád kattintani.

A legjobb ebben a protokollban, hogy a legtöbb közösségi oldal képes feldolgozni, ezért nem kell azon aggódnod, hogy minden egyes közösségi médiafelületre egyenként kell majd ezeket optimalizálni, esetleg mindenhova más protokollt használni. Persze itt is vannak kivételek, de erről majd később.

Az Open Graph így definiálja saját magát: “The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.”

 

Az Open Graph elemei

 

og: title

og: title: Az oldalad (vagy blog esetén a cikked) címe.
Talán ez az a rész az OG-n belül, mit a legkevésbé kell magyarázni. A legtöbb netes tartalomnak általában van egy címe, amit jó esetben úgy választanak meg a szövegírók, hogy beszédes legyen a tartalommal kapcsolatban és felkeltse az érdeklődést annyira, hogy kattintásra is ösztönözzön. Eltérhetsz az eredeti címtől, például egy blogcikk esetében, arra azonban nagyon figyelj, hogy összhangban legyen az eredeti tartalmaddal és lehetőleg kerüld a kirívóan clickbait címeket. Utóbbit a legtöbb közösségi oldal már bizonyos formában szankcionálja is, nem érdemes kockáztatni. Arról nem is beszélve, hogy ha át is megy a szűrőn, azok az emberek, akik rákattintanak könnyen csalódhatnak benned. Ugye Te sem vennél meg egy csomag virslit, ha eredetileg egy pendrive-ra kattintottál? (Nem is szélsőséges annyira a példa, tapasztaltam ilyet.)

Tippek az og: title beállításához

  • Nincs megkötés azzal kapcsolatban, hogy milyen hosszú legyen, a legtöbb közösségi oldal azonban nem mutat belőle többet, mint 90 karakter, ezért érdemes ekkora terjedelemben gondolkozni.
  • Legyen informatív, tömör és minimálisan cselekvésre késztető!
  • Ne használj benne brand elemeket. Sok esetben a végére írják a cég vagy szolgáltatás nevét. Ez teljesen felesleges, csak a 90 karakterből vesz el, ráadásul márkád elemeit sokkal célravezetőbb módon is megjelenítheted.

 

Az og: title beillesztése a kódba

A kódsort a <head></head> közé kell beilleszteni.

<meta property="og:title" content="AZ OLDALAD CÍME" />

 

og: description

og: description: Legtöbb esetben az og: title alatt megjelenő szöveg, ami az oldal tartalmát mutatja be. Ezt nagyjából úgy kell elképzelni, mint egy blogcikk bevezető szövegét, amivel érdeklődést kelthetünk a felhasználókban.

  • Tippek az og: description beállításához
  • Ahány felület, annyi megoldás azzal kapcsolatban, hogy ebből a szövegből mennyit enged láttatni az aktuális platform, így erre igazán egzakt számot nem lehet mondani, arról nem is beszélve, hogy szinte nem telik el úgy egy hónap, hogy valamelyik platform ne változtatna a megjelenítési mechanizmusán, így ezt érdemes folyamatosan figyelemmel kisérni. Általánosságban elmondható azonban, hogy minél tömörebben tudjuk megfogalmazni, annál jobb. 200 karakter fölé nem érdemes menni, legfrissebb meglátásunk szerint a 150 körüli karakterszám a legjobb kompromisszum jelenleg.
  • Ha ügyesen alkalmazod, ebben már könnyen használhatsz olyan elemeket, amikkel szó szerint cselekvésre ösztönzöl, nem csak utalsz rá.

 

Az og: description beillesztése a kódba

A kódsort a <head></head> közé kell beilleszteni.

<meta property=”og:description” content=”AZ OLDALAD LEÍRÁSA" />

 

og: image

og: image: Ezzel definiálhatod a megjelenített képet, amit például a Facebook húz be akkor, amikor megosztod az oldalad. Mondanunk sem kell, hogy talán ez az egyik legfontosabb része az OG ügyes beállításának, ugyanis legtöbb esetben a képet fogja meg a figyelmet, a szöveget ezután olvassák el az emberek. Ha ez nem látványos, nem fog jól teljesíteni a tartalmad.

Tippek az og: image beállításához

  • Használj megnyerő képeket, hiszen ez lesz az első, amit észrevesznek az emberek, miközben a feed-jüket görgetik.
  • Sokszor felmerül a kérdés, hogy ez lehet-e olyan kép, ami az adott oldalon nem jelenik meg. A jó hír, hogy lehet, azonban az og: title kapcsán is említett tippünk itt is érvényes: Ne legyen merőben eltérő, mint amiről a cikkünk szól, mert ha a közösségi oldalak megtévesztőnek ítélik, akkor könnyen korlátozhatják annak terjedését.
  • Facebook: Bár az oldal megosztásnál nem közvetlenül töltünk fel egy fotót vagy egy összeállított kreatívot poszt formában, a háttérben mégis az történik, hogy a Facebook rendszere eltárolja az og:image által definiált képünket. Ennek több előnye és hátránya is van, a cikk vége felé visszatérünk még rá. Ami miatt fontos a tárolás, az nem más, mint a szövegfedettségi szabály. Ez meghatározza, hogy egy adott képen mennyi szöveget lehet elhelyezni, ha hirdetni is szeretnénk azt. (Ha nem hirdetjük, akkor bármennyi lehet.) Érdemes az og:image-eknél is betartani ezt a szabályt!
  • Legyen jól méretezve! A Facebook által meghatározott minimum a 200 x 200 pixel terjedelmű kép, de ezt mi nem javasoljuk. A már elfogadható méret a 600 x 315 pixeles formátum, ez azonban a nagy felbontású eszközökön még nem lesz tökéletes. A legoptimálisabb, ha az 1200 x 630 (vagy 1200 x 628) méretet alkalmazunk, ez ugyanis minden eszközön szépen fog megjelenni.
  • A képek legyenek középre zárt elrendezésűek! Amennyiben a képen elhelyezünk például egy logót vagy egy minimális szöveget, érdemes olyan megoldást alkalmazni, hogy az extra “layer”-ek a kép geometriai közepén helyezkedjenek el, ugyanis néhány esetben (pl: Messengerben) nem a teljes kép töltődik be még akkor sem, ha azt mi jól meghatároztuk. Ennek az az oka, hogy néha nem kell feltétlenül eladnia magát a tartalmunknak. Ha példul valaki megosztja a Messengerben egy ismerősével a cikket, azt nagy eséllyel azért teszi, mert releváns, így a címzett rá fog kattintani. A Messenger applikációjának méretbeli korlátai miatt nem minden esetben a teljes kép tölt be, hanem egy részlet belőle, mégpedig középre igazítva.
  • Ne használjunk 8 megabájtnál nagyobb képet!

Az og: image beillesztése a kódba

A kódsort a <head></head> közé kell beilleszteni.

<meta property="og:image" content="A KÉP URL CÍME.jpg" />

 

og: url

og: url: Az oldalad pontos címe. Sokan elkövetik azt a hibát, hogy ide az alapértelmezett domain címüket írják be. Itt azonban az adott oldal pontos elérésének címét kell megadni, minden sallangtól mentesen, ugyanis a Facebook ebből tudja majd azonosítani az adott tartalom eredeti URL-jét, akkor is, ha máshol például UTM kódokkal kiegészítve vagy éppen linkrövidítőn keresztül osztják azt meg. Ha például blogot vezetsz, akkor minden egyes cikk URL-jét megfelelően kell definiálnod az adott cikk oldalának og: url részében.

Tippek az og: url beállításához

  • Az oldal pontos URL címét add meg UTM kódok és session ID-k nélkül!
  • Figyelj rá, hogy oldalad címében szerepeljen a http:// vagy a https:// előtag! Ha oldalad SSL biztosítással rendelkezik, akkor mindenképpen az utóbbit használd!

 

Az og: url beillesztése a kódba

A kódsort a <head></head> közé kell beilleszteni.

<meta property="og:url" content="https://URLCÍMED/pontosan/" />

 

og: type

og: type: Ritkábban alkalmazzuk, sőt sokszor el is hagyják a fejlesztők ennek a beállításnak a lehetőségét, ami elég nagy hiba, ugyanis a protokoll ezt is a basic beállítások közé sorolja. Ezzel az elemmel mutathatjuk meg azt, hogy oldalunk milyen fő tartalommal rendelkezik és miről is szól valójában. Utalhatunk benne akár zenére vagy filmre is. Nem teszünk rosszat azzal, ha ezt mindig az alap definícióval használjuk, de ha beleásnád magad jobban, akkor a protokoll oldalán többet is megtudhatsz róla.

Az og: type beillesztése a kódba

A kódsort a <head></head> közé kell beilleszteni.

<meta property="og:type" content="website" />

Néhány példa og:type elemekre:
Web based:
website
article
blog

Entertainment:
book
game
movie
food

Place:
city
country

People:
actor
author
politician

Business:
company
hotel
restaurant

A teljes listáért kattints ide.

 

og: locale

og: locale: Az oldal tartalmának nyelvi megjelölésére szolgál.

Az og: locale beillesztése a kódba

A kódsort a <head></head> közé kell beilleszteni.

<meta property="og:locale" content="hu_HU">

 

Az Open Graph protokollal számtalan további dolgot is definiálhatsz még, tovább növelve SEO eredményeidet. Ezeket ide kattintva nézheted végig.

 

A fekete bárány, azaz a kivétel: Twitter

Itthon még mindig nem annyira elterjedt a Twitter, mint amennyire megérdemelné, mégis érdemes megemlíteni, hogy bár a Twitter is felismeri és értelmezi az OG elemeket, saját meta rendszert használ, aminek Twitter Cards a neve. Noha nagy problémát nem vétünk vele, ha ezt nem integráljuk az oldalunkba, ha az OG-t már megtettük, mégis azt gondoljuk, hogy érdemes.

Előfordulhat ugyanis, hogy ha Te ugyan nem is használod ezt a közösségi felületet, attól még mások igen, egyre nagyobb számban. Könnyen előfordulhat, hogy valakinek annyira megtetszik például az egyik blogcikked, hogy el akarja “csiripelni” azt másoknak is. Még nagyobb lesz az öröme, ha látja, hogy Twitterre is optimalizálva van a tartalmad.

 

Nem vagyok programozó, nem merek a kódban turkálni. Mit tegyek?

Bár elsőre ijesztő lehet, hogy az OG-t a forráskódban kell beállítani, ha nincs programozói tudásod, akkor sem kell aggódnod, ugyanis a legtöbb tartalomkezelő rendszerhez létezik olyan plugin, amivel egy egyszerű felületen, kódok módosítása nélkül is elvégezheted az OG elem definiálásokat. A legnépszerűbb CMS-ekhez mutatunk néhány példát:

 

WordPress | WP Open graph
Egyszerűen elvégezhetünk minden Open Graph beállítást vele, egy egyszerű felületen.

WordPress | Open Graph
Érdemes erre a kiegészítőre is egy pillantást vetni, izgalmas extrákat ígér.

WordPress | Yoast SEO
Az utóbbi időben egyre népszerűbb kiegészítő, elérhető ingyenes és fizetős változata is.

Joomla | TAGZ
A TAGZ az egyik kedvencünk, mert automatikusan elvégez néhány feladatot. Például képes egy Joomla cikk bevezetőjéből og:description-t generálni. És a beállítások után előnézetet is mutat arról, hogy megosztást követően mire számíthatunk. Az ingyenes változat sok mindenre elég, ráadásul a Twitter Cards-okat is kezeli.

Drupal | Metatag
Drupal esetében a hivatalos támogatás oldaláról érdemes elindulni. Remek összefoglaló és nagyon specifikusan, de érthetően vezet végig a beállítások mezején.

Létezik WordPress oldalakhoz hivatalos Facebook plugin is, azonban ezt jó ideje nem frissítik és a kommentekből is látszik, hogy eljárt felette az idő. Egyébként itt találod: Facebook.

 

Mi történik akkor, ha nem foglalkozok az Open Graph beállításával?

Amennyiben az alap SEO beállításokat elvégezted, akkor óriási problémákba nem fogsz ütközni, de bizonyos dolgok felett elveszíted a kontrollt. vegyük alapul a Facebookot. A Facebook az oldalad alapértelmezett meta tilte és descrption elemeit fogja felhasználni azután, hogy nem érzékelt OpenGraph elemeket. ez eddig még nem is hangzik rosszul, de a fekete leves csak ezután következik: A közösségi platform ugyanis véletlenszerűen kiválaszt egy képet a weblapodról. Ez azért baj, mert könnyen mellényúlhat. Bár intelligens algoritmusok dolgoznak a háttérben, nem tévedhetetlenek. Könnyen megeshet, hogy teljesen irreleváns képet jelenít majd meg, amivel többet ártasz a tartalmadnak, mint amennyit egy megosztás pozitív értelemben hoz(hat).

Amennyiben az OG elemek nincsenek helyesen beállítva, az a linkrövidítőket is összezavarhatja. A saját linkrövidítőnk például megvizsgálja az oldalad és az OG elemeket közvetíti a megosztásra használt platform felé, ezzel is segítve a még precízebb megosztást.

 

Hibakezelés és a Facebook Debugger

Tegyük fel, hogy túl vagy minden beállításon, megosztottad a cikket, aztán jön az isteni szikra és megváltoztatod az oldaladhoz tartozó og:image képet. A Facebookon azonban semmi sem történik. Ez azért van, mert ahogyan korábban is írtuk, a Facebook az első megosztásnál eltárolja a megjelenített képet. Ennek egyik oka, hogy jobban bízik saját szervereinek kapacitásában, ezért betöltési időt optimalizál ezzel a lépéssel, másrészt így biztosítja azt, hogy ha eltűnik az adott oldal (vagy elérhetetlenné válik a beállított kép), akkor is megmaradjon a megosztás eredeti formájában, függetlenül minden külső behatás nélkül. Na de akkor mégis mi a szöszt tehetünk?

A Facebook Developers oldalán létezik egy úgynevezett Debugger, aminek segítségével újra ellenőriztethetjük a kérdéses oldalt. Ekkor a rendszer észreveszi, hogy változás történt és lecseréli azt az aktuálisra. A Debugger ráadásul számos olyan hiányosságra is felhívja a figyelmünket, amin érdemes javítani.

 

steve

írta: Bartus István | Steve

 

 

További hasznos linkek, források:
Ryte Magazine

ArticleSuggestion

The Open Graph protocol

Graph API


Nyomtatás   E-mail