22019286مشاوره رایگان طراحی سایت

هیچ اعلان جدیدی وجود ندارد

آخرین دوره های آموزشی
/
بهینه سازی سایت برای موبایل

بهینه سازی سایت برای موبایل

بهینه سازی سایت برای موبایل

سال 2014 آغاز شده و نزدیک به یک ماه از آن میگذرد، مقایسه آمارها و پیش بینی های انجام شده نشان میدهد بهینه سازی سایت برای موبایل در این دوران به یکی از مهمترین فاکتورهای موفقیت تبدیل خواهد شد. چرا؟ در ادامه این مقاله به بررسی تاثیر تلفن های هوشمند و گجت ها در ادامه راه سئو در سال 2014 خواهیم پرداخت.

اهمیت توجه به تلفن های هوشمند

یک ایده اشتباه در میان برخی طراحان سایت و کارشناسان سئو وجود دارد که میگویند:

چیزی بعنوان بهینه سازی سایت برای موبایل وجود ندارد، زیرا مرورگرهای متناسب آنها و تکنولوژی های استفاده شده هر روز در حال تغییر هستند پس امکان بهینه سازی و سئو بر روی دستگاه های هوشمند نیست!

بهینه سازی سایت برای موبایل

سه دلیل اصلی جهت بهینه سازی سایت برای موبایل و تبلت میتوان ذکر کرد:

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

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

نظر گوگل درباره بهینه سازی سایت برای موبایل

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

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

پذیرایی مجزا یا Dynamic Serving روش پیشنهادی دوم از طرف گوگل برای بهینه سازی نسخه موبایل سایت است. در این روش کدهای HTML نمایش داده شده به کاربران با توجه به نوع دستگاه مورد استفاده تفاوت میکند و شما برای انجام این کار نیازمند کدنویسی های پیشرفته و متناسب در هدر سایت خود خواهید بود.

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

نکته ای که در پایان باید به آن اشاره کنیم آن است که اگر شما روش طراحی سایت رسپانسیو را انتخاب کرده و همه مراحل بهینه سازی سایت برای موبایل را بخوبی طی نمودید، باید از درک گوگل نسبت به تلاش های خود مطمئن شوید. برای اینکار نباید دسترسی روبات های گوگل به فایل های CSS و Javascript سایت خود را محدود کرده باشید تا قادر به تشخیص رسپانسو بودن سایت شما باشند.

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

Review: 4.3 - "بهینه سازی سایت برای موبایل" by , written on 24/01/2014

بهینه سازی سایت برای موبایل سال 2014 آغاز شده و نزدیک به یک ماه از آن میگذرد، مقایسه آمارها و پیش بینی های انجام شده نشان میدهد بهینه سازی سایت برای موبایل در این دوران به یکی از مهمترین فاکتورهای موفقیت تبدیل خواهد شد. چرا؟

پرسش و پاسخ تکمیلی با عضویت در سایت پاسخ به نظرات خود را به راحتی دنبال کنید
1 Star2 Stars3 Stars4 Stars5 Stars
31
  • احسان

    سلام
    آیا در وردپرس برای بهینه سازی موبایل نیاز هست که ” فونت‌های بزرگ تری را برای مشاهده بهتر در نسخه موبایل استفاده کنیم” یا نه؟ (اگر جواب مثبت است چگونه این کار را انجام بدهیم؟)

    05/10/2017پاسخ...
    • Websima

      به طور کلی پیشنهاد میشود که خوانایی سایت در نسخه های موبایل مورد توجه باشد زیرا گوگل به خوبی این موضوع را درک کرده و در تعیین جایگاه شما در نتایج موبایل تاثیر میدهد. برای انجام این کار نیاز به دانش CSS و آشنایی با دستورات آن دارید.

      09/10/2017پاسخ...
  • آموزش سخنرانی

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

    23/12/2016پاسخ...
    • Websima

      سلام دوست عزیز
      خوشحالیم که مورد توجه شما قرار گرفته

      23/12/2016پاسخ...
  • سئو

    سلام.وبسایت خیلی خوبی دارید.ممنون

    21/12/2016پاسخ...
  • محسن

    سلام
    وقتی سایتم رو با woorank آنالیز میکنم، در بخش موبایل پیغام میده که فایل های جاوا و CSS بهینه نشده، در صورتی که تمام این فایلها مینیفای شده و مشکلی در خود فایل وجود نداره. سوالم اینجاست که چطوری میتونم برای موبایل هم بهینه سازی بکنم؟ لازم به ذکره که سایت ریسپانسیو هستش و از مدیا استفاده شده در استایل سایت.

    14/08/2016پاسخ...
    • Websima

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

      14/08/2016پاسخ...
  • علی

    با سلام مجدد
    یک سوال دیگر : هر دستگاهی که عرضش از 980px کمتر باشه به نسخه موبایل ریدایرکت میشه. این مورد مشکلی نداره ؟
    یعنی شاید بعضی نوت بوک ها عرضشون کمتر از 980 پیکسله به نسخه موبایل برن که ریسپانسیو هست.
    سوال دیگه این که از کجا باید فهمید که گوگل نسخه دسکتاپ و موبایل رو مجزا نمیشناسه؟ تشکر

    27/02/2016پاسخ...
    • Websima

      با سلام
      باید همونطور که در عرض کمتر از 980 نسخه دسکتاپ به موبایل منتقل میشه در بیشتر از آن نیز نسخه موبایل به دسکتاپ منتقل گردد. بهترین راه این است که شما از vary در http header خود استفاده کنید. برای اطلاعات بیشتر پیشنهاد میکنم مقاله Vary: User-Agent header را مطالعه کنید.

      28/02/2016پاسخ...
  • علی

    سلان
    من از 19 فوریه نسخه موبایل سایت رو راه اندازی کردم. به روش سوم ( m.example.com ) البته. می خوام اگه ممکنه دو نسخه دسکتاپ و موبایل رو بررسی کنید که مشکلی داره یا نه. یعنی درست ریدایرکت میشن؟
    بهتره 301 باشه یا 302 ریدایرکت ها ؟
    گوگل دو سایت می شناسه اونا رو یا خیر ؟
    ممنون میشم پاسخ بدید. تشکر

    24/02/2016پاسخ...
    • Websima

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

      25/02/2016پاسخ...
  • مصطفی

    سلام ببینید این معیار خوبی است:
    اگر ما یک قالب داشته باشیم چهار ستونه مثلا اینطوری تقسیم بندی کنیم چطوره است؟
    از روزولوشن 1600 تا 1024 تمام گرید ها و ستون ها حفظ شوند.
    از روزولوشن 1024 تا 800 اولین ستون سمت چپ به پایین منتقل شود.
    و از روزولوشن 800 به پایین هم دو ستون سمت چپ پایین برود.
    یا نه ؟
    معیار با در نظر گرفتن روزولوشن به ما می فرمائید؟

    09/02/2015پاسخ...
    • وب سیما

      سلام
      بنظر خوب میاد ولی از 480 به پایین هم میتونید تک ستونه کنید. پیشنهاد میکنم از گریدبندی Bootstrap برداشت کنید

      12/02/2015پاسخ...
  • کانون مشاوران

    بسیار عالی بود

    20/05/2014پاسخ...
  • امین

    لطفا درباره قابلیت های بوت استرپ که می تونه در این زمینه کمک کنه آموزش هایی رو منتشر کنین !
    ممنون

    07/02/2014پاسخ...
    • وب سیما

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

      08/02/2014پاسخ...
  • مهدی

    واقعا عالی بود اما خوب در ایران هنوز صرف نمی کنه خیلی ها هنوز گوشی های هوشمند ندارنند.
    موفق باشید

    07/02/2014پاسخ...
    • وب سیما

      اتفاقا همین الان باید به فکر باشید وقتیکه به نیاز تبدیل بشه و بخواید تازه کار رو یاد بگیرید یا راه اندازی کنید به مشکل میخورید

      07/02/2014پاسخ...
  • طراحی وب سایت خبری

    سلام دستتون درد نکنه، خیلی جالب بود.

    29/01/2014پاسخ...
    • وب سیما

      سلام دوست عزیز، خواهش میکنم. موفق باشید

      29/01/2014پاسخ...
  • mohammad

    ممنون خیلی جالب بود
    من شخصا به اعتقاد نداشتم که افراد زیادی با گوشی کار کنند ولی این مطلب نظرم را عوض کرد

    25/01/2014پاسخ...
    • وب سیما

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

      26/01/2014پاسخ...
      • mohammad

        میشه یک آمارگیر خوب معرفی کنید
        ممنون میشم

        26/01/2014
        • وب سیما

          آمارگیری که خودمون استفاده میکنیم به نظرم خوبه و امکانات زیادی هم داره. میتونید از بخش امور مشتریان تیکت بزنید و درخواست آمارسیما رو بدید. البته با توجه به اینکه سرور اختصاصی برای این آمارگیر داریم و برای حفظ سرعت و کیفیت بصورت عمومی ارائه نمیدیم هزینه ماهیانه داره. میتونم 2 ماه اکانت رایگان براتون بسازم تا اگر امکاناتش رو مناسب دونستید در آینده تمدید کنید.

          27/01/2014
  • حمیدرضا حیدری

    تشکر بابت پاسخگویی سریعتون همونطور که فکر می کردم درسته من از سایت شما چیزهای زیادی یاد گرفتم توی جشنواره وب ایران هم بهتون رای مثبت دادم امیدوارم همیشه موفق باشید…

    25/01/2014پاسخ...
    • وب سیما

      مرسی دوست عزیز، شما لطف دارید به وبسیما

      25/01/2014پاسخ...
  • حمیدرضا حیدری

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

    25/01/2014پاسخ...
    • وب سیما

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

      25/01/2014پاسخ...
  • مازندلیگ

    ممنون، خیلی مفید و جالب بود، فقط اگه میشه آموزش رسپانسیو رو با جزئیات بزارید

    25/01/2014پاسخ...
  • امین خادمیان

    این موضوع خیلی اهمیت داره , من به شخصه از طراحس ریسپانسیو بیشتر استفاده می کنم ! تکنولوژی Modernizr هم میتونه به این موضوع کمک کنه .
    آموزش این سه روشی رو که گفتین منتشر می کنین ؟ ( امیدوارم این طور باشه !! )

    25/01/2014پاسخ...
    • وب سیما

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

      25/01/2014پاسخ...
ورود رمز عبور خود را فراموش کرده اید؟
ارسال قبلا ثبت نام کردید؟
ثبت نام قبلا ثبت نام کردید؟