سئوی تصویر مجموعه بهینه‌سازی‌هایی است که تا تصاویر صفحات شما هم توسط موتورهای جست‌وجو درست فهمیده شوند و هم سریع بارگذاری شوند. از نام فایل تا متن جایگزین، و از فرمت‌های مدرن مانند WebP و AVIF تا lazy loading، هر جزئیات روی ترافیکی که از Google Images می‌آید و روی سرعت کلی صفحه اثر دارد. در این راهنما، سئوی تصویر را به ترتیب و با مثال توضیح می‌دهیم و می‌گوییم در هر مرحله چه باید کرد.
چرا سئوی تصویر مهم است؟
تصاویر دو اثر جداگانه دارند. اولی دیده‌شدن است: جعبه‌های تصویری در Google Images و نتایج عادی جست‌وجو کانالی جدا هستند که می‌توانند بازدیدکننده بیاورند؛ به‌ویژه در موضوعاتی مانند محصول، دستور پخت، مکان و دکوراسیون، کاربران ابتدا به تصویر نگاه می‌کنند. دومی سرعت است: در بیشتر صفحات، بخش بزرگی از حجم کل داده را تصاویر تشکیل می‌دهند و بزرگ‌ترین عنصر صفحه اغلب یک تصویر است. یعنی یک تصویر قهرمانِ بهینه‌نشده می‌تواند LCP را خراب کند و عملکرد کل صفحه را پایین بیاورد.
اثر سومی دسترس‌پذیری است: متن جایگزین، تصویر را برای بازدیدکنندگانی که از صفحه‌خوان استفاده می‌کنند توصیف می‌کند. متن جایگزین خوب هم به کاربر کمک می‌کند هم به موتور جست‌وجو.
نام فایل
گوگل برای فهمیدن موضوع تصویر، از نام فایل هم استفاده می‌کند. نام‌هایی مانند IMG_20260412_0043.jpg که
دوربین می‌دهد هیچ اطلاعاتی ندارند. قواعد ساده است:
- از کلمات کوتاه و معنادار برای توصیف تصویر استفاده کنید:
gray-leather-sofa-three-seat.webp. - کلمات را با خط تیره (-) جدا کنید؛ خط زیرین (_) ممکن است کلمات را به هم چسبیده در نظر بگیرد.
- حروف کوچک و کاراکترهای ASCII ترجیح دارند؛ از حروف خاص زبان و فاصله در نام فایل استفاده نکنید.
- کلیدواژه انباشته نکنید:
sofa-sofa-cheap-sofa.webpکمکی نمی‌کند.
| بد | خوب |
|---|---|
IMG_0043.jpg | gray-leather-sofa.webp |
New Image (2).png | tehran-office-entrance.webp |
sofa_cheap_sofa_for_sale.jpg | corner-sofa-set.webp |
متن جایگزین (alt) را چطور بنویسیم؟
متن جایگزین (ویژگی alt) محتوای تصویر را با کلمات شرح می‌دهد. اگر تصویر بارگذاری نشود، به جای آن نمایش
داده می‌شود، صفحه‌خوان‌ها آن را می‌خوانند و گوگل از آن برای فهمیدن زمینه تصویر استفاده می‌کند.
- تصویر را همان‌طور که هست توصیف کنید. «باریستایی که روی پیشخوان آشپزخانه قهوه درست می‌کند» متن جایگزین خوبی است؛ لازم نیست با واژه‌هایی مانند «تصویر» یا «عکس» شروع کنید.
- کوتاه نگه دارید. معمولاً کمتر از 125 کاراکتر کافی است.
- کلیدواژه را طبیعی قرار دهید. اگر تصویر واقعاً به آن موضوع مربوط است، کلیدواژه خودبه‌خود می‌آید؛ فهرست‌های اجباری می‌توانند اسپم شمرده شوند.
- در تصاویر تزئینی، متن جایگزین را خالی بگذارید (
alt="") تا صفحه‌خوان‌ها بی‌دلیل آن را نخوانند. ویژگی alt را کامل حذف نکنید. - متن داخل تصویر را بنویسید. اگر در تصویر شعار یا قیمتی هست، آن را در متن جایگزین یا در متن صفحه بیاورید.
نمونه: به‌جای alt="کاناپه کاناپه مبل ارزان" بنویسید
alt="کاناپه سه نفره خاکستری با پارچه و پایه چوبی". نسخه دوم هم به کاربر کمک می‌کند هم
اطلاعات روشن‌تری به موتور جست‌وجو می‌دهد.
علاوه بر متن جایگزین، متن اطراف تصویر، عنوان و کپشن هم به گوگل کمک می‌کنند زمینه را بفهمد. قرار دادن تصویر کنار پاراگرافی که درباره همان موضوع است، بسیار بهتر از گذاشتن آن در پایین صفحه و جای نامرتبط است.
انتخاب فرمت: JPEG، PNG، WebP، AVIF
| فرمت | نقطه قوت | چه زمانی؟ |
|---|---|---|
| JPEG | رایج، فشرده‌سازی خوب برای عکس | پشتیبان برای سیستم‌های قدیمی |
| PNG | بدون افت کیفیت، پشتیبانی از شفافیت | لوگو، اسکرین‌شات، گرافیک ساده |
| WebP | حجم قابل توجه کمتر از JPEG/PNG، پشتیبانی از شفافیت | پیش‌فرض امن برای بیشتر تصاویر |
| AVIF | معمولاً حجم کمتر از WebP | صفحات با تصویر عکاسی؛ پشتیبانی مرورگرها گسترده است ولی یک پشتیبان هم اضافه کنید |
| SVG | برداری، مقیاس‌پذیر، بسیار کوچک | لوگو، آیکون، طراحی ساده |
برای ارائه چند فرمت می‌توانید از عنصر <picture> استفاده کنید: مرورگر اولین فرمتی را که پشتیبانی
می‌کند انتخاب می‌کند و اگر هیچ‌کدام را پشتیبانی نکند، به تگ <img> داخلش می‌افتد. بدین ترتیب مرورگری
که AVIF را دارد AVIF می‌گیرد و آنکه ندارد WebP یا JPEG.
اندازه و فشرده‌سازی
رایج‌ترین اشتباه، نمایش عکسی با عرض 4000 پیکسل در جعبه‌ای 400 پیکسلی است. مرورگر در هر صورت کل فایل را دانلود می‌کند. این کارها را انجام دهید:
- بر اساس اندازه واقعی نمایش، تغییر اندازه دهید. برای محتوای وبلاگ معمولاً عرض 800 تا 1200 پیکسل کافی است؛ برای صفحه‌نمایش‌های با تراکم بالا، نسخه دو برابر را با
srcsetجداگانه ارائه کنید. - فشرده کنید. در عکس‌ها، کیفیت بین 75 تا 85 اغلب حجم فایل را بدون اینکه با چشم فرق محسوسی ببینید، کاهش شدیدی می‌دهد.
- متادیتا را پاک کنید. داده‌های EXIF (مکان، دستگاه) بار اضافی و خطر حریم خصوصی هستند.
- هدف تعیین کنید. به‌طور کلی سعی کنید تصاویر محتوا را زیر چند صد کیلوبایت نگه دارید؛ برای تصاویر قهرمان بزرگ هم یک سقف تعیین کنید.
مقادیر width و height را در HTML حتماً مشخص کنید. مرورگر پیش از دانلود تصویر می‌داند چقدر جا
باید برایش رزرو کند و محتوا هنگام بارگذاری صفحه پایین نمی‌رود.
تصاویر واکنش‌گرا: srcset و sizes
فرستادن یک تصویر با عرض 360 پیکسل برای یک گوشی و همان تصویر با 1920 پیکسل برای مانیتور، هدررفت است. با
srcset چند نسخه با عرض‌های مختلف تعریف می‌کنید و با sizes می‌گویید تصویر چه بخشی از صفحه
را می‌پوشاند؛ مرورگر مناسب‌ترین فایل را خودش انتخاب می‌کند. مثلاً تولید سه نسخه با عرض‌های 480، 800 و 1200 پیکسل
برای بیشتر صفحات وبلاگ و محصول کافی است. در موبایل صرفه‌جویی داده محسوس است و این مستقیماً روی زمان LCP اثر می‌گذارد.
تصویر کجا باید باشد؟
گوگل موضوع تصویر را از متن اطرافش هم درمی‌آورد. بنابراین تصویر را کنار پاراگرافی بگذارید که موضوعش در آن بیان می‌شود و زیرش یک کپشن کوتاه که موضوع را خلاصه می‌کند اضافه کنید. عنوان بخشی که تصویر در آن است، آنچه تصویر درباره‌اش است را تقویت می‌کند. به‌جای استفاده مستقیم از تصاویر استوک دارای حق تکثیر، در صورت امکان عکس‌های اصیل خودتان را ترجیح دهید؛ تصویر اصیل هم به کاربر اعتماد می‌دهد هم شما را از سایت‌هایی که تصاویر تکراری استوک دارند متمایز می‌کند.
Lazy loading و CLS
Lazy loading یعنی تصاویری که زیر خط دید صفحه هستند، تا وقتی کاربر به آن‌ها نزدیک نشده، بارگذاری نشوند. در مرورگرهای مدرن با یک ویژگی انجام می‌شود:
<img src="kanepe.webp" alt="کاناپه سه نفره خاکستری با پارچه پشمی" width="800" height="600" loading="lazy">
- روی تصویرهای بالای صفحه (above the fold) lazy loading نگذارید. اگر بزرگ‌ترین تصویر صفحه دیر بارگذاری شود، LCP بدتر می‌شود. برای این تصویر می‌توانید
fetchpriority="high"بگذارید. - تصاویر گالری، لیست محصولات و بخش‌های پایینی مقالات طولانی، برای lazy loading ایده‌آل هستند.
- همیشه آن را همراه با
width/heightبه کار ببرید؛ در غیر این صورت تصویر بارگذاری‌شده چیدمان را جابه‌جا می‌کند. - برای اینکه گوگل تصویر را پیدا کند، از
<img src>واقعی استفاده کنید؛ تصاویری که فقط به‌عنوان پس‌زمینه CSS هستند ممکن است در جست‌وجوی تصویری ایندکس نشوند.
برای اطلاعات بیشتر درباره معیارهای سرعت، به راهنمای Core Web Vitals ما مراجعه کنید.
نقشه سایت تصویری و داده ساختاریافته
گوگل بیشتر تصاویر را در خزش عادی پیدا می‌کند. با این حال، برای گالری‌هایی که با JavaScript بارگذاری می‌شوند یا
ساختارهای پیچیده، افزودن تصاویر به نقشه سایت کمک‌کننده است. در نقشه سایت استاندارد، زیر هر <url>
از عناصر <image:image> و <image:loc> استفاده می‌شود:
- فضای نام تصویر را به ابتدای نقشه سایت اضافه کنید.
- برای هر صفحه، نشانی تصاویری را که در آن صفحه آمده‌اند فهرست کنید.
- نقشه سایت را از Search Console ارسال کنید و خطاها را بررسی کنید.
- مطمئن شوید فایل robots.txt شما تصاویر را مسدود نمی‌کند.
در محتوای محصول، دستور پخت یا مقاله، افزودن نشانی تصویر به داده ساختاریافته (schema) باعث می‌شود گوگل راحت‌تر بتواند تصویر را در نتایج غنی نشان دهد. برای استفاده از Search Console به راهنمای شروع کار ما مراجعه کنید.
خطاهای رایج تصویری
- جاسازی متن در تصویر: نوشتن اطلاعات مهم (قیمت، نشانی، کمپین) فقط داخل تصویر باعث می‌شود موتور جست‌وجو و صفحه‌خوان آن را نبینند.
- کپی کردن یک متن جایگزین یکسان در همه جا: به‌جای اینکه به هر پنج تصویر یک گالری محصول یک متن یکسان بدهید، هرکدام (جلو، کنار، جزئیات) را جدا توصیف کنید.
- تصاویر «قهرمان» خیلی بزرگ: یک اسلاید تمام‌صفحه گاهی به‌جای چند صد کیلوبایت، چند مگابایت است؛ اول اندازه را کم کنید، بعد طراحی را بازبینی کنید.
- مسدود کردن تصاویر با robots.txt: قاعده‌ای که پوشه تصاویر را می‌بندد باعث می‌شود در Google Images هرگز دیده نشوید.
- پیوندهای تصویری شکسته: تصاویری که جابه‌جا یا حذف شده‌اند خطای 404 می‌دهند؛ با خزش منظم آن‌ها را اصلاح کنید.
فهرست کنترل و سنجش
- آیا نام فایل معنادار، ASCII و با خط تیره جدا شده است؟
- آیا متن جایگزین تصویر را کوتاه و طبیعی توصیف می‌کند؟
- آیا تصاویر در WebP/AVIF یا فرمت مناسب هستند؟
- آیا فایلی بزرگ‌تر از اندازه نمایش بارگذاری نمی‌شود؟
- آیا روی تصاویر غیر از بخش بالای صفحه،
loading="lazy"وجود دارد؟ - آیا
widthوheightتعریف شده‌اند؟ - آیا نقشه سایت تصویری و robots.txt درست هستند؟
برای سنجش، PageSpeed Insights پیشنهادهای «Efficiently encode images» و «Properly size images» را مستقیماً نشان می‌دهد. در گزارش عملکرد Search Console هم می‌توانید نوع جست‌وجو را «Image» انتخاب کنید و نمایش و کلیک‌های جست‌وجوی تصویری را جداگانه پیگیری کنید. بهبود تصاویر به سرعت بیشتر کمک می‌کند تا نرخ خروج فوری هم کم شود.
نتیجه‌گیری
سئوی تصویر یک حرکت واحد نیست، بلکه عادت کوچکی است که در هر تصویر تکرار می‌شود: نام فایل معنادار، متن جایگزین صادقانه، فرمت و اندازه درست، lazy loading برای پایین صفحه و در صورت لزوم نقشه سایت تصویری. بیشترین سود معمولاً از بزرگ‌ترین تصاویر می‌آید؛ پس ابتدا در PageSpeed Insights چند تصویر سنگین‌تر را پیدا کنید و از آن‌ها شروع کنید. نتیجه، ترافیک بیشتر از Google Images و سایتی سریع‌تر خواهد بود. رتبه‌بندی را باز هم الگوریتم‌های گوگل تعیین می‌کنند؛ وظیفه شما این است که تصاویرتان را قابل فهم و سبک نگه دارید.