بهینه سازی تصاویر برای موتور های جستجوگر


بهینه سازی تصاویر موتور جستجوگروقتی به آمار ترافیک وبلاگ خودم نگاه می کردم در بخش کاربران ورودی از موتورهای جستجوگر به نکته جالبی برخورد کردم و نکته این بود که بیش از 2 درصد ترافیک ورودی به این وبلاگ توسط جستجوهایی بود که توسط بازدید کنندگان در بخش جستجوی تصاویر گوگل و دیگر موتورهای جستجوگر تصویر انجام شده بود. به همین خاطر در این مطلب از آی تی گشت به معرفی روش هایی برای اینکه تصاویری که در سایت یا وبلاگ خود از آن استفاده می کنیم در موتورهای جستجوگر در رتبه های بالا قرار بگیرند و ترافیک خوبی از این طریق جذب بکنیم می پردازیم و البته در بحث های مربوط به SEO حتماً تا کنون مطالبی را در این باره خوانده اید.

بهینه سازی تصاویر برای چه کسانی مفید است ؟

آیا می دانید برای بهینه سازی هر تصویری که در مطالب سایت یا وبلاگ خود از آن استفاده می کنید معمولاً فقط 3 تا 4 دقیقه زمان لازم است ؟ اما خیلی از مدیران وب سایت ها از ترافیک بازدید کنندگانی که از این منظور می توانند برای سایت خود کسب کنند بی خبر هستند و حتی اگر نیازی به جذب ترافیک از این طریق ندارید با بهینه سازی تصاویر و طریقه درست نمایش آن ها در سایت یا وبلاگ خود می توانید مطالب با کیفیت تری برای موتور های جستجوگر و بازدید کنندگان خود ایجاد کنید و به استاندارد بودن صفحات شما کمک بسیار زیادی می شود. اما چند نمونه از کاربردهای استفاده از ترفند های بهینه سازی تصاویر برای موتورهای جستجوگر تصویر را در زیر بیان می کنم.

1. سایت های فتوبلاگ / گالری تصاویر : تا چه حد آدرس اینترنتی سایت یا وبلاگ شما در اینترنت بین کاربران ترویج داده شده است ؟ آیا فکر نمی کنید با استفاده از موتورهای جستجو تصویر که بسیاری از کاربران اینترنت با آن ها آشنایی دارند مثل Google Image , Yahoo Image و Bing Image می توانید عکس ها و تصاویر خود را برای بازدید کنندگان خیلی بیشتری به نمایش بگذارید.

2. سایت های فروشگاه / فروش آنلاین / بازاریابی : فکر می کنید روزیانه چند نفر که قصد خرید یک گوشی موبایل جدید برای خود را دارند برای دیدن تصویر گوشی های مختلف از ابزارهای جستجوگر تصویر موتورهای جستجو استفاده می کنند ؟ فکر نمی کنید اگر آن تصویر در سایت فروشگاه آنلاین شما از طرف موتورهای جستجوگر به کاربر نشان داده شود کاربر از اینکه شما به صورت آنلاین , قیمت مناسب , روش پرداخت ساده , روش تحویل مناسب و … این محصول را به فروش می رسانید آگاه می شوند. به نظر شما چند درصد از این افراد از شما خرید می کنند ؟ چند درصد از آن ها مشتری ثابت شما می شوند ؟

3. سایت های عرضه وکتور / گرافیک / آیکون : هیچ می دانستید بسیاری از افراد برای پیدا کردن تصاویر مختلف گرافیکی مثل من از موتورهای جسنجوگر استفاده می کنند تا همیشه بهترین ها را پیدا بکنند ؟ اگر تنها یک بار مثلاً پک آیکونی این کاربران از سایت شما دریافت کردند آدرس سایت شما به یادشان نمی ماند ؟

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

5. سایت های معرفی نرم افزار / دانلود / به اشتراک گذاری فایل : بسیاری افراد برای دریافت تصاویر پیش نمایش نرم افزار های مختلف و آشنایی با محیط کاری آن ها از موتورهای جستجوگر تصویر استفاده می کنند. آیا اگر این تصاویر پیش نمایشی را در صفحات وب شما ببینند شما ممکن است که دنبال کننده های بیشتری داشته باشید ؟

6. سایت های دیگر : همانطور که در اول متن گفتم این روش برای این وبلاگ که سعی می کند آی تی نویس باشد نیز ترافیک بیشتری کسب می کند پس هر سایت دیگری می تواند از این ترفند ها استفاده کند.

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

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

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

نام فایل تصویر : یکی از آیتم های موثر در کسب رتبه بهتر تصاویر سایت ما در موتورهای جستجوگر نام فایل های تصویری است برای مثال نام «Nokia-N8-back-view.jpg» برای تصویر که در آن گوشی نوکیا N8 از نمای پشت نمایش داده می شود خیلی بهتر از نام «Nokia.jpg» است. همچنین پیشنهاد می کنم از حروف انگلیسی در نام فایل های خود استفاده کنید و بجای فاصله و زیرخط ( _ ) در بین کلمه های نام فایل از ( – ) استفاده کنید.

فرمت ( نوع ) فایل تصویری : هر تصویر در سیستم های کامپیوتری با ساختاری خاصت ذخیره سازی می شود و برای نمایش آن با توجه به فرمت این فایل می توان این تصاویر را نمایش داد. اما هر تصویر با توجه به ابعاد , تعداد رنگ , متحرک یا ثابت بودن , حالت پس زمینه شفاف ( Transparent ) و … بهتر است با یکی از این فرمت ها ذخیره سازی شوند. اما پیشنهاد می کنم به صورت پیش فرض از فرمت Jpg برای تصاویر خود استفاده کنید چون در این فرمت نسبت حجم به کیفیت نسبت خوبی است و از حالت جلو رونده ( Progressive ) پشتیبانی می کند که حتماً نومنه آن را در بسیاری از صفحات وب دیده اید که تصویر ابتدا با کیفیت پایین بارگذاری می شود و سپس مرحله مرحله کیفیت تصویر بالا می رود. همچنین تصاویری که از فرمت Jpg استفاده می کنند معمولاً از دید موتور حستجوگر تصویر , تصاویری با کیفیتی حساب می شوند. همچنین اگر تصاویر شما متحرک نیست از فرمت PNG به جای فرمت gif استفاده کنید چون این نوع فایل ها مانند فرمت gif از پس زمینه شفاف پشتیبانی می کنند و از لحاظ کیفیتی بهتر هستند.

حجم فایل های تصویری : برای حجم فایل های تصویری که در صفحات وب خود قرار می دهید فقط این را می گویم که سعی کنید از تصاویر با حجم معمول استفاده کنید و البته هر چقدر خجم تصویر شما پایین تر باشد صفحات وب شما زودتر بارگذاری می شود و هم از لحاظ بازدید کنندگان و هم از لحاظ موتور های جستجوگر صفحات شما , صفحات بهتر و با کیفیت تری شناخته می شود. اما برای کاهش حجم تصاویر می توانید از سرویس رایگان یاهو به نام Yahoo Smush.it برای کاهش حجم تصاویر خود به صورت شگفت انگیزی استفاده کنید که با کمترین افت کیفیت بیشترین مقدار از حجم فایل های شما کاسته شود. اگر مثل من از سیستم وردپرس برای انتشار وبلاگ خود استفاده می کنید می توانید از افزونه Smush.it WP plugin استفاده کنید تا تصاویر شما بعد از آپلود توسط وردپرس به صورت اتوماتیک با این سرویس یاهو بهینه سازی شوند.

ابعاد تصویر : هیچ وقت از عکس هایی که توسط دوربین دیجیتال خود گرفته اید به صورت مستقیم در صفحات وب خود استفاده نکنید که دلیل آن را پایین تر عرض می کنم مثلاً اگر عکس شما در حالت پیش فرض با ابعاد 3000 در 2000 پیکسل است آن را توسط یکی از نرم افزارهای ویرایش تصویر مانند فتوشاپ به 600 در 400 تغییر دهید. همچنین بسیاری از موتورهای جستجوگر تصویر امکان شناسایی تصاویر تکراری را مثل جستجوگر تصویر گوگل دارند پس اگر از سایت دیگری تصویری را می خواهید در صفحات خود درج کنید یادتان باشد که چند پیکسلی تصویر را بزرگ یا کوچک کنید و نام آن را تغییر دهید.

بهینه سازی تصاویر در صفحات وب

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

استفاده مستقیم از تصاویر در صفحات وب : یادتان باشد تصاویری که توسط کدهای جاوااسکریپت بارگذاری می شوند و یا به عنوان پس زمینه در کدهای CSS ما انتخاب شده اند معمولاً از طرف ربات های جستجوگر تصویر موتورهای جستجوگر پیدا نمی شوند و باید تصاویر ما به صورت مستقیم در کدهای HTML فراخوانی شوند. برای مثال

<img src="https://itgasht.wordpress.com/image/Nokia-N8-back-view.jpg" />

استفاده از خاصیت Alt مناسب : خاصیت Alt که در کدهای HTML هر عکس جاسازی می شود در حقیقت متن جایگزین تصویر است تا در صورتی که کاربر به هر دلیلی قادر به دیدن تصویر در مرورگر خود نبود این متن بجای آن تصویر نمایش پیدا بکند. اما موتور های جستجوگر همانطور که می دانید تا کنون نمی توانند محتویات تصویر را تشخیص دهند و از اطلاعات موجود در این خاصیت به عنوان محتویات تصویر استفاده می کنند. برای مثال در زیر 5 نمونه استفاده از این خاصیت را بیان می کنیم. توجه داشته باشید که خط 1 و 2 ضعیف , خط 3 خوب , خط 4 عالی و استفاده از این خاصیت مانند خط 5 بدلیل استفاده بیش از حد طولانی موجب مسدود شدن نمایش تصویر شما در نتایج جستجو می شود. پس همیشه سعی کنید برای تصاویر موجود در صفحه وب خود مانند خط 4 , Alt نویسی کنید.

<img src="https://itgasht.wordpress.com/image/Nokia-N8-back-view.jpg" />
<img src="https://itgasht.wordpress.com/image/Nokia-N8-back-view.jpg" alt="" />
<img src="https://itgasht.wordpress.com/image/Nokia-N8-back-view.jpg" alt="گوشی نوکیا" />
<img src="https://itgasht.wordpress.com/image/Nokia-N8-back-view.jpg" alt="N8 تصویر گوشی نوکیا" />
<img src="https://itgasht.wordpress.com/image/Nokia-N8-back-view.jpg" alt="N8 تصویر گوشی نوکیا جدید حالت پشت زیبا ببینید ارزان قیمت و جادار خانه دار و بچه دار ..." />

مشخص کردن ابعاد تصویر : همان طور که در بخش بالا گفتم همیشه سایز تصاویر خود را به اندازه معمولی که به صفحات وب شما از لحاظ ظاهری مناسب است تغییر دهید و پیشنهاد می کنم برای بالا رفتن سرعت بارگذاری کلی صفحات وب خود از دو خاصیت طول و عرض استفاده کنید در کدهای HTML خود که برای نمایش تصویر از آن بهره می برید و هیچ وقت تصویری که 3000 در 2000 پیکسل است را توسط این خاصیت ها به یک تصویر 600 در 400 پیکسلی تغییر اندازه ندهید. پس برای نمایش تصویر «»Nokia-N8-back-view.jpg» خود که در ابعاد 600 در 400 پیکسل است به اینگونه کد می نویسیم.

<img src="https://itgasht.wordpress.com/image/Nokia-N8-back-view.jpg" alt="N8 تصویر گوشی نوکیا" height="400" width="600" />

محل قرار گیری تصویر در صفخات وب : موتورهای جستجوگر تصویر قابلیت خواندن متونی که در نزدیکی تصویر در صفخات وب ( بالاتر یا پایین تر از تصویر ) قرار دارند را برای کسب اطلاعات بیشتر در مورد تصاویر شما دارند. پس برای مثال تصویر گوش نوکیا را ( که در این مطلب برای نمونه روی آن کار می کنیم ) در قسمتی از صفحه نمایش دهید که در نزدیکی توضیحاتی باشد که در مورد این گوشی موبایل داده اید.

لینک به تصویر : اگر می خواستید از یک لینک متنی برای نمایش تصویر استفاده کنید بهتر است بجای استفاده از متن برای مثال » اینجا کلیک کنید » از متن » نمایش تصویر گوشی نوکیا N8 » استفاده کنید خاصیت title که نشانگر عنوانی است که با قرار گرفتن موس بر روی آن لینک نمایش داده می شود آن لینک را مثل خاصیت Alt در نمایش تصاویر با کلمات کلیدی خوبی جایگزین کنید.

استفاده از نقشه سایت تصویر گوگل : گوگل در قسمت پشتیبانی خود یک استاندارد جدید برای فایل های Sitemap.xml قرار داده است که می توانید برای معرفی تصاویر مهم به کار برده شده در صفحات وب خود با ساخت این فایل و معرفی آن به گوگل از طریق ابزار وبمستر گوگل به درست index شدن تصاویر خود در پایگاه داده های تصاویر گوگل کمک کنید. لازم به ذکر است در این فایل ها برای هر آدرس می توانید بالای 1000 تصویر را معرفی کنید اما به پیشنهاد گوگل فقط مهمترین تصاویر آن صفحه ( که معمولاً مربوط به متن آن صفحه می شود ) را در این فایل معرفی کنید. برای اطلاعات بیشتر به Google Specialized Sitemaps Images بروید.

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

همچنین بخوانید :
نظر دهی در وبلاگ ها و رابطه آن با SEO
چگونگی استفاده موثر از مطالب قدیمی وبلاگ خود
مردم چه چیزی از صفحات وب شما به یاد دارند ؟
برای ترویج سایت خود از pligg استفاده کنید

همچنین با دنبال کردن خوراک مطالب (?) آی تی گشت از آخرین مطالب با خبر شوید و یا با عضویت رایگان در خبرنامه آی تی گشت آخرین مطالب را در ایمیل خود بخوانید.

Advertisements

, , , , , , , , ,

  1. #1 توسط سعيد در 2010/11/26 - 11:35 ب.ظ.

    سلام..
    ممنون علي آقا..
    واقعا مفيد و كار آمد بود..مرسي از مطلبه خوبتون..
    موفق باشيد../.

  2. #2 توسط سامان در 2010/11/27 - 11:12 ق.ظ.

    نكات ريز و جالبی بودند

  3. #3 توسط encaria در 2010/11/27 - 2:30 ب.ظ.

    علی جان خوبه نکته های جالبی رو گفتی
    البته از اونجایی که من تنبلیم میاد تا alt و لینک و title رو بزنم این کار رو تو به تم سپردم تا اتوماتیک این کارو بکنه
    در مورد سرویس بهینه ساز عکس یاهو باید بگم به خاطر ناکارآمدی سیستم خوده وردبرس برای بهینه کردن حجم عکس من مجبور شدم تا برای نمایش عکسا از زمینه دلخواه استفاده کنم و برای هر پست سه عکس با سه ساز بسازم که این باعث شد تا سرعت لود برگه ها دوبرابر بشه و برای تم سنگین من خیلی لازمه ، سرویس یاهو را باید امتحان کنم چون این ضعف وردپرس رو پوشش میده و کار رو آسونتر می کنه

  4. #4 توسط علیرضا حسینی در 2010/11/29 - 11:53 ب.ظ.

    در این قسمت «استفاده از خاصیت Alt مناسب» نکته‌ی جدیدی یاد گرفتم. اینکه متن نه زیاد کوتاه و نه خیلی طولانی باشه. البته شاید برخی دوستان با دیدن این کدها کمی گیج بشن، که بد نبود اشاره‌ای می‌کردین. مثلا قسمت ادیتور وبلاگ‌تون رو نشون می‌دادین و توضیح می‌دادین که وقتی در حالت بصیر (Visual) عکسی وارد می‌شه، اکثر این کدنویسی‌ها روش قرار می‌گیره، که این کدها رو می‌شه در حالت اچ.تی.ام.ال (HTML) در ادیتورها دید. پس قضیه اصلا پیچیده نیست

    • #5 توسط itgasht در 2010/11/30 - 12:40 ق.ظ.

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