Tartalom:
- Mik is azok a meta adatok?
- Hogyan jelenik meg a Facebookon a link
- Beállítás a legegyszerűbb módon (Yoast SEO)
- Mindig ellenőrizd le (Facebook Sharing Debugger)
- Milyen méretű képet használj a Facebook linkhez 2021-ben?
Egy hasznos cikk megírása vagy egy látványos weboldal elkészítése nem kis feladat. Biztosan jártál már te is úgy, hogy órákat dolgoztál egy anyagon, többször átolvastad, a legjobb képeket szerkesztetted bele. Mikor minden készen volt, és mint aki jól végezte dolgát megosztottad a Facebookon a nagyközönséggel. De jaj! Nem úgy nézett ki, mint ahogy szeretted volna.
Mik is azok a meta adatok?
A weboldal tartalma nem csupán a megjelenő szövegből áll. Számos olyan kódot és adatot tartalmaz, amit különféle célokra használnak és a felhasználó számára általában „láthatatlan”. Ezek egyik fajtája a leíró adatok (angolul meta data), amit technikailag a html kód head (fejrész) szekciójában találunk.
Mint a neve is mutatja, arra szolgál, hogy – főként a gépek, programok számára – leírja az oldal egyes tulajdonságait. Ilyen adatok lehetnek például a főcím, a szerző, a bejegyzés létrehozás dátuma, vagy az oldal tartalmának rövid összefoglalója.
Fontosabb meta adatok
Sokféle meta adat létezik, ezek közül néhány kiemelt figyelmet érdemel. Ezek egyrészt a keresőoptimalizálás során játszanak szerepet, mint a meta cím és meta leírás. Míg mások például a Facebook megosztás kívánt működését befolyásolják. Ezek az un. Open Graph adatok, mint az og:title, og:image és og:description.
Meta cím
Talán a meta cím (meta title) az egyik legfontosabb adat az összes közül. Azon kevés adatok egyike, amely a felhasználó számára is látható, mivel a böngésző fülén jelenik meg szövegként. Nem összekeverendő az oldal főcímével (title), bár tartalmában általában megegyezik azzal. A keresőoptimalizálás során a legfontosabb a meta adatok közül.
Meta leírás
A meta leírás (meta description) adatban a weboldal tartalmát szokták összefoglalni pár mondatban. Régebben egy szintén fontos mező volt, mert a Google ezt a leírást jelenítette meg mindig a találati listában. Mai mesterséges intelligenciával támogatott kereső találati listában már nem feltétlenül az itt megadott szöveg jelenik meg, de – a keresési szándéktól függően – általában azért még igen. Egy jó leírás összefoglalja a tartalmat, felcsigázza az olvasót és kattintásra buzdít, mindezt maximum ~150 karakterben.
Open Graph
Az Open Graph protokollt a Facebook hozta létre annak érdekében, hogy a különféle programok és weboldalak egységes módon tudjanak megjelenni a kék óriás felületén. Ahhoz, hogy weblapunk az általunk kívánt formában láthassuk, ezeket az adatokat bizony ki kell töltenünk.
Hogyan jelenik meg a Facebookon a link
Nézzük meg először is, hogy hogyan is néz ki egy linket tartalmazó poszt, amikor „behúzza” az adatokat a weboldal tartalmából.
A megjelenés négy részből tevődik össze. Szövegesen ott van a weboldal linkjének domain neve, alatta a weboldal főcíme, az alatt pedig a tartalom rövid leírása. Ezek felett, vagy mellett pedig egy kép.
Ha nem adunk meg meta adatokat, akkor a címet a weboldal főcíméből veszi, a leírást a weboldal tartalmából, a képet pedig a Facebook által legjobbnak tartott (méret, elhelyezkedés), az oldalon található képek közül választja ki, megeshet, hogy az oldal ikonja, logója jelenik meg, ha nem talál megfelelőbbet helyette.
Ha azt szeretnénk, hogy a megosztott linkünk nagy és a tartalomhoz passzoló – egyszóval az általunk választott – képpel jelenjen meg, akkor a fent említett leíró adatokat meg kell adnunk. Lássuk, hogy hogyan is tudjuk ezt megtenni a legegyszerűbben.
Beállítás a legegyszerűbb módon
WordPress weboldal esetén én a Yoast SEO plugint szoktam javasolni és használni. Ez nem csupán a Facebook megosztás során hasznos, de elsősorban a keresőoptimalizálás támogatására tervezték.
A telepítést követően számos adatot automatikusan kitölt, átemel (például a főcímet és az oldal nevét), így könnyítve meg a munkánkat. Amit minden oldal és poszt esetében érdemes külön kitölteni/beállítani az a metaleírás és a kiemelt kép.
A Facebook és Twitter kinézetet külön is testre szabhatjuk a „Közösségi beállítások” fülön, de ha nem töltjük ki ott, akkor alapból a SEO cím, metaleírás és kiemelt kép beállításokat fogja használni a Facebook Open Graph meta adatok előállításánál. Ezért én külön nem szoktam megadni a Facebook image, title és description mezőket.
Ellenőrizd a munkádat
Ha mindent beállítottál, akkor már nincs más hátra, mint leellenőrizni a munkádat. Felmerül a kérdés, hogy hogyan fog kinézni a megjelenés a Facebookon? Szerencsére nem kell élesben próbálkoznunk!
A Facebook fejlesztőknek szánt eszközével egy gombnyomásra megnézhetjük az eredményt, erre szolgál a Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
Írd be a megosztandó webcímet, majd a Debug gombot nyomd meg. Ha még nem volt soha ez a webcím megosztva a Facebookon, akkor az adatokat le kel kérni a „Fetch new information” gomb segítségével. Esetenként kiírja hibaként, hogy „fb:app_id” hiányzik, de ezzel nem kell törődni.
Ha korábban már valaki megosztotta ezt a linket bárhol a Facebookon, akkor kiírja az éppen tárolt információkat. Mivel a kék óriás nem tölti le állandóan a weboldaladat minden megosztáskor, hogy ezzel is spóroljon az erőforrásokkal, ezért egy tárolt változatot jelenik meg mindig (a legutóbbi frissítés időpontját is kiírja itt neked).
Ha változtattál a metaadatokon, akkor a „Scrape Again” gomb megnyomásával frissítsd a Facebook által eltárolt kinézetet.
Milyen méretű képet használj a Facebook linkhez 2021-ben?
Ahhoz, hogy a link megosztás teljes méretben, és kellő felbontású képpel jelenjen meg a Facebookon érdemes ehhez külön képet szerkeszteni és azt beállítani kiemelt képnek.
A kép mérete 1200 x 630 pixel legyen, hogy a nagyfelbontású eszközökön is jó minőségben jelenhessen meg, és ne vágódjon le a széleken (különböző eszközökön eltérhet a megjelenés). De legalább érje el a 600 x 315 pixel méret, különben nem fog nagy méretben látszódni a kép.
A te weboldalad rendben van a meta adatokkal? Akkor megosztásra fel!