OG attēlu ģenerators — sociālo tīklu kopīgošanas attēlu veidotājs

Open Graph attēls ir bilde, kas parādās, kad saite tiek ievietota čatā, tvītā vai Slack kanālā – un katra platforma, kas to renderē, sagaida aptuveni 1200×630 pikseļu audeklu, proti, izmēru, kuram ir veidotas gan Facebook og:image, gan Twitter summary_large_image kartītes. Nepareizs izmērs nozīmē apgrieztu, izplūdušu vai saspiestu attēlu; nepareizs izkārtojums – virsrakstu, kas nav salasāms šaurā joslā uz aizņemtas fotogrāfijas. Š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 pikseļu tīkls precīzi sakrīt ar to, kas nonāk PNG failā.

Izvēlies fonu – vienkrāsainu, divu krāsu lineāru pāreju no divām paša izvēlētām krāsām vai augšupielādētu fotoattēlu, kas tiek apgriezts, lai aizpildītu visu 1200×630 rāmi, līdzīgi kā CSS background-size: cover, nevis izstiepts ārpus proporcijām. Ieraksti virsrakstu un neobligātu apakšvirsrakstu: abi tiek mērīti pa vienam simbolam pret audekla fonta metriku, tāpēc pārāk garš virsraksts, kas neiederas vienā rindā, tiek aplauts uz otro vai trešo rindu pie reālas vārda robežas, nevis izplūst aiz malas vai tiek nemanāmi nogriezts. Izvēlies centrētu vai pa kreisi līdzinātu novietojumu, izvēlies teksta krāsu, kas labi salasāma uz tava fona, un ievieto neobligātu logotipu stūrī noteiktā, salasāmā izmērā.

Zem audekla četras nelielas kartītes aptuveni parāda, kā gatavais attēls izskatās, kad reāla platforma to ietērpj savā noformējumā: Twitter/X kartīte rāda tikai domēnu un treknu virsrakstu zem attēla bez apraksta rindas, Facebook pievieno domēna joslu ar lielajiem burtiem virs virsraksta un apraksta bloka, LinkedIn novieto domēnu zem virsraksta bez apraksta, bet Discord iegultais elements rāda domēnu, virsrakstu un aprakstu virs attēla savā tumšajā tēmā. Tie ir stilizēti tuvinājumi plānošanas vajadzībām – skaidri marķēti kā ilustratīvi, ar paša norādītu domēna rindu – nevis reāla platformu datu ielāde vai ekrānuzņēmums, jo īsto kartīti veido tas, ka kopīgo saiti un katras platformas indeksētājs nolasa tavas lapas reālos og:image un og:title meta tagus.

Viss tiek renderēts lokāli uz HTML canvas elementa tavā pārlūkprogrammā: virsraksts, apakšvirsraksts, augšupielādētais fons un logotips nekad nepamet tavu ierīci, un eksportētais fails ir tīrs canvas.toBlob() PNG, kurā ir tikai tas, ko pats izveidoji – bez maketu apmalēm, viltus pārlūka joslām vai platformu logotipiem. Ja pēc tam vajag mainīt izmēru vai konvertēt eksportēto PNG, šīs vietnes attēlu izmēru mainītājs un attēlu konvertētājs turpina tieši tur, kur šis rīks beidz.