শূন্য ডলারে OG ইমেজ তৈরি করা
কোনো API-এর জন্য টাকা না দিয়েই আপনি শত শত আর্টিকেলের জন্য OG ইমেজ তৈরি করতে পারেন।
আমি HTML টেমপ্লেট থেকে স্ক্রিনশট নিতে Playwright ব্যবহার করি। এটি আপনাকে সম্পূর্ণ CSS কন্ট্রোল দেয় এবং এর জন্য কোনো এক্সটার্নাল কী (key) প্রয়োজন হয় না।
আপনি যদি একটি স্ট্যাটিক সাইট চালান, তবে ব্যাচ ইমেজ জেনারেশনের জন্য এটিই সেরা উপায়।
আমার পদ্ধতির বিস্তারিত নিচে দেওয়া হলো।
অন্যান্য বিকল্পের তুলনায় আমি কেন Playwright বেছে নিয়েছি:
- Cloudinary: কাস্টম ফন্টের জন্য টাকা লাগে এবং এর URL সিনট্যাক্স বেশ জটিল।
- Vercel OG: ডাইনামিক সাইটের জন্য কাজ করে, কিন্তু আমি Cloudflare-এ স্ট্যাটিক সাইট ব্যবহার করি।
- Node-canvas: C++ ডিপেন্ডেন্সির কারণে CI-তে সেটআপ করা কঠিন।
- Pillow: জটিল CSS লেআউট বা flexbox-এর জন্য এটি ব্যবহার করা কঠিন।
Playwright পদ্ধতিটি সহজ। আমি CSS সহ একটি HTML স্ট্রিং তৈরি করি। তারপর সেটি একটি headless browser-এ পাঠাই এবং একটি স্ক্রিনশট নিই।
ব্রাউজার সবকিছু সামলে নেয়: ফন্ট, গ্রেডিয়েন্ট এবং flexbox।
Key technical details:
- Accent Colors: আমার স্ক্রিপ্টটি আর্টিকেলের ট্যাগ অনুযায়ী রঙ বেছে নিতে regex ব্যবহার করে। একটি "AI" ট্যাগ বেগুনি রঙ বেছে নেয়। একটি "Webdev" ট্যাগ নীল রঙ বেছে নেয়।
- Dynamic Sizing: ওভারফ্লো রোধ করতে স্ক্রিপ্টটি টাইটেলের দৈর্ঘ্য অনুযায়ী ফন্টের সাইজ অ্যাডজাস্ট করে।
- Avoiding Font Issues: আমি
wait_until="networkidle"ব্যবহার করি। এটি নিশ্চিত করে যে স্ক্রিনশট নেওয়ার আগে Google Fonts লোড হয়েছে। এটি ছাড়া ইমেজটি একটি সাধারণ সিস্টেম ফন্ট ব্যবহার করবে। - Speed Optimization: আমি একটি ব্রাউজার ইনস্ট্যান্স ওপেন করি এবং সব আর্টিকেলের জন্য একই page object পুনরায় ব্যবহার করি। এটি CI পাইপলাইনে উল্লেখযোগ্য সময় বাঁচায়।
Workflow:
- স্ক্রিপ্টটি PNG তৈরি করে।
- স্ক্রিপ্টটি আর্টিকেলের frontmatter-এ ইমেজ URL লিখে দেয়।
- CI পাইপলাইন ইমেজটি কমিট করে।
- সাইটটি ডেপ্লয় হয়।
এটি নিশ্চিত করে যে Dev.to বা Hashnode-এর মতো প্ল্যাটফর্মে আর্টিকেল পাবলিশ হওয়ার আগেই ইমেজটি লাইভ হয়েছে।
কখন এটি এড়িয়ে চলবেন:
অন-ডিমান্ড জেনারেশনের জন্য এটি ব্যবহার করবেন না। প্রতিটি ইমেজের জন্য Playwright প্রায় ২ সেকেন্ড সময় নেয়। এর জন্য একটি ভারী ব্রাউজার বাইনারি প্রয়োজন। লাইভ রিকোয়েস্টের জন্য এটি অনেক ধীরগতির।
এটি ব্যাচ বিল্ডের জন্য ব্যবহার করুন যেখানে আপনি সময় নিয়ন্ত্রণ করতে পারেন।