Krizsán Csaba     marketing kivitelező     komplex vevőszerző rendszerek

Hogyan állítsd be a weboldaladat, hogy Facebook megosztáskor jól nézzen ki?

Biztosan jártál már te is úgy, hogy órákat dolgoztál egy anyagon, de mikor megosztottad a Facebookon nem nézett ki jól. Van megoldás!

Tartalom:

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.

head metaadatok

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.

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.

Yoast seo plugin

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!

Töltsd le az INGYENES ebookot!

Mitől jobb az egyik weboldal, mint a másik?
Új weboldalad garantáltan bevételt fog termelni neked, ha ezt a 10 fontos dolgot szemelőtt tartod.
Szerezz megrendeléseket és új ügyfeleket hatékonyan.
Töltsd le az ingyenes siker repectet >>

A szerzőről

Krizsán Csaba marketing kivitelező

Krizsán Csaba

Online marketing kivitelező, az Online Rakéta alapítója
„Küldetésem, hogy a magyar vállalkozók az online piactéren is sikeressé váljanak, biztos technikai hátteret tudva maguk mögött, hogy csak az üzlettel kelljen foglalkozniuk.”

Tetszett ez a cikk? Oszd meg másokkal is!

Megosztás Facebook-on
Megosztás Twitter-en
Megosztás Linkdin-en
Megosztás Pinterest-en

Hozzászólások

Töltsd le az INGYENES ebookot!