Blog yazıları üçün OG şəklinin olmaması, paylaşılan linklərin Twitter, LinkedIn və Slack kimi platformalarda sadəcə boş bir URL kimi görünməsinə səbəb olur. Təəssüf ki, çox vaxt istifadəçilər belə linklərə klikləmirlər. Bir çox tərtibatçı bu problemi həll etmək üçün headless browser işə salır, HTML template yükləyir, ekran görüntüsü götürür və həmin şəkli bir yerə yerləşdirir. Ancaq bu yanaşma işləyir, amma sonda Puppeteer instance'ını idarə etmək, şrift problemləri ilə məşğul olmaq və server resurslarını boş yerə yandırmaq məcburiyyətində qalırsınız.
Daha sürətli yanaşma: HTML template + screenshot API
Daha sadə bir üsul var: OG şəkillərinizi HTML template kimi dizayn edin və ekran görüntüsünü xüsusi bir API-ə həvalə edin. Yəni OG şəklinizi kiçik bir veb səhifə kimi düşünün. Siz artıq HTML və CSS bilirsiniz. Sadəcə 1200×630 piksel ölçüsündə bir template hazırlayın, blog yazısının başlığını, müəllif adını və brendinizə uyğun gradient fonu əlavə edin. Sonra bu template'i bir API vasitəsilə şəklə çevirin. Nəticədə nə headless browser, nə də əlavə server yükü olmayacaq.
Template necə görünə bilər?
Nümunə HTML template belə ola bilər:
<div style="width:1200px; height:630px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a1a2e,#16213e); font-family:Inter,sans-serif; padding:60px"> <div style="color:#fff; text-align:center"> <h1 style="font-size:48px; margin:0">{{title}}</h1> <p style="font-size:24px; color:#8892b0; margin-top:20px">{{author}} · {{date}}</p> </div> </div>Server tərəfdə sadəcə yer tutucuları dəyişdirin və nəticədə HTML-i (və ya ona istinad edən URL-i) API-ə göndərin. Məsələn, ScreenshotRun API ilə tək bir curl sorğusu kifayətdir:
curl -X POST "https://api.screenshotrun.com/v1/screenshot" \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "url": "https://yourblog.com/og-template?title=My+Post+Title", "viewport_width": 1200, "viewport_height": 630, "format": "png" }'API PNG şəklini qaytarır. Onu CDN-ə yükləyin, og:image meta teqini əlavə edin — iş bitdi. Heç bir browser idarəetməsinə, Chrome binary'sinə ehtiyac yoxdur.
İş axınına necə inteqrasiya etməli?
Əgər static site generator və ya CMS istifadə edirsinizsə, bu prosesi build addımına və ya post-publish webhook'una bağlaya bilərsiniz. Hər yeni yazı üçün: template URL-ni yaradın, API-ə sorğu göndərin, qaytarılan şəkli S3 və ya seçdiyiniz bir depoya yükləyin, səhifənin head hissəsində <meta property="og:image"> teqini təyin edin. Bütün pipeline hər yazı üçün bir neçə saniyə çəkir. Heç bir headless browser bağımlılığı yoxdur, CI təmiz qalır.
Əsas tövsiyələr
- Template həmişə 1200×630 piksel olsun — bu standart OG şəkil ölçüsüdür.
- Veb-safe şriftlərdən istifadə edin və ya Google Fonts'u <link> vasitəsilə yükləyin.
- Cache'dən aktiv istifadə edin — OG şəkillər çox nadir hallarda dəyişir.
- Yayımlamadan əvvəl Twitter Card Validator və Facebook's Sharing Debugger alətləri ilə test edin.
