أفضل الممارسات المتعلّقة بتحسين محركات البحث لظهور المحتوى في "صور بحث Google"
"صور بحث Google" هي طريقة لاستكشاف المعلومات بشكل مرئي على الويب. وتوفّر بعض الميزات الجديدة للمستخدمين إمكانية استكشاف المعلومات بشكل سريع مع مزيد من السياق حول الصور، وتشمل هذه الميزات شروح الصور والشارات البارزة.
من خلال إضافة المزيد من السياق حول الصور، يمكن أن تصبح النتائج أكثر فائدة، ما قد يؤدي إلى زيادة في عدد الزيارات العالية الجودة إلى موقعك الإلكتروني. ويمكنك المساعدة في عملية الاستكشاف من خلال الحرص على تحسين صورك وموقعك ليلائما "صور بحث Google"، مثلاً من خلال استخدام سمات alt
للصور أو ترميز البيانات المنظَّمة. اتّبِع إرشاداتنا لزيادة احتمالية ظهور المحتوى الذي تقدّمه في نتائج البحث على "صور بحث Google".
تقديم تجربة جيّدة للمستخدم
لتعزيز مستوى ظهور المحتوى الذي تقدّمه في "صور بحث Google"، يجب التركيز على المستخدم وتحسين تجربته من خلال إعداد الصفحات بما يناسب المستخدمين بالدرجة الأولى وليس محركات البحث. إليك بعض النصائح:
- تقديم سياق جيد: احرص على أن يكون المحتوى المرئي ملائمًا لموضوع الصفحة. ننصحك بعدم عرض الصور إلا إذا كانت تضيف أفكارًا أصلية ذات صلة بالصفحة. وننصح بشكل خاص بعدم استخدام صور أو نصوص لا تشكّل محتوًى أصليًا في الصفحات.
- تحسين موضع الصور: ضَع الصور بالقرب من النص المناسب كلما أمكن ذلك. وننصحك بوضع الصورة الأكثر أهمية بالقرب من أعلى الصفحة إذا كان ذلك مناسبًا.
- عدم تضمين نص مهم داخل الصور: تجنَّب تضمين النص في الصور، لا سيّما العناصر النصية المهمة، مثل عناوين الصفحات وعناصر القوائم، إذ أنّه لا يمكن لبعض المستخدمين الوصول إليها (كما أنّ أدوات ترجمة الصفحات لن تترجم النص في الصور). للحرص على أن يكون المحتوى الذي تقدّمه سهل الاستخدام بقدر الإمكان، استخدِم تنسيق HTML للنصوص وقدِّم نصًا بديلاً للصور.
- إنشاء مواقع إلكترونية تتضمن معلومات وافية وذات جودة عالية: لا يقلّ المحتوى الجيد على صفحة الويب في الأهمية عن المحتوى المرئي في "صور بحث Google"، فهو يوفّر السياق ويسهّل اتخاذ إجراء بشأن النتيجة. يمكن استخدام محتوى الصفحة لإنشاء مقتطف نصي للصورة، ويراعي محرّك بحث Google جودة محتوى الصفحة عند ترتيب الصور.
- إنشاء مواقع إلكترونية متوافقة مع الأجهزة: يبحث المستخدمون في "صور بحث Google" على الأجهزة الجوّالة بمعدّل أكبر مقارنةً بالبحث على أجهزة الكمبيوتر المكتبي. لهذا السبب، من المهم تصميم موقعك الإلكتروني ليلائم جميع أنواع الأجهزة وأحجامها. استخدِم أداة فحص التوافق مع الأجهزة الجوّالة لاختبار مدى جودة أداء صفحاتك على الأجهزة الجوّالة وللحصول على ملاحظات حول الجوانب التي يجب تحسينها.
- إنشاء بنية عنوان URL جيدة لصورك: يستخدم محرّك بحث Google مسار عنوان URL بالإضافة إلى اسم الملف ليتمكّن من فهم صورك. وننصحك بتنظيم محتوى صورك لإنشاء عناوين URL بطريقة منطقية.
التحقق من عنوان صفحتك ووصفها
تنشئ ميزة "صور بحث Google" بشكل تلقائي رابط عنوان ومقتطفًا لتفسير كل نتيجة على أفضل نحو وتوضيح مدى ارتباطها بطلب البحث الذي يُدخله المستخدم. وتساعد هذه العملية المستخدمين في اتخاذ قرار بالنقر على النتيجة أم لا. في ما يلي مثالان على روابط العنوان والمقتطف ضمن صفحة نتائج البحث من Google:
نستخدم عدّة مصادر مختلفة لهذه المعلومات، بما في ذلك المعلومات الوصفية الواردة في العنوان وعلامات meta
لكل صفحة.
يمكنك مساعدتنا في تحسين جودة رابط العنوان والمقتطف المعروضَين لصفحاتك من خلال اتّباع إرشادات العناوين والمقتطفات من Google.
إضافة بيانات منظَّمة
في حال تضمين بيانات منظَّمة، ستتمكّن ميزة "صور بحث Google" من عرض صورك كنتائج منسّقة تتضمّن شارة بارزة، ما يمنح المستخدمين معلومات ذات صلة عن صفحتك ويؤدي إلى زيادة عدد الزيارات الموجّهة إلى موقعك الإلكتروني. وتتيح ميزة "صور بحث Google" استخدام الأنواع التالية من البيانات المنظّمة:
اتّبِع الإرشادات العامة للبيانات المنظّمة وأي إرشادات أخرى خاصة بنوع البيانات المنظّمة، وإلّا قد لا تكون بياناتك المنظّمة مؤهّلة للعرض كنتائج منسّقة في "صور بحث Google". في كل نوع من أنواع البيانات المنظَّمة هذه، تكون سمة الصورة حقلاً مطلوبًا ليصبح المحتوى مؤهّلاً للحصول على شارة وليُعرض كنتيجة منسّقة في "صور بحث Google". في ما يلي مثالان على النتائج المنسّقة في "صور بحث Google":
تحسين الصور لزيادة سرعة تحميل الصفحة
غالبًا ما تشكّل الصور الجزء الأكبر من إجمالي حجم الصفحة، ما يجعل تحميل الصفحات عملية بطيئة ومكلفة. احرص على تطبيق أحدث تقنيات تحسين الصور وتقنيات الصور المتجاوبة مع مختلف الأجهزة لتوفير تجربة سريعة وذات جودة عالية للمستخدم.
يمكنك تحليل سرعة موقعك الإلكتروني من خلال إحصاءات PageSpeed وزيارة صفحة Why does speed matter?(ما أهمية السرعة؟) للتعرّف على أفضل الممارسات والتقنيات المتعلقة بتحسين أداء المواقع الإلكترونية.
إضافة صور عالية الجودة
تجذب الصور العالية الجودة المستخدمين أكثر من الصور المموّهة وغير الواضحة. تكون أيضًا الصور العالية الدقة أكثر جاذبية للمستخدمين في الصورة المصغَّرة للنتيجة وتزيد من احتمالية جذب زيارات من المستخدمين.
إضافة عناوين وصفية وشروح وأسماء ملفات ونصوص للصور
يستخلص محرّك البحث Google معلومات حول موضوع الصورة من محتوى الصفحة، بما في ذلك الشرح وعنوان الصورة. حيثما أمكن، احرص على وضع الصور بالقرب من النص ذي الصلة وعلى الصفحات ذات الصلة بموضوع الصور.
على نحو مماثل، يمكن أن يقدّم اسم الملف لمحرّك بحث Google تلميحات عن موضوع الصورة. عند الإمكان، استخدِم أسماء ملفات قصيرة شرط أن تكون معبّرة. على سبيل المثال، استخدِم my-new-black-kitten.jpg
، وليس IMG00023.JPG
. تجنَّب استخدام أسماء عامة للملفات مثل image1.jpg
أو pic.gif
أو 1.jpg
عندما يكون ذلك
ممكنًا، وإذا كان موقعك الإلكتروني يحتوي على آلاف الصور، قد يكون من الأفضل تسمية الصور
بشكل تلقائي.
في حال كنت تقدّم ترجمة لمحتوى صورك، لا تنسَ ترجمة أسماء الملفات أيضًا مع أخذ إرشادات ترميز عناوين URL في الاعتبار إذا كنت تستخدم أحرفًا غير لاتينية أو رموزًا خاصة.
استخدام نص بديل وصفي في السمة alt
يساعد النص البديل (النص الذي يصف صورة) في تسهيل استخدام الصور بالنسبة إلى الأشخاص الذين لا يمكنهم رؤية الصور على صفحات الويب، بما في ذلك المستخدمين الذين لديهم برامج لقراءة الشاشة أو اتصالات ذات معدّل نقل بيانات منخفض.
يستخدم محرّك بحث 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>
نقترح اختبار المحتوى الذي تقدّمه عن طريق التدقيق للتأكّد من سهولة الاستخدام واستخدام محاكي اتصال بشبكة بطيئة.
مساعدتنا في اكتشاف جميع صورك
استخدام عناصر HTML الدلالية الخاصة بالصور لتضمين الصور
يساعد ترميز HTML الدلالي برامج الزحف في العثور على الصور ومعالجتها. ويحلّل محرّك بحث Google عناصر <img>
في ترميز HTML على صفحاتك (حتى إذا كانت مضمَّنة في عناصر أخرى مثل <picture>
) وذلك بهدف فهرسة الصور، إلا أنّه لا يفهرس صور CSS.
جيد:
<img src="puppy.jpg" alt="جرو غولدن ريتريفر" />
سيئ:
<div style="background-image:url(puppy.jpg)">جرو غولدن ريتريفر</div>
استخدام خريطة صور الموقع
يمكنك تقديم عنوان URL للصور التي قد لا نجدها بدون هذه التفاصيل وذلك من خلال إرسال خريطة صور الموقع.
يمكن أن تحتوي خرائط صور الموقع على عناوين URL من نطاقات أخرى، على عكس خرائط الموقع العادية التي تفرض قيودًا على مستوى النطاقات. يتيح لك ذلك استخدام شبكات توصيل المحتوى (CDN) لاستضافة الصور. إذا كنت تستخدم شبكة توصيل للمحتوى، ننصحك بإثبات ملكية اسم النطاق الخاص بشبكة توصيل المحتوى في Search Console حتى نتمكّن من إعلامك بأي أخطاء زحف قد نكتشفها.
استخدام تنسيقات متوافقة للصور
تتيح ميزة "صور بحث Google" استخدام تنسيقات الصور التالية: BMP وGIF وJPEG وPNG وWebP وSVG . ويُستحسن مطابقة امتداد اسم الملف مع نوع الملف.
يمكنك أيضًا تضمين الصور كمعرّفات موارد منتظمة (URI) للبيانات. توفّر معرّفات URI الخاصة بالبيانات إمكانية تضمين ملف، مثل صورة، من خلال تحديد السمة src
للعنصر img
كسلسلة Base64 مرمّزة باستخدام التنسيق التالي:
<img src="data:image/svg+xml;base64,[data]">
قد تؤدي الصور المضمّنة إلى خفض عدد طلبات HTTP، ولكن عليك توخّي الحذر عند استخدامها لأنّها قد تؤدي إلى زيادة كبيرة في حجم الصفحة. للاطّلاع على المزيد من المعلومات عن هذا الموضوع، يمكنك مراجعة القسم بشأن الحسنات والسيئات لاستخدام الصور المضمَّنة على صفحة web.dev.
الصور المتجاوبة
يؤدي تصميم صفحات ويب متجاوبة مع مختلف الأجهزة إلى تحسين تجربة المستخدم، إذ يمكن استخدامها على مجموعة كبيرة من أنواع الأجهزة. راجِع دليل الصور المتجاوبة مع مختلف الأجهزة للتعرّف على أفضل الممارسات للتعامل مع الصور على موقعك الإلكتروني.
تستخدم صفحات الويب العنصر <picture>
أو السمة srcset
للعنصر img
لتحديد الصور المتجاوبة مع مختلف الأجهزة. يُرجى العِلم أنّ بعض المتصفحات وبرامج الزحف لا تفهم هذه السمات.
ننصحك بأن تحدّد دائمًا عنوان URL احتياطيًا من خلال السمة src
.
تسمح السمة srcset
بتحديد نُسخ مختلفة من الصورة نفسها، لا سيما لأحجام الشاشات المختلفة.
مثال: <img 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، احرص عند استخدام العنصر picture
على توفير 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>
تحسين الصور للتوافق مع إعدادات "البحث الآمن"
"البحث الآمن" هو أحد الإعدادات في حسابات مستخدمي Google يحدّد ما إذا كان سيتم عرض أو حظر الصور والفيديوهات والمواقع الإلكترونية الفاضحة في نتائج البحث من Google. احرص على تحديد طبيعة موقعك الإلكتروني لمحرّك بحث Google حتى يتمكّن من تطبيق فلاتر "البحث الآمن" على موقعك الإلكتروني إذا لزم الأمر. مزيد من المعلومات حول تصنيف صفحات "البحث الآمن"
إيقاف الربط المضمَّن في "صور بحث Google"
يمكنك منع ظهور الصورة بالحجم الكامل في صفحة نتائج البحث على "صور بحث Google" من خلال إيقاف الربط المضمَّن في نتائج البحث على "صور بحث Google".
لإيقاف الربط المضمَّن:
- عندما يتم طلب صورتك، عليك التأكّد من رأس مُحيل HTTP في الطلب.
- إذا كان الطلب صادرًا من نطاق على Google، يمكنك الردّ باستخدام رمز حالة HTTP
200
أو رمز حالة HTTP204
وبدون محتوى.
سيواصل محرّك بحث Google الزحف إلى صفحتك ورؤية الصورة، ولكنّه سيعرض صورة مصغّرة يتم إنشاؤها في نتائج البحث وقت الزحف. ويمكن إجراء عملية الإيقاف هذه في أي وقت، ولا تتطلّب إعادة معالجة صور الموقع الإلكتروني. ولا يُعتبر هذا السلوك إخفاءً لهوية الصورة ولن يؤدي إلى تطبيق إجراء يدوي.
يمكنك أيضًا منع ظهور الصورة في نتائج البحث بالكامل.
وأخيرًا...
يُرجى قراءة دليل تحسين نتائج محرّكات البحث للمبتدئين الذي يحتوي على معلومات وافية ومفيدة حول كيفية الحصول على ترتيب أفضل في نتائج البحث. وإذا كانت لديك أسئلة أخرى، يُرجى نشرها في منتدى المساعدة الخاص بـ "مجموعة خدمات بحث Google".