اس طرح ہم نے بلاگ کے خراب پری ویوز کو ٹھیک کیا
میں نے X پر اپنے بلاگ کا ایک لنک پوسٹ کیا۔ پری ویو امیج (preview image) غلط نظر آ رہی تھی۔ ایک تکنیکی آرٹیکل کی تصویر کے بجائے، وہاں سیلز بینر نظر آ رہا تھا۔
میں نے اپنی پچھلی سات پوسٹس چیک کیں۔ ان سب پر ایک ہی سیلز بینر تھا۔ ہماری انجینئرنگ ڈیپ ڈائیوز (engineering deep-dives) اشتہارات جیسی لگ رہی تھیں۔ اس سے ہماری ساکھ کو نقصان پہنچا۔
مسئلہ سادہ تھا۔ ہمارے کوڈ میں ایک فال بیک رول (fallback rule) تھا۔ اگر کسی پوسٹ کی فیچرڈ امیج نہ ہو، تو وہ ڈیفالٹ سیلز بینر استعمال کرتا تھا۔ چونکہ ہم نے اپنی 42 پوسٹس کے لیے فیچرڈ امیجز سیٹ نہیں کی تھیں، اس لیے ہر پوسٹ پر ایک ہی تصویر استعمال ہو رہی تھی۔
ہمارے پاس دو انتخاب تھے:
- آپشن A: دستی طور پر 42 تصاویر بنانا۔ اس میں وقت لگتا ہے اور ہر نئی پوسٹ کے لیے مزید کام بڑھ جاتا ہے۔
- آپشن B: ایک ڈائنامک امیج جنریٹر (dynamic image generator) بنانا۔ یہ خود بخود ہر پوسٹ کے لیے ایک کسٹم امیج تیار کرتا ہے۔
ہم نے آپشن B کا انتخاب کیا۔ ہم نے PHP GD کا استعمال کرتے ہوئے ایک چھوٹا انجن بنایا۔
یہ اس طرح کام کرتا ہے:
- انجن ضرورت پڑنے پر 1200x630 PNG تیار کرتا ہے۔
- یہ ڈارک بیک گراؤنڈ اور پوسٹ کا عنوان استعمال کرتا ہے۔
- یہ ڈیٹا بیس سے عنوان حاصل کرتا ہے۔
- یہ پہلی بار رینڈر (render) ہونے کے بعد امیج کو ڈسک پر محفوظ کر لیتا ہے۔
- ہر آنے والی درخواست کیش شدہ (cached) فائل فراہم کرتی ہے۔ اس سے یہ بہت تیز ہو جاتا ہے۔
اس تعمیر کے دوران ہم نے دو مخصوص مسائل حل کیے:
زبان کی سپورٹ: صرف Inter جیسے لاطینی فونٹس استعمال کرنے کی وجہ سے جاپانی متن خالی باکسز کے طور پر نظر آ رہا تھا۔ ہم نے جاپانی عنوانات کے لیے Noto Sans JP کو تبدیل کرنے کے لیے ایک چیک شامل کیا۔
بصری لہجہ (Visual tone): Vercel یا PlanetScale جیسے پیشہ ورانہ ٹیک بلاگز صاف ستھرے، ڈارک کارڈز استعمال کرتے ہیں۔ ہم نے اپنے قارئین کا اعتماد جیتنے کے لیے اسی اسٹائل کو اپنایا۔
آپ کے لیے اہم اسباق:
- اپنے سوشل میڈیا پری ویوز کا آڈٹ کریں۔ یہ چیک کرنے کے لیے کسی ٹول کا استعمال کریں کہ آیا آپ کے og:image ٹیگز کام کر رہے ہیں۔
- ہر پوسٹ کے لیے دستی آرٹ ورک سے بچیں۔ یہ پیمانے (scale) کے مطابق نہیں ہے۔
- ایک سادہ اسٹیک استعمال کریں۔ PHP GD اور ڈسک کیش (disk cache) ہلکا پھلکا اور مؤثر ہے۔
- متعدد زبانوں کے لیے منصوبہ بندی کریں۔ ہمیشہ ایسا فونٹ شامل کریں جو آپ کے مکمل کریکٹر سیٹ (character set) کو سپورٹ کرتا ہو۔
آپ کے بلاگ کی تصاویر آپ کے برانڈ کی نمائندگی کرتی ہیں۔ کسی ڈیفالٹ فال بیک کو اپنا پہلا تاثر خراب نہ کرنے دیں۔