تحسين الصور والـ ALT و WebP

دليلك الشامل في تحسين محركات البحث

2 دقائق قراءة
6 أقسام
17 من 97

→ السابق: حل مشاكل Cannibalization التالي: السيو التقني ←

ليه تحسين الصور مهم للسيو؟#

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

وهناك مكسب ثانٍ يُهمل: بحث الصور مصدر زيارات حقيقي، خصوصاً في المجالات البصرية كالطبخ والسفر والمنتجات والديكور.

الصيغة والحجم#

الصيغة	متى تستخدمها
WebP	الخيار الافتراضي اليوم. دعم شبه كامل، وتوفير 25 إلى 35 بالمئة عن JPEG
AVIF	ضغط أفضل، لكن دعمه أقل. قدّمه كخيار أول مع بديل WebP
SVG	الشعارات والأيقونات والرسوم. قابل للتكبير بلا فقد حجم
JPEG / PNG	احتياطي للتوافق فقط

قلّص الأبعاد قبل الضغط: رفع صورة بعرض 4000 بكسل لتعرض في 800 هو الخطأ الأكبر والأكثر شيوعاً
استخدم srcset: ليأخذ كل جهاز المقاس المناسب له
احذف بيانات EXIF فهي تضيف حجماً بلا فائدة للزائر

النص البديل (alt)#

وظيفته الأولى الوصول: أن يفهم من لا يرى الصورة ما فيها. وفائدته للسيو تأتي تبعاً لذلك.

سيئ	جيد
`alt="صورة"`	`alt="تقرير Core Web Vitals في Search Console يظهر 3 صفحات ضعيفة"`
`alt="سيو سيو تحسين محركات بحث"`	`alt="مخطط يوضح مراحل الزحف والفهرسة"`

صف ما في الصورة بدقة وباختصار، جملة واحدة تكفي
لا تبدأ بـ"صورة لـ"، فقارئ الشاشة يعلن أنها صورة أصلاً
الصور الزخرفية البحتة: اترك alt="" فارغاً ليتخطاها قارئ الشاشة
لا تحشُ كلمات مفتاحية، فهذه ممارسة مرصودة وتضر

الأداء والتخطيط#

<img src="report.webp"
     width="1200" height="675"
     alt="تقرير الأداء في Search Console"
     loading="lazy"
     decoding="async">

<!-- صورة الغلاف: بلا lazy، وبأولوية عالية -->
<img src="hero.webp"
     width="1600" height="900"
     alt="..."
     fetchpriority="high">

width وheight إلزاميان لحجز المساحة ومنع إزاحة التخطيط (CLS)
loading="lazy" لكل صورة تحت الشاشة الأولى فقط
لا تجعل صورة الغلاف كسولة أبداً، فهي غالباً عنصر LCP نفسه

الفهرسة في بحث الصور#

اسم ملف وصفي: core-web-vitals-report.webp لا IMG_2043.jpg
النص المحيط مهم: جوجل يفهم الصورة من سياق الفقرة والعنوان القريب
أضف الصور لخريطة الموقع إن كانت مصدر زيارات مهماً لك
استخدم اسكيما ImageObject للصور الأصلية
لا تمنع مجلد الصور في robots.txt، وهو خطأ متكرر يلغي فهرستها كلها

أدوات#

Squoosh: ضغط وتحويل في المتصفح بلا رفع
ImageMagick أو cwebp: للمعالجة الجماعية عبر سطر الأوامر
PageSpeed Insights: يحدد الصور التي تحتاج تحسيناً بالاسم
تقرير بحث الصور في Search Console: لقياس الزيارات القادمة من الصور