શૂન્ય ડોલરમાં OG ઇમેજીસ જનરેટ કરવી

તમે API માટે ચૂકવણી કર્યા વગર સેંકડો આર્ટિકલ્સ માટે OG ઇમેજીસ જનરેટ કરી શકો છો.

હું HTML ટેમ્પલેટ્સના સ્ક્રીનશોટ લેવા માટે Playwright નો ઉપયોગ કરું છું. તે તમને સંપૂર્ણ CSS કંટ્રોલ આપે છે અને તેમાં કોઈ એક્સટર્નલ કીની જરૂર પડતી નથી.

જો તમે સ્ટેટિક સાઇટ ચલાવતા હોવ, તો બેચ ઇમેજ જનરેશન હેન્ડલ કરવા માટે આ શ્રેષ્ઠ રીત છે.

અહીં મારી અભિગમની વિગતવાર માહિતી છે.

અન્ય વિકલ્પોને બદલે મેં Playwright શા માટે પસંદ કર્યું:

  • Cloudinary: કસ્ટમ ફોન્ટ્સ માટે પૈસા ચૂકવવા પડે છે અને તેની URL સિન્ટેક્સ જટિલ છે.
  • Vercel OG: ડાયનેમિક સાઇટ્સ માટે કામ કરે છે, પરંતુ હું Cloudflare પર સ્ટેટિક સાઇટ્સનો ઉપયોગ કરું છું.
  • Node-canvas: C++ ડિપેન્ડન્સીઝને કારણે CI માં સેટઅપ કરવું મુશ્કેલ છે.
  • Pillow: જટિલ CSS લેઆઉટ અથવા flexbox માટે ઉપયોગમાં લેવું મુશ્કેલ છે.

Playwright પદ્ધતિ સરળ છે. હું CSS સાથે એક HTML સ્ટ્રિંગ બનાવું છું. હું તેને હેડલેસ બ્રાઉઝર (headless browser) માં પાસ કરું છું. હું સ્ક્રીનશોટ લઉં છું.

બ્રાઉઝર બધું જ હેન્ડલ કરે છે: ફોન્ટ્સ, ગ્રેડિયન્ટ્સ અને flexbox.

મુખ્ય ટેકનિકલ વિગતો:

  • Accent Colors: મારી સ્ક્રિપ્ટ આર્ટિકલ ટેગ્સના આધારે રંગો પસંદ કરવા માટે regex નો ઉપયોગ કરે છે. એક "AI" ટેગ જાંબલી (purple) રંગ પસંદ કરે છે. એક "Webdev" ટેગ વાદળી (blue) રંગ પસંદ કરે છે.
  • Dynamic Sizing: ઓવરફ્લો અટકાવવા માટે સ્ક્રિપ્ટ ટાઇટલની લંબાઈના આધારે ફોન્ટ સાઈઝ એડજસ્ટ કરે છે.
  • Avoiding Font Issues: હું wait_until="networkidle" નો ઉપયોગ કરું છું. આ સુનિશ્ચિત કરે છે કે સ્ક્રીનશોટ લેતા પહેલા Google Fonts લોડ થઈ જાય. આના વગર, ઇમેજ સામાન્ય સિસ્ટમ ફોન્ટનો ઉપયોગ કરે છે.
  • Speed Optimization: હું એક બ્રાઉઝર ઇન્સ્ટન્સ ખોલું છું અને તમામ આર્ટિકલ્સ માટે પેજ ઓબ્જેક્ટનો ફરીથી ઉપયોગ કરું છું. આ CI પાઇપલાઇનમાં ઘણો સમય બચાવે છે.

વર્કફ્લો:

  1. સ્ક્રિપ્ટ PNG જનરેટ કરે છે.
  2. સ્ક્રિપ્ટ ઇમેજ URL ને આર્ટિકલ frontmatter માં પાછું લખે છે.
  3. CI પાઇપલાઇન ઇમેજ કમિટ (commit) કરે છે.
  4. સાઇટ ડિપ્લોય (deploy) થાય છે.

આ સુનિશ્ચિત કરે છે કે આર્ટિકલ Dev.to અથવા Hashnode જેવા પ્લેટફોર્મ પર પ્રકાશિત થાય તે પહેલાં ઇમેજ લાઈવ થઈ જાય.

આ ક્યારે ટાળવું જોઈએ:

આનો ઉપયોગ ઓન-ડિમાન્ડ (on-demand) જનરેશન માટે કરશો નહીં. Playwright દરેક ઇમેજ માટે લગભગ 2 સેકન્ડ લે છે. તેને હેવી બ્રાઉઝર બાઈનરીની જરૂર પડે છે. તે લાઈવ રિક્વેસ્ટ માટે ખૂબ જ ધીમું છે.

આનો ઉપયોગ બેચ બિલ્ડ્સ (batch builds) માટે કરો જ્યાં તમે સમયનું નિયંત્રણ કરી શકો છો.

સ્ત્રોત: https://dev.to/morinaga/what-i-learned-generating-og-images-for-articles-with-playwright-and-zero-api-cost-31o4