Open Graph meta tag generátor

Az Open Graph tagek azok az apró HTML-részletek, amelyek eldöntik, hogyan néz ki az oldalad, ha valaki megosztja Facebookon, LinkedInen, Slacken, Discordon vagy X-en (Twitteren). Add meg lent a címet, leírást, URL-t, képet és néhány beállítást, figyeld, ahogy a megosztási kártya előnézete azonnal frissül, majd másold a generált <meta> tageket egyenesen az oldalad <head> szakaszába. Minden a böngésződben történik — semmi sem kerül szerverre.

Mi ez az eszköz?

Az Open Graph egy eredetileg a Facebook által létrehozott protokoll, amely lehetővé teszi, hogy bármely weboldal leírja önmagát egy kis <meta property="og:..."> tagcsoporttal a HTML <head> szakaszában. Amikor valaki beilleszti a linkedet egy közösségi alkalmazásba, chatprogramba vagy üzenetküldőbe, az az app olvassa ki ezeket a tageket, hogy felépítse az előnézeti kártyát — a címet, leírást és bélyegképet —, ahelyett hogy az oldal tartalmából találgatna.

A Twitter (X) egy rokon, de különálló tagcsoportot használ, a <meta name="twitter:...">-t, amely kifejezetten azt szabályozza, hogyan néz ki egy link előnézete a platformján. A legtöbb oldal mindkettőt beállítja: az Open Graph tageket a széles kompatibilitásért, a Twitter Card tageket pedig az X-es előnézet finomhangolásáért (például egy nagy képes kártya kiválasztásáért egy kis összegző kártya helyett).

Ezek a tagek nélkül egy megosztott link vagy egyáltalán nem mutat előnézetet, vagy a platform megpróbál kitalálni egy címet és képet az oldal nyers tartalmából — gyakran rossz címet, egy véletlenszerű beágyazott képet vagy semmit sem választva. Az og:title, og:description és og:image explicit beállítása teljes kontrollt ad afölött, hogyan jelenik meg a tartalmad, mielőtt bárki rákattintana.

Miért érdemes használni?

Élő előnézet — pontosan látod, hogyan fog kinézni a megosztási kártya gépelés közben, még mielőtt bármit publikálnál.
Egyszerre generálja mind az Open Graph tageket (og:title, og:description, og:image, og:url, og:type, og:site_name), mind a Twitter Card tageket.
Lefedi azokat a mezőket, amelyeket a platformok ténylegesen kiolvasnak: cím, leírás, kanonikus URL, kép, oldalnév, tartalomtípus és Twitter kártya stílusa.
Teljesen kliensoldalon fut — a címed, leírásod és URL-jeid soha nem hagyják el a böngésződet.
Ingyenes, nincs bejelentkezés, nincs korlátozás — másold ki az eredményt, és illeszd be a HTML-edbe.

Használati útmutató

Add meg az oldalad címét és egy rövid leírást (törekedj kb. 60 karakter alatti címre, ~155–160 karakteres leírásra).
Add meg az oldal kanonikus URL-jét és az előnézeti kép abszolút URL-jét (a kép URL-jének teljesen minősítettnek kell lennie, pl. https://example.com/image.jpg, nem relatív útvonalnak).
Opcionálisan add meg az oldal nevét, válaszd ki az og:type-ot (website, article, product, profile, video, music), és válassz Twitter Card típust (summary vagy summary_large_image).
Ellenőrizd az élő előnézeti kártyát, hogy a cím, a leírás és a kép jól mutasson együtt.
Kattints a "Másolás" gombra, és illeszd be a generált <meta> tageket az oldalad <head> szakaszába, a záró </head> tag elé.

Példa

Bemenet

Cím: "10 ingyenes fejlesztői eszköz, amit tényleg használni fogsz"
Leírás: "Válogatott lista böngészőalapú eszközökből JSON-hoz, reguláris kifejezésekhez, UUID-khez és még sok máshoz — telepítés nélkül."
URL: https://example.com/blog/dev-tools
Kép: https://example.com/images/dev-tools-cover.jpg

Kimenet

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Az eredmény csak a kitöltött mezőket tartalmazza, tehát ha üresen hagyod az oldalnevet, az og:site_name egyszerűen kimarad a kimenetből.

Gyakori hibák, amiket érdemes elkerülni

Teljesen hiányzó og:image — enélkül a legtöbb platform vagy egyáltalán nem mutat előnézeti képet, vagy egy véletlenszerű, az oldalról kinyert képre esik vissza, ami általában hibásnak és amatőrnek tűnik.
Relatív képútvonal, például /images/cover.jpg használata teljes URL, például https://example.com/images/cover.jpg helyett — a közösségi crawlerek általában nem tudják feloldani a relatív útvonalakat.
Rossz képarány — egy négyzetes vagy álló képet esztétikátlanul vág le a platform, amikor kényszeríti az 1,91:1-es fekvő keretbe; a megosztási képet mindig tervezd 1200×630 közelébe.
Csonkolódó címek vagy leírások — tartsd az og:title-t ~60 karakter alatt, az og:description-t pedig ~155–160 karakter alatt, hogy ne vágódjanak le három ponttal a legtöbb platformon.
A gyorsítótárazott előnézetek frissítésének elfelejtése — az og tagek megváltoztatása után egy élő oldalon a régi előnézet fennmaradhat a Facebook vagy a LinkedIn gyorsítótárában, amíg manuálisan ki nem kényszeríted az újraolvasást a hibakereső eszközeikkel.

Hol használatos az egyes tagek

Az og:title, og:description és og:image az a három tag, amelyet szinte minden platform kiolvas az előnézet felépítéséhez. Az og:url megmondja a crawlereknek, melyik kanonikus linkhez társítsák az előnézetet, ami akkor számít, ha ugyanaz a tartalom több URL-en keresztül is elérhető. Az og:site_name egy kis címkét jelenít meg (például a kiadvány vagy márka nevét) a cím fölött néhány platformon, mint a Facebook.

Az og:type megváltoztatja, milyen típusú objektumot képvisel az oldal az Open Graph gazdagabb objektummodelljét támogató crawlerek számára — például az article engedélyezi az og:article:published_time és og:article:author tageket azokon a platformokon, amelyek kiolvassák őket, bár a legtöbb közösségi előnézet figyelmen kívül hagyja ezeket a további mezőket, és csak az alap cím/leírás/kép hármast használja.

A twitter:card kifejezetten az X-en szabályozza az elrendezést: a summary egy kis négyzetes bélyegképet mutat a szöveg mellett, míg a summary_large_image egy teljes szélességű képet a szöveg fölött — az utóbbi szinte mindig jobb választás olyan tartalomhoz, amelynek van egy tartalmas borítóképe.

Gyakori kérdések

Milyen méretű legyen az og:image-em?

1200×630px az ajánlott méret — elég nagy a magas pixelsűrűségű kijelzőkhöz, és megfelel annak a kb. 1,91:1 képaránynak, amelyre a Facebook, a LinkedIn és az X vágja a képet. Tartsd a fájlt 5–8MB alatt, használj JPG-t vagy PNG-t, és győződj meg róla, hogy a kép URL-je teljes, abszolút cím, nem relatív útvonal — a legtöbb crawler nem tudja helyesen feloldani a relatív képútvonalakat.

Miért nem jelenik meg az előnézetem, amikor megosztom a linket?

A leggyakoribb okok: hiányzó og:image, relatív a abszolút helyett a kép URL-je, a robots.txt blokkolja a crawlert, vagy a platform egy régi előnézet gyorsítótárazott verzióját mutatja. A Facebook és a LinkedIn is agresszíven gyorsítótárazza a lekért előnézeteket — használd a Facebook Sharing Debuggerét vagy a LinkedIn Post Inspectorát, hogy kikényszeríts egy újraolvasást a tagek frissítése után.

Mi a különbség az og: és a twitter: tagek között?

Az og: tagek (og:title, og:description, og:image stb.) az Open Graph szabvány részei, amelyeket a Facebook, a LinkedIn, a Slack, a Discord, a WhatsApp és a legtöbb más platform is kiolvas. A twitter: tagek a Twitter/X saját formátumai. Ha a twitter:title vagy a twitter:image hiányzik, az X automatikusan a megfelelő og: tagre esik vissza — de mindkettő explicit beállítása nagyobb kontrollt ad, beleértve a summary_large_image választását egy nagy előnézeti képhez.

Milyen og:type-ot használjak?

A "website" a biztonságos alapértelmezett választás a legtöbb oldalhoz, beleértve a főoldalakat és az általános tartalmat. Használd az "article"-t blogbejegyzésekhez és hírcikkekhez (ez felold további, cikkekre jellemző tageket, mint a publikálás időpontja), a "product"-ot e-kereskedelmi oldalakhoz, a "profile"-t pedig személyes vagy felhasználói profiloldalakhoz. A típus főleg azt befolyásolja, mely további Open Graph tulajdonságok érvényesek, nem pedig azt, hogyan néz ki az alap előnézeti kártya.

Tárolja vagy elküldi valahova ez az eszköz az adataimat?

Nem. A teljes generálás helyben, a böngésződben történik, egyszerű JavaScripttel. Semmi, amit beírsz, nem kerül továbbításra, naplózásra vagy tárolásra — a lap bezárása mindent töröl.