أفضل الممارسات المتعلّقة بتحسين محركات البحث لظهور المحتوى في "صور بحث Google"

توفّر Google العديد من المزايا والمنتجات الخاصة بنتائج البحث، مثل صور النتائج النصية و"اقتراحات من Google" و"صور بحث Google"، لمساعدة المستخدمين في استكشاف المعلومات على الويب بشكل مرئي. وعلى الرغم من أنّ هذه الميزات والمنتجات مختلفة، فإنّ النصائح العامة لتظهر الصور من خلالها هي نفسها.

صورة توضيحية تعرض صورًا في نتائج البحث على Google وعلامة التبويب "الصور" وميزة "اقتراحات"

يمكنك تحسين الصور لتظهر ضمن نتائج البحث على Google باتّباع أفضل الممارسات التالية:

  1. مساعدتنا في استكشاف صورك وفهرستها
  2. تحسين الصفحات المقصودة الخاصة بالصور

مساعدتنا في استكشاف صورك وفهرستها

إنّ المتطلبات الفنية لعرض المحتوى الخاص بك في نتائج البحث على Google تنطبق على الصور أيضًا. بسبب الاختلاف الأساسي في التنسيق بين الصور وملفات HTML، يتم فرض متطلبات إضافية لفهرسة الصور. مثلاً، يكون العثور على الصور على موقعك الإلكتروني مختلفًا، كما أنّ طريقة عرض الصور تؤثر في فهرستها، فضلاً عن اختيار الكلمات الرئيسية المناسبة.

استخدام عناصر HTML الخاصة بالصور لتضمين الصور

باستخدام عناصر HTML العادية الخاصة بالصور، يمكن لبرامج الزحف العثور على الصور ومعالجتها. بإمكان Google العثور على صور في السمة src للعنصر <img> (حتى إذا كان العنصر ثانويًا تابعًا لعناصر أخرى، مثل العنصر <picture>). لا يفهرس محرك بحث Google صور CSS.

مثال جيد:

<img src="puppy.jpg" alt="جرو غولدن ريتريفر" />

مثال سيئ:

<div style="background-image:url(puppy.jpg)">جرو غولدن ريتريفر</div>

استخدام خريطة موقع خاصة بالصور

يمكنك تقديم عنوان URL الخاص بالصور التي قد لا نجدها بطريقة أخرى، وذلك من خلال إرسال خريطة موقع خاصة بالصور.

بخلاف خرائط الموقع العادية، يمكنك تضمين عناوين URL من نطاقات أخرى في عناصر <image:loc> الخاصة بخرائط موقع الصور. ويتيح لك ذلك استخدام شبكات توصيل المحتوى (CDN) لاستضافة الصور. إذا كنت تستخدم شبكة توصيل للمحتوى، ننصحك بإثبات ملكية اسم النطاق الخاص بشبكة توصيل المحتوى في Search Console كي نتمكّن من إعلامك بأي أخطاء زحف قد نكتشفها.

الصور المتجاوبة

يؤدي تصميم صفحات ويب متجاوبة إلى تحسين تجربة المستخدم، إذ يمكن استخدامها على مجموعة كبيرة من أنواع الأجهزة. راجِع دليل الصور المتجاوبة مع مختلف الأجهزة لمعرفة أفضل الممارسات للتعامل مع الصور على موقعك الإلكتروني.

تستخدم صفحات الويب العنصر <picture> أو السمة srcset للعنصر img لتحديد الصور المتجاوبة مع مختلف الأجهزة. يُرجى العِلم أنّ بعض المتصفحات وبرامج الزحف لا تفهم هذه السمات. ننصحك بأن تحدّد دائمًا عنوان URL احتياطيًا من خلال السمة src.

تسمح السمة srcset بتحديد نُسخ مختلفة من الصورة نفسها، لا سيما لأحجام الشاشات المختلفة. مثلاً: 

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

العنصر <picture> هو عبارة عن حاوية تُستخدم لتجميع نُسخ <source> مختلفة من الصورة نفسها. ويوفّر هذا العنصر طريقة بديلة يمكن للمتصفّح من خلالها اختيار الصورة المناسبة بناءً على إمكانات الجهاز، مثل كثافة وحدات بكسل وحجم الشاشة. ويمكن أيضًا الاستعانة بالعنصر picture لتسهيل استخدام تنسيقات الصور الجديدة مع إمكانية التكيّف مع الإصدارات الأقدم على الأجهزة التي قد لا تتيح بعد استخدام التنسيقات الجديدة.

استنادًا إلى الفقرة 4.8.1 من معيار HTML، احرص عند استخدام العنصر img على توفير src كعنصر احتياطي مع تضمين السمة picture، وذلك باستخدام التنسيق التالي: 

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

استخدام تنسيقات متوافقة للصور

يتيح &quot;بحث Google&quot; الصور المُشار إليها في السمة src الخاصة بـ img وبتنسيقات الملفات التالية: ‫ BMP وGIF وJPEG وPNG وWebP وSVG وAVIF . ويُستحسن مطابقة امتداد اسم الملف مع نوع الملف.

يمكنك أيضًا تضمين الصور كمعرّفات موارد منتظمة (URI) للبيانات. توفّر معرّفات URI الخاصة بالبيانات إمكانية تضمين ملف، مثل صورة، من خلال تحديد السمة src للعنصر img كسلسلة Base64 مرمّزة باستخدام التنسيق التالي: 

<img src="data:image/svg+xml;base64,[data]">

قد تؤدي الصور المضمّنة إلى خفض عدد طلبات HTTP، ولكن عليك توخّي الحذر عند استخدامها لأنّها قد تؤدي إلى زيادة كبيرة في حجم الصفحة. للاطّلاع على المزيد من المعلومات عن هذا الموضوع، يمكنك مراجعة قسم إيجابيات وسلبيات استخدام الصور المضمَّنة على صفحة web.dev.

تحسين السرعة والجودة

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

يمكنك تحليل سرعة موقعك الإلكتروني من خلال إحصاءات PageSpeed وزيارة صفحة Why does speed matter?‎(ما أهمية السرعة؟) للتعرّف على أفضل الممارسات والأساليب المتعلقة بتحسين أداء المواقع الإلكترونية.

تحسين الصفحات المقصودة الخاصة بالصور

إنّ المحتوى والبيانات الوصفية الخاصة بالصفحات حيث تكون الصورة مضمّنة يمكن أن يكون لها تأثير كبير على مكان وطريقة ظهور الصور في نتائج البحث على Google، حتى لو لم يكُن هذا التأثير واضحًا على الفور.

التحقق من عنوان صفحتك ووصفها

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

صورة توضيحية تعرض عناوين وأوصافًا في نتائج البحث بالصور

نستخدم عدّة مصادر مختلفة لهذه المعلومات، بما في ذلك المعلومات الواردة في العلامتين title وmeta لكل صفحة.

يمكنك مساعدتنا في تحسين جودة رابط العنوان والمقتطف المعروضَين لصفحاتك من خلال اتّباع إرشادات العناوين والمقتطفات من Google.

إضافة بيانات منظَّمة

في حال تضمين البيانات المنظَّمة، سيتمكّن Google من عرض صورك في نتائج غنية بصريًا معيَّنة، بما في ذلك شارة بارزة في &quot;صور بحث Google&quot;، ما يمنح المستخدمين معلومات ذات صلة عن صفحتك ويؤدي إلى زيادة عدد الزيارات المستهدفة إلى موقعك الإلكتروني.

اتّبِع الإرشادات العامة للبيانات المنظّمة وأي إرشادات أخرى خاصة بنوع البيانات المنظّمة، وإلّا قد لا تكون بياناتك المنظّمة مؤهّلة للعرض كنتيجة غنية بصريًا في &quot;صور بحث Google&quot;. في كل نوع من أنواع البيانات المنظَّمة هذه، تكون سمة الصورة حقلاً مطلوبًا للتأهّل للحصول على شارة وللعرض كنتيجة غنية بصريًا في &quot;صور بحث Google&quot;. في ما يلي مثالان على النتائج الغنية بصريًا في &quot;صور بحث Google&quot;:

صورة توضيحية تعرض طريقة ظهور النتائج الغنية بصريًا في &quot;صور بحث Google&quot;

استخدام أسماء ملفات وعناوين ونصوص بديلة وصفية

يستخلص محرّك بحث Google معلومات حول موضوع الصورة من محتوى الصفحة، بما في ذلك الشرح وعنوان الصورة. حيثما أمكن، احرص على وضع الصور بالقرب من النص ذي الصلة وعلى الصفحات ذات الصلة بموضوع الصور.

على نحو مماثل، يمكن أن يقدّم اسم الملف لمحرّك بحث Google تلميحات بسيطة جدًا عن موضوع الصورة. عند الإمكان، استخدِم أسماء ملفات قصيرة شرط أن تكون معبّرة. على سبيل المثال، استخدِم my-new-black-kitten.jpg، وليس IMG00023.JPG. تجنَّب قدر الإمكان تسمية الملفات بأسماء عامة، مثل image1.jpg أو pic.gif أو 1.jpg. وإذا كان موقعك الإلكتروني يحتوي على آلاف الصور، قد يكون من الأفضل تسمية الصور بشكل تلقائي. في حال كنت تقدّم ترجمة لمحتوى صورك، لا تنسَ ترجمة أسماء الملفات أيضًا مع أخذ إرشادات ترميز عناوين URL في الاعتبار إذا كنت تستخدم أحرفًا غير لاتينية أو رموزًا خاصة.

يُعد النص البديل (أي النص الذي يصف الصورة) السمة الأكثر أهمية عند توفير المزيد من البيانات الوصفية لأي صورة، لأنّه يسهّل أيضًا إمكانية معرفة محتوى الصور بالنسبة إلى الأشخاص الذين لا يمكنهم رؤية الصور على صفحات الويب، بما في ذلك المستخدمين الذين لديهم برامج لقراءة الشاشة أو اتصالات ذات معدّل نقل بيانات منخفض.

يستخدم محرّك بحث Google النص البديل مع خوارزميات الرؤية الحاسوبية ومحتوى الصفحة لفهم موضوع الصورة. ويكون النص البديل في الصور مفيدًا أيضًا كنص للرابط إذا قرّرت استخدام صورة كرابط.

عند كتابة نص بديل، ركِّز على إنشاء محتوى مفيد يتضمّن معلومات وافية ويستخدم الكلمات الرئيسية بشكل مناسب ويكون ضمن سياق محتوى الصفحة. تجنَّب ملء سمات alt بالكلمات الرئيسية (وهو ما يُسمّى أيضًا ازدحام الكلمات الرئيسية)، لأنّ ذلك يؤدي إلى ترك انطباع سلبي لدى المستخدم وقد يتسبّب في اعتبار موقعك الإلكتروني على أنّه محتوى غير مرغوب فيه.

مثال سيئ (لم يتم توفير نص بديل):

<img src="puppy.jpg"/>

مثال سيئ (ازدحام الكلمات الرئيسية):

<img src="puppy.jpg" alt="جرو كلب صغير كلب جراء صغيرة جراء كلاب صغيرة فضلات جراء كلب كلب استرداد لابرادور كلب صيد كلب ساطر كلب بوينتر جرو جاك راسل جراء ترير طعام كلاب طعام كلاب بسعر منخفض طعام جراء"/>

مثال أفضل:

<img src="puppy.jpg" alt="جرو"/>

أفضل مثال:

<img src="puppy.jpg" alt="جرو دلماسي يلعب لعبة الجلب"/>

ننصحك أيضًا بالحرص على أن يوفّر النص البديل سهولة الاستخدام، وفقًا لإرشادات W3. بالنسبة إلى العنصر <img>، يمكنك إضافة السمة alt للعنصر. أما بالنسبة إلى عناصر <svg> المضمَّنة، فيمكنك استخدام العنصر <title>. مثلاً: 

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

نقترح اختبار المحتوى الذي تقدّمه عن طريق التدقيق للتأكّد من سهولة الاستخدام واستخدام محاكي اتصال بشبكة بطيئة.

إيقاف الربط المضمَّن في &quot;صور بحث Google&quot;

يمكنك منع ظهور الصورة بالحجم الكامل في صفحة نتائج البحث على &quot;صور بحث Google&quot; من خلال إيقاف الربط المضمَّن في نتائج البحث على &quot;صور بحث Google&quot;. لإيقاف الربط المضمَّن:

  1. عندما يتم طلب صورتك، عليك التأكّد من رأس مُحيل HTTP في الطلب.
  2. إذا كان الطلب صادرًا من نطاق على Google، يمكنك الردّ باستخدام رمز حالة HTTP‏ 200 أو رمز حالة HTTP‏ 204 وبدون محتوى.

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

يمكنك بدلاً من ذلك منع ظهور الصورة في نتائج البحث بالكامل.

&quot;البحث الآمن&quot; هو أحد الإعدادات في حسابات مستخدمي Google، وهو يحدّد ما إذا كان سيتم عرض أو تمويه أو حظر الصور والفيديوهات والمواقع الإلكترونية الفاضحة في نتائج البحث على Google. احرص على تحديد طبيعة موقعك الإلكتروني لمحرّك بحث Google كي يتمكّن من تطبيق فلاتر &quot;البحث الآمن&quot; على موقعك الإلكتروني إذا لزم الأمر. مزيد من المعلومات حول تصنيف الصفحات لميزة &quot;البحث الآمن&quot;