فاحص النص البديل (alt) وتدقيق سيو الصور

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

تسرد أداة فحص النص البديل للصور هذه كل صورة في الصفحة مع نصها البديل وحجم ملفها وصيغته (JPEG أو PNG مقابل WebP أو AVIF) وأبعادها وسمة التحميل الكسول. وتشير إلى النص البديل المفقود والملفات الكبيرة ومخاطر انزياح التخطيط، لتصلح إمكانية الوصول وسيو الصور في خطوة واحدة.

كيف تفحص النص البديل للصور

1. أدخل رابط الصفحة

   نقرأ HTML الصفحة ونجمع صورها مع سماتها وأحجام ملفاتها وصيغها.

2. رتّب بحسب المشكلة

   ابدأ بالصور بلا سمة alt، ثم أثقل الملفات، ثم الصور التي تفتقد الأبعاد.

3. أصلح في نظام إدارة المحتوى أو القالب

   أضف النص البديل في مكتبة الوسائط، واضغط الملفات الكبيرة أو حوّلها، وأضف العرض والارتفاع إلى وسوم الصور.

كتابة نص بديل مفيد فعلا

النص البديل هو البديل النصي الذي تنطقه قارئة الشاشة ويقرؤه محرك البحث بدل الصورة. اكتبه لشخص لا يستطيع رؤية الصورة. ويلخص شجرة قرار alt من W3C القواعد:

• الصور المعلوماتية: صف ما يهم في السياق — alt="Red trail running shoe with a deep-lug sole"، لا alt="shoe" ولا alt="IMG_4032.jpg".
• الصور الوظيفية داخل رابط أو زر: صف الإجراء. فأيقونة العدسة التي ترسل البحث تأخذ alt="Search".
• الصور الزخرفية: استخدم سمة فارغة alt="" لتتخطاها قارئات الشاشة. الفارغ ليس كالمفقود؛ فبلا alt إطلاقا تقرأ بعض قارئات الشاشة اسم الملف.
• الصور التي تحتوي نصا: كرر النص نفسه في alt.

اجعله في نحو جملة واحدة وتجنب عبارة «صورة لـ»، فقارئات الشاشة تعلن الصورة أصلا. واستخدم كلمة مفتاحية فقط حيث تصف الصورة بشكل طبيعي. المزيد في تعريفنا لـالنص البديل.

سيو الصور بعد النص البديل

تضيف أفضل ممارسات سيو الصور من جوجل بضع قواعد تستحق المعرفة:

• استخدم عناصر <img> حقيقية مع src. لا تؤرشف جوجل صور الخلفية في CSS.
• أعطِ الملفات أسماء وصفية مثل red-trail-shoe.webp، وضع الصور قرب النص المرتبط بها.
• استخدم صيغة مدعومة: BMP أو GIF أو JPEG أو PNG أو WebP أو SVG أو AVIF. وغالبا تكون WebP وAVIF أصغر بكثير من JPEG أو PNG عند جودة بصرية مماثلة.
• قدّم مقاسات تناسب التخطيط. صورة بعرض 4,000 بكسل تُعرض بعرض 800 تهدر النطاق الترددي؛ ويتيح srcset للمتصفح اختيار الملف المناسب.

<img src="/img/red-trail-shoe-800.webp"
     srcset="/img/red-trail-shoe-800.webp 800w, /img/red-trail-shoe-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="800" height="600"
     alt="Red trail running shoe with a deep-lug sole"
     loading="lazy">

لتقديم الصيغ الحديثة مع بديل احتياطي، لفّ الصورة في <picture>. يستخدم المتصفح أول مصدر يدعمه، ويبقى النص البديل والأبعاد على عنصر img:

<picture>
  <source srcset="/img/boot.avif" type="image/avif">
  <source srcset="/img/boot.webp" type="image/webp">
  <img src="/img/boot.jpg" width="800" height="600"
       alt="Brown leather hiking boot, side view">
</picture>

الأبعاد والتحميل الكسول

سمتان تمنعان معظم مشكلات الأداء المتعلقة بالصور:

• width وheight تتيحان للمتصفح حجز المساحة قبل وصول الملف، فتمنعان قفزات التخطيط التي يقيسها CLS. ويمكن لـ CSS أن يجعل الصورة متجاوبة؛ ويحافظ المتصفح على النسبة.
• loading="lazy" يؤجل الصور خارج الشاشة إلى أن يقترب الزائر منها بالتمرير. استخدمه أسفل الشاشة فقط: فالتحميل الكسول لصورة البطل الرئيسية يؤخر LCP. أعطِ تلك الصورة fetchpriority="high" بدلا من ذلك، كما يشرح web.dev.

تشير الأداة إلى الملفات الكبيرة والصور المعرّضة لانزياح التخطيط. ولترى أثر الصور في الصفحة ككل، افحص Core Web Vitals واقرأ عن التحميل الكسول.

نصائح لسيو صور أفضل

• أصلح النص البديل في القوالب كما في الصفحات؛ فالشعارات والأيقونات تتكرر في كل صفحة.
• اكتب في نص شعارك البديل اسم العلامة التجارية، خاصة حين يربط بالصفحة الرئيسية.
• حوّل صور JPEG وPNG الكبيرة إلى WebP أو AVIF، واضغط كل شيء قبل الرفع.
• لا تطبّق التحميل الكسول على أول صورة كبيرة يراها الزوار؛ بل أعطها الأولوية.
• لا تحشُ النص البديل بالكلمات المفتاحية — صف الصورة وستظهر الكلمات المناسبة من تلقاء نفسها.

حدود يجب مراعاتها

تقرأ الأداة الصور المشار إليها في HTML الخادم للصفحة. وقد لا تُدرج الصور التي يضيفها JavaScript وخلفيات CSS والصور داخل iframe، ولا تستطيع الحكم هل يصف نص بديل الصورة بدقة — فهذا لا يقدر عليه إلا إنسان. ولأداء التحميل الواقعي استخدم اختبار سرعة الصفحة؛ ولمراجعة إمكانية الوصول الكاملة، اجمعها مع Lighthouse واختبار سريع بقارئ شاشة.

آخر تحديث: 30‏/10‏/2026 بواسطة فريق Yes SEO.