OG és Twitter Card Generátor — Meta Tag Összeállító, Auditor és Előnézet
Állítson össze beillesztésre kész Open Graph és Twitter Card <meta> tageket egy űrlapból, vagy illesszen be egy meglévő <head> szakaszt, hogy ellenőrizze a hiányzó tageket, a cím/leírás hosszát és a twitter:card érvényességét – majd tekintse meg mindkettőt valósághűen újrastilizált Twitter/X, Facebook, LinkedIn és Discord link-kártya maketteken.
🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.
Eredmény
Az Open Graph és Twitter Card meta tagek határozzák meg, hogyan néz ki egy link, amint beillesztik a Slackbe, iMessage-be, egy tweetbe vagy egy Discord csatornába – a címet, leírást és képet a lap saját <head> szakasza adja meg, nem pedig az, amit a platform véletlenszerűen kinyer a látható törzsszövegből. Ez az eszköz egyszerre összeállító és auditor, nem csupán egy általános sablonkitöltő. ÖSSZEÁLLÍTÁS módban adjon meg egy címet, leírást, kép URL-t, kanonikus URL-t, tartalomtípust és Twitter kártyatípust, az eszköz pedig elkészíti a pontos <meta property="og:..."> és <meta name="twitter:..."> tag blokkot, amely készen áll a lap <head> szakaszába való beillesztésre, kihagyva az üresen hagyott mezőket, ahelyett, hogy üres tartalommal rendelkező üres tageket bocsátana ki.
AUDIT módban illessze be a meglévő <head> jelölőnyelvet vagy egy teljes oldal HTML-jét, és az eszköz a böngésző natív DOMParser segítségével elemzi azt, hogy kinyerje az összes már jelen lévő og: és twitter: meta taget, majd lefuttatja a valóban fontos ellenőrzéseket: a négy általánosan szükséges tag (og:title, og:description, og:image, og:url) hiányát jelzi; az og:title hosszát összeveti azzal a körülbelül 60 karakteres ponttal, ahol egyes platformok csonkolni kezdik, és azzal a körülbelül 90 karakteres ponttal, ahol a legtöbb platform csonkolni fogja; az og:description hosszát összeveti azzal a körülbelül 155-200 karakteres tartománnyal, amit a legtöbb platform engedélyez a levágás előtt; a twitter:card értékét a Twitter Card validátor által elfogadott négy valós érték – summary, summary_large_image, app, player – alapján ellenőrzi, és jelzi, ha más; a duplikált tageket (ugyanaz a tulajdonság kétszer deklarálva, ami meglepően gyakori másolási hiba) pedig név szerint megemlíti.
A képméretek őszinte kezelést kapnak: ez az eszköz nem tudja ellenőrizni a kép tényleges képpontméretét anélkül, hogy lekérné azt, és tudatosan soha nem is teszi ezt meg, összhangban az oldal külső kérések nélküli működési elvével. Ha a HTML már deklarálja az og:image:width és og:image:height értékeket, akkor ezeket a deklarált számokat összeveti a széles körben ajánlott 1200×630 minimummal; ha nem, akkor egyértelmű útmutatást ad egy kitalált megfelelés vagy hibajelzés helyett. Mindkét mód ugyanazt a négy link-előnézeti makettet jeleníti meg – Twitter/X (amely a twitter:card értékétől függően vált a kompakt "összefoglaló" indexkép elrendezés és a teljes szélességű "summary_large_image" elrendezés között), Facebook, LinkedIn és Discord – mindegyik valósághűen, az adott platform saját tipográfiájához és elrendezési szokásaihoz igazítva, nem pedig egy dobozként más-más logóval, és mindegyik egyértelműen illusztratív közelítésként van feltüntetve tervezési célokra, hiszen a valós platformok idővel átalakíthatják az előnézetük megjelenését, és ez az eszköz soha nem kéri le és nem elemzi őket.