OG Image Generator – Social Share Image Maker

Az Open Graph kép az a kép, amely akkor jelenik meg, amikor egy linket beillesztenek egy chatbe, egy tweetbe vagy egy Slack csatornába – és minden platform, amelyen az ember nagyjából 1200 × 630 pixeles vászonra számít, akkora méretű, mint a Facebook og:image és a Twitter summary_large_image kártyája. Ha rosszul állítja be a méretet, a kép vágottan, elmosódottan vagy összenyomva jelenik meg; rossz az elrendezés, és a cím olvashatatlan szilánkként jelenik meg egy mozgalmas fénykép mellett. Ez az eszköz a Canvas 2D API segítségével a valós célfelbontással állítja össze a képet, így az előnézetben a PNG-ben szállított pontos pixelrács látható.

Válasszon hátteret – egy lapos színt, egy kétfokozatú lineáris színátmenetet, amely két választott színből épül fel, vagy egy feltöltött fotót, amely úgy van levágva, hogy kitöltse a teljes 1200×630-as keretet, ugyanúgy, mint egy CSS-háttérméret: a borító, ahelyett, hogy aránytalanul ki lenne nyúlva. Írjon be egy címet és egy opcionális alcímet: mindkettőt karakterenként mérik a vászon saját betűtípus-mutatóihoz, így a túl hosszú címsor, amely túl hosszú ahhoz, hogy elférjen egy sorban, a valódi szóhatáron lévő második vagy harmadik sorba kerül, ahelyett, hogy kiszóródna a széléről vagy láthatatlanul csonkolna. Válasszon középre vagy balra igazítást, válasszon egy szövegszínt, amely a háttérben olvasható, és dobjon be egy opcionális logót a sarokba rögzített, olvasható méretben.

A vászon alatt négy kis kártya közelíti meg, hogyan néz ki a kész kép, ha egy valódi platform saját krómjába burkolja: a Twitter/X kártyáján csak a domain és a kép alatt félkövér felirat látható, leírási sor nélkül, a Facebook egy nagybetűs domain sávot ad a cím és leírás blokk fölé, a LinkedIn a domaint a cím alá helyezi, leírás nélkül, és a Discord saját leírást a kép fölé téma. Ezek tervezési célú stílusos közelítések – egyértelműen illusztrációként megjelölve, a saját maga által beírt domainsorral –, nem pedig a tényleges platformok élő lekérése vagy képernyőképe, mivel a link megosztása és az egyes platformok saját bejárója számára az oldal valódi og:image és og:title metacímkéinek beolvasása az, ami valójában létrehozza az élő kártyát.

Minden lokálisan jelenik meg egy HTML vászonelemen a böngészőben: a cím, a felirat, a feltöltött háttér és az embléma soha nem hagyja el az eszközt, az exportált fájl pedig egy tiszta canvas.toBlob() PNG, amely csak az Ön által alkotott tartalmat tartalmazza – a letöltött képbe nincsenek makettszegélyek, hamis böngészősávok vagy platformlogók. Ha később át kell méreteznie vagy konvertálnia kell az exportált PNG-t, akkor a webhely képátméretező és képátalakító eszközei ott lesznek, ahol ez abbamarad.