OG Image Generator — Sosiaalisen median jakokuvatyökalu

Open Graph -kuva on se kuva, joka näkyy, kun linkki liitetään chatiin, twiittiin tai Slack-kanavalle — ja jokainen sitä renderöivä alusta odottaa noin 1200×630 pikselin canvasta, kokoa, jota varten Facebookin og:image- ja Twitterin summary_large_image -kortit alun perin suunniteltiin. Väärän koon valitseminen johtaa rajautuneeseen, sumeaan tai puristuneeseen kuvaan; väärä sommittelu siihen, että otsikko näyttää lukukelvottomalta siivulta vilkkaan kuvan päällä. Tämä työkalu koostaa kuvan oikealla kohderesoluutiolla Canvas 2D API:a käyttäen, joten esikatselussa näkyvä pikseliruudukko on täsmälleen se, mikä päätyy PNG-tiedostoon.

Valitse tausta — tasainen väri, kahden pysäkin lineaariliukuväri tai ladattu valokuva, joka rajataan täyttämään koko 1200×630 kehys samalla tavalla kuin CSS:n background-size: cover tekisi, vääristymättä. Kirjoita otsikko ja valinnainen alaotsikko: molemmat mitataan merkki merkiltä canvasin omilla kirjasinmetriikoilla, joten otsikko, joka on liian pitkä yhdelle riville, rivittyy toiselle tai kolmannelle riville aidossa sanakatkossa eikä valu reunan yli tai katoa näkymättömiin. Valitse keski- tai vasen tasaus, valitse tekstin väri, joka erottuu taustastasi, ja pudota valinnainen logo nurkkaan kiinteässä, luettavassa koossa.

Canvasin alla neljä pientä korttia näyttää suurin piirtein, miltä valmis kuva näyttää, kun oikea alusta käärii sen omaan kromiinsa: Twitter/X:n kortti näyttää vain verkkotunnuksen ja lihavoidun otsikon kuvan alla ilman kuvaustekstiä, Facebook lisää isot kirjaimet sisältävän verkkotunnussuikaleen otsikko- ja kuvauslohkon yläpuolelle, LinkedIn sijoittaa verkkotunnuksen otsikon alle ilman kuvatusta, ja Discord upotus asettaa verkkotunnuksen, otsikon ja kuvauksen kuvan yläpuolelle omassa tummassa teemassaan. Nämä ovat tyyliteltyjä arvioita suunnittelua varten — selvästi merkitty havainnollistaviksi, ja niissä on itse kirjoittamasi verkkotunnusrivi — eivät live-hakua tai kuvakaappauksia oikeilta alustoilta, sillä linkin jakaminen ja kunkin alustan oman indeksoijan lukeminen sivusi oikeista og:image- ja og:title-metatageista on se, mikä todella tuottaa live-kortin.

Kaikki renderöidään paikallisesti HTML-canvas-elementtiin selaimessasi: otsikko, alaotsikko, ladattu tausta ja logo eivät koskaan poistu laitteeltasi, ja viety tiedosto on puhdas canvas.toBlob()-PNG, joka sisältää vain sen, mitä koostit — ei mockup-reunuksia, väärennettyjä selainpalkkeja tai alustalogoja leivota ladattuun kuvaan. Jos sinun täytyy myöhemmin muuttaa viedyn PNG:n kokoa tai muuntaa se, tämän sivuston kuvan koon muuttaja ja kuvamuunnin jatkavat siitä, mihin tämä työkalu jäi.