SEO للصور هو مجموع التحسينات التي تضمن أن تفهم محركات البحث الصور الموجودة في صفحاتك بشكل صحيح، وأن تُحمَّل بسرعة. فمن اسم الملف إلى النص البديل، ومن صيغ الصور الحديثة مثل WebP وAVIF إلى التحميل الكسول (lazy loading)، يؤثر كل تفصيل في الزيارات القادمة من صور Google وفي السرعة العامة للصفحة. وفي هذا الدليل نشرح SEO للصور خطوة بخطوة، مع توضيح ما يجب فعله في كل مرحلة بأمثلة.
لماذا يُعدّ SEO للصور مهمًا؟
للصور تأثيران منفصلان. الأول الظهور: فصور Google وصناديق الصور في نتائج البحث العادية قناة مستقلة قادرة على جلب الزوار، وخاصة في مواضيع مثل المنتجات والوصفات والأماكن والديكور، حيث ينظر المستخدم إلى الصورة قبل أي شيء آخر. والثاني السرعة: تشكّل الصور في معظم الصفحات الجزء الأكبر من حجم البيانات، وغالبًا ما تكون الصورة هي أكبر عنصر في الصفحة. أي أن صورة رئيسية واحدة غير محسّنة قد تُفسد قيمة LCP في Core Web Vitals، فتتراجع أداء الصفحة كلها.
وهناك تأثير ثالث هو إمكانية الوصول: النص البديل يصف الصورة لزوار قارئات الشاشة. والنص البديل الجيد يخدم المستخدم ومحرك البحث معًا.
اسم الملف
تستخدم Google اسم الملف أيضًا لفهم موضوع الصورة. فأسماء مثل IMG_20260412_0043.jpg التي تأتي من آلة التصوير
لا تحمل أي معلومة. والقواعد بسيطة:
- استخدم كلمات قصيرة ومعبّرة تصف الصورة:
deri-kanepe-gri-uc-kisilik.webp. - افصل الكلمات بالشرطة (-)؛ فالشرطة السفلية (_) قد تُعامَل كأن الكلمات مدموجة.
- فضّل الأحرف الصغيرة وأحرف ASCII؛ ولا تستخدم الأحرف الخاصة أو المسافات.
- لا تحشُ اسم الملف بالكلمات المفتاحية:
kanepe-kanepe-ucuz-kanepe.webpلا يفيد.
| سيئ | جيد |
|---|---|
IMG_0043.jpg | gri-deri-kanepe.webp |
Yeni Resim (2).png | istanbul-kadikoy-ofis-girisi.webp |
kanepe_ucuz_kanepe_satilik.jpg | kose-koltuk-takimi.webp |
كيف تكتب النص البديل (alt)؟
النص البديل (سمة alt) يصف محتوى الصورة بالكلمات. ويُعرض مكان الصورة إذا تعذّر تحميلها،
وتقرؤه قارئات الشاشة، وتستخدمه Google لفهم سياق الصورة.
- صف الصورة كما هي. "باريستا يُحضّر القهوة على طاولة المطبخ" نص بديل جيد؛ ولا حاجة إلى البدء بكلمات مثل "صورة" أو "فوتوغرافيا".
- اجعله قصيرًا. عادةً يكفي أقل من 125 حرفًا.
- ضع الكلمة المفتاحية بشكل طبيعي. إذا كانت الصورة مرتبطة فعلًا بالموضوع، ستأتي الكلمة من تلقاء نفسها؛ أما القوائم المفروضة فقد تُعدّ سبامًا.
- في الصور الزخرفية اترك النص البديل فارغًا (
alt="")؛ حتى لا تقرأها قارئات الشاشة دون داعٍ. ولا تحذف السمة alt تمامًا. - اكتب نص الصور التي تحتوي على كلام. إذا كان في الصورة شعار أو سعر، فاكتبه في النص البديل أو في نص الصفحة.
مثال: في صفحة منتج، بدلًا من كتابة alt="أريكة أريكة كنبة رخيصة"
اكتب alt="أريكة رمادية من القماش لثلاثة أشخاص بأرجل خشبية". فالنص الثاني يفيد المستخدم،
ويعطي محرك البحث معلومة أوضح.
إلى جانب النص البديل، يساعد النص المحيط بالصورة والعنوان والتعليق أسفلها (caption) Google على فهم السياق. ووضع الصورة بجوار الفقرة ذات الصلة أفضل بكثير من وضعها في مكان غير مرتبط في أسفل الصفحة.
اختيار الصيغة: JPEG وPNG وWebP وAVIF
| الصيغة | ميزتها | متى تُستخدم؟ |
|---|---|---|
| JPEG | شائعة، وضغط جيد للصور الفوتوغرافية | احتياطي للأنظمة القديمة |
| PNG | بلا فقدان في الجودة، ودعم للشفافية | الشعارات، ولقطات الشاشة، والرسوم البسيطة |
| WebP | ملف أصغر بشكل ملحوظ من JPEG/PNG، ودعم للشفافية | الخيار الآمن الافتراضي لمعظم الصور |
| AVIF | ملف أصغر عمومًا من WebP | الصفحات الغنية بالصور الفوتوغرافية؛ الدعم واسع في المتصفحات لكن أضف احتياطيًا |
| SVG | متجهة، قابلة للتكبير، وحجمها صغير جدًا | الشعارات والأيقونات والرسوم البسيطة |
لتقديم أكثر من صيغة يمكنك استخدام عنصر <picture>: يختار المتصفح أول صيغة يدعمها،
وإذا لم يدعم أيًا منها يرجع إلى وسم <img> الموجود داخله. فيحصل من يدعم AVIF على AVIF،
ومن لا يدعمه على WebP أو JPEG.
الحجم والضغط
أكثر الأخطاء شيوعًا هو عرض صورة فوتوغرافية عرضها 4000 بكسل داخل مربع 400 بكسل. فالمتصفح سيحمّل الملف كله على أي حال. طبّق ما يلي:
- غيّر الحجم وفق الحجم الفعلي للعرض. في محتوى المدونة يكفي عادةً عرض بين 800 و1200 بكسل؛ وللشاشات عالية الكثافة قدّم نسخة بضعف الحجم عبر
srcset. - اضغط الصور. في الصور الفوتوغرافية، مستوى جودة بين 75 و85 يقلل حجم الملف بشكل كبير دون أن يُلاحَظ الفرق غالبًا.
- امسح البيانات الوصفية. بيانات EXIF (الموقع والجهاز) حمل زائد ومخاطرة على الخصوصية.
- حدّد هدفًا. كقاعدة عامة حاول أن تبقي صور المحتوى أقل من بضع مئات من الكيلوبايت؛ وضع حدًا حتى لصور الغلاف الكبيرة.
حدّد دائمًا قيمتي width وheight في HTML. فالمتصفح يعرف مقدار المساحة التي يحجزها للصورة قبل تحميلها،
فلا ينزاح المحتوى إلى الأسفل أثناء التحميل.
الصور المتجاوبة: srcset وsizes
إرسال الصورة نفسها إلى هاتف بعرض 360 بكسل وإلى شاشة بعرض 1920 بكسل هدر. فبواسطة srcset تُعرّف عدة نسخ بعروض مختلفة،
وبواسطة sizes تخبر المتصفح بالمساحة التي ستشغلها الصورة من الشاشة؛ فيختار المتصفح الملف الأنسب له.
مثلًا إنشاء ثلاث نسخ بعرض 480 و800 و1200 بكسل يكفي معظم المدونات وصفحات المنتجات.
وعلى الهواتف يكون توفير البيانات واضحًا، وينعكس ذلك مباشرة على زمن LCP.
أين توضع الصورة؟
تستخلص Google موضوع الصورة من النص المحيط بها أيضًا. لذلك ضع الصورة بجوار الفقرة التي تتحدث عن موضوعها، وأضف تحتها تعليقًا قصيرًا يلخص الفكرة. كما أن عنوان القسم الذي توجد فيه الصورة يقوّي ارتباطها بالموضوع. وبدلًا من استخدام الصور الجاهزة المحمية بحقوق النشر، فضّل الصور الأصلية التي التقطتها بنفسك إن أمكن؛ فالصورة الأصلية تمنح المستخدم الثقة، وتميّزك عن الصور الجاهزة المكررة.
التحميل الكسول (lazy loading) وCLS
التحميل الكسول يعني ألا تُحمَّل الصور الواقعة أسفل الشاشة حتى يقترب المستخدم منها. وفي المتصفحات الحديثة يُطبَّق بسمة واحدة:
<img src="kanepe.webp" alt="أريكة رمادية من القماش لثلاثة أشخاص" width="800" height="600" loading="lazy">
- لا تطبّق التحميل الكسول على الصورة الموجودة في الشاشة الأولى (above the fold). فإذا حُمّلت أكبر صورة في الصفحة متأخرًا، يسوء LCP. ولهذه الصورة يمكنك استخدام
fetchpriority="high". - الصور في المعارض وقوائم المنتجات والأجزاء السفلية من المقالات الطويلة مثالية للتحميل الكسول.
- استخدمه دائمًا مع
width/height؛ وإلا فإن الصورة المحمَّلة تُزيح التخطيط. - استخدم وسم
<img src>حقيقيًا حتى تستطيع Google العثور على الصورة؛ فالصور التي تكون خلفيات CSS فقط قد لا تُفهرس في بحث الصور.
لمزيد من التفاصيل حول مقاييس السرعة راجع دليلنا عن Core Web Vitals.
خريطة موقع الصور والبيانات المنظمة
تجد Google معظم الصور أثناء الزحف العادي. ومع ذلك، فإن إضافة الصور إلى خريطة الموقع قد تفيد في المعارض التي تُحمَّل بـ JavaScript أو البنى المعقدة.
في خريطة الموقع القياسية تُستخدم عناصر <image:image> و<image:loc> داخل كل <url>:
- أضف مساحة أسماء الصور (namespace) إلى بداية خريطة الموقع.
- لكل صفحة، اذكر عناوين الصور التي تظهر فيها.
- أرسل خريطة الموقع من Search Console وتحقق من الأخطاء.
- تأكد من أن ملف robots.txt لا يحجب الصور.
في المحتوى مثل المنتجات والوصفات والمقالات، إضافة عنوان الصورة داخل البيانات المنظمة (schema) تُسهّل على Google استخدام الصورة في النتائج الغنية. وللاستفادة من Search Console راجع دليل البداية.
أخطاء شائعة في الصور
- تضمين النص داخل الصورة: كتابة المعلومات المهمة (السعر، والعنوان، والحملة) داخل الصورة فقط تعني أن محرك البحث وقارئ الشاشة لن يريانها.
- نسخ النص البديل نفسه في كل مكان: بدلًا من كتابة النص البديل نفسه للصور الخمس في معرض المنتج، صف كل صورة على حدة (أمامية، جانبية، تفصيلية).
- صور "البطل" الكبيرة جدًا: شريحة صورة بملء الشاشة قد تبلغ عدة ميغابايت بدلًا من بضع مئات الكيلوبايتات؛ صغّر حجمها أولًا، ثم راجع التصميم.
- حجب الصور بـ robots.txt: قاعدة تمنع مجلد الصور تجعلك لا تظهر في صور Google أبدًا.
- روابط صور مكسورة: الصور التي نُقلت أو حُذفت تعطي 404؛ أصلحها بالفحص الدوري.
قائمة التحقق والقياس
- هل اسم الملف ذو معنى، وبأحرف ASCII، ومفصول بالشرطة؟
- هل يصف النص البديل الصورة باختصار وبشكل طبيعي؟
- هل الصور بصيغة WebP/AVIF أو صيغة مناسبة أخرى؟
- هل لا يُحمَّل ملف أكبر من حجم العرض؟
- هل يوجد
loading="lazy"في الصور الواقعة خارج الشاشة الأولى؟ - هل حُدّدت قيمتا
widthوheight؟ - هل خريطة موقع الصور وملف robots.txt سليمان؟
للقياس يعرض PageSpeed Insights اقتراحي "ترميز الصور بكفاءة" و"الصور ذات الحجم المناسب" مباشرة. وفي تقرير الأداء في Search Console يمكنك اختيار نوع البحث "صور" لمتابعة الظهور والنقرات القادمة من بحث الصور بشكل منفصل. وتحسين الصور يساعد أيضًا في تقليل معدل الخروج الفوري بتسريع الموقع.
الخلاصة
SEO للصور ليس خطوة واحدة، بل عادة صغيرة تتكرر مع كل صورة: اسم ملف معبّر، ونص بديل صادق، وصيغة وحجم مناسبين، وتحميل كسول لما هو أسفل الشاشة، وخريطة موقع للصور عند الحاجة. وغالبًا تأتي أكبر المكاسب من أكبر الصور؛ لذلك ابدأ بتحديد أثقل بضع صور في PageSpeed Insights وعالجها أولًا. والنتيجة زيارات إضافية من صور Google وموقع أسرع. والترتيب تحدده خوارزميات Google في النهاية؛ أما مهمتك فهي أن تجعل صورك مفهومة وخفيفة.