OG Image Generator — Social Share Image Maker

Open Graph -kuva on kuva, joka näkyy, kun linkki liitetään chattiin, twiittiin tai Slack-kanavaan – ja jokainen alusta, jolla odotetaan olevan kankaalle noin 1200×630 pikseliä, Facebookin og:image- ja Twitterin summary_large_image-kortit suunniteltiin molemmat. Jos valitset väärän koon, kuvasta tulee rajattu, epäselvä tai puristettu. asettelu on väärin ja otsikko on lukukelvoton siivu kiireistä kuvaa vasten. Tämä työkalu muodostaa kuvan todellisella tavoiteresoluutiolla Canvas 2D API:n avulla, joten esikatselussa näkyy täsmälleen PNG-muodossa toimitettava pikseliruudukko.

Valitse tausta – tasainen väri, kahden pisteen lineaarinen liukuväri, joka on rakennettu kahdesta valitsemastasi väristä, tai ladattu valokuva, joka rajataan täyttämään koko 1 200 × 630 kehys samalla tavalla kuin CSS-taustakoko: kansi sen sijaan, että venytettäisiin suhteettomasti. Kirjoita otsikko ja valinnainen alaotsikko: molempia mitataan merkki merkiltä kankaan omiin kirjasinmittauksiin, joten otsikko, joka on liian pitkä mahtumaan yhdelle riville, kietoutuu toiselle tai kolmannelle riville todellisen sanan rajalla sen sijaan, että se valuisi reunasta tai katkeaisi näkymättömästi. Valitse tasaus keskelle tai vasemmalle, valitse tekstin väri, joka lukee taustaasi, ja pudota kulmaan valinnainen logo kiinteässä, luettavassa koossa.

Kankaan alla on neljä pientä korttia, jotka arvioivat, miltä valmis kuva näyttää, kun oikea alusta kääri sen omaan kromiinsa: Twitter/X:n kortissa näkyy vain verkkotunnus ja kuvan alla lihavoitu otsikko ilman kuvausriviä, Facebook lisää isoilla kirjaimilla olevan verkkotunnusnauhan otsikko- ja kuvauslohkon yläpuolelle, LinkedIn sijoittaa verkkotunnuksen otsikon alle ilman kuvausta, upottaa oman kuvauksen ja Discordin kuvauksen yläpuolelle. teema. Nämä ovat tyyliteltyjä likiarvoja suunnittelua varten – merkitty selkeästi havainnollisiksi, itse kirjoittamallasi verkkotunnusrivillä – ei live-hakua tai kuvakaappausta todellisista alustoista, koska linkin jakaminen ja kunkin alustan oman indeksointirobotin antaminen lukea sivusi todelliset og:image- ja og:title-sisällönkuvauskentät ovat se, mikä itse asiassa tuottaa live-kortin.

Kaikki hahmontuu paikallisesti selaimesi HTML-kanvaselementissä: otsikko, tekstitys, ladattu tausta ja logo eivät koskaan poistu laitteestasi, ja viety tiedosto on puhdas canvas.toBlob() PNG, joka sisältää vain sen, mitä olet laatinut – ladattavaan kuvaan ei leimaudu mallireunuksia, väärennettyjä selaimen palkkeja tai alustalogoja. Jos sinun on myös muutettava viedyn PNG-muodon kokoa tai muutettava sen jälkeen, tämän sivuston kuvan koon ja kuvan muuntamistyökalut jatkavat siitä, mihin tämä jää.