நாங்கள் உடைந்த பிளாக் முன்னோட்டங்களை (Blog Previews) எவ்வாறு சரி செய்தோம்

நான் எக்ஸ் (X) தளத்தில் எங்கள் பிளாக்கிற்கான ஒரு இணைப்பைப் பகிர்ந்தேன். அதன் முன்னோட்டப் படம் (preview image) தவறாகத் தெரிந்தது. ஒரு தொழில்நுட்பக் கட்டுரையின் படத்திற்குப் பதிலாக, அது ஒரு விற்பனை விளம்பரப் பேனரைக் காட்டியது.

எங்கள் கடைசி ஏழு பதிவுகளையும் நான் சரிபார்த்தேன். அவை அனைத்திலும் ஒரே விற்பனை விளம்பரப் பேனர் இருந்தது. எங்கள் பொறியியல் ஆழமான ஆய்வுகள் (engineering deep-dives) விளம்பரங்களைப் போலத் தெரிந்தன. இது எங்கள் நம்பகத்தன்மையைப் பாதித்தது.

பிரச்சனை எளிமையானது. எங்கள் குறியீட்டில் (code) ஒரு மாற்று விதி (fallback rule) இருந்தது. ஒரு பதிவிற்கு 'featured image' இல்லையென்றால், அது ஒரு இயல்புநிலை விற்பனை விளம்பரப் பேனரைப் பயன்படுத்தும். எங்கள் 42 பதிவுகளுக்கும் நாங்கள் 'featured images' அமைக்காததால், ஒவ்வொரு பதிவும் ஒரேப் படத்தைத்தான் பயன்படுத்தியது.

எங்களிடம் இரண்டு தேர்வுகள் இருந்தன:

  • விருப்பம் A: 42 படங்களை கைமுறையாக உருவாக்குவது. இதற்கு அதிக நேரம் எடுக்கும் மற்றும் ஒவ்வொரு புதிய பதிவிற்கும் கூடுதல் வேலையை உருவாக்கும்.
  • விருப்பம் B: ஒரு டைனமிக் இமேஜ் ஜெனரேட்டரை (dynamic image generator) உருவாக்குவது. இது ஒவ்வொரு பதிவிற்கும் தானாகவே ஒரு தனிப்பயன் படத்தை உருவாக்கும்.

நாங்கள் விருப்பம் B-யைத் தேர்ந்தெடுத்தோம். PHP GD பயன்படுத்தி ஒரு சிறிய என்ஜினை உருவாக்கினோம்.

அது எவ்வாறு செயல்படுகிறது என்பது இதோ:

  • இந்த என்ஜின் தேவைப்படும்போது 1200x630 PNG படத்தை உருவாக்கும்.
  • இது ஒரு இருண்ட பின்னணியையும் (dark background) பதிவின் தலைப்பையும் பயன்படுத்தும்.
  • இது தரவுத்தளத்திலிருந்து (database) தலைப்பைப் பெறும்.
  • முதல் முறை உருவாக்கப்பட்ட பிறகு, அந்தப் படத்தை டிஸ்க்கில் (disk) சேமிக்கும்.
  • இனிவரும் ஒவ்வொரு கோரிக்கையும் சேமிக்கப்பட்ட (cached) கோப்பையே வழங்கும். இது அதை மிக வேகமாகச் செயல்பட வைக்கும்.

இந்த உருவாக்கத்தின் போது நாங்கள் இரண்டு குறிப்பிட்ட பிரச்சனைகளைத் தீர்த்தோம்:

  1. மொழி ஆதரவு: Inter போன்ற லத்தீன் எழுத்துருக்களை (Latin fonts) மட்டும் பயன்படுத்தியதால், ஜப்பானிய உரைகள் வெறும் காலியிடப் பெட்டிகளாகத் தெரிந்தன. ஜப்பானியத் தலைப்புகளுக்கு Noto Sans JP-யைப் பயன்படுத்துவதற்கான ஒரு சரிபார்ப்பைச் சேர்த்தோம்.

  2. காட்சித் தன்மை (Visual tone): Vercel அல்லது PlanetScale போன்ற தொழில்முறை தொழில்நுட்ப பிளாக்குகள் சுத்தமான, இருண்ட கார்டுகளைப் (dark cards) பயன்படுத்துகின்றன. எங்கள் வாசகர்களிடையே நம்பிக்கையை உருவாக்க நாங்கள் இந்த பாணியைப் பின்பற்றினோம்.

உங்களுக்கான முக்கிய பாடங்கள்:

  • உங்கள் சமூக ஊடக முன்னோட்டங்களைச் சரிபார்க்கவும். உங்கள் og:image டேக்குகள் சரியாக வேலை செய்கின்றனவா என்பதைச் சரிபார்க்க ஒரு கருவியைப் பயன்படுத்தவும்.
  • ஒவ்வொரு பதிவிற்கும் கைமுறையாகக் கலைப்படைப்புகளை உருவாக்குவதைத் தவிர்க்கவும். இது பெரிய அளவில் விரிவாக்கக்கூடியது அல்ல (does not scale).
  • ஒரு எளிய தொழில்நுட்பக் கட்டமைப்பைப் (stack) பயன்படுத்தவும். PHP GD மற்றும் டிஸ்க் கேச் (disk cache) ஆகியவை இலகுவானவை மற்றும் பயனுள்ளவை.
  • பல மொழிகளுக்காகத் திட்டமிடுங்கள். எப்போதும் உங்கள் முழு எழுத்துத் தொகுப்பையும் ஆதரிக்கும் ஒரு எழுத்துருவைச் சேர்த்துக் கொள்ளுங்கள்.

உங்கள் பிளாக் படங்கள் உங்கள் பிராண்டைப் பிரதிபலிக்கின்றன. ஒரு இயல்புநிலை மாற்று விதி (default fallback) உங்கள் முதல் அபிப்பிராயத்தைக் கெடுக்க அனுமதிக்காதீர்கள்.

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