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

شبیه ساز موبایل گوگل کروم

جهت استفاده از شبیه ساز موبایل مرورگر کروم، ابتدا با فشردن دکمه F12 در گوگل کروم، وارد محیط DevTools شوید و سپس با انتخاب آیکون موبایل و یا فشردن Ctrl+Shift+M در محیط ویندوز و Cmd+Shift+M در سیستم عامل مکینتاش، شبیه ساز موبایل کروم باز خواهد شد و می توان صفحه وب مورد نظر را در ابعاد یک گوشی موبایل، تبلت (با قابلیت انتخاب مدل گوشی و همچنین امکان نوشتن سایز مورد نظر در حالت Responsive) مشاهده نمود.
جهت آموزش دیباگ کردن صفحه با مرورگر گوگل کروم، به صفحه “آموزش شبیه ساز موبایل Google Chrome” مراجعه کنید.

مراحل دیباگ صفحه وب با استفاده از گوشی موبایل

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

مرحله 1: فعال کردن Developer options در دستگاه اندروید

Developer options در اندروید نسخه 4.1 به قبل به طور پیش فرض فعال است و از اندروید 4.2 به بعد، باید آن را به صورت دستی فعال کرد.

نکته: این آموزش بر اساس گوشی Nokia 7.1 با سیستم عامل اندروید تهیه شده است. احتمال دارد که گزینه Build number در مکان دیگری از تنظیمات گوشی وجود داشته باشد. برخی از دستگاه های اندرویدی مانند سامسونگ، ممکن است تنظیمات بیشتری نیاز داشته باشند.

برای انجام این کار ابتدا وارد قسمت About (درباره دستگاه) در تنظیمات گوشی اندروید شده و 7 مرتبه روی Build number (شماره ساخت) ضربه بزنید. سپس پیغامی مبنی بر You are now a developer! به شما نمایش داده خواهد شد.

فعال سازی Developer options در نسخه های مختلف اندروید

سیستم عامل اندروید 9 و بالاتر:

Settings > About Phone > Build Number

سیستم عامل اندروید 8.0.0 و اندروید 8.1.0:

System > About Phone > Build Number

سیستم عامل اندروید 7.1 و پایین تر:

Settings > About Phone > Build Number

مرحله 2: فعال کردن USB debugging در دستگاه اندروید

وارد منوی System در تنظیمات اندروید شوید و در Developer options گزینه USB debugging را فعال کنید.

فعال سازی USB debugging در نسخه های مختلف اندروید

سیستم عامل اندروید 9 و بالاتر:

Settings > System > Advanced > Developer Options > USB debugging

سیستم عامل اندروید 8.0.0 و اندروید 8.1.0:

Settings > System > Developer Options > USB debugging

سیستم عامل اندروید 7.1 و پایین تر:

Settings > Developer Options > USB debugging

مرحله 3: صفحه Devices را در گوگل کروم باز کنید.

در مرورگر گوگل کروم به آدرس chrome://inspect/#devices بروید.

نکته: در قبل از گوگل کروم نسخه 80، برای دسترسی به صفحه devices باید از طریق DevTools اقدام می شد ولی از کروم نسخه 80 دسترسی به صفحه مذکور فقط از طریق آدرس chrome://inspect/#devices امکان پذیر است.

مرحله 4: اطمینان از فعال بودن Discover USB devices در صفحه Devices

در صفحه Devices، از فعال بودن گزینه Discover USB devices اطمینان حاصل کنید.

مرحله 5: اتصال گوشی به کامپیوتر

گوشی را با استفاده از کابل USB به کامپیوتر متصل نمایید. سپس پیغام “Allow USB debugging” بر روی گوشی نمایش داده می شود که باید آن را Accept کنید.

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

نکته: در قسمت تنظیمات صفحه نمایش در موبایل و کامپیوتر، هر دو دستگاه را در وضعیتی قرار دهید که به حالت sleep نروند.

مرحله 6: باز کردن صفحه وب بر روی گوشی موبایل (دستگاه اندرویدی)

صفحه وب مورد نظر را بر روی مرورگر کروم گوشی باز کنید. سپس در صفحه Devices نام همان صفحه به شما نمایش داده خواهد شد.

مرحله 7: باز کردن URL بر روی موبایل توسط DevTools

در DevTools، قسمت New tab یک URL وارد کنید و بر روی Open، کلیک نمایید. سپس مشاهده می کنید که همان URL در گوشی شما بر روی یک تب جدید باز می شود.

مرحله 8: باز کردن DevTools مرورگر کروم موبایل توسط مرورگر گوگل کروم کامپیوتر

بر روی دکمه inspect در DevTools کلیک کنید تا یک DevTools جدید (نمونه) باز شود. ورژن مرورگر کرومی که بر روی گوشی خود استفاده می کنید با ورژن DevTools جدید یکسان خواهد بود. در صورتیکه از ورژن بسیار قدیمی کروم بر روی گوشی استفاده می کنید، می بینید که محیط DevTools بسیار متفاوت تر از محیط فعلی آن است.

به قسمت Elements در DevTools جدیدی که باز شده است، بروید. با hover بر روی یکی از المان های صفحه، آن قسمت در گوشی شما هایلایت می شود. با ضربه زدن بر روی یک المان صفحه در گوشی، می توانید آن بخش را در Elements انتخاب کنید. بر روی Select element در DevTools کلیک کرده و پس از آن بر المنت در گوشی اندرویدی خود ضربه بزنید. توجه داشته باشید که پس از هر مرتبه انتخاب، Select element غیرفعال شده و برای استفاده مجدد از آن، باید بر روی Select element کلیک نمایید.

با کلیک بر روی Toggle screencast می توانید محتوای صفحه گوشی خود را بر روی کامپیوتر مشاهده نمایید.

نکته: شما می توانید به امکاناتی مانند reload، focus و close a tab نیز دسترسی داشته باشید.

پرسش های متداول در مورد دیباگ صفحه با گوشی موبایل

1- آیا در صورت موفقیت آمیز بودن تست صفحه در شبیه ساز موبایل گوگل کروم، باز هم نیاز به ریموت دیباگینگ با گوشی اندروید است؟

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

2- آیا امکان ریموت دیباگینگ با کروم برای گوشی یا تبلت اپل و سیستم عامل iOS وجود دارد؟

خیر. در حال حاضر امکان remote debugging با گوگل کروم فقط برای گوشی و تبلت اندرویدی وجود دارد. البته شما می توانید با استفاده از مرورگر Safari و سیستم عامل MAC این کار را انجام دهید.

3- اگر در هنگام اتصال گوشی به کامپیوتر، پیام Allow USB Debugging مشاهده نشد، چه کاری انجام دهیم؟

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

4- گوشی را به کامپیوتر متصل کردم، ولی ویندوز آن را نشناخت. چه کاری باید انجام دهم؟

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

5- آیا می شود جهت اتصال گوشی به کامپیوتر از هاب USB استفاده کرد؟

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

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

Mobile-first index چیست؟

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

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

برای موبایل فرست ایندکس چکار کنیم؟

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

همان طور که در مقاله انواع سایت موبایل فرندلی گفته شد، سایت های Mobile Friendly به سه دسته رسپانسیو، Dynamic Serving و Separate URL تقسیم می شوند. در مورد هر سه دسته مذکور، با شروع به کار موبایل فرست ایندکس، ممکن است که نیاز به انجام کارهایی باشد که در ادامه به توضیح آن پرداخته شده است.

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

از موبایل فرست ایندکس بترسیم؟

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

تغییرات الگوریتمیک گوگل، آمدن صفحات AMP به دنیای طراحی سایت و همچنین PWA حاکی از این هستند که هر وبمستری باید در راستای سئوی حرفه ای به کاربران موبایل نگاهی ویژه داشته باشد.

موبایل ها در حال تغییر دنیا هستند. امروزه در برخی از کشورها تعداد موبایل ها بیشتر از تعداد کامپیوترهای شخصی مانند دسکتاپ و لپ تاپ ها است. طبق آمار رسمی گوگل تعداد جستجو های انجام شده توسط موبایل به طور میانگین در سرتاسر دنیا در سال 2015 بیش از 51 درصد بود و این نشان دهنده این موضوع بود که تمایل کاربران به جستجو و گشت و گذار در اینترنت توسط دستگاه های همراه مانند تلفن های هوشمند به دلایلی مانند پیشرفت تکنولوژی، در دسترس بودن و قدرت خرید بالای تلفن های هوشمند و گسترش شبکه های اجتماعی بیشتر شده است و بنابراین طراحی سایت با در نظر گرفتن استانداردهای طراحی سایت برای موبایل و همچنین مواردی که باید برای Mobile-first index در نظر گرفت، بسیار حائز اهمیت است.

موبایل فرندلی چیست

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

1. Responsive Web Design: 

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

2. Dynamic Serving: 

   در طراحی به صورت dynamic serving، آدرس URL صفحات برای انواع دستگاه ها یکسان است ولی کد HTML با توجه به عرض دستگاه متفاوت است.

3. Separate URLs: 

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

بسیاری از افراد و حتی وبمستران به اشتباه از واژه رسپانسیو به جای موبایل فرندلی استفاده می کنند. با توجه به توضیحات بالا، تکنیک رسپانسیو یک نوع از سه تکنیک موبایل فرندلی است که البته بیشتر از بقیه تکنیک ها مورد استفاده قرار می گیرد.

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

از نظر SEO تفاوت خاصی بین سه نوع تکنیک مذکور نیست ولی گوگل مورد Responsive Web Design را به دلیل خطای کمتر برنامه نویسی و مدیریت بهتر سایت به طراحان و دارندگان سایت پیشنهاد می کند و نکات زیر را در مورد سایت موبایل فرندلی توصیه می کند:

• مطمئن باشید که خزنده گوگل به همه منابع سایت مانند عکس، HTML، CSS و JS علاوه بر user-agent دسکتاپ با user-agent موبایل نیز دسترسی کامل دارد. برای این کار می توانید از ابزار Fetch as Google در سرچ کنسول استفاده کنید.
• از ویدیوهایی استفاده کنید که با موبایل هم قابل پخش شدن باشد.
• از ریدایرکت اشتباه اجتناب کنید. اگر از تکنیک separate URLs استفاده می کنید، وب سرور را به نحوی تنظیم کنید که اگر کاربری با موبایل قصد ورود به یک صفحه با آدرس دسکتاپ را داشت، حتما به معادل همان صفحه در موبایل ریدایرکت کنید.

• در صورتی که کاربران موبایل را به آدرس URL مخصوص موبایل ریدایرکت می کنید، مطمئن باشید که همه دستگاه های موبایل مانند Android و iOS و Windows phone ریدایرکت می شوند.

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

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

سنجش سرعت صفحه با گوگل اسپید اسکورکارد

پس از اعلام گوگل برای آپدیت الگوریتمش به نام آپدیت سرعت گوگل، این غول موتور جستجو با معرفی ابزاری جدید به نام Speed Scorecard، این امکان را برای سئوکاران و وبمستران فراهم کرد که بتوانند سرعت بارگذاری سایت خود توسط موبایل را با دیتای واقعی که از گوشی های موبایل کاربران در شبکه 4G و شبکه 3G کسب شده، بررسی کنند.

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

گوگل اطلاعات Speed Scorecard را از کجا می آورد

اطلاعات اسپید اسکورکارد از مرورگر کروم گوشی های موبایل کاربران به صورت ناشناس که Chrome User Experience Report نام دارد، جمع آوری می شوند. در حال حاضر اطلاعات گوگل اسپید اسکورکارد از کاربران موبایل 12 کشور آمریکا، کانادا، استرالیا، انگلیس، هلند، سوئد، آلمان، هند، ایتالیا، ژاپن، اسپانیا و فرانسه جمع آوری می شود و قرار است به تدریج کاربران بیشتری از کشورهای دیگر نیز به این اطلاعات افزوده شوند.

نمره سرعت کدام سایت ها در اسپید اسکورکارد در دسترس است

هم اکنون با Speed Scorecard می توانید اطلاعات سایتهای پرترافیک که عمده کاربران آنها در دوازده کشوری که در بالا به آنها اشاره شد وجود دارند را مشاهده کرده و سایتها را از نظر نمره سرعت لود صفحه با موبایل با یکدیگر مقایسه کنید. اگر سایت شما در آمار اسپید اسکورکارد موجود نبود، همچنان می توانید تاثیر سرعت بارگذاری صفحات بر درآمد سالیانه را از قسمت Impact Calculator که در زیر فرم Speed Scorecard وجود دارد را محاسبه کنید.

محاسبه تاثیر سرعت بارگذاری صفحه بر درآمد با Impact Calculator

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

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

1. نام دامین
2. میانگین بازدید ماهانه
3. میانگین ارزش هر سفارش یا فروش
4. سرعت بارگذاری صفحه که در Speed Scorecard محاسبه شده و یا سرعت لود فرضی که قصد دارید تاثیر آن را بر درآمد سالیانه مشاهده کنید.
5. نرخ تبدیل (نسبت سفارش به تعداد بازدید)
6. تاثیر مثبتی که سریعتر شدن لود صفحه به میزان نمایش داده شده در قسمت 7 بر درآمد سالیانه سایت می گذارد.
7. دکمه کشویی که توسط آن می توانید سرعت لود صفحه را به صورت دستی تغییر داده تا تاثیر آن را در قسمت 6 بر درآمد سالیانه سایت ببینید.

اگر سایت شما پرترافیک است، هم اکنون می توانید جهت سئوی حرفه ای سایت و تست سرعت بارگذاری صفحهات سایتتان و یا هر سایت پرترافیک دیگر به صفحه Winning on Mobile گوگل مراجعه نمایید. دقت فرمایید که متاسفانه این آدرس با IP ایران در دسترس نیست و جهت استفاده از این سرویس فعلا باید از آی پی آدرس غیر از ایران استفاده کنید.

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

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

ابتدا گوگل کروم را باز کرده و سپس با فشردن دکمه F12 وارد محیط DevTools گوگل کروم شوید. حال با فشردن دکمه های Ctrl+Shift+M در سیستم عامل ویندوز و یا Cmd+Shift+M در سیستم عامل MAC و یا با کلیک بر روی آیکون موبایل که در تصویر زیر به عنوان شماره 1 نمایش داده شده است، محیط شبیه ساز موبایل گوگل کروم را فعال کنید.

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

قسمت های شماره گذاری شده در تصویر بالا به شرح زیر می باشند:

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

2. انتخاب گوشی های موبایل پیشفرض مختلف از منوی آبشاری. همچنین می توانید با کلیک بر روی گزینه Edit اقدام به تعریف گوشی موبایل دلخواه خود نمایید.

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

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

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

A. در صورتیکه گوشی موبایل خاصی را از لیست گوشی ها (آیتم 2) انتخاب کرده باشید، با کلیک بر روی Show device frame، گوگل کروم، قاب گوشی را هم به شما نمایش می دهد که حس بهتری نسبت به واقعیت داشته باشید.

B. با کلیک بر روی گزینه Show media queries، گوگل کروم همه media query هایی که در قالب سایت از آن استفاده کردید را با خطوط رنگی در بالای صفحه نمایش می دهد. همانطور که در تصویر زیر مشاهده می کنید، ابعاد مختلفی که در media query در صفحه مورد نظر استفاده شده اند، به صورت خطوطی مشخص شده اند و اگر شما با موس روی هر کدام از آن خط ها بروید، ابعاد تعریف شده در media query به شما نمایش داده خواهد شد.

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

D. با کلیک بر روی Add device pixel ratio می توانید pixel ratio مد نظرتان را در شبیه سازی اعمال نمایید.

E. با توجه به تصویر زیر با کلیک بر روی گزینه Add device type می توانید نوع دستگاهی که می خواهید شبیه سازی کنید را انتخاب نمایید.

F. با کلیک بر روی گزینه Capture screenshot می توانید از صفحه ای که در حال رویت آن هستید یک اسکرین شات بگیرید.

G. با کلیک بر روی Capture full size screenshot می توانید از ابتدا تا انتهای صفحه ای که در آن هستید، بدون نیاز به اسکرول کردن، اسکرین شات تهیه کنید.

H. با کلیک بر Reset to defaults، همه تنظیمات به حالت پیشفرض باز می گردد.

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

یک سئوکار متخصص می تواند به شما در مورد موبایل فرندلی بودن سایتتان مشاوره دهد.