OG Image Generator — Създател на изображения за социално споделяне

Изображението на Open Graph е картината, която се показва, когато връзка е поставена в чат, туит или канал на Slack – и всяка платформа, която рендира, очаква платно с приблизително 1200 × 630 пиксела, размерът на картите og:image на Facebook и summary_large_image на Twitter са проектирани около тях. Объркайте размера и изображението излиза изрязано, замъглено или притиснато; объркайте оформлението и заглавието се чете като нечетлива ивица срещу заета снимка. Този инструмент композира изображението с реалната целева разделителна способност с помощта на Canvas 2D API, така че това, което виждате във визуализацията, е точната пикселна мрежа, която се доставя в PNG.

Изберете фон – плосък цвят, линеен градиент с две стъпки, изграден от два избрани от вас цвята, или качена снимка, която се изрязва, за да запълни пълния кадър 1200 × 630 по същия начин, както би направило CSS background-size: cover, вместо да бъде разтегнато непропорционално. Въведете заглавие и подзаглавие по избор: и двете се измерват буква по буква спрямо собствените показатели на шрифта на платното, така че заглавие, което е твърде дълго, за да се побере на един ред, се увива на втори или трети ред на истинска граница на думата, вместо да се разлее от ръба или да бъде невидимо съкратено. Изберете централно или ляво подравняване, изберете цвят на текста, който се чете на вашия фон, и пуснете незадължително лого в ъгъла с фиксиран, четим размер.

Под платното четири малки карти показват приблизително как изглежда завършеното изображение, след като истинска платформа го обгърне в собствен хром: картата на Twitter/X показва само домейна и удебелено заглавие под изображението без ред за описание, Facebook добавя домейн с главни букви над блока за заглавие и описание, LinkedIn поставя домейна под заглавието без никакво описание, а вграждането на Discord поставя домейна, заглавието и описанието над изображение в собствена тъмна тема. Това са стилизирани приближения за целите на планирането — ясно обозначени като илюстративни, с ред за домейн, който въвеждате сами — не извличане на живо или екранна снимка на действителните платформи, тъй като споделянето на връзка и оставянето на собствения робот на всяка платформа да прочете истинските мета тагове og:image и og:title е това, което всъщност създава картата на живо.

Всичко се изобразява локално върху HTML canvas елемент във вашия браузър: заглавието, подзаглавието, каченият фон и логото никога не напускат вашето устройство, а експортираният файл е чист canvas.toBlob() PNG, съдържащ само това, което сте съставили – без граници на макет, фалшиви ленти на браузъра или лога на платформата да се впиват в изтегленото изображение. Ако също трябва да преоразмерите или преобразувате експортирания PNG след това, инструментите за преоразмеряване и преобразуване на изображения на този сайт започват точно от мястото, където свършва този.