आम्ही खराब झालेले ब्लॉग प्रीव्ह्यूज कसे दुरुस्त केले
मी X वर आमच्या ब्लॉगची लिंक पोस्ट केली. प्रीव्ह्यू इमेज चुकीची दिसत होती. तांत्रिक लेखाच्या इमेजऐवजी, तिथे सेल्स बॅनर (sales banner) दिसत होता.
मी आमच्या शेवटच्या सात पोस्ट तपासल्या. त्या सर्वांवर तोच सेल्स बॅनर होता. आमचे इंजिनिअरिंग डीप-डायव्ह्स (engineering deep-dives) जाहिरातींसारखे दिसत होते. यामुळे आमच्या विश्वासार्हतेवर परिणाम झाला.
समस्या साधी होती. आमच्या कोडमध्ये एक fallback rule होता. जर एखाद्या पोस्टला featured image नसेल, तर तो डीफॉल्ट सेल्स बॅनर वापरायचा. आमच्या ४२ पोस्टसाठी आम्ही featured images सेट केल्या नसल्यामुळे, प्रत्येक पोस्टवर तीच इमेज येत होती.
आमच्याकडे दोन पर्याय होते:
- पर्याय अ: मॅन्युअली ४२ इमेजेस तयार करणे. यासाठी वेळ लागतो आणि प्रत्येक नवीन पोस्टसाठी अधिक काम करावे लागते.
- पर्याय ब: डायनॅमिक इमेज जनरेटर (dynamic image generator) तयार करणे. हे प्रत्येक पोस्टसाठी आपोआप एक कस्टम इमेज तयार करते.
आम्ही पर्याय ब निवडला. आम्ही PHP GD वापरून एक लहान इंजिन तयार केले.
ते कसे काम करते ते खालीलप्रमाणे आहे:
- हे इंजिन मागणीनुसार (on demand) 1200x630 PNG तयार करते.
- ते डार्क बॅकग्राउंड आणि पोस्टचे शीर्षक वापरते.
- ते डेटाबेस मधून शीर्षक घेते.
- पहिल्या रेंडरनंतर ते इमेज डिस्कवर सेव्ह करते.
- त्यानंतरच्या प्रत्येक विनंतीसाठी (request) कॅश केलेली (cached) फाईल वापरली जाते. यामुळे हे खूप वेगवान होते.
हे तयार करताना आम्ही दोन विशिष्ट समस्या सोडवल्या:
१. भाषा समर्थन (Language support): फक्त Inter सारखे लॅटिन फॉन्ट्स वापरल्यामुळे जपानी मजकूर रिकाम्या बॉक्ससारखा दिसत होता. आम्ही जपानी शीर्षकांसाठी Noto Sans JP वापरण्यासाठी एक चेक (check) जोडला.
२. व्हिज्युअल टोन (Visual tone): Vercel किंवा PlanetScale सारखे प्रोफेशनल टेक ब्लॉग्स स्वच्छ, डार्क कार्ड्स वापरतात. आमच्या वाचकांचा विश्वास संपादन करण्यासाठी आम्ही हीच शैली वापरली.
तुमच्यासाठी काही महत्त्वाचे धडे:
- तुमच्या सोशल मीडिया प्रीव्ह्यूजची तपासणी करा. तुमचे og:image टॅग्स काम करत आहेत की नाही हे तपासण्यासाठी टूल वापरा.
- प्रत्येक पोस्टसाठी मॅन्युअल आर्टवर्क टाळा. ते स्केलेबल (scale) नसते.
- साधे स्टॅक (stack) वापरा. PHP GD आणि डिस्क कॅश (disk cache) हे हलके आणि प्रभावी आहे.
- अनेक भाषांचा विचार करा. नेहमी असा फॉन्ट समाविष्ट करा जो तुमच्या संपूर्ण कॅरेक्टर सेटला सपोर्ट करतो.
तुमच्या ब्लॉगच्या इमेजेस तुमच्या ब्रँडचे प्रतिनिधित्व करतात. एखादा डीफॉल्ट फॉलबॅक (default fallback) तुमचा पहिला प्रभाव खराब करू देऊ नका.