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

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

مشخصات مقاله

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

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

Mobile optimization guide

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

نحوه سئوی وب‌سایت برای موبایل

مشخصات یک وب سایت موبایل فرندلی (Mobile Friendly):

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

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

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

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

سئوی موبایل (Mobile SEO) یعنی بهینه سازی موبایل در موتورهای جستجو (Mobile Search Engine Optimization). حتی اگر الان یک وب سایت موبایل دارید (mobile site)، ممکن است از نظر گوگل بعنوان یک سایت موبایل شناخته نشود و این قضیه می تواند بر روی رتبه سایت تان در نتایج موتورهای جستجو بخصوص گوگل تاثیرگذار باشد.

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

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

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

وب سایت خود را برای موبایل بهینه کنید:

در این مقاله موارد زیر را تحت پوشش قرار می دهیم:

  • 1- انتخاب یک متد موبایل (mobile method)
  • 2- آپدیت کد وب سایت
  • 3- تائید موبایل فرندلی بودن (Verify mobile friendliness)
  • 4- اعلام کردن به گوگل
  • 5- بهینه سازی (Optimize)

 

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

1- انتخاب متد موبایل (mobile method)

4 راه اصلی وجود دارد تا یک وب سایت موبایل شود:

  • طراحی واکنش‌گرا (Responsive Design)
  • AMP
  • سرو کردن داینامیک (Dynamic Serving)
  • آدرس های موبایل (Mobile URLs)

 

انتخاب متد موبایل (mobile method)

طراحی واکنش‌گرا (Responsive Design):

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

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

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

2- آپدیت کد وب سایت:

این مرحله از آنچه که بنظر می رسد اغلب ساده تر می باشد. در CMS (Content Management System) یا سیستمهای مدیریت محتوا مانند وردپرس (WordPress) فقط کافیست یک قالب جدید تهیه و استفاده کنید. اگر وب سایت را خودتان طراحی و برنامه نویسی می کنید (مانند استفاده از تکنولوژی دات نت)، قالب های رایگان و ریسپانسیو زیادی وجود دارد که می توانید از آنها بعنوان تم سایت خود استفاده نمائید و یا اینکه خودتان یک قالب واکنش گرا را از پایه و ابتدا طراحی کنید. همچنین می توانید از فروشگاه های معتبر زیر، قالب های ریسپانسیو و موبایل فرندلی دلخواه خود را خریداری کنید:

 

آپدیت کد وب سایت

3- تائید موبایل فرندلی بودن (Verify Mobile Friendliness):

روشی که گوگل برای تشخیص موبایل فرندلی بودن یک وب سایت بکار می گیرد به موارد متعددی بستگی دارد که می توانید با مراجعه به آدرس https://varvy.com/mobile/ تمامی این فاکتورهای را در مورد وب سایت خود چک کنید. این فاکتورها عبارتند از:

 

تنظیمات Viewport

تنظیمات Viewport

اجتناب از نمایش تبلیغ

اجتناب از نمایش تبلیغ

استفاده از فونت خوانا

استفاده از فونت خوانا

عدم استفاده از پلاگین

عدم استفاده از پلاگین

کلیک آسان با انگشت

کلیک آسان با انگشت

اندازه محتوا با توجه به سایز Viewport

اندازه محتوا با توجه به سایز Viewport

 

توجه داشته باشید که حتما صفحات وب سایت خود را توسط ابزار “تست موبایل فرندلی بودن صفحه” (Google mobile friendly test) چک کنید.

Google mobile friendly test

4- اعلام به گوگل:

یکی از مهمترین مراحل بهینه سازی وب سایت برای موبایل اینست که اطمینان حاصل کنید که بات گوگل (Googlebot) وب سایت شما را می بیند و می تواند آنرا تفسیر کند. اگر Google نتواند Mobile Solution سایت شما را متوجه شود، به احتمال زیاد، گوگل اعتبار و امتیاز موبایل فرندلی بودن را برای سایت شما درنظر نخواهد گرفت. و این بد است!

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

هر کدام از چهار روش موبایل فرندلی کردن وب سایت (responsive, dynamic, AMP, separate URLs) راه مجزایی برای اثبات موبایل فرندلی به گوگل دارند:

1-4) ریسپانسیو دیزاین (Responsive Design):

وقتیکه سایت تان از طراحی واکنش‌گرا (responsive design) بهره می برد، بدون اینکه نیاز به کد اضافی و یا راهنمایی باشد، گوگل آنرا تشخیص می دهد. گوگل انتظار دارد وقتی وارد یک وب سایت واکنش گرا می شود، در ابتدا، تگ viewport را مشاهده کند. پیشنهاد گوگل برای تعریف این تگ بصورت زیر است:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ریسپانسیو دیزاین (Responsive Design)

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

کسب اطلاعات بیشتر درباره تگ Viewport و نحوه پیاده سازی آن

2-4) خدمات پویا (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 و نحوه تعریف آن

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

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

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

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

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

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

تگ های alternate و canonical:

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

  • برای تعریف تگ rel=”alternate” در نسخه دسکتاپ داریم:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >
  • برای تعریف تگ rel=”canonical” در نسخه موبایل داریم:
<link rel="canonical" href="http://www.example.com/page-1" >

 

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

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

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

کسب اطلاعات بیشتر درباره نحوه تنظیمات URL نسخه موبایل وب سایت

5- بهینه‌سازی (Optimization):

بهینه سازی برای موبایل (mobile optimization) که موضوع مورد بحث این مقاله است به بهینه سازی برای کاربران، موتورهای جستجو و همچنین جلوگیری از جریمه شدن توسط گوگل (Google Penalty) اشاره دارد.

1-5) سرعت صفحات موبایل (mobile page speed):

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

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

ابزار تست سئوی موبایل

برای تست سرعت صفحات وب سایت علاوه بر ابزار فوق، می توانید از ابزار Google Page Speed Insights نیز استفاده کنید تا متوجه شوید چه فاکتورهایی بر روی سرعت لود صفحات وب سایت تان تاثیر می گذارند.

یک وب سایت کند در دسکتاپ می تواند در دستگاه های موبایل کندتر هم باشد.

2-5) منابع بلاک شده صفحات (Blocked page resources):

اطمینان حاصل کنید که تمام فایل های css، js و تصاویر توسط ربات خزنده گوگل (Googlebot) قابل پیمایش باشد. درصورتی که برخی از resource های صفحات وب سایت شما بلاک باشند، گوگل تصویری ناقص از وب سایت شما دریافت می کند.

این مشکل معمولا زمانی رخ می دهد که فایل robots.txt بدرستی تنظیم و تعریف نشده باشد. ممکن است دستورات داخل فایل ربات طوری تعریف شده باشد که مانع دسترسی ربات های خزنده موتورهای جستجو به منابع یک وب سایت شوند.

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

پیام ها و تبلیغات پاپ‌آپ و modal:

نمایش پیغام های پاپ آپ (pop up) مثلا به منظور ثبت نام در خبرنامه و یا دانلود یک اپلیکیشن خاص و… در نمایشگرهای دسکتاپ می تواند به اندازه کافی متقاعدکننده باشد اما اینگونه پیغام ها و تبلیغات در موبایل می تواند تجربه بدی را برای کاربران به همراه داشته باشد. حتی گاهی اوقات نمی توان این پیام ها را در موبایل close کرد.

پیام ها و تبلیغات پاپ‌آپ و modal

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

پیشنهاد گوگل در اینگونه مواقع نمایش یک نوار باریک و یا بنر در بالا یا پایین اسکرین موبایل می باشد.

کسب اطلاعات بیشتر درباره نمایش پیغام پاپ آپ در موبایل

ریدایرکت‌های موبایل (Mobile Redirects):

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

کسب اطلاعات بیشتر درباره کاهش تعداد ریدایرکت ها در موبایل

ریدایرکت‌های موبایل (Mobile Redirects)

منبع: https://varvy.com

1/5 (1 نظر)

اطلاعات مقاله

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

فرم ارسال دیدگاه درباره

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

دیدگاه کاربران درباره

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

دیدگاهی وجود ندارد