ابدأ باسم الملف
اسم مثل IMG_8842.webp لا يقول شيئا. اسم وصفي قصير أفضل، مثل washing-machine-repair.webp أو hanybee-seo-kuwait.webp. لا تحتاج إلى حشو خمس كلمات في الاسم. يكفي أن يصف الصورة.
Alt ليس مكانا للكلمات المفتاحية
النص البديل يشرح محتوى الصورة عندما لا تظهر أو عندما يستخدم الزائر قارئ شاشة. اكتب وصفا طبيعيا لما يظهر فعلا. لو كانت الكلمة المستهدفة جزءا حقيقيا من الصورة، ستدخل تلقائيا.
المقاس قبل الضغط
لا ترفع صورة 4000 بكسل لتظهر بعرض 600 بكسل. اختر أبعادا قريبة من الاستخدام ثم اضغط الملف. هذا يقلل النقل ويحسن وقت ظهور الصفحة على الموبيل.
- حدد العرض والارتفاع في HTML قدر الإمكان.
- استخدم WebP أو AVIF عندما يكون مناسبا.
- لا تضغط الصورة لدرجة تفقد التفاصيل المهمة.
- استخدم srcset عندما يحتاج القالب مقاسات مختلفة.
- فعّل lazy loading للصور البعيدة عن بداية الصفحة.
الصورة الرئيسية تحتاج معاملة مختلفة
صورة الهيرو أو الصورة التي تظهر أعلى الشاشة قد تكون جزءا من LCP. تحميلها بتأخير مبالغ فيه يضر الإحساس بالسرعة. أما الصور أسفل المقال فيمكن تحميلها عند اقتراب المستخدم منها.
موضوع الصور يرتبط مباشرة بـ تجربة الموبيل وفهرسة الجوال لأن الصفحة السريعة والمستقرة أسهل في الاستخدام.
السياق حول الصورة مهم
صورة داخل صفحة عن موضوع محدد أقوى من صورة معزولة داخل معرض بلا وصف. العنوان والنص القريب وfigcaption عند الحاجة يساعدون على فهمها. لا تكتب تعليقا لمجرد التكرار، لكن استخدمه عندما يضيف معلومة.
لا تنس الوصول والفهرسة
في المواقع التي تعتمد على الصور بكثافة، تأكد أن الصور قابلة للزحف وليست محجوبة أو محملة بطريقة تفشل بدون JavaScript. الصورة المفيدة تحتاج صفحة مفيدة أيضا.
راجع كذلك تحسين السيو الداخلي حتى تعمل الصورة مع عنوان جيد ومحتوى وروابط مناسبة.
اختيار الأبعاد حسب مكان الاستخدام
صورة بطاقة لا تحتاج أبعاد صورة هيرو. وصورة الهيرو نفسها يجب أن تتناسب مع نسبة القسم حتى لا يُقص الجزء المهم. حدد أماكن الاستخدام ثم جهز مقاسات ثابتة بدل ترك كل محرر يرفع ما يشاء.
الضغط بدون خسارة واضحة
الهدف ليس أصغر رقم ممكن. صورة منتج مشوشة تضر الصفحة أكثر من توفير 30 كيلوبايت. جرّب الجودة بصريا، خصوصا الوجوه والنصوص والتفاصيل الدقيقة.
CLS وأبعاد الصورة
عندما يعرف المتصفح width وheight يستطيع حجز المساحة قبل اكتمال التحميل. هذا يقلل قفز العناصر. لا تحذف الأبعاد من HTML بحجة أن CSS يجعل الصورة Responsive؛ يمكن الجمع بين الاثنين.
صورة OG ليست صورة المقال نفسها دائما
الصورة المناسبة للمقال داخل الصفحة قد تكون مربعة أو رأسية، بينما المشاركة على الشبكات تحتاج غالبا نسبة عريضة. جهز OG واضحة إذا كان المقال مهما للمشاركة، ولا تضع نصا صغيرا لا يُقرأ في البطاقة.
الصور المكررة
استخدام نفس الصورة العامة في عشرات المقالات لا يمنع الفهرسة، لكنه يجعل البطاقات متشابهة ويضعف هوية المحتوى. عندما يكون الموضوع مهما، صورة خاصة أو لقطة فعلية أفضل.
ماذا عن أسماء عربية للملفات؟
تعمل تقنيا، لكن أسماء لاتينية قصيرة وواضحة أسهل في النقل بين الأنظمة وتجنب مشاكل الترميز في بعض الأدوات. الأهم ألا يكون الاسم عشوائيا.
اختبر بعد الرفع
افتح Network في المتصفح وتأكد أن الصورة التي تصل للموبيل ليست أكبر من اللازم. أحيانا يجهز ووردبريس srcset جيدا، لكن CSS أو إضافة صور تجبر المتصفح على تحميل النسخة الأكبر.