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

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

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

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

شاخص هایی که در بهینه سازی سایت برای موبایل موثر است

مسدود نکردن CSS ، JavaScript و تصاویر

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

سرعت صفحه

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

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

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

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

 

استفاده از ساختار داده تعریف شده توسط schema.org

از آنجا که فضای صفحه نمایش محدود است ، نمایش نتیجه جستجو با rich snippets خیلی جالب تر خواهد بود . برای کسب اطلاعات بیشتر به سایت schema.org مراجعه کنید.

مختص شما:  نحوه بالا بردن سئو سایت

 

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

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

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

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

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

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

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

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

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

استفاده از فلش ممنوع

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

از pop-up استفاده نکنید

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

طراحی مناسب برای حرکت انگشت

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

طراحی مناسب برای حرکت انگشت
طراحی مناسب برای حرکت انگشت

طراحی ریسپانیو :

طراحی ساختار سایت به صورت ریسپانسیو و با استفاده از کدهای CSS3 باعث نمایش محتوای سایت به صورت مناسب و منعطف خواهد شد و سایز صفحه بصورت خودکار با سایز صفحه نمایش گوشی ها مطابقت خواهد داشت.

به عنوان مثال با استفاده از کدهای CSS زیر می توانید نمایش سایت در دیوایس های با عرض 420 پیکسل یا کمتر را بهینه کنید:

مختص شما:  سرچ کلمه کلیدی

@media screen and (max-width: 420px) {

     .class {

         [styles for this class here]

     }

}

و برای لینک کردن به یک استایل شیت مجزا، کد HTML زیر را بین تگ <head> سایت خود قرار دهید:

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

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

به منظور بهینه سازی (SEO)، طراحی ریسپانیو یک انتخاب هوشمندانه است:

  • توسط گوگل پیشنهاد شده است.
  • ریسکی برای سئو ندارد.
  • ساده ترین روش برای پیاده سازی است.
  • با سایر متدها تطابق دارد و سازگار است.

طراحی داینامیک :

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

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…)

طراحی داینامیک
طراحی داینامیک

بیشتر بخوانید:

خدمات پویا (Dynamic Serving):

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

گوگل نمی تواند بطور اتوماتیک متوجه شود وب سایت بصورت Dynamic Serving می باشد. بنابراین باید آنرا بصورت مشخص به گوگل بفهمانیم. روش فهماندن Dynamic Serving به گوگل، استفاده از Vary HTTP header می باشد:

Vary: User-Agent

 هدر vary HTTP به گوگل اعلام می کند محتوای صفحه ای که در حال پیمایش است با توجه به نوع دستگاه کاربر، می تواند متفاوت باشد. اگر وب سایت شما بصورت Dynamic Serving باشد اما توسط vary HTTP header این قضیه را به گوگل اعلام نکنید، احتمالا گوگل رتبه پایینی را به وب سایت تان اختصاص دهد زیرا موبایل فرندلی بودن سایت تان توسط گوگل تائید نشده است.

مختص شما:  انواع ریدایرکت

کسب اطلاعات بیشتر درباره vary HTTP user agent header و نحوه تعریف آن

آدرس‌های مجزا (Separate URLs):

اگر سایتی در نسخه موبایل خود URL متفاوت نسبت به دسکتاپ داشته باشد، این سایت ممکن است در بسیاری از مسائل مانند سئو (SEO) به مشکل برخورد کند.

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

آدرس‌های مجزا (Separate URLs):
آدرس‌های مجزا (Separate URLs)

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

  • ابتدا در نسخه دسکتاپ صفحات وب سایت خود یک تگ rel=”alternate” تعریف کنید که به نسخه موبایل آن صفحه اشاره کند. با این تعریف، باعث می شوید بات گوگل (Googlebot) نسخه موبایل صفحات وب سایت شما را بشناسد.
  • سپس در نسخه موبایل وب سایت، تگ rel=”canonical” را تعریف کنید که به نسخه دسکتاپ صفحات اشاره داشته باشد.

تگ های alternate و canonical:

نمونه ای از تعریف تگ های alternate و canonical بصورت زیر می باشد:

  • برای تعریف تگ rel=”alternate” در نسخه دسکتاپ داریم:

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”https://m.example.com/page-1″ >

  • برای تعریف تگ rel=”canonical” در نسخه موبایل داریم:

<link rel=”canonical” href=”https://www.example.com/page-1″ >

 

وقتی شما برای هر صفحه از وب سایت خود دو آدرس مجزا (Separate URL) دارید، باید برای گوگل مشخص کنید که کدامیک از این آدرس ها برای هر دستگاه مناسب می باشد.

تگ rel=”alternate” به گوگل می گوید درصورتی که سایز اسکرین کاربر از 640 پیکسل کوچکتر است (max-width:640px)، باید نسخه موبایل را به او نمایش دهد و به آن ارجاع دهد.

تگ rel=”canonical” که در نسخه موبایل تعریف می کنیم، به گوگل اعلام می کند که این صفحه ورژن دیگری از صفحه دسکتاپ می باشد.

کلیک کنید و رای بدهید
[Total: 2 Average: 5]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سئو چیست x بخوانید...