OG Image Generator — Social Share Image Maker

En Open Graph-bild är bilden som dyker upp när en länk klistras in i en chatt, en tweet eller en Slack-kanal – och varje plattform som renderar en förväntar sig en arbetsyta på ungefär 1200×630 pixlar, storleken Facebooks og:image och Twitters summary_large_image-kort var båda designade runt. Om du väljer fel storlek så blir bilden beskuren, suddig eller sammanpressad; får layouten fel och titeln läses som en oläslig flisa mot ett upptaget foto. Det här verktyget komponerar bilden med den verkliga målupplösningen med Canvas 2D API, så det du ser i förhandsgranskningen är det exakta pixelrutnätet som levereras i PNG.

Välj en bakgrund — en platt färg, en linjär toningsgradient med två steg byggd av två färger du väljer, eller ett uppladdat foto som beskärs för att fylla hela 1200×630-ramen på samma sätt som en CSS-bakgrundsstorlek: omslaget skulle, istället för att sträckas ut ur proportion. Skriv en titel och en valfri underrubrik: båda mäts tecken för tecken mot dukens egna teckensnittsmått, så en rubrik som är för lång för att passa på en rad lindas in på en andra eller tredje rad vid en riktig ordgräns istället för att spilla ut från kanten eller bli osynligt trunkerad. Välj mitt- eller vänsterjustering, välj en textfärg som läses mot din bakgrund och släpp en valfri logotyp i hörnet med en fast, läsbar storlek.

Under duken visar fyra små kort ungefär hur den färdiga bilden ser ut när en riktig plattform lindar in den i sin egen krom: Twitter/X:s kort visar bara domänen och en fet rubrik under bilden utan beskrivningsrad, Facebook lägger till en domänremsa med versaler ovanför ett rubrik-och-beskrivningsblock, LinkedIn lägger domänen under titeln, utan beskrivning av domänen, utan domän, utan inbäddning. titel och beskrivning ovanför bilden i sitt eget mörka tema. Dessa är utformade approximationer för planeringsändamål — tydligt märkta som illustrativa, med en domänrad du själv skriver — inte en livehämtning eller skärmdump av de faktiska plattformarna, eftersom att dela en länk och låta varje plattforms egen sökrobot läsa din sidas riktiga og:image och og:title metataggar är det som faktiskt producerar livekortet.

Allt renderas lokalt på ett HTML-canvaselement i din webbläsare: titeln, undertiteln, uppladdad bakgrund och logotyp lämnar aldrig din enhet, och den exporterade filen är en ren canvas.toBlob() PNG som bara innehåller det du komponerade – inga mockup-kanter, falska webbläsarfält eller plattformslogotyper bakas in i den nedladdade bilden. Om du också behöver ändra storlek på eller konvertera den exporterade PNG-filen efteråt, tar den här webbplatsens bildförändrings- och bildkonverteringsverktyg upp precis där detta slutar.