OG Image Generator — Social Share Image Maker

O imagine Open Graph este imaginea care apare atunci când un link este inserat într-un chat, un tweet sau un canal Slack - și fiecare platformă care redă o pânză se așteaptă la o pânză de aproximativ 1200 × 630 pixeli, dimensiunea og:image de pe Facebook și cardurile summary_large_image de pe Twitter au fost ambele concepute. Greșiți dimensiunea și imaginea iese decupată, neclară sau strânsă; greșiți aspectul și titlul se citește ca o așchie ilizibilă împotriva unei fotografii ocupate. Acest instrument compune imaginea la rezoluția țintă reală folosind API-ul Canvas 2D, așa că ceea ce vedeți în previzualizare este grila exactă de pixeli care este livrată în PNG.

Alegeți un fundal — o culoare plată, un gradient liniar cu două trepte construit din două culori pe care le alegeți sau o fotografie încărcată care este decupată pentru a umple întregul cadru de 1200 × 630 la fel cum ar face o copertă cu dimensiunea fundalului CSS, în loc să fie întinsă disproporționat. Introduceți un titlu și un subtitrare opțional: ambele sunt măsurate caracter cu caracter în raport cu valorile fonturilor proprii ale pânzei, astfel încât un titlu care este prea lung pentru a se potrivi pe o linie se înfășoară pe o a doua sau a treia linie la granița unui cuvânt real, în loc să se revarsă de pe margine sau să fie trunchiat invizibil. Alegeți alinierea la centru sau la stânga, alegeți o culoare a textului care se citește pe fundal și plasați o siglă opțională în colț la o dimensiune fixă ​​și lizibilă.

Sub pânză, patru mici cărți aproximează cum arată imaginea finală odată ce o platformă reală o înfășoară în propriul crom: cardul Twitter/X arată doar domeniul și un titlu aldine sub imagine fără linie de descriere, Facebook adaugă o bandă de domeniu cu majuscule deasupra unui bloc de titlu și descriere, LinkedIn pune domeniul sub titlu, fără descrierea titlului și descrierea domeniului, încorporează mai sus, imaginea Discord și descrierea domeniului deasupra. propria temă întunecată. Acestea sunt aproximări stilate în scopuri de planificare – etichetate clar ca ilustrative, cu o linie de domeniu pe care o introduceți singur – nu o preluare live sau o captură de ecran a platformelor reale, deoarece partajarea unui link și lăsarea crawler-ului fiecărei platforme să citească metaetichetele reale og:image și og:title ale paginii dvs. este ceea ce produce de fapt cardul live.

Totul este redat local pe un element de pânză HTML din browserul dvs.: titlul, subtitrarea, fundalul încărcat și logo-ul nu părăsesc dispozitivul dvs., iar fișierul exportat este un PNG curat canvas.toBlob() care conține doar ceea ce ați compus - fără margini de machetă, bare de browser false sau sigle ale platformei nu sunt incluse în imaginea descărcată. Dacă, de asemenea, trebuie să redimensionați sau să convertiți PNG-ul exportat ulterior, instrumentele de redimensionare a imaginii și de conversie a imaginii de pe acest site reia exact de unde se oprește.