0

OG attēlu ģenerators — sociālo koplietošanas attēlu veidotājs

Izveidojiet 1200 × 630 Open Graph sociālo koplietošanas attēlu ar nosaukumu, apakšvirsrakstu, fonu un logotipu, kas atveidots tiešraidē uz īsta audekla — pēc tam priekšskatiet, kā tas izskatās ierāmēts Twitter/X, Facebook, LinkedIn un Discord saišu kartītēs, pirms lejupielādējat tīru PNG.

Buy Me a Coffee at ko-fi.com
Notiek apstrāde... 0%
Attēla komponēšana
Renderēšanas platformas priekšskatījumi
Gatavs

Rezultāts

Open Graph attēls ir attēls, kas tiek parādīts, kad saite tiek ielīmēta tērzēšanā, tvītā vai Slack kanālā — un katra platforma, kas atveido audekls ar aptuveni 1200 × 630 pikseļiem, tika veidotas Facebook og:image un Twitter summary_large_image kartēs. Iestatiet nepareizu izmēru, un attēls būs apgriezts, izplūdis vai saspiests; nepareizs izkārtojums, un virsraksts skan kā nesalasāma šķemba pret aizņemtu fotoattēlu. Šis rīks veido attēlu reālajā mērķa izšķirtspējā, izmantojot Canvas 2D API, tāpēc priekšskatījumā redzamais ir precīzs pikseļu režģis, kas tiek piegādāts PNG formātā.

Izvēlieties fonu — plakanu krāsu, divu pakāpju lineāru gradientu, kas veidots no divām jūsu izvēlētām krāsām, vai augšupielādētu fotoattēlu, kas tiek apgriezts, lai aizpildītu visu 1200 × 630 kadru tāpat kā CSS fona izmēra: vāks, nevis izstiepts nesamērīgi. Ievadiet virsrakstu un neobligāto apakšvirsrakstu: abi tiek mērīti pēc rakstzīmes, salīdzinot ar audekla fonta metriku, tāpēc virsraksts, kas ir pārāk garš, lai ietilptu vienā rindiņā, tiek aplauzts otrajā vai trešajā rindiņā pie reālas vārda robežas, nevis izplūst no malas vai kļūst nemanāmi saīsināts. Izvēlieties līdzinājumu centrā vai pa kreisi, izvēlieties teksta krāsu, kas skan uz jūsu fona, un nometiet izvēles logotipu stūrī fiksētā, salasāmā izmērā.

Zem audekla ir četras mazas kartītes, kas aptuveni parāda, kā izskatās gatavais attēls, kad īsta platforma to ietin savā hromā: Twitter/X kartītē zem attēla ir redzams tikai domēns un trekns virsraksts bez apraksta rindiņas, Facebook virs nosaukuma un apraksta bloka pievieno domēna joslu ar lielajiem burtiem, LinkedIn ievieto domēnu zem nosaukuma bez apraksta, iegulst savu aprakstu virs attēla, un Discord ievieto aprakstu virs attēla. tēma. Tie ir stilizēti tuvinājumi plānošanas nolūkiem — tie ir skaidri apzīmēti kā ilustratīvi, ar domēna rindiņu, kuru ievadāt pats — nevis faktisko platformu tiešraides ielāde vai ekrānuzņēmums, jo, kopīgojot saiti un ļaujot katras platformas rāpuļprogrammai nolasīt jūsu lapas reālos metatagus og:image un og:title, faktiski tiek veidota tiešā kartīte.

Viss tiek atveidots lokāli HTML kanvas elementā jūsu pārlūkprogrammā: nosaukums, apakšvirsraksts, augšupielādētais fons un logotips nekad netiek atstāts no jūsu ierīces, un eksportētais fails ir tīrs canvas.toBlob() PNG, kas satur tikai jūsu izveidoto — lejupielādētajā attēlā netiek iekļautas maketa apmales, viltotas pārlūkprogrammas joslas vai platformas logotipi. Ja arī pēc tam ir jāmaina eksportētā PNG faila lielums vai jākonvertē, šīs vietnes attēla izmēru maiņas un attēla pārveidotāja rīki darbojas tieši no vietas, kur šis rīks tiek pārtraukts.