8 نکته مهم در بهینه سازی تصاویر در سئو

1396/8/19 علیرضا حاتمی نیا 386

optimize images

در قدیم و زمانی که سرعت اینترنت بسیار کم بود و اینترنت با اتصال Dial-up صورت می گرفت، کاربران مجبور بودند برای بارگزاری کامل یک تصویر چند دقیقه صبر کنند و به همین خاطر بود که از تصاویر به ندرت در صفحات وب استفاده می شد و استفاده از تصاویر در صفحات وب به شکل الان مورد توجه مدیران تجاری وبسایت ها قرار نمی گرفت. اما اکنون و با افزایش چشمگیر سرعت دانلود و آپلود اینترنت تصاویر نقش مهم و کلیدی را در افزایش بازدیدکنندگان وبسایت بازی می کنند. موتورهای جستجو مخصوصا گوگل نیز توجه بسیاری به تصاویر استفاده شده در صفحات وب نشان می دهند. 
لزوم استفاده از تصاویر در وب زمانی که مدیر یک فروشگاه آنلاین باشید بیش از پیش احساس می شود. تصویر یک محصول اگر به صورت بهینه انتخاب شود در نمایش تصاویر در Google Images رتبه بهتری خواهد داشت و کاربران را به سمت وبسایت شما نیز هدایت می کند. 
اما چه نکات و تکنیک هایی برای بهینه سازی تصاویر در SEO وجود دارد؟ 
در ادامه این مقاله قصد داریم تا شما را با تکنیک هایی بسیار ساده و در عین حال کاربردی جهت انتخاب و به کارگیری تصاویر در وب آشنا کنیم.

1- تصاویر را به صورت توصیفی و به زبان انگلیسی نام گذاری کنید

یکی از مهمترین نکات جهت بهینه سازی تصاویر برای موتورهای جستجو "انتخاب نام مناسب برای تصاویر" می باشد. شاید از خود اینگونه سوال کنید که انتخاب نام تصویر چگونه به بالا رفتن بازدیدکننده وبسایت من کمک می کند؟ 
موتورهای جستجو هنوز آنقدر باهوش و پیشرفته نشده اند که بتوانند تصویر شما را آنالیز کرده و تشخیص دهند که تصویر شما دقیقا بیانگر چه چیزی می باشد. موتورهای جستجویی مانند گوگل توسط هوش مصنوعی و الگوریتم های پردارنده خود تصاویر شما را پیکسل به پیکسل بررسی می کنند و می توانند تصاویر شبیه به آن را تشخیص دهند اما هیچ گاه نمی توانند بررسی کنند که این تصویر دقیقا چه چیزی را عنوان می کند. بنابراین خزنده های موتورهای جستجو توجه ویژه را به نام فایل شما می کنند تا دقیقا متوجه مفهوم تصویر شوند. بنابراین حتما بایستی از کلمه های کلیدی با ارزش و مرتبط با تصویر خود که توسط کاربران جستجو می شوند استفاده نمایید.

برای نام گذاری تصاویر به این نکات دقت کنید:

  • حتما از عبارات انگلیسی برای نام گذاری تصویر خود استفاده کنید.
  • از وارد کردن فاصله (space) بین حروف پرهیز کنید و به جای فاصله از کاراکتر dash (-) استفاده کنید. (مانند yellow-car.jpg)
  • از کلمات کلیدی و مهم در نام تصویر استفاده کنید
برای مثال فرض کنید تصویری از یک خودروی L90 مدل 91 و به رنگ سفید را برای نام گذاری انتخاب کردیم. 

L90 white Irankhodro 96

بهترین نامی که می توان برای این تصویر انتخاب کرد کلماتی هستند که توسط کاربران جستجو می شوند و مترجم گوگل آن را ترجمه می کند:
  • L90 white 91 irankhodro
  • White irankhodro L90 91
  • Irankhodro L90 whte 91
برای کسب اطلاعات بیشتر میتوانید این Q&A را در سایت Moz.com مطالعه کنید. انتخاب نام مناسب برای تصاویر می تواند بازدیدکنندگان وبسایت شما را به صورت قابل توجهی افزایش دهد.

2- صفت alt در تگ <img> را هوشمندانه بهینه کنید

صفت alt که مخفف عبارت "text alternative" به معنی "جایگزین متن" است و برای این منظور ایجاد شده است که هنگامی مرورگر نتواند تصویر را بارگزاری کند و یا مشکلی به هر دلیلی برای نمایش تصویر ایجاد شد، این متن به جای تصویر نمایش داده می شود. 
موتورهای جستجو نیز توجه ویژه ای به کلمات استفاده شده در خصوصیت alt در تگ <img> می کنند. استفاده از کلمات کلیدی جهت توصیف تصویر در alt می تواند موتورهای جستجو را متوجه مفهوم تصویر شما کند و به این ترتیب تصویر شما رنک بهتری گرفته و کاربران زیادی را به سمت صفحه وب شما هدایت می کند.
شکل صحیح استفاده از alt برای مثال بالا به شکل زیر است

optimize images alt tag

برای استفاده از alt به نکات زیر توجه کنید

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

3- استراتژی های ابعاد و زوایای مختلف تصویر

طراحان در طراحی های جدید تنها یک تصویر از محصول را نمایش نمی دهند. بلکه ابعاد و زوایای مختلفی از تصویر را به منظور ترغیب مشتری به خرید به او نمایش می دهند. در مثال بالا تصاویر مختلفی در زوایای گوناگون از داخل و بیرون خودرو L90 را در نظر بگیرید. بهترین روش برای نام گذاری و انتخاب عبارت alt در تصویر به شکل زیر می باشد. مثلا اگر از زاویه داخل ماشین تصویری داریم می توانیم به اصلاح روکش چرمی صندلی اشاره کنیم و یا به ویژگی خاصی که در تصویر اشاره شده نیز اشاره کنیم: 
نام تصویر :  L90-white-91-irankhodro-Leather-Interior-Trim.jpg
متن alt : L90 white-91 irankhodro Leather Interior Trim
توجه کنید که هم به نام و مشخصات کلی خودرو اشاره کردیم و هم ویژگی خاصی که تصویر از آن دارد نیز اشاره شده است.

4- عدم استفاده از تصاویر با حجم بالا

بسیار به حجم تصویر خود دقت کنید. تصاویر با حجم بالا سبب کند شدن سایت شما می شود و این موجب جریمه شدن از سوی موتورهای جستجو و نیز ترک زود هنگام کاربر از وبسایت شما می شود.
می توانید توسط ابزارهای گرافیکی و ابزارهای آنلاین حجم تصویر خود را بدون افت کیفیت پایین بیاورید.
یکی از این ابزارهای گرافیکی که تقریبا همه از ان استفاده می کنند نرم افزار photoshop است. شما از طریق گزینه file و با انتخاب save as for web می توانید حجم تصاویر خود را پایین بیاورید. 
همچنین ابزارهای آنلاین زیادی مانند TinyPNG  یا  Compress JPEG به پایین آوردن حجم تصاویر شما کمک می کنند.

5- از  فرمت های رایج و استاندارد تصویر استفاده کنید

بعد از انتخاب تصویر مورد نظر حتما از فرمت های رایج و استاندارد جهت نمایش تصویر استفاده کنید. در کل 3 فرمت رایج و محبوب در وب مورد استفاده قرار می گیرند که عبارتند از jpg,png,gif

تفاوت بین فرمت های jpg,png,gif

Jpg : امروزه این فرمت بیشترین استفاده را در بین عموم دارد. JPG از فشرده سازی داده ها برای نمایش تصویر استفاده می کند. این تنها فرمتی می باشد که کیفیت تصویر را با توجه به حجم پایین آن نگه می دارد. همچنین این فرمت قابلیت بارگزاری چند مرحله ای را دارد و البته مانند فرمت های png و gif از تصویر زمینه transparent پشتیبانی نمی کند. 
GIF: فرمت تصویری bitmap است که بیشتر برای نمایش انیمیشن استفاده می شود. موتورهای جستجو توجه خاصی را به استفاده از این فرمت در صفحه دارند. البته باید مراقب باشید که حجم انیمیشن تولید شده زیاد نشود تا بارگزاری صفحه شما کند نشود. حجم کم تصاویر با فرمت GIF و همچنین پشتیبانی از زمینه transparent طراحان را ترغیب به طراحی لوگو و آرم با این فرمت کرده اند. 
PNG : مدرنترین فرمت جایگزین برای JPG و GIF فرمت PNG می باشد که از طیف رنگی بهتری استفاده می کند. PNG همچنین از از زمینه transparent نیز پشتیبانی می کند. این فرمت حتی می تواند یک توضیح متن کوتاه از محتوای تصویر را برای کمک به موتورهای جستجو جهت دسته بندی تصاویر در خود ذخیره کند. البته توجه داشته باشید که تصاویر با این فرمت کمی حجیم تر هستند.

6- از سایتهای آپلود عکس جهت آپلود تصاویر استفاده نکنید

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

7- برای تصاویر خود تصویر بند انگشتی بسازید

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

ویژگی های تصویر بند انگشتی

تصویر بند انگشتی را حتما تا حد امکان در سایز پایین و کم حجم انتخاب کنید. برای ساخت تصویر بند انگشتی با کیفیت و سایز کم می توانید از نرم افزار ویرایش عکس photoshop استفاده کنید و یا از ابزارهای آنلاینی مانند Pixlr، PicMonkey و Fotor نیز بهره مند شوید. نرم افزار رایگان دیگری نیز به نام GIMP وجود دارد که تقربا همان کار فتوشاپ را با محیطی کاربرپسندتر انجام می دهد.
 

8- برای تصاویر خود Sitemap تهیه کنید

نقشه سایت یا sitemap این امکان را به شما می دهد تا تمام تصاویر سایت خود را لیست کرده و در یک محل قرار دهید. این به موتورهای جستجو این امکان را می دهد تا تصاویر بیشتری از سایت شما کشف کنند و در نتایج جستجوی کاربران به آنها ارائه کنند.
از طریق یک فایل "image-sitemap.xml" می توانید گوگل را از تمامی تصاویر موجود در سایت خود همراه با نام و توصیفات خصوصیت Alt مطلع کنید. با این کار خزنده های گوگل تمامی تصاویر سایت شما را که تاکنون کشف نکرده اند را پیدا و ذخیره می کنند. 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت