هكذا قمنا بإصلاح معاينات المدونة المعطلة

نشرتُ رابطاً لمدونتنا على منصة X. بدت صورة المعاينة خاطئة؛ فبدلاً من صورة مقال تقني، ظهرت لافتة إعلانية.

تحققتُ من آخر سبعة منشورات لدينا، ووجدتها جميعاً تحمل نفس اللافتة الإعلانية. بدت مقالاتنا التقنية المتعمقة وكأنها إعلانات، مما أضر بمصداقيتنا.

كانت المشكلة بسيطة. كان الكود الخاص بنا يحتوي على قاعدة احتياطية (fallback rule): إذا لم يتوفر للمنشور صورة بارزة، فإنه يستخدم لافتة إعلانية افتراضية. وبما أننا لم نحدد صوراً بارزة لـ 42 منشوراً، فقد استخدم كل منشور نفس الصورة.

كان أمامنا خياران:

• الخيار (أ): إنشاء 42 صورة يدوياً. وهذا يستغرق وقتاً ويخلق عبئاً إضافياً مع كل منشور جديد.
• الخيار (ب): بناء مولد صور ديناميكي. يقوم هذا الخيار بإنشاء صورة مخصصة لكل منشور تلقائياً.

اخترنا الخيار (ب). قمنا ببناء محرك صغير باستخدام PHP GD.

إليك آلية عمله:

• يقوم المحرك بإنشاء صورة PNG بمقاس 1200x630 عند الطلب.
• يستخدم خلفية داكنة وعنوان المنشور.
• يسحب العنوان من قاعدة البيانات.
• يحفظ الصورة على القرص بعد عملية المعالجة الأولى.
• يتم تقديم الملف المخزن مؤقتاً (cached) في كل طلب مستقبلي، مما يجعله سريعاً جداً.

لقد حللنا مشكلتين محددتين أثناء عملية البناء هذه:

1. دعم اللغات: أدى استخدام الخطوط اللاتينية فقط مثل Inter إلى ظهور النص الياباني على شكل مربعات فارغة. لذا أضفنا فحصاً لاستبدال الخط بـ Noto Sans JP للعناوين اليابانية.

2. النمط البصري: تستخدم المدونات التقنية الاحترافية مثل Vercel أو PlanetScale بطاقات داكنة وأنيقة. قمنا بمحاكاة هذا النمط لبناء الثقة مع قرائنا.

دروس رئيسية لك:

• راجع معاينات وسائل التواصل الاجتماعي الخاصة بك. استخدم أداة للتحقق مما إذا كانت وسوم og:image تعمل بشكل صحيح.
• تجنب التصميم اليدوي لكل منشور؛ فهذا الأمر لا يمكن توسيعه (does not scale).
• استخدم تقنيات بسيطة. فاستخدام PHP GD مع التخزين المؤقت على القرص (disk cache) خفيف وفعال.
• خطط لدعم لغات متعددة. احرص دائماً على تضمين خط يدعم مجموعة الأحرف الكاملة الخاصة بك.

صور مدونتك تمثل علامتك التجارية. لا تسمح للقاعدة الاحتياطية الافتراضية بإفساد انطباعك الأول.

المصدر: https://dev.to/susumun/implementing-a-dynamic-ogp-image-generator-for-our-blog-php-gd-per-post-1200-630-cards-46al