تولید تصاویر OG با هزینه صفر دلار

شما می‌توانید بدون پرداخت هزینه برای یک API، برای صدات‌ها مقاله تصویر OG تولید کنید.

من از Playwright برای گرفتن اسکرین‌شات از قالب‌های HTML استفاده می‌کنم. این روش کنترل کامل CSS را به شما می‌دهد و به هیچ کلید خارجی (external key) نیاز ندارد.

اگر یک سایت استاتیک دارید، این بهترین راه برای مدیریت تولید دسته‌ای (batch) تصاویر است.

در اینجا جزئیات رویکرد من آمده است.

چرا Playwright را به گزینه‌های دیگر ترجیح دادم:

  • Cloudinary: برای فونت‌های سفارشی هزینه دریافت می‌کند و سینتکس URL پیچیده‌ای دارد.
  • Vercel OG: برای سایت‌های پویا (dynamic) کار می‌کند، اما من از سایت‌های استاتیک روی Cloudflare استفاده می‌کنم.
  • Node-canvas: به دلیل وابستگی‌های C++، راه‌اندازی آن در CI دشوار است.
  • Pillow: برای چیدمان‌های پیچیده CSS یا flexbox استفاده از آن سخت است.

روش Playwright ساده است. من یک رشته HTML همراه با CSS می‌سازم، آن را به یک مرورگر بدون رابط کاربری (headless browser) می‌فرستم و سپس از آن اسکرین‌شات می‌گیرم.

مرورگر همه چیز را مدیریت می‌کند: فونت‌ها، گرادینت‌ها و flexbox.

جزئیات فنی کلیدی:

  • رنگ‌های تأکیدی (Accent Colors): اسکریپت من از regex برای انتخاب رنگ‌ها بر اساس تگ‌های مقاله استفاده می‌کند. تگ "AI" رنگ بنفش را انتخاب می‌کند و تگ "Webdev" رنگ آبی را.
  • اندازه سازی پویا: اسکریپت اندازه فونت را بر اساس طول عنوان تنظیم می‌کند تا از سرریز شدن (overflow) جلوگیری شود.
  • جلوگیری از مشکلات فونت: من از wait_until="networkidle" استفاده می‌کنم. این کار تضمین می‌کند که Google Fonts قبل از گرفتن اسکرین‌شات بارگذاری شوند. بدون این کار، تصویر از یک فونت سیستمی معمولی استفاده می‌کند.
  • بهینه‌سازی سرعت: من یک نمونه (instance) از مرورگر را باز می‌کنم و از شیء صفحه (page object) برای تمام مقالات مجدداً استفاده می‌کنم. این کار زمان قابل توجهی را در خط لوله CI صرفه‌جویی می‌کند.

گردش کار (Workflow):

  1. اسکریپت فایل PNG را تولید می‌کند.
  2. اسکریپت URL تصویر را در frontmatter مقاله می‌نویسد.
  3. خط لوله CI تصویر را commit می‌کند.
  4. سایت مستقر (deploy) می‌شود.

این کار تضمین می‌کند که تصویر قبل از انتشار مقاله در پلتفرم‌هایی مانند Dev.to یا Hashnode، آماده و فعال باشد.

چه زمانی از این روش استفاده نکنیم:

از این روش برای تولید در لحظه (on-demand) استفاده نکنید. Playwright برای هر تصویر حدود ۲ ثانیه زمان می‌برد. این روش به یک باینری سنگین مرورگر نیاز دارد و برای درخواست‌های زنده (live request) بسیار کند است.

از این روش برای ساخت‌های دسته‌ای (batch builds) که در آن‌ها زمان‌بندی را خودتان کنترل می‌کنید، استفاده کنید.

منبع: https://dev.to/morinaga/what-i-learned-generating-og-images-for-articles-with-playwright-and-zero-api-cost-31o4