OG vaizdų generatorius – socialinių tinklų bendrinimo vaizdų kūrimo įrankis
Sukomponuokite 1200×630 Open Graph socialinių tinklų bendrinimo vaizdą su antrašte, paantrašte, fonu ir logotipu, realiu laiku atvaizduojamą tikroje drobėje – tuomet peržiūrėkite, kaip jis atrodo įrėmintas Twitter / X, Facebook, LinkedIn ir Discord nuorodų kortelėse, prieš atsisiųsdami švarų PNG.
🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.
Rezultatas
Open Graph vaizdas yra paveikslėlis, kuris parodomas, kai nuoroda įklijuojama į pokalbį, žinutę ar Slack kanalą – ir kiekviena platforma, kuri jį atvaizduoja, tikisi maždaug 1200×630 pikselių dydžio drobės. Tokį dydį naudoja ir Facebook og:image, ir Twitter summary_large_image kortelės. Neteisingai parinkus dydį, vaizdas apkarpomas, susilieja arba suspaudžiamas; neteisingai sudėliojus išdėstymą, antraštė tampa neįskaitoma juostele ant margos nuotraukos. Šis įrankis komponuoja vaizdą tikra tiksline raiška, naudodamas Canvas 2D API, todėl tai, ką matote peržiūroje, yra tikslus pikselių tinklelis, kuris išsaugomas PNG faile.
Pasirinkite foną – vientisą spalvą, dviejų atspalvių linijinį gradientą iš dviejų jūsų pasirinktų spalvų arba įkeltą nuotrauką, kuri apkarpoma, kad užpildytų visą 1200×630 kadrą, panašiai kaip tai darytų CSS background-size: cover, o ne ištempiama neproporcingai. Įrašykite antraštę ir nebūtiną paantraštę: abi matuojamos raidė po raidės pagal drobės šrifto metrikas, todėl per ilga antraštė, netelpanti į vieną eilutę, perkeliama į antrą ar trečią eilutę ties tikra žodžio riba, o ne išlenda už krašto ar nepastebimai nukerpama. Pasirinkite centrinę arba kairinę lygiuotę, parinkite teksto spalvą, kuri būtų įskaitoma jūsų fone, ir įdėkite nebūtiną logotipą į kampą fiksuotu, įskaitomu dydžiu.
Po drobe esančios keturios mažos kortelės apytiksliai parodo, kaip baigtas vaizdas atrodys, kai tikra platforma jį įrėmins savo aplinkoje: Twitter / X kortelė rodo tik domeną ir paryškintą antraštę po vaizdu be aprašymo eilutės; Facebook prideda didžiosiomis raidėmis rašomą domeno juostą virš antraštės ir aprašymo bloko; LinkedIn pateikia domeną po antrašte visai be aprašymo; o Discord įdėtas elementas rodo domeną, antraštę ir aprašymą virš vaizdo savo tamsioje temoje. Tai stilizuoti apytiksliai variantai, skirti planavimui – jie aiškiai pažymėti kaip iliustraciniai, su jūsų pačių įvesta domeno eilute – o ne gyvas atvaizdavimas ar ekrano kopija iš tikrų platformų: tikrąją kortelę sukuria nuorodos bendrinimas, kai kiekvienos platformos tikrinimo robotas nuskaito tikrus jūsų puslapio og:image ir og:title meta žymas.
Viskas atvaizduojama vietiniame HTML drobės elemente jūsų naršyklėje: antraštė, paantraštė, įkeltas fonas ir logotipas niekada nepalieka jūsų įrenginio, o eksportuotas failas yra švarus canvas.toBlob() PNG, kuriame yra tik tai, ką sukomponavote – jokie pavyzdžio rėmeliai, netikros naršyklės juostos ar platformų logotipai neįtraukiami į atsisiųstą vaizdą. Jei vėliau reikės pakeisti eksportuoto PNG dydį ar konvertuoti jį į kitą formatą, šios svetainės vaizdų dydžio keitimo ir konvertavimo įrankiai veikia kaip tęsinys.