OG Генератор слика — Креатор слика за друштвено дељење

Open Graph слика је приказ који се појављује када се линк налепи у чет, твит или Slack канал — а свака платформа која је приказује очекује платно приближно 1200×630 пиксела, величину око које су првобитно дизајниране Facebook og:image и Twitter summary_large_image картице. Ако величина није одговарајућа, слика излази исечена, замућена или згњечена; ако распоред елемената није добар, наслов се види као нечитак комадић преко хаотичне фотографије. Овај алат компонује слику у стварној циљној резолуцији користећи 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, алати за промену величине слике и конверзију на овом сајту настављају тачно тамо где овај алат стаје.