راهنمای سئو و بهینهسازی تصاویر (Image Optimization) برای سایتهای پر محصول.
- محمد یاسر گنجی دوست
- No Comments
راهنمای جامع سئو و بهینهسازی تصاویر برای سایتهای خشکبار: سرعت بالا، رتبه یک (وقتی عکسها میفروشند)
در فروشگاه اینترنتی خشکبار، تصویر محصول فقط یک عکس نیست؛ تنها راه ارتباط حسی مشتری با محصول است. مشتری نمیتواند عطر زعفران را حس کند یا پسته را لمس کند؛ او فقط به عکسی که شما آپلود کردهاید اعتماد میکند. بنابراین، شما به عکسهایی با رزولوشن بالا و جزئیات دقیق (High Definition) نیاز دارید. اما این نیاز، یک دشمن بزرگ دارد: کندی سرعت سایت.
سایتهای پر محصول که هزاران عکس دارند، اگر استراتژی بهینهسازی نداشته باشند، زیر بار حجم تصاویر له میشوند. کندی سایت یعنی فرار مشتری و سقوط رتبه در گوگل. به عنوان یک طراح وب، وظیفه شما این است که سیستمی طراحی کنید که عکسها را “رژیم” دهد، بدون اینکه از زیبایی آنها کاسته شود.
در این مقاله تخصصی، ما چکلیست نهایی سئوی تصویر را برای سایتهای بزرگ بررسی میکنیم؛ از نامگذاری فایلها قبل از آپلود تا تکنیکهای پیشرفته سرور برای تحویل سریع.
فاز اول: قبل از آپلود (آمادهسازی فایلها)
سئوی تصویر از فتوشاپ (یا کامپیوتر شما) شروع میشود، نه از وردپرس.
۱. نامگذاری فایل (File Naming) – اولین سیگنال به گوگل
بزرگترین اشتباه، آپلود عکس با نام پیشفرض دوربین (IMG_8745.jpg) است. گوگل نمیداند این چیست.
-
قانون: نام فایل باید توصیفکننده محصول باشد و کلمات با خط تیره (-) جدا شوند.
-
مثال بد:
photo1.jpg -
مثال عالی:
akbari-pistachio-salted-saffron.jpg(پسته اکبری شور زعفرانی). -
نکته: از حروف فارسی در نام فایل پرهیز کنید (چون در لینکدهی انکد میشوند و URL را زشت و طولانی میکنند). از پینگلیش یا انگلیسی استفاده کنید.
۲. انتخاب فرمت صحیح (Next-Gen Formats)
-
JPEG: برای عکسهای دارای طیف رنگی بالا (مثل عکس ظرف آجیل) خوب است، اما قدیمی شده.
-
PNG: فقط برای عکسهای بدون پسزمینه (Transparent) استفاده کنید. برای عکس محصول بسیار سنگین است.
-
WebP (برنده مطلق): فرمت مدرن گوگل که کیفیت JPEG را با حجمی ۳۰ تا ۵۰ درصد کمتر ارائه میدهد. تمام عکسهای سایت خشکبار باید WebP باشند.
۳. ابعاد استاندارد (Resizing)
اگر قالب سایت شما عکس محصول را در سایز ۶۰۰x۶۰۰ پیکسل نمایش میدهد، آپلود کردن عکس ۳۰۰۰x۳۰۰۰ پیکسلی، جنایت در حق پهنای باند کاربر است.
-
استاندارد: عکسها را قبل از آپلود به عرض حداکثر ۱۰۰۰ تا ۱۲۰۰ پیکسل (برای قابلیت زوم) ریسایز کنید.
فاز دوم: هنگام آپلود (سئوی داخلی)
وقتی عکس را در وردپرس آپلود میکنید، فیلدهایی وجود دارد که پر کردن آنها برای سئو حیاتی است.
۱. متن جایگزین (Alt Text) – پادشاه سئوی تصویر
این متنی است که گوگل میخواند و اگر عکس لود نشود، به کاربر نمایش داده میشود.
-
استراتژی: در Alt Text، محصول را برای یک نابینا توصیف کنید. از کلمه کلیدی استفاده کنید اما “اسپم” نکنید.
-
بد: “پسته خرید پسته قیمت پسته”
-
خوب: “کاسه پر از پسته اکبری خام مناسب برای آجیل شب یلدا”
۲. عنوان (Title Attribute)
متنی که وقتی موس روی عکس میرود (Hover)، نمایش داده میشود. برای تجربه کاربری (UX) خوب است اما تأثیر مستقیم کمی بر سئو دارد. میتوانید نام محصول را بنویسید.
۳. کپشن (Caption) – برای وبلاگ
در مقالات وبلاگ، متنی که زیر عکس نوشته میشود (Caption)، ۳۰۰٪ بیشتر از متن بدنه مقاله خوانده میشود.
-
زیر عکس گردو بنویسید: “تفاوت مغز گردوی سفید تویسرکان (راست) با گردوی معمولی.”
فاز سوم: اتوماسیون و فشردهسازی (افزونهها)
شما نمیتوانید ۵۰۰۰ عکس را دستی فشرده کنید. باید سیستم اتوماتیک باشد.
۱. فشردهسازی هوشمند (Lossy vs. Lossless)
-
Lossless (بدون افت): حجم را کم میکند اما نه زیاد. کیفیت دستنخورده میماند.
-
Lossy (با افت جزئی): حجم را شدیداً کم میکند (تا ۸۰٪). چشم انسان متوجه افت کیفیت نمیشود. برای خشکبار، حالت Lossy متعادل (حدود ۸۰٪ کیفیت) بهترین گزینه است.
۲. افزونههای پیشنهادی:
-
LiteSpeed Cache: (اگر سرور لایتاسپید دارید). بهترین گزینه رایگان که هم فشرده میکند و هم نسخه WebP میسازد.
-
Imagify: قدرتمند و ساده. (نسخه رایگان محدودیت دارد).
-
Smush: محبوب و کارآمد.
فاز چهارم: تکنیکال سئو (Technical SEO)
این بخش برای تو که توسعهدهندهای، جذاب است.
۱. لود تنبل (Lazy Loading)
چرا باید عکسهای فوتر لود شوند وقتی کاربر هنوز بالای صفحه است؟
-
عملکرد: عکسها فقط زمانی دانلود میشوند که کاربر به آنها اسکرول کند.
-
نکته حیاتی: عکس اول صفحه (Hero Image یا عکس اصلی محصول) را هرگز لیزیلود نکنید. این کار پارامتر LCP (سرعت لود بزرگترین المان) را خراب میکند.
۲. نقشه سایت تصاویر (Image Sitemap)
اگر از گالریهای جاوااسکریپتی (مثل پاپآپ) استفاده میکنید، گوگل ممکن است عکسها را نبیند.
-
راهکار: از افزونههای سئو (Yoast یا RankMath) استفاده کنید تا تصاویر را به
sitemap.xmlسایت اضافه کنند. این کار شانس نمایش عکسهای شما در بخش Google Images را بالا میبرد.
۳. جلوگیری از پرش صفحه (CLS)
آیا تا به حال وارد سایتی شدهاید که متن در حال خواندن هستید، ناگهان عکس لود میشود و متن میپرد پایین؟ این یعنی نمره منفی در CLS (Cumulative Layout Shift).
-
راهکار: همیشه در کد HTML یا CSS، طول و عرض (
widthوheight) عکس را مشخص کنید تا مرورگر جای خالی آن را رزرو کند.
فاز پنجم: شبکه توزیع محتوا (CDN)
اگر مشتری شما در اهواز است و سرور شما در آلمان، عکسها دیر لود میشوند.
-
CDN (مثل Cloudflare یا آروان): نسخهای از عکسهای شما را در سرورهای مختلف جهان ذخیره میکند و از نزدیکترین سرور به کاربر تحویل میدهد. برای سایتهای پر عکس، CDN واجب است.
چکلیست نهایی برای هر محصول جدید
قبل از زدن دکمه انتشار محصول، این ۵ مورد را چک کنید:
-
[ ] آیا نام فایل انگلیسی و توصیفی است؟ (
dried-fig-grade-a.webp) -
[ ] آیا حجم عکس زیر ۱۰۰ کیلوبایت (برای عکس اصلی) است؟
-
[ ] آیا فرمت عکس WebP است؟
-
[ ] آیا متن جایگزین (Alt) دقیق و شامل کلمه کلیدی است؟
-
[ ] آیا ابعاد عکس متناسب با قالب سایت است؟
بخش پرسش و پاسخ فنی (FAQ)
۱. آیا کیفیت عکس موبایل برای سایت خشکبار کافی است؟ بله، به شرط نورپردازی خوب. اما حتماً باید قبل از آپلود ادیت شود (کراپ، تنظیم نور و ریسایز). عکس خام موبایل حجم زیادی دارد (۵ مگابایت) که سایت را میکشد.
۲. چگونه عکسهای قدیمی سایت را بهینه کنم؟ نیازی به آپلود مجدد نیست. افزونههایی مثل Smush یا Imagify گزینهای به نام Bulk Optimize دارند که با یک کلیک، تمام عکسهای قدیمی را فشرده و جایگزین میکنند.
۳. آیا واترمارک (لوگو روی عکس) برای سئو بد است؟ برای سئو بد نیست، اما برای Google Shopping (تبلیغات گوگل) ممنوع است. اگر قصد تبلیغات گوگل دارید، واترمارک نزنید. اگر نه، واترمارک ظریف برای جلوگیری از کپیبرداری خوب است.
جمعبندی: تعادل، رمز پیروزی است
سئوی تصویر، هنرِ راه رفتن روی طناب است. یک طرف “کیفیت بصری” است که مشتری را جذب میکند، و طرف دیگر “سرعت سایت” است که گوگل را راضی نگه میدارد.
با استفاده از فرمت WebP، تنظیم دقیق Alt Text و استفاده از CDN، شما میتوانید سایتی داشته باشید که هم مثل یک مجله لوکس زیباست و هم مثل یک موشک سریع است.