بهینهسازی تصاویر برای سئو چیست؟
سئوی تصویر چیست و چرا نیمی از ترافیک و نیمی از کندی سایت شما از تصاویر است؟ راهنمای عملی: alt، نام فایل، فرمت، ابعاد، lazy-load و sitemap تصاویر — با ترتیب درست و اشتباهات رایج.
در گزارشِ Search Consoleِ اکثر سایتهایی که بررسی میکنم، یک الگوی تکراری هست: تبِ «Images» ترافیکِ زنده و رایگان میفرستد، ولی صفحهٔ اول سایت همان کاربرِ کنجکاو را با یک تصویرِ ۴ مگابایتی فرار میدهد. تصاویر، تنها جزءِ محتوای شما هستند که همزمان رسوای گوگلاند و گلوگاه سرعت؛ و «سئوی تصویر» یعنی درست همانجا که این دو نقش به هم میرسند. در مشاورهها شوخیکردنی ندارم: اگر امروز فهرست تصاویر کتابخانهٔ سایتتان را باز کنید و حجمها را ببینید، احتمالاً کشف میکنید که بزرگترین فایلِ صفحهٔ اولتان نه اسکریپت است نه فونت — یک JPEG قدیمی است که روز اول با ابعادِ دوربین آپلود شده. در این مقاله، سئوی تصویر را از تعریف تا چکلیستِ عملی باز میکنم: alt چه باشد، نام فایل چه شکلی باشد، کدام فرمت، چه ابعاد، کِی lazy-load و کِی هرگز؛ و در پایان، ترتیبِ اولویتِ اجرای امشبتان را میگویم.
سئوی تصویر دقیقاً چیست؟
سئوی تصویر یعنی: تصاویرِ سایت را بهگونهای آماده کنیم که هم موتورهای جستجو بفهمند چه نشان میدهند (و در نتایجِ تصویری و پاسخهای هوشمصنوعیِ تصویری رتبه بگیرند)، هم کاربر با کمترین هزینهی بایت و زمان ببیندشان. توجه کنید که این تعریف دو بال دارد و اکثرِ بحثها فقط روی یکی میچرخند: بالِ «فهماندن» (alt، نام، context) و بالِ «سبکسازی» (فرمت، فشردهسازی، ابعاد). در چرخۀ بزرگ، سئوی تصویر بخشی از «سئوی درونصفحه» است — همان لایهای که در سئوی درونصفحه چیست تعریف کردهام — و بخشی از «سئوی تکنیکال» که نقشۀ لایههایش در سئو تکنیکال چیست آمده. تصویرِ زیبا با altِ «IMG_2847» هیچکدام از این دو بال را ندارد؛ تصویرِ ساده با altِ درست و ۶۰ کیلوبایت حجم، هر دو را.
گوگل تصویر شما را «نمیبیند»؛ alt، نام فایل و متنِ اطرافش را «میخواند». سئوی تصویر یعنی برای نابیناترین عضوِ تیمتان توضیح بدهید چه شده.
شمعِ دو سر: منبع ترافیک، عامل کندی
روی بالِ اول، صادقانه بزرگنمایی نکنم: در سایتهای ایرانی، ترافیکِ Google Images معمولاً کمتر از جستجویِ متنی است — ولی «کم» یعنی صفر نیست، و در سایتهای محصولی، آموزشی و گالریمحور، کانالِ تمامنشدهای است که رقیبتان اصلاً سراغش نرفته. روی بالِ دوم اما اعداد بیرحماند: در نقشۀ ششلایۀ افزایش سرعت وردپرس که قبلاً نوشتهام، لایۀ تصویر اغلب همانجایی است که «نصفِ بایتِ صفحه» بدونِ یک خط کد آب میرود؛ مینیکیسِ سایت خبریاش را یادم هست: LCPِ ۶/۲ثانیه که با WebP و srcset شد ۲/۳ — نه هاست عوض شد، نه قالب. رابطهاش با امتیازاتِ رسمی هم مستقیم است: تصویرِ بزرگ و بیsrcset، LCP را میشکند؛ تصویرِ بیابعادِ اعلامشده (width/height در تگ) CLS را؛ همان دو معیاری که در Core Web Vitals چیست با آستانههایشان تعریف کردهام. پس هر تصمیمِ تصویری، یا به این دو عدد اضافه میکند یا از آنها کم — بیطرف نداریم.
متن جایگزین (alt) — قلبِ سئوی تصویر
alt (متنِ جایگزین) تنها فیلدِ تصویریست که هم برای دسترسپذیری «وظیفه» دارد، هم برای سئو «سیگنال». قانونِ نوشتنش را در سه بند تجربهمحور میگویم. یک: طبیعی توصیف کن، کلمهکلیدی را نیار. altِ «کفش چرم مردانه قهوهای مدل آریا» درست است؛ altِ «کفش مردانه | کفش چرم | خرید کفش ارزان» اسپم است و گوگل از آن بدش میآید — همان دامی که در «سئو فراتر از کلمات کلیدی» بهعنوان باورِ منسوخ باز کردهام. دو: برای screen-reader بنویس نه ربات؛ اگر تصویر صرفاً تزئینی است (پسزمینه، خطِ جداکننده)، alt خالی بگذار (alt="") — این با «فاقد alt» فرق دارد: خالی یعنی «نادیده بگیر»، غایب یعنی «نمیدانم چیست» که کاربرِ نابینا را گیج میکند. سه: نامِ فایل و alt را کپیپیست نکن، ولی بگذار همخانواده باشند؛ جزئیاتِ الگو و نمونههای فارسیِ alt را در این مقاله کامل آوردهام. یک تذکرِ بازارِ ایران: خیلی از سایتها فارسیاند ولی alt را انگلیسی میگذارند «چون انگلیسی به گوگل نزدیکتر است»؛ برای جستجویِ فارسیِ مخاطبِ ایرانی، altِ فارسیِ دقیق برنده است — گوگل هر دو زبان را میفهمد، مخاطبِ شما یکی را جستجو میکند.
نام فایل، title و caption
سه فیلدِ دیگر که ارزششان از alt کمتر است ولی بیاهمیت نیستند. نام فایل: «boots-leather-brown.jpg» بهتر از «IMG_2847.jpg» است — سیگنالِ ضعیفِ کمّیست، ولی وقتی ربات نام را میخواند و در URL هم بازتابش میکند، بیاثر نیست. عادتِ بدِ «آپلودِ مستقیم از گوشی/دوربین» را کنار بگذارید. در وردپرس میتوانید الگوی نامگذاری داشته باشید — در این پروژه ما روی ساختارِ mainkey_postid_photo-1_widthxheight در پوشۀ هر پست کار میکنیم که هم نامِ معنادار دارد هم سایزِ قابلرهگیری. title: بیشتر برای tooltipِ کاربر است تا سیگنالِ سئو؛ اولویتش پایین باشد. caption: متنی که زیرِ تصویر دیده میشود — و چون در contextِ خوانا قرار میگیرد، ارزشِ سئوییاش از title بالاتر است؛ گوگل کپشن را میخواند. اگر یک الگو حفظ کردن برایتان سخت است: نامفایلِ معنادار + altِ توصیفیِ فارسی + کپشنِ مختصر؛ title را میتوانید خالی بگذارید. کلماتِ کلیدیِ این فیلدها را هم از همان پژوهشِ کلمه بیرون بیاورید که روشش در یافتن کلمه کلیدی مناسب آموزش دادهام.
فرمت: JPEG، WebP یا AVIF؟
سریعترینِ برنده در بالِ «سبکسازی»، انتخابِ فرمت است. قاعدهٔ انگشتیِ من: عکسِ واقعی (فتوگراف، محصول) → WebP (و اگر پشتیبانیِ مخاطب قدیمی بود، JPEGِ فشرده بهعنوان fallback)؛ گرافیکِ تخت/لوگو/آیکونِ SVG-نشدنی → PNG؛ و AVIF، پادشاهِ فشردهسازیِ امروز که هنوز روی بعضی دستگاههای قدیمیِ ایرانی و مرورگرهای متروکه پشتیبانیِ ناقص دارد و بهعنوان «اولویتِ آینده» منطقیتر از «همینروزِ همه» است. مقایسهٔ عددیِ این فرمتها و تصمیمِ «کدام برای کدام نیاز» را کامل در بهترین فرمت تصویر وب انجام دادهام. یک اشتباهِ شایعِ فارسیزبان: گذاشتنِ عکس روی پسزمینهٔ شیشهایِ PNG، که حجمش گاهی دهبرابرِ JPEGِ همان تصویر میشود؛ دلیلِ فنیاش را همانجا توضیح دادهام. و یادآوری: فرمتِ درست بدونِ فشردهسازی، نصفِ فایده را از دست میدهد؛ WebPِ بیکیفیتِ تنظیم میتواند از JPEGِ فشرده بزرگتر شود — پس «فرمت» و «فشردهسازی» دو قدمِ جدا ولی هممسیرند؛ هم در فشردهسازی تصاویر سایت روشش را گفتهام و هم در ادامه به ابزارهایش میرسم.
ابعاد، srcset و تصویر شاخص
بزرگترین بایتهایِ هدررفته در تاریخِ وردپرس از یک خطای ساده متولد شدهاند: آپلودِ تصویرِ ۳۰۰۰ پیکسلی و «کوچککردنش» با CSS. مرورگر در این حالت همان فایلِ غول را دانلود میکند و بعد با زور کوچکش میکند — تاخیرِ LCPِ شما در همین دو قدم خلاصه میشود. وردپرس از قدیم نسخههایِ مختلفِ آپلود را میسازد (تامنیل، medium، large) و با srcset به مرورگر میگوید «هرکدام از اینها که به صفحهت میآید را بردار»؛ تا زمانی که قالبِ شما به «قالب سبک» و استانداردش پایبند باشد، این چرخه خودکار کار میکند — و اگر قالبِ «همهچیزسازِ» قدیمی، فایلِ full-size را به موبایل تحویل میدهد، مقصرِ بایتها را در کتابخانهٔ تصاویر نگیرید. قانونِ عملی: همیشه height و widthِ واقعی را در تگِ <img> نگه دارید (در وردپرس با آپلودِ درست خودکار است)؛ نبودِ این دو، همان «جهشِ چیدمان» یا CLS است که نمرۀ CWV را میسوزاند. تصویرِ شاخص (featured image) پروندۀ جدا و مهمیست: این همان تصویریست که در فهرستها، اشتراکگذاری و — در بسیاری قالبها — بهعنوان LCP دیده میشود؛ روشهای فنیِ مدیریتش در وردپرس در «توابع تصویر شاخص در وردپرس» آمده، و نکتهٔ سئوییاش اینجاست: تصویر شاخصِ بیalt یا با altِ کلیشهای، بیشترین آسیب را در نتایجِ تصویری میزند چون پرنمایشترین تصویر سایت شماست. در پروژهٔ خودمان برای کتابخانهٔ رسانه، نظمِ پوشهایِ «یک پوشه در هر پست» را استاندارد گرفتهایم؛ نصفِ گمگشتگیِ ششماهۀ بعدی را همین عادتِ بیسروصدا میگیرد.
lazy-load: کِی بله، کِی هرگز
تنبلبارگذاری یعنی «تصویری که دیده نشده، دانلود هم نشود» — از وردپرسِ ۵.۵ بهصورت پیشفرضِ بومی دارد و ابزارِ رایگانیست که اکثر سایتها از وجودش بیخبرند. ولی همین ویژگیِ مفید، در بدترین حالت، LCPِ شما را میکُشد: اگر تصویرِ بالایِ صفحه (بنرِ خانه، تصویرِ شاخصِ هدر) هم lazy شده باشد، مرورگر صبر میکند تا «نزدیکِ دید» بشود، بعد دانلود را شروع میکند — یعنی زمانِ نمایشِ مهمترینِ عنصر، عملاً دو برابر. تشخیصش بیستثانیهای است: در DevTools، بخشِ Network را فیلترِ Img کنید و صفحه را ریلود کنید؛ اگر تصویرِ بنر در انتهای لیست و با تاخیر آمد، قربانیِ lazy است. درمان: روی همان یک عنصر، loading="eager" + fetchpriority="high". قاعدهٔ کلیِ من: lazy برای همهٔ تصاویرِ زیرِ خطِ دید، بله؛ برای اولینِ عنصرِ دیدی، هرگز. و یک نکتهٔ سرعتیِ مکمل: کشِ صفحهٔ درست و CDN، هزینهٔ تصاویرِ تکراری را برای بازدیدکنندۀ دوم صفر میکنند — تنظیماتشان در «بهترین افزونههای کش» و روشِ CDN در «نقش CDN در سرعت» آمده است.
sitemap تصاویر و داده ساختاریافته
بالایِ «فهماندن» دو ستونِ فنی دارد که کمتر سایتِ ایرانی سراغشان میرود. اول: sitemapِ تصاویر. در استانداردِ sitemap XML، هر URLِ نوشته میتواند تگهای <image:title> و <image:license> بردارد؛ در وردپرس افزونههای سئوِ معروف (که در «افزونههای سئو» بررسیشان کردهام) این را خودکار میسازند — کارِ شما فقط این است که alt و عنوانها را درست پر کرده باشید، وگرنه sitemapِ تصویریِ شما هم با «IMG_2847» پر میشود. دوم: schema. برای محصولات (ImageObject + price)، دستورپزها و گالریها، داده ساختاریافته شانسِ حضور در نتایجِ غنیِ تصویری را بالا میبرد؛ معماریش را در «Schema در پاسخدهی هوش مصنوعی» باز کردهام. انتظارِ واقعبینانه؟ schema و sitemap، «رتبه» نمیآورند؛ درِ نمایشِ بهتر باز میکنند — همان درسی که در «نقش عنوان و توضیحات در نرخ کلیک» برای متا داری: توپ را در زمینِ CTR میاندازی نه رتبه.
تصویرِ بهینهنشده، هم سئو را میبازد هم سرعت را؛ و بدترین قسمتش این است که هر دو ضرر، بیصدا و تجمعیاند — تا روزی که کمپینی ترافیک بیاورد و سایت زیرِ همان JPGِ ۴ مگابایتی بخوابد.
ابزارها و افزونهها با احتیاط
حالا بخشِ «چه چیزی نصب کنم». برای فشردهسازیِ دستهایِ کتابخانه و خودکارسازیِ WebP، افزونههای بهینۀ تصویرِ محبوب را با آزمونِ قبل/بعد در «بهترین افزونههای بهینهسازی تصویر» سنجیدهام؛ خلاصهاش برای این مقاله: هرکدام که انتخاب کردید، دو قانون داشته باشید — اول، «بازنویسیِ فلهای» (bulk rewrite) را روی سایتِ پُرترافیک وسط روز نزنید؛ CPUِ هاست اشتراکی همین را میکشد. دوم، نسخهٔ اصلیِ فایل را نگه دارید تا اگر کیفیتِ فشردهسازی تهاجمی بود (حالت lossyِ پرخاکوخاک روی عکسهای پرجزئیات مثل پوست و پارچه)، قابلِ برگشت باشد. یادآوریِ همیشگیِ ما: افزونه دارو است نه مکمل — جای تصویرِ بهینه در کتابخانه، افزونهٔ «بهینسازِ همهچیز» نیست؛ فهرستِ «چیزهایی که هرگز لازم نمیشوند» را در «افزونههای ضروری» دیدهاید. اگر بهجای افزونه خودتان میخواهید کار کنید: سرویسهای CDN که همزمان بهینهسازیِ تصویر میکنند (تغییر فرمت/سایز on-the-fly) گزینهٔ تمیزتریاند و راهاندازیشان در «راهاندازی CDN برای وردپرس» آمده. و اگر تصویری اصلاً نمایش داده نمیشود یا لینکش شکسته است، قبلِ هر بهینهسازیِ دیگری، پروندۀ «رفع خطاهای نمایش تصویر در وردپرس» را بخوانید — بسیاری از altهای خالی از همینجا میآیند: تصویرِ شکسته، بیتوجه میماند و بیتوجه میمیرد.
اشتباهاتِ رایج
- altِ «توصیفِ خودِ فایل»: «عکس-محصول-۱» هیچچیز نمیگوید؛ alt برای انسانیست که نمیبیند. توصیفِ صحنه + اگر واقعاً منطقی است، کلمۀ کلیدیِ طبیعی.
- کوچککردنِ با CSS بهجای سرور: همان اشتباهِ ۳۰۰۰پیکسلیِ کلاسیک؛ srcset و سایزهایِ خودِ وردپرس را دستنخورده رها کنید.
- lazy روی LCP: بنرِ خانه نباید تنبل باشد؛ «هرگز»ِ این بخش را جدی بگیرید.
- فشردهسازیِ دوبارۀ خروجیِ ویرایشگر: سه افزونه که همه «بهینه» میکنند روی یک فایل، کیفیت را تیکهتیکه میکنند (generation loss)؛ یک مسئول، یک بار.
- بیخیالیِ کتابخانۀ موجود: همه روی «از این به بعد» تمرکز میکنند؛ درحالیکه در سایتهای قدیمی، ۸۰٪ بایتِ هدررفته در همان ۲۰٪ تصویرِ پربازدیدِ قدیمی پنهان است. اول فایلهایِ پردرخواستِ فعلی، بعد بقیه.
جمعبندی و چکلیست
سئوی تصویر، همان دو بال است: فهماندن و سبکسازی. چکلیستِ امشب (به ترتیبِ اثر/تلاش): ۱) تصویرِ شاخصِ پنج صفحۀ پربازدید را باز کنید — altِ فارسیِ توصیفی، نامفایلِ معنادار، کپشنِ مختصر؛ ۲) اولین عنصرِ دیدیِ خانه از نظر lazy بررسی شود؛ ۳) کتابخانۀ موجود: ده تصویرِ پربازدید، WebP/فشرده با نگهداشتنِ نسخۀ اصلی؛ ۴) height/widthِ تگها چک شود (CLS)؛ ۵) اگر فروشگاه/نمونکار/گالری دارید، schemaِ تصویری فعال. اثرِ این پنج قدم را با همان روشِ عددیِ مقالهٔ سرعت بسنجید — «عیبیابی مشکلات سرعت سایت» ابزار و ترتیبش را دارد؛ و در چرخۀ بزرگتر، تصویری که امروز بهینه میکنید دو سال آینده در ترافیکِ Google Images و در LCPِ موبایلتان سود میدهد. تجربهتان: بدترین «IMG_» که در سایت خودتان پیدا کردید چه بود و چه شد؟ در دیدگاهها بنویسید — فهرستِ اشتباهات را از متنِ جامعه کامل میکنم. 🖼️