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

بخش: خانه بهینه سازی موتورهای جستجوگر 181 بار مشاهده شده چهارشنبه ۱۳ دی ۹۶ 0 نظر ارسال شده
بهینه سازی موبایل

بهینه سازی موبایل یا Mobile optimization برای بازدید کنندگانی که از طریق دستگاه های تلفن همراه به سایت شما دسترسی دارند، یک تجربه بهینه برای دستگاه را فرآهم می آورد.

بهینه سازی موبایل چیست؟

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

بهترین روش های SEO موبایل

اگر سایت شما در حال حاضر به خوبی برای موتورهای جستجو بهینه شده است، تنها چند نکته اضافی لازم است که باید در هنگام بهینه سازی برای تلفن همراه آن ها را در نظر بگیرید.

سرعت صفحه

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

عدم مسدود نمودن CSS ، جاوا اسکریپت یا تصاویر

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

طراحی سایت برای موبایل

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

از فلش استفاده نکنید

این افزونه ممکن است بر روی گوشی کاربر شما قابل دسترس نباشد، به این معنا است که تمام لذت ها از دست می رود. اگر می خواهید جلوه های ویژه ایجاد کنید، از HTML5 استفاده نمایید.

 از پاپ آپ ها نیز استفاده نکنید

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

طراحی برای انگشت بزرگ

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

بهینه سازی عناوین و متا توضیحات

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

از داده های ساختاری Schema.org استفاده کنید

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

 بهینه سازی برای جستجوی لوکال

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

 پیکربندی سایت موبایل

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

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

mobile pros and cons

طراحی وب سایت ریسپانسیو

سایت های طراحی شده به ریسپانسیو از media queryهای CSS3 استفاده می کنند تا بتوانند محتوای مشابه را با استفاده از یک fluid grid و طراحی انعطاف پذیر به طور خودکار به اندازه صفحۀ مورد استفاده کاربر  انطباق دهند.

responsive design testing

طرح های ریسپانسیو از کوئری رسانه ای استفاده می کنند تا طرح بندی را براساس عرض صفحه، جهت گیری و وضوح صفحه تعیین نمایند. به عنوان مثال، می توانید از CSS زیر برای  نحوه نمایش محتوا در مرورگرها با صفحۀ420 پیکسلی یا کمتر استفاده کنید:

نمونه کد

@media screen and (max-width: 420px) {
  .class {
    [styles for this class here]
  }
}

به جای این که به یک صفحه جداگانه لینک بفرستید، HTML زیر را بین تگ هایخود قرار دهید:

نمونه کد

<link href="mobile.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>

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

خدمت پویا یا داینامیک

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

نمایش محتویات متفاوت براساس عامل کاربر، سرویس پویا یا داینامیک نامیده می شود و با استفاده از Vary HTTP Header  است که به صورت زیر انجام می شود:

Vary HTTP Header

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

مثال از وبلاگ توسعه دهندگان گوگل برداشته شده است. 

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

ممکن است خدمت داینامیک به نظر دارای سازش کامل نباشد. اما برای داشتن لیست به روز شده به عامل های کاربر متکی است، یعنی هر بار که یک دستگاه تلفن همراه جدید به بازار عرضه می شود، این لیست نیز باید به روز شود. همچنین برای دسکتاپ و دستگاه های تلفن همراه غیر معمول نیست که به اشتباه برای دستگاه دیگر با HTML خدمت نمایند.

 جدا کردن URL تلفن همراه

یکی دیگر از گزینه ها ایجاد سایت موازی برای کاربران تلفن همراه است. این کار به شما اجازه می دهد محتوای کاملا سفارشی ای را برای بازدیدکنندگان تلفن همراه خود ایجاد نمایید. بیشتر سایت های تلفن همراه موازی برای جلوگیری از سردرگمی URL از زیر دامنه "m" استفاده می کنند. 

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

همچنین باید نسبت به تغییر مسیر سایت و  کاهش سرعت صفحه دقت کرده و برای جلوگیری از مشکلاتی نظیر محتوای تکراری، "rel = "canonical را تنظیم کنید. 

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

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

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

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

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

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

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...