گوگل در آپدیت‌های اخیر خود بر تجربه کاربری و معیارهای حیاتی سرعت (Core Web Vitals) تاکید فراوانی دارد. در این مقاله گام‌به‌گام بررسی می‌کنیم که چگونه تصاویر سایت خود را به بهترین شکل برای خزنده‌های گوگل و کاربران بهینه کنید.
۱. انتخاب فرمت مدرن و مناسب تصویر
اولین قدم در سئو تصویر، انتخاب فرمت ایده‌آل بر اساس نوع کاربرد است:
- WebP و AVIF: فرمت‌های نسل جدید هستند که تا ۳۰ الی ۵۰ درصد حجم کمتری نسبت به JPEG و PNG ارائه می‌دهند بدون اینکه افت کیفیت محسوسی داشته باشند.
- JPEG: برای عکس‌های پیچیده با رنگ‌های زیاد مناسب است.
- PNG: برای تصاویر بدون پس‌زمینه (Transparent) یا اسکرین‌شات‌ها و آیکون‌های گرافیکی شفاف مناسب است.
- SVG: بهترین گزینه برای لوگوها، آیکون‌ها و نمودارهای برداری با قابلیت مقیاس‌پذیری بدون افت کیفیت.
۲. کاهش حجم و بهینه‌سازی اندازه (Image Compression)
بارگذاری تصاویر بزرگ مستقیماً شاخص LCP (Largest Contentful Paint) را تخریب می‌کند.
- تغییر ابعاد فیزیکی: اگر کانتینر تصویر در قالب سایت حداکثر ۸۰۰ پیکسل عرض دارد، هرگز تصویر ۴۰۰۰ پیکسلی آپلود نکنید.
- فشرده‌سازی هوشمند (Lossy vs Lossless): پیش از آپلود، با ابزارهایی مانند Squoosh یا TinyPNG حجم عکس را زیر ۱۰۰ تا ۱۵۰ کیلوبایت برسانید. در معماری‌های مدرن، استفاده از پردازنده‌های تصویر سروری (مانند
next/imageدر پروژه‌های Next.js) به طور خودکار تصویر را متناسب با نمایشگر کاربر ریسایز می‌کند.
۳. نام‌گذاری توصیفی فایل تصویر
گوگل نام فایل را به عنوان بخشی از سرنخ محتوایی تصویر پردازش می‌کند.
- نادرست:
IMG_20240920.jpgیاphoto1.png - درست:
image-seo-best-practices.webpیاmodern-office-workspace.jpg - نکته: همیشه از خط تیره (
-) به جای فاصله یا خط زیرین (_) استفاده کرده و کلمات کلیدی مرتبط را در نام فایل به کار ببرید.
۴. نوشتن دقیق متن جایگزین (Alt Text)
متن جایگزین (Alt Text) حیاتی‌ترین فاکتور On-Page برای سئو تصاویر و دسترسی‌پذیری (Accessibility) است. متن جایگزین زمانی خوانده می‌شود که عکس لود نشود، یا توسط صفحه‌خوان‌ها برای کاربران دارای محدودیت بینایی استفاده گردد.
اصول نگارش Alt Text استاندارد:
- تصویر را دقیق و شفاف توصیف کنید.
- از پر کردن کلمات کلیدی (Keyword Stuffing) خودداری کنید.
- عبارات تکراری مثل «عکسی از…» را حذف کنید.
- مثال ضعیف: «سئو, سئو سایت, بهترین سئو»
- مثال استاندارد: «اینفوگرافیک مراحل سئو تصاویر و کاهش حجم برای افزایش سرعت سایت»
۵. بارگذاری تنبل (Lazy Loading) و ابعاد مشخص
برای جلوگیری از افت پرفورمنس در صفحات طولانی:
- ویژگی
loading="lazy": اجازه می‌دهد تصاویر تنها در صورت اسکرول کاربر به آن بخش بارگذاری شوند. - استثنا: تصاویر بالای تا (Above the Fold) مانند بنر اصلی یا تصویر شاخص را هرگز Lazy Load نکنید تا شاخص LCP کند نشود.
- تعریف مشخص
widthوheight: برای جلوگیری از پرش المان‌ها حین لود شدن صفحه و بهبود شاخص CLS (Cumulative Layout Shift)، حتماً نسبت ابعاد را در کدهای HTML/CSS مشخص کنید.
۶. استفاده از نقشه سایت تصاویر (Image Sitemap)
اگر وب‌سایت شما پر از کاتالوگ‌های بصری، محصولات فروشگاهی یا نمونه‌کارهاست، معرفی تصاویر از طریق Sitemap اختصاصی به گوگل کمک می‌کند تصاویری که از طریق جاوااسکریپت لود می‌شوند را سریع‌تر ایندکس کند.
جمع‌بندی
سئو تصاویر فرآیندی ساده اما تأثیرگذار است که ترکیب درستی از تکنیک‌های فنی (کاهش حجم، فرمت WebP، بارگذاری تنبل) و بهینه‌سازی محتوایی (نام فایل، متن Alt) را طلب می‌کند. اجرای دقیق این چند اصل، علاوه بر ارتقای رتبه سئو و ترافیک تصویری، تجربه کاربری روان‌تر و سرعت لود بالاتری را برای سایت شما به ارمغان می‌آورد.
بزرگنمایی
اندازه فونت
عکس ها
حالت رنگ ها
حالت کور رنگی