અમે બગડેલા બ્લોગ પ્રિવ્યુઝને કેવી રીતે સુધાર્યા

મેં X પર અમારા બ્લોગની લિંક પોસ્ટ કરી. પ્રિવ્યુ ઈમેજ ખોટી દેખાતી હતી. ટેકનિકલ આર્ટિકલ ઈમેજને બદલે, તે સેલ્સ બેનર બતાવતું હતું.

મેં અમારી છેલ્લી સાત પોસ્ટ્સ તપાસી. તે તમામમાં એક જ સેલ્સ બેનર હતું. અમારા એન્જિનિયરિંગ ડીપ-ડાઇવ્સ જાહેરાતો જેવા લાગતા હતા. આનાથી આપણી વિશ્વસનીયતાને નુકસાન થયું.

સમસ્યા સરળ હતી. અમારા કોડમાં એક ફોલબેક (fallback) નિયમ હતો. જો પોસ્ટમાં કોઈ ફીચર્ડ ઈમેજ ન હોય, તો તે ડિફોલ્ટ સેલ્સ બેનરનો ઉપયોગ કરતું હતું. કારણ કે અમે અમારી 42 પોસ્ટ્સ માટે ફીચર્ડ ઈમેજ સેટ કરી નહોતી, તેથી દરેક પોસ્ટમાં એક જ ઈમેજ વપરાતી હતી.

અમારી પાસે બે વિકલ્પો હતા:

  • વિકલ્પ A: મેન્યુઅલી 42 ઈમેજ બનાવવી. આમાં સમય લાગે છે અને દરેક નવી પોસ્ટ માટે વધુ કામ ઊભું કરે છે.
  • વિકલ્પ B: ડાયનેમિક ઈમેજ જનરેટર બનાવવું. આ દરેક પોસ્ટ માટે આપમેળે કસ્ટમ ઈમેજ બનાવે છે.

અમે વિકલ્પ B પસંદ કર્યો. અમે PHP GD નો ઉપયોગ કરીને એક નાનું એન્જિન બનાવ્યું.

તે કેવી રીતે કામ કરે છે તે અહીં છે:

  • એન્જિન જરૂરિયાત મુજબ 1200x630 PNG બનાવે છે.
  • તે ડાર્ક બેકગ્રાઉન્ડ અને પોસ્ટના શીર્ષકનો ઉપયોગ કરે છે.
  • તે ડેટાબેઝમાંથી શીર્ષક મેળવે છે.
  • તે પ્રથમ રેન્ડરિંગ પછી ઈમેજને ડિસ્કમાં સેવ કરે છે.
  • દરેક ભવિષ્યની રિક્વેસ્ટ કેશ્ડ (cached) ફાઇલ સર્વ કરે છે. આ તેને ખૂબ જ ઝડપી બનાવે છે.

આ નિર્માણ દરમિયાન અમે બે ચોક્કસ સમસ્યાઓ ઉકેલી:

  1. ભાષા સપોર્ટ: માત્ર Inter જેવા લેટિન ફોન્ટ્સનો ઉપયોગ કરવાથી જાપાનીઝ ટેક્સ્ટ ખાલી બોક્સ તરીકે દેખાતું હતું. અમે જાપાનીઝ શીર્ષકો માટે Noto Sans JP બદલવા માટે એક ચેક ઉમેર્યો.

  2. વિઝ્યુઅલ ટોન: Vercel અથવા PlanetScale જેવા પ્રોફેશનલ ટેક બ્લોગ્સ ક્લીન, ડાર્ક કાર્ડ્સનો ઉપયોગ કરે છે. અમારા વાચકો સાથે વિશ્વાસ કેળવવા માટે અમે આ સ્ટાઇલ સાથે મેળ ખાતો પ્રયાસ કર્યો.

તમારા માટે મુખ્ય પાઠ:

  • તમારા સોશિયલ મીડિયા પ્રિવ્યુઝનું ઓડિટ કરો. તમારા og:image ટેગ્સ કામ કરે છે કે નહીં તે તપાસવા માટે ટૂલનો ઉપયોગ કરો.
  • દરેક પોસ્ટ માટે મેન્યુઅલ આર્ટવર્ક ટાળો. તે સ્કેલેબલ નથી.
  • સાધારણ સ્ટેકનો ઉપયોગ કરો. PHP GD પ્લસ ડિસ્ક કેશ હળવું અને અસરકારક છે.
  • બહુવિધ ભાષાઓ માટે આયોજન કરો. હંમેશા એવો ફોન્ટ સામેલ કરો જે તમારા સંપૂર્ણ કેરેક્ટર સેટને સપોર્ટ કરે છે.

તમારી બ્લોગ ઈમેજ તમારા બ્રાન્ડનું પ્રતિનિધિત્વ કરે છે. ડિફોલ્ટ ફોલબેકને તમારી પ્રથમ છાપ બગાડવા ન દો.

સ્ત્રોત: https://dev.to/susumun/implementing-a-dynamic-ogp-image-generator-for-our-blog-php-gd-per-post-1200-630-cards-46al