📖 ملاحظة عن المصدر: أُعِدّ هذا المقال استنادًا إلى أفكار وردت في مقال Image SEO: 12 Actionable Tips، المنشور أصلًا لدى Ahrefs. وقد أُعيدت صياغة المحتوى هنا وتوسيعه وتكييفه مع سياق القارئ العربي، بأمثلة وأدوات ومراجع تناسبه.
يظن كثيرون أن تحسين الصور لمحركات البحث يقتصر على وضع كلمة مفتاحية في الخاصية alt. أما عمليًا فهناك اثنا عشر عاملًا على الأقل تؤثر في طريقة عثور Google على صور موقعك وفهمها وترتيبها. وتجاهل هذه العوامل يعني خسارة زيارات كان الحصول عليها سهلًا — بما فيها زيارات بحث الصور في Google، الذي يستحوذ على حصة معتبرة من عمليات البحث حول العالم.
يمضي Google نفسه قُدمًا في التعرف على الصور عبر تعلّم الآلة. لكن ذلك لا يجعل تحسين الصور أمرًا عفا عليه الزمن — بل على العكس، لا يزال Google يستخدم كل الإشارات المتاحة (اسم الملف، والنص البديل، وسياق الصفحة، وسرعة التحميل) ليفسّر الصور ويرتّبها بدقة.
1. سمِّ الملفات بأسماء وصفية
اسم الملف من أوائل الإشارات التي يستعين بها Google لفهم موضوع الصورة. والكاميرات والهواتف تنتج أسماء عامة مثل IMG_0023.JPG أو DSC_4817.jpg — وهي لا تقول لمحرك البحث شيئًا على الإطلاق.
يذكر Google في إرشاداته الرسمية أن اسم الملف دليل على محتوى الصورة. والتوصية بسيطة: استخدم كلمات مفتاحية وصفية مفصولة بشرطات، من دون مبالغة:
- جيد:
chocolate-cake.jpg - سيئ:
IMG_2947.jpg - سيئ أيضًا:
chocolate-cake-recipe-dessert-sweet.jpg(حشو للكلمات المفتاحية)
إعادة تسمية الصور قبل رفعها عادة بسيطة لكنها تُحدث فرقًا — خصوصًا لمتاجر التجارة الإلكترونية ومدونات الطبخ ومعارض الأعمال وأي موقع يعتمد على زيارات بحث الصور.
2. اكتب نصوصًا بديلة (alt) مفيدة
تصف الخاصية alt الصورة للمتصفح. وتظهر عندما تفشل الصورة في التحميل، وتقرأها برامج قراءة الشاشة لذوي الإعاقة البصرية، ويستعين بها Google لفهم المحتوى المرئي في الصفحة.
الصيغة بسيطة:
<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing in the park">
يجمع Google بين النص البديل وخوارزميات الرؤية الحاسوبية وسياق الصفحة ليفهم موضوع الصورة. والإرشاد هو كتابة أوصاف مفيدة وغنية بالمعلومات، مع توظيف الكلمات المفتاحية ضمن سياقها — لا تكديسها بلا معنى.
حيلة بسيطة تنجح دائمًا: أكمل الجملة «هذه صورة لـ ___». وما يملأ الفراغ، بعد تعديل طفيف، يصلح عادةً نصًا بديلًا جيدًا. أمثلة:
- «هذه صورة لتشيز كيك بالشوكولاتة مع صلصة الفراولة.» ←
alt="Chocolate cheesecake with strawberry sauce" - «هذه صورة لحاسوب محمول بشاشة مكسورة فوق طاولة.» ←
alt="Laptop with a cracked screen on an office desk"
وفي صور المنتجات، قد يساعد إدراج رقم الطراز أو رمز SKU في النص البديل على الظهور في عمليات بحث تقنية محددة. ولا تنسَ التسميات التوضيحية أيضًا — فـ Google يستخلص معلومات عن موضوع الصورة من النص المحيط بها، بما فيه التسميات الظاهرة في الصفحة.
3. اختر صيغة الملف الصحيحة
يؤثر اختيار الصيغة مباشرة في حجم الملف، وبالتالي في سرعة تحميل الصفحة. وأشهر ثلاث صيغ على الويب هي JPG وPNG وWebP، ولكل منها خصائصها:
| الصيغة | الأنسب لـ | الشفافية | الحجم المعتاد |
|---|---|---|---|
| JPG | الصور الفوتوغرافية والصور ذات التدرّجات | لا | صغير إلى متوسط |
| PNG | الشعارات والأيقونات ولقطات الشاشة التي تحوي نصًا | نعم | متوسط إلى كبير |
| WebP | أي استخدام على الويب الحديث | نعم | أصغر بنسبة 25–35% من JPG وPNG |
| GIF | الرسوم المتحركة البسيطة | جزئية | متغيّر |
| SVG | الشعارات والأيقونات والرسوم المتجهة | نعم | صغير جدًا |
القاعدة العامة: استخدم JPG للصور الفوتوغرافية، وPNG للصور التي تحتاج إلى خلفية شفافة ونص واضح، وWebP كلما أمكن على الويب — فهذه الصيغة تقدّم ضغطًا أفضل بجودة مماثلة. واستعن بأداة تحويل الصور من ImageTools للتحويل بين الصيغ قبل الرفع.
4. اضبط أبعاد الصور على مقاس العرض الفعلي
رفع صورة بعرض 4000px إلى موقع يعرض الصور بعرض 800px إهدار لعرض النطاق. فالمتصفح ينزّل الصورة كاملة ثم يتخلص من البكسلات الزائدة — أي أن المستخدم ينتظر أكثر من دون أي مكسب بصري.
حدّد أقصى عرض تُعرض به الصور في تصميمك (بين 800px و1440px عادةً، حسب نوع الصورة وطبيعة الموقع) واضبط الحجم قبل الرفع. ولتغطية شاشات Retina عالية الكثافة، استخدم ضعف عرض العرض. واستعن بأداة تغيير حجم الصورة من ImageTools لضبط الأبعاد بدقة.
اضبط حجم صورك واضغطها الآن
اضبط الأبعاد وقلّل حجم صور موقعك مجانًا، من دون رفع أي ملف إلى خوادم خارجية.
5. اضغط الصور من دون فقدان جودة ملحوظة
الضغط هو تقليص حجم الملف من دون تغيير أبعاد الصورة. وفي صور JPG، قد يؤدي خفض الجودة من 100% إلى 80% إلى تصغير الملف بمقدار 5 إلى 10 أضعاف بفارق لا تكاد تلاحظه العين على الشاشة.
سرعة التحميل عامل ترتيب أكّده Google، على سطح المكتب والجوال معًا. والصور غالبًا أثقل مكوّن في صفحة الويب. لذا فضغط كل الصور قبل رفعها هو التحسين التقني الأعلى عائدًا مقارنة بالجهد المبذول فيه.
أهداف عملية للحجم حسب نوع الصورة:
- البانر أو صورة الغلاف بعرض الشاشة: أقل من 200 KB
- صورة منتج أو صورة مقال: 60–150 KB
- الصورة المصغّرة: 15–40 KB
- شعار بصيغة PNG أو WebP: أقل من 30 KB
استعن بأداة ضغط الصور من ImageTools لتقليص ملفات JPG وPNG وWebP داخل المتصفح مباشرة — من دون رفعها إلى خوادم خارجية.
6. أنشئ خريطة موقع للصور
تُعلم خريطة الصور محرك Google بوجود صور قد لا يكتشفها بنفسه — خصوصًا الصور التي تُحمَّل عبر JavaScript أو المدمجة في معارض معقّدة. وعلى خلاف خريطة الموقع العادية، يمكن لخريطة الصور أن تتضمن روابط من نطاقات أخرى، مثل شبكات توصيل المحتوى.
إذا كان موقعك يعمل على WordPress مع إضافة Yoast SEO، فالصور تُضاف إلى خريطة الموقع تلقائيًا. أما المواقع المخصصة فيمكن إضافة خريطة الصور فيها يدويًا وفق التوثيق الرسمي من Google. وأهم الوسوم المتاحة هي image:loc (رابط الصورة) وimage:title وimage:caption.
7. استخدم البيانات المنظّمة لصور المنتجات
يدعم Google البيانات المنظّمة (Schema.org) للصور في سياقات عديدة — الوصفات والمنتجات والمقالات والفعاليات. وعند تطبيقها بشكل صحيح تتيح هذه البيانات ظهور الصور ضمن النتائج المنسّقة (rich results) في Google، ببروز بصري إضافي يرفع نسبة النقر.
وفي التجارة الإلكترونية تحديدًا، يكتسب ترميز المنتج مع صورته قيمة خاصة: فالمنتجات المُرمَّزة صورها بشكل صحيح قد تظهر في Google Shopping وفي بطاقات المنتجات ضمن لوحة المعرفة لدى Google.
8. فعّل التحميل الكسول
التحميل الكسول أسلوب يقضي بتحميل الصور فقط عندما توشك على دخول المساحة المرئية من الشاشة، بدل تنزيلها كلها دفعة واحدة عند فتح الصفحة. وفي الصفحات كثيرة الصور (المقالات الطويلة وقوائم المنتجات)، قد يخفض ذلك حجم الصفحة الأولي بنسبة 60–80%.
وأبسط تطبيق له مدمج أصلًا في HTML:
<img src="product.webp" alt="Blue sneakers" loading="lazy">
مهم: لا تطبّق loading="lazy" أبدًا على الصورة الرئيسية الظاهرة في أعلى الصفحة (أول صورة تُرى من دون تمرير). فذلك يؤخّر مؤشر LCP — أي Largest Contentful Paint، أحد مقاييس Core Web Vitals — ويضرّ بالترتيب مباشرة.
9. حدّد width وheight في كل وسوم الصور
حين يجهل المتصفح مقاس الصورة قبل تحميلها، فإنه لا يحجز لها المساحة الصحيحة في التصميم — وعند اكتمال التحميل «يقفز» محتوى الصفحة. وهذه الظاهرة هي ما يقيسه Google تحت اسم CLS (Cumulative Layout Shift)، وهو مقياس آخر من Core Web Vitals.
والحل هو التصريح دائمًا بـ width وheight في وسوم الصور:
<img src="product.webp" alt="Blue sneakers" width="800" height="800" loading="lazy">
ولا يلزم أن تطابق القيم المقاس المعروض فعليًا — فهي تحدد النسبة فقط ليحجز المتصفح المساحة الصحيحة قبل تحميل الصورة.
10. استخدم صورًا متجاوبة عبر srcset
تتيح الخاصية srcset تقديم نسخ مختلفة من الصورة نفسها لمقاسات الشاشات المختلفة. فيختار المتصفح تلقائيًا النسخة الأنسب — صورة أصغر للهواتف وأكبر لأجهزة سطح المكتب. وفي المواقع ذات الزيارات المرتفعة من الجوال، قد يخفض ذلك حجم البيانات المنقولة بنسبة 40–60%.
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Blue sneakers"
width="800" height="800"
loading="lazy"
>
11. هيّئ صورة المشاركة لـ Open Graph ومواقع التواصل
حين يشارك أحدهم رابطًا على واتساب أو إنستغرام أو لينكدإن أو أي منصة أخرى، تأتي الصورة الظاهرة في المعاينة من وسوم Open Graph. وإن لم تكن هذه الوسوم مضبوطة، اختارت المنصة أي صورة من الصفحة — والنتيجة سيئة في الغالب.
اضبط دائمًا وسم og:image بصورة مقاسها 1200×630px في كل صفحة مهمة من موقعك:
<meta property="og:image" content="https://yoursite.com/images/article-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
وصورة معاينة مصمَّمة جيدًا — بعنوان مقروء وهوية بصرية للعلامة وصورة ذات صلة — ترفع نسبة النقر على المشاركات بشكل ملحوظ.
12. راعِ سياق الصفحة كاملة
لا يقيّم Google الصور بمعزل عن محيطها، بل يحلّل المجموع: النص المحيط بالصورة، وعنوان الصفحة، والسياق الدلالي، والعناصر البصرية الأخرى، والتسمية التوضيحية أسفل الصورة، وحتى نصوص الروابط المشيرة إلى الصفحة. فصورة حذاء أحمر في صفحة عن أزياء النساء لها سياق مختلف تمامًا عن الصورة نفسها في صفحة عن الطبخ.
ممارسات جيدة في السياق:
- ضع كل صورة قرب النص الذي يصفها أو الذي تشير إليه
- استخدم تسميات توضيحية ظاهرة أسفل الصور كلما أمكن
- تأكّد من أن موضوع الصورة وثيق الصلة بموضوع الصفحة
- اكتب عناوين للصفحة وعناوين فرعية تعزّز موضوع الصور الرئيسية
🔍 تدقيق سريع: استخدم Google Search Console لمعرفة أي صور من موقعك تجري فهرستها. افتح الفهرسة ← الصفحات وصفِّ النتائج حسب «الصور» لترى حالة الفهرسة وأي مشكلات محتملة.
قائمة تحقق لتحسين الصور لمحركات البحث
- ☑ اسم ملف وصفي يتضمن كلمات مفتاحية (مفصولة بشرطات، بلا حشو)
- ☑ خاصية
altوصفية وملائمة للسياق في كل الصور - ☑ الصيغة الصحيحة لكل نوع: WebP أو JPG للصور، وPNG أو SVG للشعارات والأيقونات
- ☑ أبعاد مضبوطة على مقاس العرض الفعلي (بحد أقصى الضعف لشاشات Retina)
- ☑ تطبيق الضغط — بحجم دون الأهداف المحددة لكل نوع
- ☑ التصريح بـ
widthوheightفي كل وسوم<img> - ☑ استخدام
loading="lazy"في الصور أسفل الشاشة الأولى - ☑ صورة LCP بلا تحميل كسول، مع
fetchpriority="high"إن أمكن - ☑ ضبط خريطة الصور (أو التأكد من أن الإضافة تتكفل بذلك)
- ☑ ضبط وسم
og:imageفي كل الصفحات الرئيسية - ☑ بيانات منظّمة لصور المنتجات حيثما ينطبق ذلك
- ☑ صور موضوعة في سياقها بنص وتسميات توضيحية وعناوين ملائمة