Open Graph Preview
Facebook előnézet
example.com
Példa cikk címe – Meggyőző főcím a megosztáshoz
Ez a leírás jelenik meg, amikor valaki megosztja az oldalt a közösségi médiában. Írj érdekfeszítő szöveget, amely kattintásra ösztönöz.
Validáció
Generált meta tagek
Ajánlott képméretek
Mi ez az eszköz?
Az Open Graph Preview egy ingyenes online eszköz, amely megmutatja, hogyan jelenik meg a weboldalad, amikor valaki megosztja Facebookon, Twitteren vagy LinkedInen. Az eszköz valós időben generálja az előnézetet és a szükséges meta tageket.
A közösségi média forgalom jelentős része a megosztásokból származik. Ha az oldaladat megosztják, de a kép hiányzik, a cím rossz, vagy a leírás irreleváns, a potenciális látogatók továbbgörgetnek. Jól beállított Open Graph tagekkel akár 2-3x több kattintást érhetsz el ugyanannyi megosztásból.
Eszköz funkciói
Az eszköz az alábbi funkciókat kínálja:
| Funkció | Leírás |
|---|---|
| Valós idejű előnézet | Facebook, Twitter, LinkedIn megjelenés |
| OG tag generátor | Másolható meta tag kód |
| Validáció | Kötelező és ajánlott elemek ellenőrzése |
| Karakterszámláló | Cím és leírás hossz követése |
| Kép előnézet | og:image megjelenítése a kártyán |
| Platform váltás | Különböző platformok szimulációja |
Infoℹ️ Fontos: Az eszköz az általad megadott adatok alapján generálja az előnézetet. A valós megosztás megjelenése függ a platform aktuális cache-étől és szabályaitól. Módosítás után használd a platformok debug eszközeit.
Használati útmutató
Add meg az alap adatokat: Írd be az oldal URL-jét (og:url), a weboldal nevét (og:site_name), és válaszd ki a tartalom típusát (og:type).
Add meg a címet és leírást: Írd be az og:title és og:description szövegét. Figyeld a karakterszámlálót – a cím legyen 40-60, a leírás 100-200 karakter.
Add meg a kép URL-jét: Másold be a megosztási kép teljes URL címét. Az ajánlott méret 1200×630 pixel.
Válassz platformot: Kattints a Facebook, Twitter vagy LinkedIn gombra a különböző előnézetek megtekintéséhez.
Másold ki a kódot: A „Másolás" gombbal vágólapra kerül a generált HTML kód, amelyet a weboldalad
<head>szekciójába kell beilleszteni.
Példa beállítás
Egy blogcikk optimális Open Graph beállítása:
| Tag | Érték |
|---|---|
| og:type | article |
| og:url | https://example.com/blog/seo-tippek-2025 |
| og:title | 10 SEO tipp 2025-re, amit minden vállalkozónak ismernie kell |
| og:description | Összegyűjtöttük a legfontosabb SEO trendeket és praktikus tippeket, amelyekkel javíthatod weboldalad rangsorolását. Olvasd el útmutatónkat! |
| og:image | https://example.com/images/seo-tippek-2025-og.jpg |
| og:site_name | Example Blog |
A generált kód:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/seo-tippek-2025" />
<meta property="og:title" content="10 SEO tipp 2025-re..." />
<meta property="og:description" content="Összegyűjtöttük a legfontosabb..." />
<meta property="og:image" content="https://example.com/images/seo-tippek-2025-og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Example Blog" />Érvényességi tartomány
Az eszköz a főbb közösségi platformok megjelenését szimulálja:
| Platform | Támogatott | Megjegyzés |
|---|---|---|
| ✅ | og: tagek natív támogatás | |
| Twitter/X | ✅ | twitter: tagek + og: fallback |
| ✅ | og: tagek natív támogatás | |
| ⚠️ | Részleges (og:image működik) | |
| ⚠️ | og: tageket használ | |
| Slack | ⚠️ | og: tageket használ |
Warning⚠️ A valós megjelenés eltérhet a platformok frissítései, cache beállításai és egyedi szabályai miatt. Mindig teszteld a tényleges megosztást is.
Technikai háttér
Az Open Graph protokollt a Facebook alkotta meg 2010-ben. Azóta de facto standarddá vált a közösségi megosztásokhoz. A meta tagek a HTML dokumentum <head> szekciójában helyezkednek el.
Kötelező OG tagek:
og:title– Az oldal címeog:type– A tartalom típusa (website, article, product)og:url– Az oldal kanonikus URL-jeog:image– A megosztási kép URL-je
Ajánlott kiegészítő tagek:
og:description– Rövid leírásog:site_name– A weboldal neveog:image:widthésog:image:height– Kép méreteiog:locale– Nyelv (pl. hu_HU)
Twitter-specifikus tagek:
twitter:card– Kártya típusa (summary_large_image)twitter:title,twitter:description,twitter:image– Twitter-specifikus értékek
Ha a Twitter-specifikus tagek hiányoznak, a Twitter az OG tageket használja fallback-ként.
Gyakorlati tippek
A maximális engagement eléréséhez kövesd ezeket a best practice-eket:
Kép optimalizálás:
- Méret: pontosan 1200×630 pixel (1.91:1 arány)
- Formátum: JPG vagy PNG, max 8MB
- Tartalom: a lényeg legyen középen (mobilon levághatják a széleket)
- Szöveg a képen: minimális, nagy betűmérettel
Cím írás:
- 40-60 karakter optimális
- A lényeg az elején
- Számok és power words növelik a CTR-t
- Kerüld az all caps-et
Leírás írás:
- 100-200 karakter (Facebook 155-ig mutatja)
- CTA (cselekvésre ösztönzés) a végén
- Kérdés vagy ígéret az elején
Tip💡 Készíts egyedi megosztási képet minden fontos oldalhoz. A stock fotók helyett használj branded grafikát a cím szövegével – ezek 2-3x jobb CTR-t érnek el.
Kapcsolódó eszközök
| Eszköz | Funkció |
|---|---|
| SERP Preview Tool | Google találati előnézet |
| Meta Description Ellenőrző | Meta leírás validálás |
| Schema Generator | Strukturált adatok generálása |
| Title Tag Optimizer | Címke optimalizálás |
Platform debug eszközök:
- Facebook Sharing Debugger – OG cache ürítés
- Twitter Card Validator – Twitter előnézet
- LinkedIn Post Inspector – LinkedIn előnézet
Gyakran Ismételt Kérdések (FAQ)
Mi az az Open Graph és miért fontos?
Az Open Graph egy protokoll, amelyet a Facebook fejlesztett ki, hogy a weboldalak kontrollálhassák, hogyan jelennek meg a tartalmak a közösségi médiában megosztáskor. Az OG meta tagek nélkül a platformok maguk próbálják kitalálni a címet, leírást és képet – gyakran rossz eredménnyel. Jól beállított OG tagekkel akár 2-3x több kattintást érhetsz el.
Milyen méretű képet használjak az og:image-hez?
Az ajánlott képméret 1200×630 pixel (1.91:1 képarány). Ez a méret optimális Facebookon, Twitteren és LinkedInen egyaránt. Minimum 600×315 pixel szükséges, de a nagyobb kép jobb minőséget biztosít. A fájlméret legyen 8MB alatt, és használj JPG vagy PNG formátumot.
Mi a különbség az Open Graph és a Twitter Card között?
Az Open Graph a Facebook protokollja, amelyet más platformok is átvettek. A Twitter Card a Twitter saját megoldása, amely részben átfed az OG-vel. A legtöbb esetben érdemes mindkettőt megadni: az OG tageket és a twitter:card specifikus tageket is. Ha nincs Twitter Card, a Twitter az OG tageket használja fallback-ként.
Miért nem frissül a megosztás előnézete a közösségi médiában?
A közösségi platformok cache-elik az OG adatokat. Ha módosítottad a tageket, használd a platformok debug eszközeit a cache ürítéséhez: Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector. A cache ürítése után a következő megosztás már az új adatokat mutatja.
Minden oldalon egyedi OG tagek kellenek?
Igen, minden oldalnak egyedi og:title, og:description és og:image tagekkel kell rendelkeznie. Az og:url mindig az adott oldal kanonikus URL-je legyen. A főoldalon az og:type legyen 'website', cikkeknél 'article', termékeknél 'product'. Az egyedi OG tagek biztosítják, hogy minden megosztás releváns és vonzó legyen.
Tudni akarod, hol veszítesz forgalmat?
Kérj SEO Auditot
50+ ellenőrzési pont, 20–40 oldalas PDF riport, 1 óra konzultáció. 150 000 Ft-tól. Válasz 24 órán belül.
SEO Audit részletek →