
تصویر مفید بخشی از پاسخ صفحه است. تصویر محصول باید جزئیات انتخاب را نشان دهد و تصویر آموزشی باید یک فرایند یا تفاوت را روشن کند. سئو تصاویر از همین نقش شروع می شود و با نام فایل یا چند کلمه در alt تمام نمی شود. کیفیت، زمینه متن، دسترسی خزنده و سرعت بارگذاری باید کنار هم بررسی شوند تا تصویر برای مخاطب و موتور جستجو قابل استفاده باشد.
چگونه تصویر به فهم محتوا و جستجو کمک می کند؟
پیش از انتخاب فایل، مشخص کنید تصویر چه چیزی را توضیح می دهد. اگر حذف آن هیچ اطلاعاتی از صفحه کم نمی کند، احتمالا نقش تزئینی دارد. برای تصویر تزئینی که با img نمایش داده می شود، alt خالی می تواند مناسب باشد. تصویر اطلاعاتی به توضیحی نیاز دارد که نبود تصویر را جبران کند. پر کردن همه altها با عبارت تجاری، هم دسترسی پذیری را خراب می کند و هم توصیف درستی از محتوا نمی دهد.
متن جایگزین را بر اساس تصویر و هدف قرارگیری آن بنویسید. برای نمونه «نمای پشت کنترلر با 3 ورودی» از «خرید بهترین کنترلر ارزان» دقیق تر است. اگر نوشته مهم داخل تصویر وجود دارد، پیام آن در متن صفحه هم قابل دسترسی باشد. در نمودار پیچیده، یک alt کوتاه کافی نیست و توضیح یا جدول همراه باید اطلاعات اصلی را منتقل کند.
نام فایل بهتر است کوتاه و توصیفی باشد و پسوند واقعی قالب را داشته باشد. با این حال، تغییر انبوه نام فایل های قدیمی بدون حفظ نشانی یا انتقال مناسب، می تواند لینک تصاویر را بشکند. در پروژه موجود، ابتدا تصاویر مهم و خطاهای دسترسی را شناسایی کنید. نام گذاری خوب برای فایل جدید کم هزینه تر است و نباید به بهانه آن همه کتابخانه رسانه جابه جا شود.
برای تبدیل بحث به تصمیم عملی، این مثال فرضی را در نظر بگیرید: فروشگاهی یک عکس محصول 4 مگابایتی را در کارت موبایل و صفحه محصول با همان فایل اصلی نمایش می دهد و برای تصویر شاخص نیز lazy فعال کرده است. این وضعیت به معنی وجود یک علت قطعی نیست. باید بین چیزی که در خروجی سایت مشاهده شده و برداشتی که از علت آن داریم فرق گذاشت. شرح مسئله را با نشانی صفحه، تاریخ مشاهده، دستگاه آزمایش و رفتار مورد انتظار ثبت کنید. این چهار مورد باعث می شوند نفر بعدی بتواند همان وضعیت را دوباره بررسی کند و گزارش به برداشت شخصی وابسته نماند.

در همین مثال، تصمیم اصلی این است: برای کارت و صفحه محصول نسخه های متناسب بسازیم و اولویت بارگذاری تصویر بالای صفحه را جدا تنظیم کنیم. پیش از اجرای گسترده، یک نمونه محدود انتخاب کنید و نتیجه فعلی آن را نگه دارید. نمونه باید شامل صفحه مهم، صفحه معمولی و یک وضعیت مرزی باشد. وضعیت مرزی جایی است که قاعده پیشنهادی ممکن است به خطا برود. اگر فقط نمونه مطلوب را آزمایش کنید، موفقیت آزمایش کوچک لزوما به معنی درست بودن قاعده برای تمام سایت نخواهد بود.
برای بررسی جزئیات در مستندات اصلی، مستندات رسمی مرتبط با سئو تصاویر را ببینید.
چطور کیفیت تصویر و سرعت را با هم حفظ کنیم؟
ابعاد width و height یا نسبت تصویر ثابت، فضای مورد نیاز را پیش از دریافت فایل مشخص می کند. این کار از جابه جایی محتوا هنگام بارگذاری جلوگیری می کند. با srcset و sizes می توان نسخه متناسب با نمایشگر فرستاد. فایل 2400 پیکسلی برای تصویری که در موبایل با عرض 350 پیکسل دیده می شود، در بسیاری از حالت ها حجم اضافه دارد. تصمیم نهایی باید با کیفیت قابل مشاهده و وزن فایل گرفته شود.
تصویر اصلی بالای صفحه را بی دلیل lazy نکنید. اگر همان تصویر عنصر اصلی LCP است، دریافت دیرهنگام آن می تواند نمایش محتوای مهم را عقب بیندازد. تصاویر پایین صفحه معمولا برای بارگذاری تنبل مناسب ترند. استفاده محدود از fetchPriority برای تصویر واقعا مهم می تواند مفید باشد، اما بالا بردن اولویت همه تصاویر، مفهوم اولویت را از بین می برد و رقابت شبکه ایجاد می کند.
اگر چند عکس مشابه محصول دارید، از alt یکسان و نامفهوم برای همه استفاده نکنید. زاویه، جزئیات یا نقش هر عکس را توضیح دهید. برای نمودار آموزشی، رنگ تنها نشانه تفاوت نباشد و برچسب متنی نیز وجود داشته باشد. این کار هم به خواننده دارای محدودیت دید کمک می کند و هم در نمایش سیاه و سفید، معنای تصویر را حفظ می کند.
برای تصاویر مهم، URL پایدار، پاسخ موفق و دسترسی عمومی لازم است. محدودیت ربات، لینک امضاشده کوتاه مدت یا خطای CDN می تواند نمایش در جستجوی تصویر را مختل کند. اطلاعات structured data تصویر باید با فایل واقعی و موضوع صفحه هماهنگ باشد. برای تصویر اختصاصی، اطلاعات سازنده و مجوز را درست نگه دارید و از ادعای مالکیت نسبت به عکس دارای مجوز دیگران خودداری کنید.

قدم اجرایی اول در سناریوی بالا چنین است: نسخه های واکنش گرا و متن جایگزین مبتنی بر جزئیات واقعی تصویر را آماده کنید. این کار را با یک مسئول مشخص و یک معیار پایان به تیم تحویل دهید. عبارتی مثل «سئو بهتر شود» معیار پایان نیست. تحویل باید به رفتاری قابل مشاهده اشاره کند که پیش و پس از تغییر قابل مقایسه باشد. اگر تغییر به قالب یا تنظیم مشترک وابسته است، دامنه اثر را هم بنویسید تا اصلاح یک نمونه به خرابی گروه دیگری منجر نشود.
پس از قبول نمونه، قدم بعدی را اجرا کنید: فقط تصویر اصلی بالای صفحه را زود بارگذاری کنید و تصاویر پایین را با حفظ ابعاد تنبل نگه دارید. انتشار را مرحله ای انجام دهید و فهرست نشانی های تغییرکرده را نگه دارید. اگر وضعیت نامطلوبی دیده شد، همین فهرست برای محدود کردن مسئله و بازگردانی تغییر کاربرد دارد. پیش از شروع، نسخه قابل بازیابی و فرد مسئول بازگردانی باید مشخص باشد. این احتیاط به ویژه زمانی مفید است که تیم محتوا و توسعه در ساعت های متفاوت کار می کنند.
برای سنجش، «حجم تصویر دریافت شده» را از «زمان نمایش عنصر اصلی» جدا ثبت کنید. اولی و دومی لزوما هم زمان تغییر نمی کنند و از روی یکی نباید درباره دیگری حکم داد. بازه مقایسه باید دوره مشابه و گروه صفحه مشابه داشته باشد. روزهای ناقص، تغییر فصل، کمپین و تغییر موجودی را در یادداشت گزارش بیاورید. هرجا داده کم است، نتیجه را نشانه اولیه بنامید و از تبدیل آن به ادعای قطعی درباره رشد پرهیز کنید.
| مرحله | کار لازم | خروجی |
|---|---|---|
| تشخیص | اندازه دانلود واقعی تصویر را روی نمای موبایل از شبکه مرورگر ثبت کنید. | شاهد قابل تکرار |
| اعتبارسنجی | در HTML وجود alt مناسب، ابعاد و آدرس قابل دسترسی تصویر را کنترل کنید. | مقایسه با انتظار |
| اجرا | نسخه های واکنش گرا و متن جایگزین مبتنی بر جزئیات واقعی تصویر را آماده کنید. | نمونه تاییدشده |
| گسترش | فقط تصویر اصلی بالای صفحه را زود بارگذاری کنید و تصاویر پایین را با حفظ ابعاد تنبل نگه دارید. | فهرست تغییرات و بازبینی |
پرسش های رایج
در سئو تصاویر اولین قدم چیست؟
اندازه دانلود واقعی تصویر را روی نمای موبایل از شبکه مرورگر ثبت کنید. سپس دامنه مسئله و وضعیت مورد انتظار را مشخص کنید.
از کجا بدانیم اصلاح موفق بوده است؟
رفتار فنی را با نمونه اولیه مقایسه کنید و حجم تصویر دریافت شده و زمان نمایش عنصر اصلی را در بازه های همسان بررسی کنید. تغییر رتبه به تنهایی علت را ثابت نمی کند.