हमने खराब ब्लॉग प्रिव्यू को कैसे ठीक किया
मैंने X पर अपने ब्लॉग का एक लिंक पोस्ट किया। प्रिव्यू इमेज गलत दिख रही थी। एक तकनीकी लेख की इमेज के बजाय, वहां एक सेल्स बैनर दिख रहा था।
मैंने अपनी पिछली सात पोस्ट चेक कीं। उन सभी में एक ही सेल्स बैनर था। हमारे इंजीनियरिंग डीप-डाइव्स विज्ञापनों की तरह लग रहे थे। इससे हमारी विश्वसनीयता को ठेस पहुंची।
समस्या सरल थी। हमारे कोड में एक फॉलबैक नियम था। यदि किसी पोस्ट में कोई फीचर इमेज नहीं होती थी, तो वह एक डिफॉल्ट सेल्स बैनर का उपयोग करता था। चूंकि हमने अपनी 42 पोस्ट के लिए फीचर इमेज सेट नहीं की थी, इसलिए हर पोस्ट में एक ही इमेज का उपयोग हो रहा था।
हमारे पास दो विकल्प थे:
- विकल्प A: मैन्युअल रूप से 42 इमेज बनाना। इसमें समय लगता है और हर नई पोस्ट के लिए अधिक काम बढ़ जाता है।
- विकल्प B: एक डायनेमिक इमेज जनरेटर बनाना। यह हर पोस्ट के लिए स्वचालित रूप से एक कस्टम इमेज बनाता है।
हमने विकल्प B चुना। हमने PHP GD का उपयोग करके एक छोटा इंजन बनाया।
यह इस प्रकार काम करता है:
- इंजन ऑन डिमांड 1200x630 PNG बनाता है।
- यह एक डार्क बैकग्राउंड और पोस्ट के टाइटल का उपयोग करता है।
- यह डेटाबेस से टाइटल निकालता है।
- यह पहली बार रेंडर होने के बाद इमेज को डिस्क पर सेव कर देता है।
- भविष्य की हर रिक्वेस्ट कैश (cached) की गई फाइल को ही सर्व करती है। इससे यह बहुत तेज़ हो जाता है।
इस निर्माण के दौरान हमने दो विशिष्ट समस्याओं को हल किया:
भाषा समर्थन: केवल Inter जैसे लैटिन फोंट का उपयोग करने से जापानी टेक्स्ट खाली बॉक्स के रूप में दिखाई देने लगा था। हमने जापानी टाइटल के लिए Noto Sans JP का उपयोग करने के लिए एक चेक जोड़ा।
विजुअल टोन: Vercel या PlanetScale जैसे प्रोफेशनल टेक ब्लॉग्स साफ-सुथरे, डार्क कार्ड्स का उपयोग करते हैं। हमने अपने पाठकों का भरोसा जीतने के लिए इसी स्टाइल को अपनाया।
आपके लिए मुख्य सबक:
- अपने सोशल मीडिया प्रिव्यू का ऑडिट करें। यह जांचने के लिए किसी टूल का उपयोग करें कि आपके og:image टैग काम कर रहे हैं या नहीं।
- हर पोस्ट के लिए मैन्युअल आर्टवर्क से बचें। यह स्केलेबल नहीं है।
- एक सरल स्टैक का उपयोग करें। PHP GD और डिस्क कैश हल्का और प्रभावी है।
- कई भाषाओं के लिए योजना बनाएं। हमेशा ऐसा फॉन्ट शामिल करें जो आपके पूरे कैरेक्टर सेट का समर्थन करता हो।
आपके ब्लॉग की इमेज आपके ब्रांड का प्रतिनिधित्व करती हैं। किसी डिफॉल्ट फॉलबैक को अपना पहला प्रभाव खराब न करने दें।