تحسين الصور لمحركات البحث: النص البديل وحجم الملف والصيغ والتحميل الكسول

تجعل الصور الصفحات أسهل فهمًا وأكثر جاذبية. ويمكنها أيضًا جلب زوار من Google Images وميزات البحث المرئي. لكنها عادةً أثقل جزء في الصفحة، والصور غير المحسّنة من أكثر أسباب بطء المواقع شيوعًا.

يدور تحسين الصور حول ضبط الجانبين: جعل الصور مفهومة لمحركات البحث ومتاحة للجميع، مع الحفاظ على سرعتها.

اكتب نصًا بديلًا مفيدًا

تصف سمة alt الصورة بالكلمات:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

للنص البديل ثلاث مهام:

1. إمكانية الوصول – تقرؤه قارئات الشاشة لمن لا يستطيعون رؤية الصورة
2. البديل الاحتياطي – تعرضه المتصفحات إذا فشل تحميل الصورة
3. الفهم – تستخدمه محركات البحث، مع النص المحيط، لمعرفة ما تعرضه الصورة

كيف تكتب نصًا بديلًا جيدًا

• صف ما تعرضه الصورة وسبب وجودها في الصفحة
• كن محددًا: «دراجة Brompton حمراء قابلة للطي مطوية بجانب مكتب» أفضل من «دراجة»
• اجعله موجزًا – عادةً أقل من 125 حرفًا
• لا تبدأ بـ«صورة لـ»؛ فقارئات الشاشة تعلن مسبقًا أنها صورة
• استخدم الكلمات المفتاحية ذات الصلة فقط حيث تصف الصورة بشكل طبيعي

الصور الزخرفية

الصور الزخرفية البحتة – الفواصل وزخارف الخلفية – يجب أن تحتوي على سمة alt فارغة: alt="". فذلك يخبر قارئات الشاشة بتخطيها. أما حذف السمة بالكامل فخطأ؛ إذ ستقرأ بعض قارئات الشاشة اسم الملف حينها.

استخدم أسماء ملفات وصفية

IMG_4821.jpg لا يخبر أحدًا بشيء. أما brompton-folding-bike-folded.jpg فيمنح محركات البحث دليلًا إضافيًا. استخدم كلمات بأحرف صغيرة تفصل بينها شَرطات.

اختر الصيغة المناسبة

بالنسبة لمعظم المواقع، يُعد تقديم WebP أو AVIF عبر عنصر <picture> (مع JPEG كبديل عند الحاجة) أكبر تحسين منفرد:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

تستطيع معظم أنظمة إدارة المحتوى وإضافات الصور وشبكات CDN تحويل الصور إلى الصيغ الحديثة تلقائيًا.

غيّر الحجم واضغط

من الأخطاء الشائعة رفع صورة بعرض 4,000 بكسل مباشرة من الكاميرا وعرضها بعرض 800 بكسل. فالمتصفح يظل يحمّل الملف كاملًا.

• غيّر حجم الصور إلى أكبر حجم تُعرض به فعلًا (ضاعفه للشاشات عالية الكثافة عند الحاجة)
• اضغطها – إعدادات الجودة بين 75–85% لا يمكن تمييزها عادةً عن الأصل
• اجعل معظم صور المحتوى أقل من 150–200 كيلوبايت، والصور الرئيسية الكبيرة أقل من 300 كيلوبايت في الحالة المثالية

قدّم صورًا متجاوبة

الهواتف لا تحتاج إلى صور بحجم سطح المكتب. تتيح سمتا srcset وsizes للمتصفح اختيار الملف المناسب:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

يولّد WordPress ومعظم أطر العمل الحديثة هذه السمات تلقائيًا.

حدد العرض والارتفاع لمنع إزاحة التخطيط

إذا لم تحتوِ الصورة على سمتي width وheight، فلن يعرف المتصفح المساحة التي يجب حجزها، فيقفز المحتوى عند تحميل الصورة. وهذا يضر بمؤشر إزاحة التخطيط التراكمية (CLS)، أحد مؤشرات أداء الويب الأساسية. ضمّن دائمًا أبعاد الصورة (أو استخدم خاصية aspect-ratio في CSS)؛ ويظل بإمكان CSS المتجاوب تغيير حجمها.

حمّل الصور أسفل الصفحة تحميلًا كسولًا

تخبر loading="lazy" المتصفح بتحميل الصورة فقط عندما توشك على الظهور أثناء التمرير:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

استخدمها للصور الموجودة في أسفل الصفحة، لكن ليس للصورة الرئيسية في الأعلى. فالتحميل الكسول لأكبر صورة في الشاشة الأولى يؤخر مؤشر أكبر عرض للمحتوى (LCP). ولهذه الصورة، فكّر في fetchpriority="high" بدلًا من ذلك.

ساعد الصور على الظهور في البحث

• ضع الصور قرب نص ذي صلة، وأضف تعليقات توضيحية عند الفائدة – تستخدم Google المحتوى المحيط لفهم الصور
• استخدم عناصر <img> القياسية بدلًا من خلفيات CSS للصور ذات المعنى، حتى تجدها محركات البحث
• أضف الصور إلى خريطة XML الخاصة بك، أو إلى خريطة صور، إذا كانت لديك مكتبات صور كبيرة
• ضمّن صورة في البيانات المنظمة حيث يناسب ذلك (Product، Article، Recipe)
• حدد og:image لتظهر معاينة قوية عند المشاركة على الشبكات الاجتماعية

قائمة تحقق لتحسين الصور

• نص بديل وصفي لكل صورة ذات معنى؛ ونص بديل فارغ للصور الزخرفية
• أسماء ملفات وصفية مفصولة بشَرطات
• صيغة WebP أو AVIF
• تغيير الحجم إلى حجم العرض والضغط
• srcset للتقديم المتجاوب
• تحديد سمتي العرض والارتفاع
• التحميل الكسول للصور أسفل الصفحة، لا للصورة الرئيسية
• مدة تخزين مؤقت طويلة على الخادم أو CDN

تحسين الصور للمتاجر الإلكترونية

صور المنتجات تقوم بجزء كبير من البيع. بالنسبة للمتاجر:

• اعرض عدة زوايا والمنتج أثناء الاستخدام. تفضّل Google Images ونتائج التسوق صور المنتجات الواضحة وعالية الجودة.
• استخدم صورة رئيسية نظيفة ومتسقة لكل منتج – فكثيرًا ما تُستخدم في نتائج التسوق.
• اكتب نصًا بديلًا يحدد المنتج والنسخة: «حذاء الجري النسائي Trail Runner X باللون الفيروزي، منظر جانبي».
• ضمّن الصور في بيانات Product المنظمة باستخدام عناوين URL مطلقة.
• الصور القابلة للتكبير يجب أن تحمّل النسخة الكبيرة عند الحاجة فقط، لا عند تحميل الصفحة.

تحسين الصور للمدونات والناشرين

• استخدم صورًا أصلية حيثما أمكن. فالصور والمخططات والرسوم البيانية الأصلية قد تكسب روابط وتبرز في البحث بالصور؛ أما الصور الجاهزة فتُستخدم في آلاف المواقع.
• أضف تعليقات توضيحية عندما تنقل الصورة معلومات. فالتعليقات من أكثر النصوص قراءة في الصفحة.
• أنشئ مخططات وإنفوجرافيك قابلة للمشاركة للمواضيع المعقدة، مع كتابة المعلومات الأساسية نصًا أيضًا.
• اختر صورة بارزة قوية بعرض 1200 بكسل على الأقل. تفضّل Google Discover الصور الكبيرة عالية الجودة، ويمكنك السماح بالمعاينات الكبيرة بإعداد max-image-preview:large.

صور الخلفية وCSS

الصور المحددة بخاصية CSS background-image غير مرئية لمحركات البحث كمحتوى وليس لها نص بديل. استخدمها للزخرفة فقط. وإذا كانت الصورة تحمل معنى – منتجًا أو رسمًا بيانيًا أو صورة فريق – فاستخدم عنصر <img>.

شبكات CDN للصور والتحسين التلقائي

تصبح إدارة عدة أحجام وصيغ يدويًا غير عملية بسرعة. ويمكن لخدمات وشبكات CDN للصور (Cloudflare Images وCloudinary وimgix وBunny Optimizer وغيرها) وكثير من إضافات WordPress:

• تحويل الصور إلى WebP أو AVIF تلقائيًا
• تغيير الحجم فوريًا لكل جهاز
• الضغط بذكاء
• تخزين الصور مؤقتًا قرب الزوار

إذا استخدمت إحداها، فتحقق من بقاء عناوين URL للصور ثابتة وقابلة للزحف، ومن أن CDN لا يحظر Googlebot.

قياس الأثر

افتح تقرير الأداء في Google Search Console وغيّر نوع البحث إلى صورة لترى عدد النقرات ومرات الظهور التي تحصل عليها صورك ولأي استعلامات. وتابع مؤشرات أداء الويب الأساسية في الأداة نفسها لتتأكد من أن تحسين الصور يحسّن مؤشري LCP وCLS.

أخطاء شائعة

1. رفع صور بحجم الكاميرا وترك المتصفح يصغّرها
2. غياب سمات alt، أو نص بديل محشو بالكلمات المفتاحية
3. التحميل الكسول للصورة الرئيسية
4. عدم تحديد العرض والارتفاع، ما يسبب إزاحة التخطيط
5. نص مضمّن داخل الصور بدلًا من كتابته في HTML – فهو غير مرئي لمحركات البحث وقارئات الشاشة ولا يمكن ترجمته
6. حظر مجلدات الصور في robots.txt

أهم النقاط

• اكتب نصًا بديلًا يصف ما تعرضه الصورة وسبب وجودها؛ واستخدم نصًا بديلًا فارغًا للصور الزخرفية.
• قدّم صيغة WebP أو AVIF، بحجم يطابق حجم العرض ومضغوطة.
• حدد العرض والارتفاع دائمًا لمنع إزاحة التخطيط.
• حمّل الصور أسفل الصفحة تحميلًا كسولًا، لكن لا تفعل ذلك أبدًا مع الصورة الرئيسية.
• استخدم عناصر img حقيقية للصور ذات المعنى، قرب نص ذي صلة، وبأسماء ملفات وصفية.
• راجع بيانات البحث بالصور في Search Console لقياس الزيارات التي تجلبها الصور.

الأسئلة الشائعة

هل يساعد النص البديل في الترتيب؟

يساعد الصور على الترتيب في Google Images ويضيف سياقًا للصفحة. غرضه الأساسي إمكانية الوصول، وكتابته للبشر تنجح عادةً مع محركات البحث أيضًا.

هل أستخدم WebP أم AVIF؟

كلتاهما مدعومة جيدًا. غالبًا ما تنتج AVIF ملفات أصغر، بينما ترميز WebP أسرع ومدعوم أكثر في الأدوات القديمة. وتقدم مواقع كثيرة AVIF مع WebP كبديل.

هل تهم أسماء ملفات الصور؟

قليلًا. فأسماء الملفات الوصفية إشارة إضافية صغيرة وتجعل مكتبة الوسائط أسهل في الإدارة.

هل التحميل الكسول جيد لتحسين البحث؟

نعم، عند استخدامه بشكل صحيح. تدعم Google خاصية loading="lazy" الأصلية. فقط لا تحمّل تحميلًا كسولًا الصور الظاهرة عند فتح الصفحة لأول مرة.