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

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

في هذه السلسة، نستعرض أهمية سيو الصور وكيفية تحسينها بشكل فعّال. سنلقي نظرة على بقية العوامل التي يجب مراعاتها عند وضع الصور في موقعك.

5 – تقليل حجم الصور المستخدمة

إذا كنت ترغب في تقليل حجم الصور دون التأثير على الجودة بشكل كبير، فهنا بعض النصائح:

1. قم بتجربة إعدادات مختلفة لجودة الصور. لا تخف من خفض جودة الصورة بشكل طفيف، حيث غالبًا ما يمكن أن تكون الفروق غير ملحوظة وحجم الملف يقل بشكل ملحوظ.

2. جرب ثلاث أدوات مفتوحة المصدر توصي بها Google لضغط الصور: Guetzli و MozJPEG (من Mozilla) و pngquant. يمكنك مراجعة إرشاداتهم لاستخدام هذه الأدوات.

3. استخدم أداة ImageOptim، وهي أداة مجانية لنظام macOS. يمكنك البحث عن بدائل لنظام Linux و Windows.

مع أداة ImageOptim، يمكنك تغيير مستوى الضغط في الإعدادات واستخدام ضغط بفقد جودة. كما أنها تقوم بضبط بيانات EXIF بشكل افتراضي، والتي يمكن أن تساهم في تقليل حجم الملف، إذا كنت قلقًا من فقدان بيانات EXIF، يمكنك إيقاف تشغيل محو البيانات EXIF في إعدادات ImageOptim.

إذا كنت ترغب في تحسين محركات البحث المحلية (Local SEO)، فإن البيانات EXIF قد تكون مهمة للغاية. قد تؤثر بيانات مثل إحداثيات GPS في البيانات EXIF على تصنيفاتك المحلية.

• بالنسبة لأداء أدوات ضغط الصور، قامت جوجل بإجراء تجربة على عينة صغيرة من الصور باستخدام عدة أدوات. فيما يلي كيفية أداء بعضها:

– ImageOptim: تم تقليل حجم الملف بنسبة 69٪ (JPEG) و 40٪ (PNG).
– Shortpixel: تم تقليل حجم الملف بنسبة 42٪ (JPEG) و 59٪ (PNG).
– Kraken.io: تم تقليل حجم الملف بنسبة 13٪ (JPEG) و 63٪ (PNG).
– TinyPNG: تم تقليل حجم الملف بنسبة 27٪ (JPEG) و 65٪ (PNG).
– Optimizilla: تم تقليل حجم الملف بنسبة 27٪ (JPEG) و 60٪ (PNG).
– Imagify.io: تم تقليل حجم الملف بنسبة 6٪ (JPEG) و 1٪ (PNG).
– Compressor.io: تم تقليل حجم الملف بنسبة 42٪ (JPEG) و 58٪ (PNG).

اختلفت النتائج وفقًا للأدوات، ولكن ImageOptim كانت الأداة الأكثر فعالية بشكل عام لضغط ملفات الصور JPEG. أما بالنسبة لملفات PNG، فكانت Shortpixel الأداة الأفضل.

إذا كنت تستخدم منصة WordPress، يمكنك استفادة من إضافة ShortPixel التي توفر إمكانية ضغط الصور بشكل مجاني حتى 100 صورة شهريًا.

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

6 – إنشاء خريطة موقع “سايت ماب” للصور (Sitemap)

تقدم جوجل بعض الإرشادات حول استخدام ملفات “سايت ماب” للصور:

الصور هي مصدر مهم لتزويد جوجل بمزيد من المعلومات حول محتوى موقعك. يمكنك توفير تفاصيل إضافية حول صورك وتقديم روابط URL للصور التي قد لا تمكنا من اكتشافها بناءً على محتوى الموقع من خلال إضافة معلومات إلى ملف “سايت ماب” خاص بالصور.

• فيما يلي علامات يمكن استخدامها في ملف “سايت ماب” الخاص بالصور:

إذا كنت تستخدم منصة ووردبريس وملحق Yoast SEO، فإن الصور ستتم إضافتها إلى ملف “سايت ماب” تلقائيًا. وهذا ينطبق حتى على المواقع التي تحتوي على صفحات “وسائط” محددة بوسم “noindex” (لا تعرضها لمحركات البحث)، ولكن يجب ملاحظة أن Yoast لا يقدم سوى العلامات <image:image> و <image:loc> المطلوبة. إذا كنت تضيف تعليقات وصفية للصور في ووردبريس، فلن يتم إضافتها تلقائيًا من قبل Yoast.

نقطة مثيرة للاهتمام هي أن وثائق جوجل لملفات “سايت ماب” الخاصة بالصور غير تفصيلية للغاية. لم يتم تحديد بنية الجملة المطلوبة للعلامة <image:geo_location>. فلا يوضح إذا كان يجب تقديم موقع معين باستخدام “Sheffield, England” أم “Sheffield, United Kingdom”.

• جوجل أيضًا توضح:

ملفات “سايت ماب” الخاصة بالصور قد تحتوي على عناوين URL من نطاقات أخرى، على عكس ملفات “سايت ماب” العادية التي تفرض قيودًا على النطاقات المشتركة. هذا يسمح لمديري المواقع باستخدام شبكات توزيع المحتوى (CDN) لاستضافة الصور. ننصح بإضافة نطاق CDN إلى حسابك في Search Console ليسهل علينا إبلاغك بأي أخطاء في الزحف قد نكتشفها.

7 – الاستفادة من صور الرسومات المتجهية (Vector Images)

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

تُستخدم العديد من المواقع صور الرسومات المتجهية للشعارات والعناصر البسيطة الأخرى على الموقع.

تُعد صيغ SVG (Scalable Vector Graphics) أكثر صيغ الرسومات المتجهية شيوعًا على الويب. تم تطويرها من قبل اتحاد شبكة الويب العالمية (W3C) وتعتمد على XML. تُدعم هذه الصيغة من قبل جميع متصفحات الويب الحديثة.

بغض النظر عن المتصفح أو الجهاز أو دقة الشاشة، تبدو صور SVG أكثر وضوحًا لأنها لا تستند إلى البكسل. يمكنك عرض صور SVG على الشاشة بأي حجم تقريبًا – دون فقدان جودة الصورة.

• وفيما يخص تحسين صور SVG، يقدم جوجل بعض الاقتراحات:

1. يجب تصغير ملفات SVG لتقليل حجمها.
2. يجب ضغط ملفات SVG باستخدام تقنية GZIP.
3. الأداة الموصى بها لتصغير ملفات SVG هي “svgo”.
4. إذا كنت لا ترغب في استخدام واجهة سطر الأوامر أو الأكواد، يمكنك استخدام موقع الويب المشار إليه أو تطبيق Mac لتحقيق نفس الغرض. كلاهما يوفر واجهة سهلة لتصغير وضغط ملفات SVG. أنا أفضل استخدام التطبيق على الويب.

يمكنك مراجعة الصورة المصغرة أعلاه للاطلاع على مفهوم SVG. يظهر الحجم الأصلي للصورة SVG 8.54 كيلو بايت، وهو حجم صغير جدًا. بعد تصغيرها (وضغطها باستخدام GZIP)، أصبحت حجمها 3.56 كيلو بايت فقط، مما يعني توفيرًا بنسبة 41.67٪ من الحجم الأصلي.

عند تفعيل ضغط GZIP على مستوى الخادم، سيستخدم المستخدمون فقط 3.56 كيلو بايت من عرض النطاق الترددي إذا كان الخادم يدعم هذه التقنية. إذا لم يكن الضغط مفعلًا، سيستخدمون الحجم الأصلي البالغ 8.54 كيلو بايت.

8 – تقديم صور متجاوبة (Responsive Images)

عندما تقوم بتحميل صورة بحجم 720 بكسل على موقعك وترغب في تحسينها لأجهزة مختلفة ودقات شاشات متباينة، يأتي مفهوم “srcset” للمساعدة.

• هذا الجزء من الشرح يوضح الكود المستخدم وشرحه:

“`html
<img src=”image.jpg” srcset=”image-medium.jpg 1000w, image-large.jpg 2000w”>
“`

أولًا، يتم استخدام علامة `<img>` لتضمين الصورة. ثم يتم توفير روابط لنسختين مختلفتين من نفس الصورة بأحجام مختلفة: متوسطة (1000 بكسل) وكبيرة (2000 بكسل).

لنأخذ مثالًا: إذا كان لديك جهاز بشاشة عرض 320 بكسل بدقة 1x (غير شبكي العين)، وتحتوي على صور صغيرة (عرض 500 بكسل) ومتوسطة (عرض 1000 بكسل) وكبيرة (عرض 2000 بكسل)، فإن المتصفح سيقوم بحساب النسبة الرياضية كالتالي:

– 500 ÷ 320 = 1.5625
– 1000 ÷ 320 = 3.125
– 2000 ÷ 320 = 6.25

بما أن دقتك على ما يُعرف بـ “1x”، ستكون النسبة الأقرب هي 1.5625، وسيتم اختيار الصورة ذات الحجم المتوسط (1000 بكسل) كأفضل اختيار.

بالمثل، إذا دخل شخص آخر الموقع عبر جهاز آخر بنفس دقة الشاشة ولكن مع دعم لشبكية العين (2x)، فسيحسب النسب ويختار الصورة المتوسطة (1000 بكسل).

ببساطة، هذا يساعد المتصفح في اختيار أفضل نسخة من الصورة بناءً على دقة الشاشة ودعم شبكية العين، وبالتالي يقلل من استهلاك العرض الترددي ويحسن سرعة التحميل.

بالنسبة للمستخدمين لمنصة ووردبريس (بدءًا من الإصدار 4.4)، يدير النظام تلقائيًا تحسين هذه الإصدارات للصور التي تُحمّل. لديه مجموعة من الإصدارات الافتراضية لكل صورة، بما في ذلك الصورة المصغرة والمتوسطة والكبيرة والكاملة، ويضيف بنية “srcset” تلقائيًا.

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

في الختام، يظهر موضوع تحسين SEO للصور بأنه أعقد مما قد نتخيل. مع تقنيات متعددة ومبادئ توجيهية من جوجل، يمكننا تحسين تصنيف الصور وجعلها تعزز تجربة المستخدم. لذلك، لا تنتهي رحلة تحسين الصور هنا. إنها جزء متجدد ومستمر من الجهود المبذولة لتحسين موقع الويب بشكل عام.

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