سئو تصاویر وردپرس✔️ آموزش کامل بهینه‌سازی عکس‌ها

سئو تصاویر وردپرس چیست و چرا اهمیت دارد؟

تصاویر فقط برای زیباترشدن صفحات سایت نیستند. یک تصویر بهینه می‌تواند محتوای صفحه را برای کاربر قابل‌فهم‌تر کند، از جستجوی تصاویر گوگل بازدید بگیرد و در عین حال حجم صفحه را کاهش دهد.

گوگل برای درک موضوع تصاویر، فقط خود فایل را بررسی نمی‌کند؛ بلکه به نام فایل، متن جایگزین، کپشن، عنوان تصویر و متن اطراف آن نیز توجه می‌کند. بنابراین سئو تصاویر مجموعه‌ای از اقدامات فنی و محتوایی است، نه صرفاً نوشتن یک کلمه کلیدی در بخش ALT

از طرف دیگر، تصاویر معمولاً بخش قابل‌توجهی از حجم صفحات سایت را تشکیل می‌دهند. استفاده از فرمت و ابعاد مناسب می‌تواند زمان دریافت فایل‌ها را کاهش دهد و عملکرد صفحه، مخصوصاً معیار LCP، را بهتر کند.

در ادامه، تمام مراحل بهینه‌سازی تصاویر وردپرس را از قبل از بارگذاری تا بررسی نتیجه توضیح می‌دهیم.

1. قبل از بارگذاری، ابعاد تصویر را متناسب با محل نمایش انتخاب کنید

یکی از اشتباهات رایج این است که تصویری با عرض 3000 پیکسل در بخشی بارگذاری شود که حداکثر 800 پیکسل عرض دارد. در این حالت مرورگر مجبور می‌شود یک فایل بزرگ را دریافت و سپس آن را کوچک نمایش دهد.

پیش از بارگذاری تصویر مشخص کنید که قرار است در کدام بخش استفاده شود:

• تصویر شاخص مقاله
• تصویر محصول
• بنر صفحه اصلی
• تصویر داخل محتوا
• آیکون یا لوگو
• تصویر پس‌زمینه

برای مثال، اگر عرض محتوای مقاله سایت شما 800 پیکسل است، معمولاً نیازی نیست تصویر داخل مقاله چند برابر این اندازه باشد. البته برای نمایشگرهای با تراکم بالا می‌توان نسخه بزرگ‌تری در نظر گرفت، اما نباید بدون دلیل فایل بسیار بزرگ آپلود شود.

وردپرس هنگام آپلود، نسخه‌هایی با اندازه‌های مختلف ایجاد می‌کند. برای استفاده درست از این قابلیت بهتر است تصاویر را از کتابخانه رسانه وردپرس درج کنید، نه اینکه همیشه آدرس نسخه اصلی و کامل را به‌صورت دستی در کد قرار دهید.

2. فرمت مناسب تصویر را انتخاب کنید

هیچ فرمتی برای تمام تصاویر بهترین نیست. انتخاب فرمت باید بر اساس نوع تصویر انجام شود.

JPG

برای عکس‌های واقعی، تصاویر محصولات و تصاویری که رنگ‌های زیادی دارند مناسب است. این فرمت از پس‌زمینه شفاف پشتیبانی نمی‌کند.

PNG

برای لوگو، آیکون، اسکرین‌شات و تصاویری که به پس‌زمینه شفاف نیاز دارند کاربرد دارد؛ اما ممکن است حجم آن از فرمت‌های جدید بیشتر باشد.

WebP

WebP از فشرده‌سازی Lossy و Lossless و همچنین پس‌زمینه شفاف پشتیبانی می‌کند. در بسیاری از تصاویر می‌تواند با حفظ کیفیت قابل‌قبول، فایل کوچک‌تری نسبت به JPG یا PNG ایجاد کند.

AVIF

AVIF نیز یک فرمت جدید با قدرت فشرده‌سازی مناسب است. بااین‌حال باید سازگاری ابزارها، سیستم مدیریت محتوا و مرورگرهای مخاطبان سایت را بررسی کنید.

برای بیشتر سایت‌های وردپرسی، استفاده از WebP انتخاب ساده و مطمئنی است؛ اما پس از تبدیل باید حتماً کیفیت خروجی را با نسخه اصلی مقایسه کنید.

3. حجم تصویر را بدون افت محسوس کیفیت کاهش دهید

تغییر فرمت به‌تنهایی کافی نیست. ممکن است یک فایل WebP نیز به دلیل ابعاد بزرگ یا کیفیت بسیار بالا، حجم زیادی داشته باشد.

برای بهینه‌سازی بهتر:

• تصویر را ابتدا به ابعاد موردنیاز برسانید.
• کیفیت را بیش‌ازحد بالا انتخاب نکنید.
• نسخه نهایی را روی موبایل و دسکتاپ بررسی کنید.
• تعادل میان وضوح و حجم فایل را حفظ کنید.
• فایل اصلی را قبل از جایگزینی نگه دارید.

عدد ثابتی به‌عنوان حجم مناسب برای همه تصاویر وجود ندارد. یک تصویر محصول با جزئیات فراوان طبیعتاً می‌تواند از یک آیکون ساده بزرگ‌تر باشد. هدف این است که کم‌حجم‌ترین فایل ممکن را بدون آسیب محسوس به کیفیت تولید کنید.

4. برای فایل تصویر نام توصیفی انتخاب کنید

نام‌هایی مانند موارد زیر اطلاعات مفیدی درباره تصویر ارائه نمی‌کنند:

IMG-2026-4587.jpg
Screenshot-123.png
photo-final-2.webp

به‌جای آن، از نامی کوتاه و مرتبط با محتوای تصویر استفاده کنید:

wordpress-image-seo.webp
webp-converter-tool.webp
wordpress-alt-text-example.webp

بین کلمات از خط تیره استفاده کنید و از تکرار بی‌دلیل کلمه کلیدی خودداری کنید.

نام فایل باید درباره خود تصویر باشد، نه اینکه صرفاً کلمه کلیدی صفحه چند بار در آن قرار بگیرد. گوگل نیز استفاده از نام فایل توصیفی را در کنار متن جایگزین و محتوای مرتبط توصیه می‌کند.

5. متن ALT را بر اساس مفهوم تصویر بنویسید

متن جایگزین یا alt زمانی نمایش داده می‌شود که تصویر بارگذاری نشود و همچنین به ابزارهای کمکی کمک می‌کند مفهوم تصویر را برای کاربران توضیح دهند.

یک ALT خوب باید:

• کوتاه و واضح باشد.
• موضوع واقعی تصویر را توضیح دهد.
• با محتوای همان بخش مرتبط باشد.
• طبیعی نوشته شود.
• شامل تکرار مصنوعی کلمات کلیدی نباشد.

نمونه نامناسب

<img
    src="wordpress-speed.webp"
    alt="وردپرس سئو وردپرس سرعت وردپرس بهینه سازی وردپرس"
/>

نمونه مناسب

<img
    src="wordpress-image-optimization.webp"
    alt="تنظیمات بهینه‌سازی تصاویر در پیشخوان وردپرس"
    width="800"
    height="450"
/>

لازم نیست عبارت‌هایی مثل «تصویرِ»، «عکسِ» یا «نمایی از» را همیشه در ابتدای ALT بنویسید؛ مرورگر و صفحه‌خوان از قبل می‌دانند عنصر موردنظر تصویر است.

ALT تصاویر تزئینی

اگر تصویر فقط جنبه تزئینی دارد و هیچ اطلاعاتی به محتوا اضافه نمی‌کند، بهتر است ALT آن خالی باشد:

<img src="decorative-shape.svg" alt="" />

W3C برای تصاویری که فقط تزئینی هستند، استفاده از alt="" را توصیه می‌کند تا صفحه‌خوان‌ها آن را نادیده بگیرند.

6. تصویر را کنار متن مرتبط قرار دهید

گوگل از متن اطراف تصویر برای درک موضوع آن استفاده می‌کند. بنابراین تصویر باید نزدیک همان بخشی قرار بگیرد که درباره آن توضیح داده‌اید.

کپشن نباید تکرار کامل ALT یا عنوان مقاله باشد؛ باید اطلاعات مفیدی به کاربر بدهد.

7. از تصاویر ریسپانسیو استفاده کنید

کاربر موبایل نباید همان فایل بزرگی را دریافت کند که برای نمایشگر دسکتاپ تولید شده است. تصاویر ریسپانسیو به مرورگر اجازه می‌دهند بر اساس عرض صفحه و تراکم نمایشگر، نسخه مناسب را انتخاب کند.

در HTML این کار با ویژگی‌های srcset و sizes انجام می‌شود:

<img
    src="wordpress-image-800.webp"
    srcset="
        wordpress-image-400.webp 400w,
        wordpress-image-800.webp 800w,
        wordpress-image-1200.webp 1200w
    "
    sizes="(max-width: 768px) 100vw, 800px"
    alt="نمونه تصویر ریسپانسیو در وردپرس"
    width="800"
    height="450"
/>

وردپرس برای بسیاری از تصاویر درج‌شده از کتابخانه رسانه، srcset و sizes را به‌صورت خودکار تولید می‌کند. بنابراین بهتر است از توابع استاندارد وردپرس و اندازه‌های ثبت‌شده قالب استفاده شود.

تصاویر ریسپانسیو باعث می‌شوند دستگاه‌های کوچک مجبور به دریافت فایل بزرگ‌تر از نیاز خود نباشند. گوگل نیز استفاده از تصاویر ریسپانسیو را بخشی از راهکارهای بهینه‌سازی تصاویر معرفی می‌کند.

8. ویژگی‌های width و height را حذف نکنید

وقتی مرورگر قبل از دریافت تصویر، ابعاد آن را نداند، نمی‌تواند فضای لازم را در صفحه رزرو کند. در نتیجه پس از بارگذاری تصویر، محتوای صفحه جابه‌جا می‌شود.

این جابه‌جایی می‌تواند معیار CLS و تجربه کاربری را ضعیف کند.

<img
    src="image-seo.webp"
    alt="چک‌لیست سئو تصاویر وردپرس"
    width="800"
    height="450"
/>

وجود width و height مانع ریسپانسیو بودن تصویر نمی‌شود. همچنان می‌توان با CSS اندازه نمایش را کنترل کرد:

img {
    max-width: 100%;
    height: auto;
}

مشخص‌کردن ابعاد به مرورگر کمک می‌کند نسبت تصویر را از قبل محاسبه کرده و فضای آن را رزرو کند.

9. Lazy Load را فقط برای تصاویر خارج از دید اولیه فعال کنید

Lazy Load باعث می‌شود تصاویر پایین صفحه زمانی دریافت شوند که کاربر به نزدیکی آن‌ها رسیده باشد. در مرورگرهای جدید می‌توان از ویژگی استاندارد زیر استفاده کرد:

<img
    src="wordpress-dashboard.webp"
    alt="تصویر پیشخوان وردپرس"
    loading="lazy"
    width="800"
    height="450"
/>

استفاده از Lazy Load برای تصاویر پایین صفحه مفید است؛ اما نباید آن را بدون بررسی روی تمام تصاویر فعال کرد.

تصویر اصلی بالای صفحه را Lazy Load نکنید

تصویر شاخص یا تصویر بزرگی که در ابتدای صفحه نمایش داده می‌شود، ممکن است عنصر LCP صفحه باشد. Lazy Load کردن آن می‌تواند شروع دریافت تصویر را به تأخیر بیندازد و نتیجه PageSpeed را ضعیف‌تر کند. web.dev صراحتاً توصیه می‌کند تصویر LCP به‌صورت Lazy بارگذاری نشود.

ساختار مناسب برای تصویر مهم بالای صفحه می‌تواند به شکل زیر باشد:

<img
    src="seo-images-cover.webp"
    alt="آموزش سئو تصاویر وردپرس"
    loading="eager"
    fetchpriority="high"
    width="1200"
    height="675"
/>

در مقابل، تصاویر بخش‌های پایین‌تر مقاله می‌توانند loading="lazy" داشته باشند.

10. استفاده از CDN برای تصاویر

CDN نسخه‌ای از فایل‌های سایت را در سرورهای مختلف نگهداری می‌کند و آن‌ها را از موقعیتی نزدیک‌تر به کاربر تحویل می‌دهد.

استفاده از CDN زمانی مفیدتر است که:

• کاربران سایت از مناطق مختلف جغرافیایی هستند.
• تعداد و حجم تصاویر زیاد است.
• فروشگاه یا سایت پرترافیکی دارید.
• فاصله کاربران با سرور اصلی زیاد است.

اما CDN جایگزین بهینه‌سازی تصویر نیست. اگر تصویر اصلی بسیار بزرگ باشد، CDN فقط همان فایل بزرگ را از سرور دیگری تحویل می‌دهد. ابتدا باید ابعاد، فرمت و کیفیت تصویر را بهینه کنید و سپس سراغ CDN بروید.

11. مطمئن شوید تصاویر برای گوگل قابل‌دسترسی هستند

برای اینکه تصاویر در جستجوی گوگل دیده شوند:

• فایل تصویر نباید با robots.txt مسدود شده باشد.
• URL تصویر باید پایدار باشد و دائماً تغییر نکند.
• تصویر باید با یک آدرس معتبر بارگذاری شود.
• صفحه‌ای که تصویر در آن قرار دارد باید قابل ایندکس باشد.
• تصاویر مهم باید در HTML صفحه قابل پیدا شدن باشند.
• هنگام استفاده از CDN، دسترسی گوگل به دامنه فایل‌ها مسدود نشود.

اگر تصاویر مهم از طریق JavaScript بارگذاری می‌شوند یا پیدا‌کردن آن‌ها برای گوگل دشوار است، نقشه سایت تصاویر می‌تواند URL آن‌ها را به گوگل معرفی کند.

بیشتر افزونه‌های سئو وردپرس، تصاویر داخل نوشته‌ها را در Sitemap یا اطلاعات مربوط به صفحات در نظر می‌گیرند؛ بنابراین پیش از ساخت نقشه جداگانه، Sitemap فعلی را بررسی کنید.

12. برای هر تصویر عنوان و کپشن اجباری ننویسید

فیلدهای مختلف رسانه وردپرس کاربرد یکسانی ندارند:

• نام فایل: آدرس و نام فنی فایل
• ALT: توضیح مفهوم یا کاربرد تصویر
• عنوان: عنوان داخلی فایل در کتابخانه رسانه
• کپشن: متن قابل‌نمایش زیر تصویر
• توضیحات: توضیحات داخلی صفحه پیوست رسانه

لازم نیست همه فیلدها را با یک عبارت مشابه پر کنید. مهم‌ترین مورد برای تصاویر محتوایی، ALT دقیق است. کپشن را فقط زمانی اضافه کنید که توضیح آن برای خواننده ارزش داشته باشد.

۱۳. فقط از تصاویر مفید و مرتبط استفاده کنید

هر تصویر باید به کاربر کمک کند موضوع را سریع‌تر و واضح‌تر بفهمد. اضافه‌کردن تصاویر تکراری، تزئینی یا نامرتبط فقط حجم صفحه را افزایش می‌دهد و ارزش آموزشی مقاله را بیشتر نمی‌کند.

قبل از افزودن هر تصویر از خودتان بپرسید:

آیا این تصویر نکته‌ای را توضیح می‌دهد که فهم آن فقط با متن دشوارتر است؟

اگر پاسخ منفی است، احتمالاً نیازی به آن تصویر ندارید. همچنین از قراردادن چند تصویر مشابه برای توضیح یک نکته خودداری کنید؛ بهترین و واضح‌ترین نمونه کافی است.

14. نتیجه بهینه‌سازی تصاویر را اندازه‌گیری کنید

بعد از اعمال تغییرات، فقط به کم‌شدن حجم فایل اکتفا نکنید. نتیجه را با ابزارهای مختلف بررسی کنید:

• PageSpeed Insights برای بررسی LCP و مشکلات تصاویر
• تب Network مرورگر برای مشاهده حجم و زمان دریافت فایل
• Search Console برای بررسی ورودی Google Images
• Lighthouse برای خطاهای اندازه و فرمت تصاویر
• تست واقعی سایت روی اینترنت موبایل

در Search Console می‌توانید در گزارش Performance، نوع جستجو را روی Image قرار دهید و کلیک‌ها، نمایش‌ها و جایگاه تصاویر سایت را بررسی کنید.

اشتباهات رایج در سئو تصاویر وردپرس

از انجام موارد زیر خودداری کنید:

• آپلود تصویر چندمگابایتی بدون تغییر اندازه
• استفاده از نام‌هایی مانند IMG123.jpg
• تکرار چندباره کلمه کلیدی در ALT
• قراردادن ALT یکسان برای همه تصاویر
• Lazy Load کردن تصویر اصلی بالای صفحه
• حذف width و height
• استفاده از PNG برای تمام تصاویر
• نمایش نسخه Full Size در تمام بخش‌های سایت
• قراردادن متن مهم فقط داخل تصویر
• استفاده از تصاویر بی‌کیفیت یا نامرتبط
• نوشتن کپشن و عنوان تکراری برای همه فایل‌ها

چک‌لیست سئو تصاویر وردپرس

پیش از انتشار هر نوشته یا محصول این موارد را بررسی کنید:

• ابعاد تصویر متناسب با محل نمایش است.
• فرمت مناسب انتخاب شده است.
• حجم تصویر تا حد ممکن کاهش پیدا کرده است.
• نام فایل توصیفی است.
• ALT طبیعی و مرتبط نوشته شده است.
• تصویر نزدیک متن مرتبط قرار دارد.
• width و height تنظیم شده‌اند.
• تصاویر پایین صفحه Lazy Load هستند.
• تصویر LCP به‌صورت Lazy بارگذاری نمی‌شود.
• نسخه ریسپانسیو تصویر وجود دارد.
• URL تصویر برای گوگل قابل‌دسترسی است.
• کیفیت تصویر در موبایل مناسب است.

جمع‌بندی

سئو تصاویر وردپرس فقط به واردکردن متن ALT محدود نمی‌شود. برای رسیدن به نتیجه بهتر باید ابعاد، حجم، فرمت، نام فایل، متن جایگزین، نحوه بارگذاری و دسترسی گوگل به تصویر را هم‌زمان بررسی کنید.

ابتدا تصویر را متناسب با محل نمایش آماده کنید، سپس آن را با فرمتی مانند WebP و حجم مناسب ذخیره کنید. بعد از بارگذاری، ALT دقیق بنویسید، ابعاد تصویر را مشخص کنید و Lazy Load را فقط برای تصاویر پایین صفحه فعال کنید.

با اجرای این مراحل، تصاویر سایت هم برای کاربران سریع‌تر بارگذاری می‌شوند و هم اطلاعات واضح‌تری در اختیار موتورهای جستجو قرار می‌دهند.