OG Képgenerátor – Közösségi megosztáshoz való kép készítője

Az Open Graph kép az a kép, amely akkor jelenik meg, amikor egy linket beillesztenek egy chatbe, tweetbe vagy Slack-csatornába – és minden platform, amely ilyet renderel, nagyjából 1200×630 képpontos vásznat vár, ezt a méretet vették alapul a Facebook og:image és a Twitter summary_large_image kártyái is. Ha eltéveszti a méretet, a kép levágva, elmosódva vagy összenyomva jelenik meg; ha az elrendezést rontja el, a cím olvashatatlan csíkként tűnik fel egy mozgalmas fotó előtt. Ez az eszköz a valós célfelbontásban állítja össze a képet a Canvas 2D API segítségével, így amit az előnézetben lát, az pontosan az a pixelrács, ami a PNG-be kerül.

Válasszon hátteret – egy sima színt, egy két színből álló lineáris átmenetet, vagy egy feltöltött fotót, amely kitölti a teljes 1200×630-as keretet, hasonlóan a CSS background-size: cover működéséhez, anélkül hogy aránytalanul megnyúlna. Írjon be egy címet és egy opcionális alcímet: mindkettőt karakterről karakterre mérik a vászon saját betűmetrikái alapján, így egy túl hosszú főcím valódi szóhatáron törve második vagy harmadik sorba kerül, ahelyett hogy lelógna a széléről vagy láthatatlanul csonkolódna. Válasszon középre vagy balra igazítást, válasszon a háttér előtt olvasható betűszínt, és helyezzen el egy opcionális logót a sarokban, rögzített, olvasható méretben.

A vászon alatt négy kis kártya közelítőleg mutatja, hogyan néz ki a kész kép, miután egy valódi platform a saját keretébe foglalja: a Twitter/X kártyája csak a domént és egy félkövér címet mutat a kép alatt, leírás nélkül; a Facebook egy nagybetűs doméncsíkot helyez egy cím-és-leírás blokk fölé; a LinkedIn a domént a cím alá teszi, leírás nélkül; a Discord beágyazása pedig a domént, a címet és a leírást a kép fölé helyezi, a saját sötét témájában. Ezek stilizált közelítések tervezési célokra – egyértelműen szemléltető jelleggel, egy Ön által beírt doménsorral –, nem pedig élő lekérés vagy képernyőkép a tényleges platformokról, hiszen a valódi kártyát a link megosztása és az oldal tényleges og:image és og:title meta tagjeit olvasó platform-saját crawler hozza létre.

Minden helyben, egy HTML canvas elemen renderelődik a böngészőjében: a cím, az alcím, a feltöltött háttér és a logó soha nem hagyja el az eszközét, az exportált fájl pedig egy tiszta canvas.toBlob() PNG, amely csak azt tartalmazza, amit összeállított – a letöltött képbe nem kerül bele semmilyen makettkeret, hamis böngészősáv vagy platformlogó. Ha az exportált PNG-t utólag átméretezné vagy konvertálná, az oldal képméretező és képkonvertáló eszközei pont ott folytatják, ahol ez az eszköz abbahagyta.