شرح تحسين صور الـ (Image SEO)
شرح تحسين صور الـ (Image SEO)
تحسين صور الـ SEO (Image SEO) هو جزء مهم من On-Page SEO، لأنه بيساعد صورك تترتّب عالي في بحث الصور بتاع جوجل، ويحسن ترتيب صفحات موقعك كمان. في الدرس ده، هنشرح إزاي تحسن صورك لمحركات البحث، مع أفضل الممارسات، أمثلة، ونصايح للمبتدئين.
ليه الصور مهمه لـ SEO؟
- تأثيرها على الترتيب:
- دراسة حللت مليون نتيجة بحث في جوجل أثبتت إن الصفحات اللي فيها صورة واحدة على الأقل بتترتّب أحسن من الصفحات بدون صور.
- فوايد الصور:
- تجذب القارئ: المحتوى اللي فيه صور بيجذب 94% زيارات أكتر من المحتوى بدون صور (حسب دراسة).
- زيادة المشاركة: الصفحات اللي فيها صور بتتشير أكتر على السوشيال ميديا، وبوستات الصور بتجيب 150% ريتويت أكتر (حسب Buffer).
- توضيح الأفكار: الصور بتساعدك توضح فكرة أو نقطة بسهولة.
- تحسين SEO: الصور بتدي إشارات لجوجل عن محتوى الصفحة من خلال Alt Text.
- ترتيب في بحث الصور: الصور المحسنة بتظهر في Google Image Search، وبتجيب زوار إضافيين.
- مثال: لو عندك مقالة عن “نصايح SEO”، إضافة صورة لإنفوجرافيك بتوضح النصايح هتخلّي المقالة أجذب وتساعدها تترتّب أحسن.
إزاي تحسن صورك لـ SEO؟
إليك قايمة التحقق (Checklist) لتحسين الصور مع أمثلة عملية:
1. حسّن اسم ملف الصورة (Image Filename)
- اسم الصورة لازم يكون وصفي ويوضح محتواها، مش أرقام أو حروف عشوائية زي
DC0001IMG.jpg. - إزاي؟: سمّي الصورة بكلمات قليلة تصفها.
- مثال:
- سيء:
IMG123.jpg - جيد:
seo-tips-2025.png - نصيحة: استخدم كلمات مفتاحية مرتبطة بالمحتوى، وافصل الكلمات بـ (-) مش (_).
2. حسّن حجم ملف الصورة (Image File Size)
- الصور الكبيرة (بالبايت) بتبطّي تحميل الصفحة، وده بيأثر سلبيًا على تجربة المستخدم، خاصة على الموبايل.
- إزاي؟:
- استخدم أدوات زي TinyPNG، ImageOptim، أو Compressor.io عشان تقلل حجم الصورة بدون ما تفقد الجودة.
- لو بتستخدم برامج زي Photoshop أو Pixelmator، ضبّط الأبعاد (Resize) قبل الرفع.
- مثال: صورة كانت 1MB، بعد الضغط بقت 100KB، وده بيسرّع التحميل.
- نصيحة: حاول تخلّي حجم الصورة أقل من 100KB لو ممكن.
3. استخدم صور متجاوبة (Responsive Images)
- الصور المتجاوبة بتتكيف مع حجم الشاشة (موبايل، تابلت، كمبيوتر)، وبتقلل استهلاك الباندويث.
- في ووردبريس: من الإصدار 4.4، ووردبريس بيعمل نسخ متعددة من الصورة بأحجام مختلفة تلقائيًا.
- لو مش على ووردبريس: استخدم CSS أو
<picture>tag عشان تعرض الصور المناسبة حسب الجهاز. - مثال:
- صورة أصلية: 1000×600 (100KB).
- على الموبايل: ووردبريس بيحمل نسخة 320×200 (15KB).
- نصيحة: تأكد إن قالب موقعك بيدعم Responsive Images.
4. حسّن النص البديل (Alt Text)
- إيه هو Alt Text؟:
- نص وصفي بيوضح الصورة، بيضاف في وسم
<img>في HTML:html <img src="seo-tips.png" alt="نصايح تحسين SEO 2025"> - مش بيظهر في الصفحة، بس بيظهر لو الصورة ما اتحملتش، وبيتقراه برامج القراءة (Screen Readers).
- ليه مهم؟:
- تحسين الوصولية: بيساعد المستخدمين ضعاف البصر يفهموا الصورة.
- SEO: جوجل بيستخدم Alt Text عشان يفهم موضوع الصورة والصفحة.
- ترتيب الصور: Alt Text قوي بيساعد الصورة تترتّب في Google Image Search.
- روابط الصور: لو الصورة رابط، Alt Text بيبقى زي Anchor Text.
- إزاي تكتب Alt Text ممتاز؟:
- وضح الصورة بدقة: اكتب وصف ينفع للي مش شايف الصورة.
- استخدم كلمات مفتاحية: أضف الكلمة الرئيسية أو كلمات LSI، بس بدون حشو (Keyword Stuffing).
- خلّيه قصير: حوالي 125 حرف، وتجنب كلمة واحدة.
- ما تكتبش “صورة” أو “Image”: جوجل عارف إنها صورة.
- أضفه لكل الصور: حتى اللوجو، الأزرار، أو صور الخلفية.
- مثال:
- صورة إنفوجرافيك عن SEO:
- سيء:
<img src="infographic.jpg" alt="infographic"> - حشو:
<img src="infographic.jpg" alt="SEO infographic SEO tips SEO 2025"> - جيد:
<img src="infographic.jpg" alt="إنفوجرافيك نصايح تحسين SEO 2025">
- سيء:
- إزاي تضيف Alt Text؟:
- يدويًا: عدّل HTML وأضف
alt="وصف الصورة". - في ووردبريس: من Media Library أو لما تضيف صورة في مقالة، حط Alt Text في الحقل المخصص.
- نصيحة: لو بتستخدم Lazy Loading، Alt Text ضروري عشان جوجل يفهم الصورة قبل ما تتحمل.
5. حسّن عنوان الصورة والتعليق (Image Title & Caption)
- عنوان الصورة (Image Title): نص بيظهر لما تحط الماوس على الصورة، وجوجل بيستخدمه عشان يفهم الصورة أكتر.
- تعليق الصورة (Caption): نص بيظهر تحت الصورة في الصفحة، وبيفيد المستخدمين وجوجل.
- مثال:
- صورة إنفوجرافيك:
- Title: “نصايح تحسين SEO 2025”
- Caption: “إنفوجرافيك يوضح أفضل نصايح SEO لعام 2025.”
- نصيحة: أضف Title وCaption للصور المهمة، واستخدم كلمات مفتاحية بشكل طبيعي.
6. حسّن مكان الصورة (Image Placement)
- لو الصورة مهمة (زي إنفوجرافيك خاص بيك)، حطها في أعلى الصفحة مع Alt Text، Title، وCaption مُحسنين.
- مثال: إنفوجرافيك عن “SEO 2025″، حطه بعد المقدمة مباشرة.
- نصيحة: الصور اللي فوق الطية (Above the Fold) بتاخد أولوية عند جوجل.
7. ما تحطش نصوص مهمه داخل الصورة
- النصوص المدمجة في الصور صعب جوجل يقراها، وبتبقى مش واضحة للمستخدمين.
- بدلها: استخدم Caption للمستخدمين، وAlt Text لجوجل.
- مثال سيء: صورة فيها نص “أفضل 5 نصايح SEO”.
- مثال جيد: صورة مع Caption: “أفضل 5 نصايح SEO”، وAlt Text: “نصايح تحسين SEO 2025”.
8. أضف Structured Data (Image Schema)
- Image Schema هو كود بيساعد جوجل يفهم الصورة، وممكن يخلّيها تظهر كـ Rich Results في البحث.
- إزاي؟: أضف كود JSON-LD للصورة في الصفحة.
- مثال:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"contentUrl": "https://mydomain.com/seo-tips.png",
"description": "إنفوجرافيك نصايح تحسين SEO 2025"
}
</script>- نصيحة: استخدم أدوات زي Google Structured Data Markup Helper عشان تولّد الكود بسهولة.
9. أضف Open Graph Meta Tags
- Open Graph Tags بتساعد السوشيال ميديا (زي فيسبوك وتويتر) تختار الصورة المناسبة لما حد يشارك صفحتك.
- إزاي؟: أضف وسم
og:imageفي<head>بتاع الصفحة. - مثال:
<meta property="og:image" content="https://mydomain.com/seo-tips.png">- في ووردبريس: إضافة Yoast SEO بتضيف Open Graph Tags تلقائيًا.
- نصيحة: اختار صورة جذابة (1200x630px) للسوشيال ميديا.
10. استخدم خريطة صور (Image Sitemap)
- خريطة الصور (Image Sitemap) بتساعد جوجل يكتشف صورك، خاصة لو ما بتتحملش بسهولة (زي اللي في Lazy Loading).
- إزاي؟:
- أضف الصور في خريطة XML العادية، أو اعمل خريطة منفصلة للصور.
- مثال:
xml <url> <loc>https://mydomain.com/seo-guide</loc> <image:image> <image:loc>https://mydomain.com/seo-tips.png</image:loc> <image:title>نصايح تحسين SEO 2025</image:title> </image:image> </url> - في ووردبريس: إضافة Yoast SEO بتضيف الصور تلقائيًا لخريطة XML.
- نصيحة: أضف خريطة الصور في Google Search Console عشان جوجل يكتشفها بسرعة.
11. تجنب صفحات فيها صور بس بدون نصوص
- جوجل مش بيقدر يقرا النصوص المدمجة في الصور، فصفحة كلها صور بدون نصوص هتكون ضعيفة في SEO.
- إزاي تتجنب؟: أضف نصوص وصفية، Alt Text، وCaptions مع الصور.
- مثال: لو عندك معرض صور، أضف وصف لكل صورة ومقدمة نصية للصفحة.
أمثلة لصور مُحسنة
- صورة في مقالة:
- المحتوى: مقالة عن “نصايح SEO 2025”.
- الصورة: إنفوجرافيك.
- التحسين:
- Filename:
seo-tips-2025.png - Alt Text: “إنفوجرافيك نصايح تحسين SEO 2025”
- Title: “نصايح تحسين SEO”
- Caption: “إنفوجرافيك يوضح أفضل نصايح SEO لعام 2025.”
- المكان: بعد المقدمة مباشرة.
- Filename:
- لماذا ممتاز؟: الصورة وصفية، مُحسنة بكلمات مفتاحية، ومفيدة للمستخدم.
- صورة لوجو:
- التحسين:
- Filename:
mydomain-logo.png - Alt Text: “شعار موقعك لتحسين SEO”
- Title: “شعار موقعك”
- Filename:
- لماذا ممتاز؟: حتى اللوجو محسن للوصولية وSEO.
- صورة في صفحة منتج:
- المحتوى: دورة SEO.
- التحسين:
- Filename:
seo-course-2025.jpg - Alt Text: “دورة تحسين SEO احترافية 2025”
- Caption: “تعلم SEO مع دورتنا الاحترافية.”
- Open Graph:
<meta property="og:image" content="https://mydomain.com/seo-course-2025.jpg">
- Filename:
- لماذا ممتاز؟: بتساعد في الترتيب ومشاركة السوشيال ميديا.
النقاط الرئيسية (Key Learnings)
- الصور أساسية لـ SEO: بتزود الزيارات، بتحسن تجربة المستخدم، وبتساعد في ترتيب الصفحات وبحث الصور.
- قواعد التحسين:
- استخدم أسماء ملفات وصفية (زي
seo-tips-2025.png). - قلّل حجم الصورة (أقل من 100KB).
- أضف Alt Text وصفي ومحتوي كلمات مفتاحية لكل صورة.
- استخدم Captions وTitles للصور المهمة.
- حط الصور المهمة في أعلى الصفحة.
- أضف Image Schema وOpen Graph Tags.
- استخدم Image Sitemap.
- تجنب النصوص المدمجة في الصور.
- فوايد إضافية: Alt Text بيحسن الوصولية، وبتقلل Bounce Rate لما الصور بتكون جذابة.
- تابع الأداء: استخدم Google Search Console عشان تشوف أداء صورك في بحث الصور.
جدول بأولويات تحسين Image SEO
توضيح الجدول: تحسين Alt Text (90%) هو الأولوية الأولى، بعده اسم ملف الصورة (85%)، ثم تقليل حجم الصورة (80%)، وأخيرًا إضافة Image Schema (75%).