Генератор на OG изображения – Създаване на изображения за социални мрежи

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, инструментите за преоразмеряване и конвертиране на изображения на този сайт продължават точно оттам, докъдето е стигнал този.