تحسين الصور لمحركات البحث في المواقع العربية: النص البديل وأسماء الملفات والصيغ

تعتمد المواقع العربية على الصور اعتمادًا كبيرًا: صور المنتجات في المتاجر الإلكترونية، وخطوات الوصفات، ولقطات الشاشة في الشروح التقنية. ومع ذلك تصل صور كثيرة إلى Google باسم IMG_0001.jpg ومن دون أي وصف. وتوثيق Google واضح في أن النص البديل (alt) هو أهم سمة لإعطاء الصورة معنى إضافيًا، وعلى هذه الفكرة يُبنى هذا الدليل.

المشكلة ببساطة

الصورة التي لا تستطيع Google العثور عليها أو فهمها لن تظهر في صور Google، ولن تضيف سياقًا يُذكر إلى الصفحة من حولها. والأسباب المعتادة في المواقع العربية بسيطة: صور مهمة محمّلة خلفياتٍ عبر CSS، وسمات alt فارغة تركها القالب، وأسماء ملفات كما خرجت من الكاميرا، وعناوين مرسومة داخل صور البانر بدل كتابتها نصًا. وكل إصلاح منها يفيد أيضًا من يستخدم قارئ الشاشة أو اتصالًا بطيئًا.

ما توثّقه Google

• استخدم عناصر الصور القياسية. تقول Google إن استخدام عناصر الصور القياسية في HTML يساعد برامج الزحف على العثور على الصور ومعالجتها.
• اكتب نصًا بديلًا. تصف Google النص البديل بأنه “أهم سمة” حين يتعلق الأمر بتقديم بيانات وصفية إضافية عن الصورة.
• لا تحشُه بالكلمات. تطلب Google تجنّب ملء سمات alt بالكلمات المفتاحية، لأن ذلك يسيء إلى تجربة المستخدم.
• سمِّ الملفات بعناية. توصي Google باستخدام أسماء ملفات قصيرة ووصفية متى أمكن.
• اختر صيغة مدعومة. تذكر Google الصيغ التالية: BMP وGIF وJPEG وPNG وWebP وSVG وAVIF.
• استخدم الصور المتجاوبة. تحدد الصفحات الصور المتجاوبة عبر العنصر <picture> أو السمة srcset في العنصر img.
• استعن بخريطة موقع للصور. تقول Google إنك تستطيع تزويدها بعناوين صور ربما لم تكن لتكتشفها، عبر إرسال خريطة موقع للصور.

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

خطوة بخطوة

1. انقل الصور المهمة إلى عناصر img. مكان صور المنتجات والمخططات وصور الخطوات هو <img> أو <picture>. واترك خلفيات CSS للزخارف.
2. اكتب نصًا بديلًا عربيًا يصف الصورة. صِف ما تعرضه الصورة في سياق الصفحة وبلغتها. عبارة “دلة قهوة عربية نحاسية بجانب فنجانين على صينية” تقول أكثر بكثير من “قهوة قهوة عربية أفضل قهوة”.
3. اختر أسلوبًا واحدًا لتسمية الملفات. الأسماء العربية أو المكتوبة صوتيًا بحروف لاتينية أو الإنجليزية كلها صالحة إذا كانت قصيرة ووصفية، ولم توثّق Google تفضيلًا بينها. اختر أسلوبًا ودوّنه في دليلك التحريري والتزم به. وإن استخدمت أسماء عربية فتذكّر أنها تُرمَّز بالنسبة المئوية في الروابط، مثل المعرّفات العربية تمامًا.
4. اضغط الصور واستخدم الصيغ الحديثة. WebP وAVIF كلتاهما في قائمة Google المدعومة. صدّر بعض صورك الحقيقية بكل صيغة، واحتفظ بالتي تعطي أخف ملف بجودة يقبلها قرّاؤك.
5. قدّم أحجامًا متجاوبة. دع المتصفح يختار الحجم المناسب للشاشة عبر srcset وsizes، أو استخدم <picture> لتقديم AVIF مع بديل احتياطي.
6. ضع الصورة قرب النص المرتبط بها. اجعلها بجانب الفقرة التي توضحها، وأضف تعليقًا عربيًا تحتها حين يفيد القارئ.
7. لا تؤجّل تحميل الصورة الرئيسية. وجد بحث web.dev عن التحميل الكسول أن تأجيل تحميل الصور الظاهرة في أول الشاشة قد يؤخر مؤشر Largest Contentful Paint. حمّل الصورة الأولى الظاهرة فورًا، وأجّل البقية.
8. أرسل خريطة موقع للصور عند الحاجة، مثلًا حين يحمّل معرض مبني بـ JavaScript صورًا قد تفوت برامج الزحف.
9. راجع Search Console. استخدم أداة فحص عنوان URL لترى الصفحة كما تعرضها Google، وتابع تقرير الأداء لمعرفة الصفحات وطلبات البحث التي تجلب الزوار.

وهذا مثال يجمع هذه النقاط في مقال عربي:

<figure>
  <picture>
    <source type="image/avif"
      srcset="/images/qahwa-arabiya-dallah-800.avif 800w, /images/qahwa-arabiya-dallah-1600.avif 1600w"
      sizes="(max-width: 800px) 100vw, 800px">
    <img src="/images/qahwa-arabiya-dallah-800.webp"
      srcset="/images/qahwa-arabiya-dallah-800.webp 800w, /images/qahwa-arabiya-dallah-1600.webp 1600w"
      sizes="(max-width: 800px) 100vw, 800px"
      width="800" height="533"
      alt="دلة قهوة عربية نحاسية بجانب فنجانين على صينية">
  </picture>
  <figcaption>تقديم القهوة العربية بالدلة التقليدية</figcaption>
</figure>

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

مثال من موقع عربي

تخيّل متجرًا إلكترونيًا في جدة يبيع التمور. نقطة البداية مألوفة: كل صورة منتج تحمل رقمها التسلسلي من الكاميرا، وسمة alt تكرر اسم المتجر، وعناوين الأقسام مرسومة داخل صور البانر. والإصلاح: أسماء ملفات بأسلوب واحد مكتوب صوتيًا مثل tamr-sukkari-box-1kg.webp، ونص بديل عربي يصف كل علبة، وعناوين منقولة إلى نص HTML حقيقي فوق صورة خلفية بسيطة.

ما يعجبني في هذا النوع من التنظيف أنه لا يقوم على التخمين. معظم خطواته مأخوذة من توثيق Google مباشرة، والقارئ يستفيد منها أيًا كان ما يحدث في البحث.

قائمة تحقق

أخطاء شائعة

• سمات alt فارغة أو محشوة بالكلمات المفتاحية. تقول Google إن الحشو يسيء إلى تجربة المستخدم، والنص الفارغ لا يخبرها بشيء.
• ملفات باسم IMG0001.jpg. فرصة ضائعة لاسم قصير ووصفي.
• صور مهمة في خلفيات CSS. برامج الزحف تجد صور HTML القياسية وتعالجها بسهولة أكبر.
• تأجيل تحميل الصورة الرئيسية في أعلى الصفحة. قد يبطئ أكبر عنصر في الصفحة.
• نصوص مرسومة داخل الصور. العنوان العربي المرسوم في البانر ليس نصًا في الصفحة: لا يستطيع القارئ نسخه أو البحث فيه، ولا يضيف شيئًا إلى نص الصفحة. اكتبه بـ HTML.

المصادر

• Google Search Central، أفضل ممارسات تحسين الصور في صور Google، تاريخ الاطلاع 27 مارس 2026، https://developers.google.com/search/docs/appearance/google-images
• Google Search Central، سجل تحديثات التوثيق (إدخال بتاريخ 2 مارس 2026)، تاريخ الاطلاع 27 مارس 2026، https://developers.google.com/search/updates
• web.dev، مقال عن أثر التحميل الكسول في مؤشر Largest Contentful Paint، تاريخ الاطلاع 27 مارس 2026، https://web.dev/articles/lcp-lazy-loading