بهینه سازی تصاویر برای سئو

بهینه‌سازی تصاویر برای سئو (SEO) یکی از بخش‌های مهم و گاهاً نادیده گرفته شده در استراتژی‌های بهینه‌سازی وب‌سایت‌ها است. در حالی که اکثر تمرکز بر روی محتواهای متنی و کلمات کلیدی معطوف می‌شود، تصاویر نیز می‌توانند به‌طور چشم‌گیری بر تجربه کاربری و رتبه‌بندی موتورهای جستجو تأثیرگذار باشند. استفاده مناسب از تصاویر نه تنها ظاهر وب‌سایت را جذاب‌تر می‌کند، بلکه با رعایت اصول بهینه‌سازی تصاویر، می‌توان سرعت بارگذاری صفحات، تجربه کاربری بهتر و بهبود رتبه سایت در نتایج جستجو را تضمین کرد. در این مقاله، به بررسی روش‌های بهینه‌سازی تصاویر برای سئو و تأثیر آن‌ها بر عملکرد وب‌سایت می‌پردازیم.

بیش تر بخوانید >> سئو در کرج

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

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

سئوی تصاویر (Image SEO) به مجموعه‌ای از تکنیک‌ها و روش‌هایی اطلاق می‌شود که برای بهینه‌سازی تصاویر وب‌سایت به کار گرفته می‌شوند تا موتورهای جستجو بتوانند به بهترین نحو محتوای تصویری را تشخیص دهند و رتبه بهتری به آن اختصاص دهند. این فرایند شامل بهبود عواملی مانند اندازه و فرمت تصاویر، استفاده از توضیحات متنی (alt text)، بهینه‌سازی نام فایل‌ها، و فشرده‌سازی تصاویر است. هدف از سئوی تصاویر، افزایش قابلیت دسترسی تصاویر توسط موتورهای جستجو و بهبود سرعت بارگذاری وب‌سایت است که در نتیجه منجر به افزایش رتبه وب‌سایت در نتایج جستجو و تجربه کاربری بهتر می‌شود.

تأثیر سئوی تصاویر در وب‌سایت

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

افزایش دسترسی: استفاده از توضیحات متنی (alt text) برای تصاویر به موتورهای جستجو کمک می‌کند تا محتوای تصاویر را درک کنند. این امر باعث می‌شود تصاویر در نتایج جستجو بهتر ایندکس شوند. همچنین، alt text برای کاربرانی که مشکلات بینایی دارند، به واسطه نرم‌افزارهای صفحه‌خوان مفید است.

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

افزایش ترافیک از طریق جستجوی تصویری: کاربران اغلب از جستجوی تصویری (image search) استفاده می‌کنند. با بهینه‌سازی صحیح تصاویر، وب‌سایت شما شانس بیشتری برای نمایش در نتایج جستجوی تصویری دارد که می‌تواند ترافیک بیشتری به سایت شما هدایت کند.

کاهش نرخ پرش (Bounce Rate): بهینه‌سازی تصاویر برای موبایل و دسکتاپ و همچنین سریع‌تر شدن بارگذاری آن‌ها می‌تواند باعث شود کاربران مدت زمان بیشتری در وب‌سایت شما بمانند و به صفحات دیگر نیز مراجعه کنند.

بیش تر بخوانید>> سئو داخلی (On-Page SEO)

Optimized images take up less storage space on your server, so site backups are completed more quickly faster.
ترجمه: تصاویر بهینه شده فضای ذخیره سازی کمتری را در سرور شما اشغال می کنند، بنابراین نسخه پشتیبان سایت سریعتر و سریعتر تکمیل می شود.
برگرفته شده از contentmarketinginstitute.com

همانطور که اشاره کردیم رعایت یک سری نکات برای قراردادن عکس ها در سایت میتواند تاثیر خوبی روی سئوی آن بگذارد. به نوعی به گوگل اطلاع میدهد که کار ما تمیز است. از همین رو چک لیستی تهیه کردیم که طبق تجربه های سئوکاران مختلف تمام نکات را درون آن قراردادیم.

انتخاب فرمت مناسب تصویر

از فرمت‌های بهینه مانند JPEG برای تصاویر با جزئیات زیاد و PNG برای تصاویر ساده با پس‌زمینه شفاف استفاده کنید.

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

Convertio.com

Zamzar.com

Online-convert.com

سه تا از بهترین سایت هایی که می توانید در آن فرمت عکس های خود را تغییر دهید.

WebP و AVIF گزینه‌های جدیدتر و فشرده‌تر هستند که کیفیت بالا را با حجم کمتر ارائه می‌دهند.

فشرده‌سازی تصاویر بدون کاهش کیفیت

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

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

فشرده سازی عکس ها بدون افت کیفیت در فتوشاپ

اگه شد برای مراحل عکس هم بزار
در ابتدای کار برنامه فتوشاپ را باز کنید.
عکس خود را درون فتوشاپ باز کنید.
اگر عملیاتی دارید روی تصویر خود انجام دهید.
حالا برای ذخیره سازی عکس در نوار بالای فتوشاپ روی گزینه file بروید.
حالا در باکس file گزینه export را انتخاب کنید.
در این بخش روی save for web کلیک کنید.
حالا در بخش چپ عکس شما نمایش داده میشود و در بخش راست اطلاعات تصویر شما.
میتوانید از قسمت بالای سمت راست گزینه preset فرمت عکس خود را تغییر دهید.
و بعد روی گزینه save بزنید.
نام عکس خود را بنویسید و بعد سیو کنید.
تبریک! عکس شما با کمترین حجم و بالاترین کیفیت ممکن سیو شد.

انتخاب ابعاد مناسب تصویر

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

نام‌گذاری مناسب فایل‌ها

نام فایل‌های تصاویر را توصیفی و مرتبط با محتوا انتخاب کنید. (برای مثال، برای سیو کردن عکس یک ماشین به جای نام “IMG_1234.jpg” از “red-sports-car.jpg” یا ” ماشین-اسپرت-قرمز” استفاده کنید.)

نکته طور

از خط فاصله (-) برای جداسازی کلمات استفاده کنید، زیرا موتورهای جستجو بهتر این ساختار را تشخیص می‌دهند.

اضافه کردن متن جایگزین (Alt Text)

برای هر تصویر، alt text توصیفی و دقیق بنویسید که شامل کلمات کلیدی مرتبط با محتوا باشد.

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

بهینه‌سازی عنوان تصویر (Image Title)

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

نکته طور

میدانیم که عملیات سئو فقط رعایت حال گوگل نیست و مهم تر از هر چیزی باید هوای مخاطب را داشته باشیم!

استفاده از توضیحات تصویر (Caption)

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

بارگذاری تنبل (Lazy Loading)

برای بهبود سرعت صفحات، از تکنیک Lazy Loading استفاده کنید. این ویژگی باعث می‌شود تصاویر تنها زمانی بارگذاری شوند که کاربر به آن‌ها اسکرول کند.

تکنیک Lazy Loading چیست؟

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

تکنیک لیزی لودینگ را چگونه پیاده کنیم؟

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

اما راه دیگری هم برای Lazy Loading کردن تصاویر وجود دارد آن هم استفاده از کد html است. در ادامه به شما آموزش میدهیم چگونه با کد عکس های خود را لیزی لود کنید.

برای اجرای Lazy Loading در وب‌سایت، کافی است به تگ تصاویر در HTML ویژگی loading=”lazy” را اضافه کنید. به این صورت:

توی باکس نوشته بشه مثل کد

این کد به مرورگر می‌گوید که تصویر را تنها زمانی بارگذاری کند که کاربر به آن بخش از صفحه برسد. اکثر مرورگرهای مدرن از این ویژگی پشتیبانی می‌کنند.

نقشه تصاویر (Image Sitemap)

اگر سایت شما تصاویر زیادی دارد، از یک نقشه سایت (Image Sitemap) استفاده کنید تا به موتورهای جستجو کمک کنید تصاویر را بهتر ایندکس کنند.

ریسپانسیو بودن تصاویر

اطمینان حاصل کنید که تصاویر برای دستگاه‌های مختلف (دسکتاپ، موبایل، تبلت) بهینه شده‌اند.

از ویژگی srcset در HTML استفاده کنید تا تصاویر با سایز مناسب برای هر دستگاه نمایش داده شوند.

ویژگی srcset چه کاربردی دارد؟

ویژگی srcset در HTML به شما این امکان را می‌دهد که تصاویر را به صورت ریسپانسیو برای دستگاه‌ها و رزولوشن‌های مختلف ارائه دهید. این ویژگی به مرورگر می‌گوید که کدام تصویر را بر اساس اندازه نمایشگر و دقت پیکسل انتخاب کند. استفاده از srcset باعث می‌شود که تصاویر بهینه‌تر و سریع‌تر بارگذاری شوند.

نحوه استفاده از ویژگی srcset برای ریسپانسیو عکس ها در سایت

در تگ<<img:

از ویژگی srcset در تگ <img> برای مشخص کردن چندین منبع تصویر استفاده کنید. به این صورت:

>img

src=”image-800w.jpg”

srcset=”image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w”

sizes=”(max-width: 600px) 100vw, 50vw”

alt=”Description of the image”>

src: تصویر پیش‌فرض برای مرورگرهایی که از srcset پشتیبانی نمی‌کنند.

Srcset: لیستی از تصاویر و اندازه‌های آن‌ها به همراه عرض‌های مشخص شده (به پیکسل).

Sizes: اندازه تصویر را بر اساس عرض صفحه نمایش یا شرایط مختلف تعریف می‌کند. برای مثال، (max-width: 600px) 100vw به این معنی است که اگر عرض صفحه نمایش کمتر از 600 پیکسل باشد، تصویر به عرض 100% صفحه نمایش (viewport width) تغییر اندازه داده شود.

استفاده از تصاویر اصلی و با کیفیت

تا حد امکان از تصاویر اصلی و غیر تکراری استفاده کنید. تصاویر منحصر به فرد بیشتر توجه موتورهای جستجو را جلب می‌کنند و احتمال دیده شدن شما در نتایج جستجو افزایش می‌یابد.

تست سرعت صفحات (Page Speed)

از ابزارهایی مانند Google PageSpeed Insights یا GTmetrix استفاده کنید تا مطمئن شوید تصاویر به درستی بهینه شده‌اند و سرعت صفحات تحت تأثیر قرار نگرفته است.

تطابق تصاویر با محتوا

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

بررسی تصاویر در جستجوی تصویری گوگل (Google Image Search)

بررسی کنید که تصاویر شما در Google Image Search به درستی ایندکس شده‌اند. برای این کار می‌توانید از ابزار Google Search Console استفاده کنید.

پشتیبانی از فرمت‌های جدید و مدرن (WebP):

اگر سایت شما از فرمت‌های جدیدتر مانند WebP یا AVIF پشتیبانی می‌کند، این فرمت‌ها را برای تصاویر به کار ببرید تا سرعت بارگذاری بهبود یابد.

در این مقاله سعی کردیم بر اساس تجربه خود و سئوکاران مختلف چک لیستی از سئوی تصاویر تهیه کنیم. امیدواریم نهایت استفاده را از این مقاله ببرید ما در رویا استودیو همواره در تلاش هستیم تا بهترین مشاوره ها را در رابطه با سئو به شما عزیزان ارائه دهیم .