OG-pildigeneraator — sotsiaalmeedia jagamispiltide looja
Koosta 1200×630 Open Graph sotsiaalmeedia jagamispilt pealkirja, alapealkirja, tausta ja logoga – kõik renderdatakse otse brauseri lõuendil. Seejärel vaata, kuidas see näeb välja Twitteri/X-i, Facebooki, LinkedIni ja Discordi lingikaartides, enne kui laadid alla puhta PNG-faili.
🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.
Tulemus
Open Graph pilt on pilt, mis ilmub, kui link kleebitakse vestlusesse, säutsu või Slacki kanalisse – ja iga platvorm, mis seda renderdab, ootab umbes 1200×630 pikslist lõuendit – just selle suuruse järgi on kujundatud nii Facebooki og:image kui ka Twitteri summary_large_image kaardid. Vale suurus tähendab, et pilt väljub kärbituna, udusena või kokkusurutuna; vale kujundus tähendab, et pealkiri loetakse raskesti loetava ribana vastu kirjut fotot. See tööriist koostab pildi õiges sihteraldusvõimes Canvas 2D API abil, nii et eelvaates nähtu on täpselt see pikslivõrk, mis PNG-faili jõuab.
Vali taust – ühtlane värv, kahepunktiline lineaarne gradient kahest valitud värvist või üleslaaditud foto, mis lõigatakse täitma 1200×630 raami samamoodi nagu CSS background-size: cover, mitte ei venitata proportsioonist välja. Trüki pealkiri ja valikuline alapealkiri: mõlemat mõõdetakse tärkhaaval lõuendi enda fondimõõdikute alusel, nii et ühele reale mahutamiseks liiga pikk pealkiri murdub teisele või kolmandale reale tõelisel sõnapiiril, mitte ei voola üle serva ega jää märkamatult kärbituks. Vali kesk- või vasakjoondus, vali tekstivärv, mis taustal loetav on, ja lisa valikuline logo nurka kindlas, loetavas suuruses.
Lõuendi all näitavad neli väikest kaarti umbkaudu, kuidas valmis pilt välja näeb, kui päris platvorm selle oma raamistusse mähib: Twitteri/X-i kaardil on pildi all ainult domeen ja rasvane pealkiri ilma kirjeldusreata, Facebook lisab suurtähelise domeeniriba pealkirja- ja kirjeldusploki kohale, LinkedIn asetab domeeni pealkirja alla üldse ilma kirjelduseta ning Discordi manustus paigutab domeeni, pealkirja ja kirjelduse oma tumedas kujunduses pildi kohale. Need on stiililähendused planeerimiseks – selgelt märgistatud illustratiivsetena, koos enda trükitud domeenireaga – mitte päris platvormide otsepäring ega ekraanipilt, sest lingi jagamine ja iga platvormi enda roboti lastud lehe tõeliste og:image ja og:title metasiltide lugemine on see, mis päris kaardi tekitab.
Kõik renderdub kohapeal sinu brauseri HTML-lõuendielemendil: pealkiri, alapealkiri, üleslaaditud taust ja logo ei lahku kunagi sinu seadmest ning eksporditud fail on puhas canvas.toBlob() PNG, mis sisaldab ainult sinu koostatut – allalaaditavasse pilti ei küpsetata ühtegi mockup-äärist, võltsitud brauseririba ega platvormi logo. Kui sul on pärast vaja eksporditud PNG-d suurust muuta või teisendada, jätkavad selle saidi pildisuuruse muutmise ja pilditeisendamise tööriistad täpselt sealt, kus see tööriist pooleli jääb.