Vissza a blogra
Gondolkoztál már azon, miért néznek ki néha furcsán a Facebookon vagy Twitteren megosztott linkjeid? Tudod, hogyan befolyásolhatod a megosztott blogposztjaid megjelenését ezeken a felületeken?
Ha nem vagy biztos benne, hogy mindent megtettél a Facebookon és Twitteren megjelenő információk optimalizálásáért, olvass tovább. Megmutatjuk, hogyan segíthet a megfelelő social media meta tags használata a posztok előnézetének finomhangolásában.
Egy cikk megosztásakor azt szeretnéd, hogy a poszt igényesen nézzen ki: minőségi kép, pontos cím, leírás és URL szerepeljen benne. A Facebook, a Twitter és a többi platform ezeket az adatokat közvetlenül a weboldaladról hívja le.
Saját magad kontrollálhatod, mit emeljenek ki, ha social media meta tageket (például open graph tags) illesztesz a bejegyzéseid HTML kódjába.
Ha a Facebook meta tags (=Open Graph meta tags) jelen vannak, te határozod meg, mi jelenjen meg a Facebook-posztban. Ha nem használsz Open Graph (og) tulajdonságokat, a Facebook továbbra is megmutatja az információkat, de valószínűleg nem úgy, ahogy te szeretnéd. Ez analóg módon működik a Twitter meta tags esetében is. Lássuk a gyakorlatban a social media meta tags használatát a Facebook-linkmegosztásnál.
Webes tartalmak megosztása a Facebookon
A Facebook kiváló platform az új tartalmaid terjesztésére. Egy weboldali cikkből posztot készíteni pofonegyszerű: csak illeszd be a linket az új bejegyzés képmezőjébe.
Nézzük meg ezt a folyamatot. Példaként a Facebook Marketing Strategy posztunkat használjuk.
Az URL beillesztése után a Facebook lehívja az adatokat a céloldalról, és létrehoz egy formázott posztot. A formátum azonnal látható az előnézetben – desktopon és mobilon egyaránt. Ha a Kontentint használod a közösségi média tartalmaid kezelésére, ez a preview azonnal elérhető a Kontentino Content Calendar felületén.
A meta tagek értelmezése a weboldal HTML kódjában
Meta tulajdonságok keresőmotorok számára
A kód tetején több olyan tulajdonságot láthatunk, amelyek az adott cikk paramétereit határozzák meg – ezeket meta tageknek vagy meta tulajdonságoknak nevezzük. Néhányat a keresőmotorok használnak a tartalom értelmezéséhez, olyan extra információkat nyújtva, amelyek nem jelennek meg magán az oldalon. Ilyenek például:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
Az alábbi kép a HTML kódot mutatja ehhez a Kontentino poszthoz. Ezek a meta tagek zöld színnel vannak jelölve.
Meta tagek beazonosítása a Facebook Ads Target Audiences 101 cikk HTML kódjában
Tipp: Nem tudod, hogyan nézd meg a weboldalad HTML kódját? Nyomd meg a CTRL+U billentyűt Windowson vagy az Option + Command + U gombokat Mac-en.
Ezeknek a meta tageknek köszönhetően a keresőmotorok tudják, hogy az oldal indexelhető (dofollow). A meta title és a meta description alapján jelenik meg a link a találati listán (SERP). Ebben a példában:
- Meta title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta description: ‘Find out how to reach the right people with Facebook Ads target audiences.’
Bár tudjuk, hogy ezek a tagek nem optimális hosszúságúak, most nem SEO-ról vagy a Google-ről szól a cikkünk. Térjünk át az „og:” kezdetű meta tagekre.
Ezeket social meta tags, social media meta tags vagy egyszerűen og meta properties néven ismerheted.
A blogposztunk kódjában 7 különböző og meta tulajdonság szerepel:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Illetve további Facebook meta tagek, amelyek az og:image tulajdonsághoz kapcsolódnak:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Twitter meta tags
Emellett speciális Twitter social meta tageket is találsz a kódban:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Térjünk vissza a Facebookhoz. Meg kell értenünk és szerkesztenünk kell ezeket az „og:” tulajdonságokat, hogy javítsunk a beágyazott FB-posztunk megjelenésén.
Olvass tovább és tudd meg: i) Hogyan dekódold az og: tulajdonságokat; ii) Tippek a social meta tags tartalmához; iii) Hogyan szerkeszd őket a weboldalad CMS-ében.
Facebook és Twitter publikálás a Kontentinóval
Regisztrálj a 14 napos Kontentino próbaidőszakra és kezeld profiként a social media meta tageket. Nézd meg a poszt előnézetét a Kontentinóban még a publikálás előtt.
A weboldalad kódjában az „og:” az „Open Graph” rövidítése. Ez egy protokoll, amely lehetővé teszi, hogy megmondd a Facebooknak, hogyan jelenítse meg a megosztott tartalmadat. Ahogy azt a Facebook is leírja a fejlesztői útmutatójában, ezen tagek nélkül a Facebook Crawler heurisztikus alapon próbálja megtippelni a legjobb címet, leírást és képet. Ezek explicit meghatározása garantálja a posztok kiváló minőségét.
Az Open Graph protokollt a Facebook már 2010-ben elindította, mára azonban az Open Web Foundation felügyeli.
A protokoll lényege, hogy a fejlesztők számára lehetővé tegye bármely weboldal gazdag reprezentációját a social graph-on belül. Elég a történelemből; nézzük a 4 legfontosabb taget: og:title, og:image, og:url és og:description.
og:title meta tulajdonság
Ez az egyik alapvető Open Graph metaadat. Itt adjuk meg a tartalom címét úgy, ahogy a közösségi médiában meg akarjuk jeleníteni. A Facebook ezt húzza be címként közvetlenül az URL alá.
og:image meta tulajdonság
Itt az adott cikkhez tartozó kép URL-jét illesztjük be. Meghatározásával biztosítjuk, hogy pontosan az a kép jelenjen meg a Facebookon, amit mi szeretnénk, és ne egy véletlenszerűen kiválasztott grafika az oldalról.
og:url meta tulajdonság
Ez a meta tag a tartalom kanonikus URL-jét tartalmazza, amely állandó azonosítóként szolgál a social graph-ban.
og:description meta tulajdonság
Végül, az og:description segít abban, hogy a megosztáskor egy rövid, kedvcsináló leírás is megjelenjen a posztban.
Twitter meta tags
A Twitter meta tags az Open Graph-hoz hasonlóan működnek, és meghatározzák, milyen tartalom jelenjen meg, amikor valaki megosztja az oldaladat ezen a platformon.
Az og meta tagek mesteri kezelése
Miután megértettük a különböző típusokat, ideje belépni a CMS-be. A WordPress (mint az első számú CMS a világon) példáján mutatjuk be a szerkesztést.
Ha SEO plugint használsz (pl. Yoast SEO, Rank Math, All in One SEO), nyert ügyed van. Ezekkel külön szerkesztheted a Facebook és Twitter meta tageket. Most a Rank Math felületét mutatjuk.
Kattints a bejegyzés szerkesztésekor a SEO fülre, majd azon belül a „Social” fülre.
Social media meta tags szerkesztési helye a CMS-ben
A Rank Math live preview funkciójával láthatod a változások hatását. Kattints a „Preview & Edit Social Media” gombra.
Facebook meta tags szerkesztése
Először az előnézetet látod, alatta pedig a módosítható mezőket.
A CMS által generált linkmegosztási előnézet
Az og:title és og:description szerkesztése
Miután elmentetted a módosításokat, tesztelheted a megosztást. Használhatod a Facebook Debugger eszközt (más néven FB preview tool), hogy lásd a végeredményt. Ne felejts el cache-t üríteni a tesztelés előtt!
Open Graph meta tags a Facebook Link Sharing Debuggerben
Gyakori tévhitek a social media meta tagekről
1. tévhit: Csak SEO célokat szolgálnak.
A meta tagek nem csak a keresőknek szólnak – kulcsfontosságúak a közösségi oldalakon való megjelenésben és az engagement növelésében is.
2. tévhit: Minden kép tökéletesen megjelenik magától.
Specifikus og:image beállítás nélkül a platformok sokszor rosszul formázott vagy irreleváns képet választanak.
3. tévhit: A meta tagek implementálása programozói tudást igényel.
Olyan eszközökkel, mint a Rank Math vagy a Kontentino, kódolás nélkül is könnyen menedzselheted ezeket a paramétereket.
Összegzés
Reméljük, ez a cikk segített megérteni az og meta tulajdonságok fontosságát. Ha szeretnéd social media marketing tevékenységedet magasabb szintre emelni, próbáld ki a Kontentinót. Egyszerűsíti a tartalomgyártást, a csapatmunkát és a jóváhagyási folyamatokat.
Content Calendarunk beépített előnézeti funkcióval rendelkezik, így időt spórolhatsz az optimalizálás során.
FAQ
Mi az a social media meta tag?
Olyan adatokat szolgáltat (cím, kép, leírás) a közösségi platformoknak, amelyek javítják a megosztott oldalak megjelenését és növelik az elköteleződést.
Hogyan találom meg a meta tageket?
A weboldal HTML kódjának megtekintésével vagy olyan eszközökkel, mint a Facebook Debugger, amely megmutatja az og:image vagy og:type tulajdonságokat.
