آموزش استفاده از گوگل موبایل فرندلی تست
امروزه فناوری های زیادی به بخش طراحی وب اضافه شده است، که ما به وسیله این فناوری ها می توانیم سایت خود را واکنشگرا کنیم، با توجه به پیشرفت روز به روز علم و فناوری تعداد بسیار زیادی از مردم بیشتر جست و جو های خود را به وسیله موبایل های خود انجام می دهند. این اتفاق نشان دهنده آن است که ورودی های گوگل از سمت نسخه ویندوز به سمت موبایل کشیده شده است، با توجه به آخرین تحقیقات گوگل تا سال 2020 میلادی چیزی حدود 80 درصد از ورودی ها از سمت گوگل توسط موبایل ها انجام می شود. برای خرید رپورتاژ لطفا کلیک کنید.
حال شاید برای شما سوال پیش آید که ما چگونه می توانیم سایت خود را با سیستم گوگل موبایل فرندلی مطابقت دهیم؟ اگر قصد دارید به جواب سوال خود دست پیدا کنید می توانید در ادامه این مقاله تخصصی از تسمینو مرجع تخصصی پلتفرم رپورتاژ همراه ما باشید، همچنین در این مقاله ما شما را تا حدودی با این صنعت مدرن آشنا خواهیم کرد و راه کار هایی را برای شما معرفی می کنیم.
آیا سایت شما از قوانین گوگل موبایل فرندلی پیروی میکند؟
ما در آموزش های قبلی سایت شما را با دو ابزار اصلی و بهینه سازی سایت آشنا کردیم، که یکی از وظایف اصلی آن تست سرعت سایت شما بوده است. اما گوگل برای نظم دادن به سرویس های کاری خود در ابزار page speed insights ویژگی را قرار داده است که علاوه بر تست سرعت سایت باید قوانین موبایل فرندلی را نیز تست کند. پس اگر شما قصد دارید دو کار را بصورت یکجا انجام دهید می توانید به وسیله این ابزار حرفه کار خود را انجام دهید. برای درک مفهوم بیشتر از ابزار page speed insights می توانید کنید. شما در این ابزار می توانید اطلاعات کاملی از سایت خود را دریافت کنید.
گوگل فرندلی مخصوص چه افرادی است؟
در واقع این ابزار حرفه می تواند یک وسیله خوب برای تمامی وب مستر ها باشد، شما به وسیله این ابزار می توانید متوجه شوید که کاربران شما می توانند با موبایل های خود به راحتی وارد سایت شما شده و از مطالب مفید سایت شما بازدید کرده باشند. اما علاوه بر وب مستر ها گوگل فرندلی می تواند برای مشاغلی مثل کارشناسی سئو، طراحان وب سایت، بازاریابان دیجیتالی و … مفید باشد. نکته ای وجود دارد که آیا ابزار page speed insights می تواند جایگزین مناسب و کاملی برای گوگل فرندلی سایت ما باشد؟
گوگل به عنوان یک لیدر همیشه کار های خود را بصورت کامل و جامع ارائه می دهد، از این نظر این کمپانی بزرگ قصد دارد الگوریتمی را به عنوان Mobilegeddon ارائه دهد. در این الگوریتم شما می توانید قوانین محکم و دقیقی از موبایل فرندلی را مشاهده کنید. یکی از علت های ساخت و ارائه این الگوریتم ضعف در جست و جوی آن به وسیله page speed insights می باشد.
ارتقا سایت به mobile friendly گوگل
نکته جالبی که می توانیم به آن اشاره داشته باشیم، بخش نمایشی در این الگوریتم می باشد، منظور از بخش نمایشی دو قسمت جدا برای نسخه های ویندوز و موبایل است. اگر شما سایتی در زمینه موبایل دارید و قصد دارید آنرا برای افرادی که با موبایل کلمه ای را سرچ می کنند نمایش داده شود باید کد دستوری را در قسمت Head سایت خود قرار دهید که در قسمت زیر ما مثالی از این کد را برای شما خوهیم زد.
با قرار دادن کد دستوری بالا در بخش متا تگ های سایت خود شما این امکان را برای سایت خود به وجود می آورده اید که گوگل شما را در جست و جوی های موبایل به نمایش بگذارد. توجه داشته باشید که اگر این کد دستوری را در سایت خود قرار ندهید گوگل شما را به عنوان یک سایت موبایل در نظر نگرفته است و مطالب شما تنها در نسخه ویندوز به نمایش گذاشته می شوند. پس برای بهبود عملکرد سایت خود بهتر است حتما کد متا تگ را در سایت خود قرار دهیم و بدین شکل کاربران بسیار زیادی وارد سایت شما می شوند.
خطا های موبایل فرندلی
یکی از خطاهایی که شاید بیشتر اوقات اتفاق می افتد برقرار نکردن ارتباط میان سایت شما با سایت اصلی می باشد، در این حالت سایت شما به عنوان Page is not mobile friendly نمایش داده می شود در صورتی که شما از تمامی قوانین این الگوریتم پیروی کرده اید. در ادامه ما جواب این سوال شما را خواهیم داد. در عکس زیر می توانید نمونه از این خطا را مشاهده کنید که با رنگ اخطار و یا قرمز به ما نمایش داده می شود.
همانطور که در تصویر بالا مشاهده می کنید از سایت دیبا پی سی خطا گرفته شده است و این خطا می تواند از دو دلیل باشد، اولین موردی که می توانیم همیشه آنرا تست کنیم پیروی نکردن از قوانین موبایل فرندلی می باشد که سایت دیبا کاملا مطیع این دستورات می باشد، پس بدون شک مشکل ما از ای پی می باشد، ما برای بر طرف کردن مشکل خود می توانیم با استفاده از یک فیلتر شکن آنالیزی دوباره داشته باشیم تا یک جواب قطعی به ما داده شود. راهکاری دیگر وجود دارد که ما می توانیم با تکرار چندین باره این عمل این محدودیت را آزاد کنیم.
حل خطا موبایل فرندلی
همانطور که گفته شد ما برای حل خطای موبایل فرندلی از فیلتر شکن ها استفاده می کنیم تا این محدودیت برای ما آزاد شود، پس از دریافت یک جواب قطعی ما می توانیم پیام سبز رنگ موبایل فرندلی را با عنوان Page is mobile friendly تماشا کنیم. در تصویر زیر شما می توانید نمونه از این تعریف ها را مشاهده کنید.
سایت دیبا پی سی در این مرحله توانسته است نمره سبز رنگی را از موبایل فرندلی دریافت کند. شما در قسمت Rendered page یا قسمت سمت راست این صفحه می توانید سایت خود را به دو صورت اسکرین شات و کد تماشا کنید. و اما در منوی سمت چپ شما می توانید اطلاعاتی نسبت به سایت خود بدست آورید.
تبدیل سازی سایت به حالت موبایل
حالا که آشنایی لازم را با تست موبایل فرندلی بدست آورده اید قصد داریم شما را با موارد تخصصی تر گوگل موبایل فرندلی آشنا کنیم، در این بخش شما می توانید با مراحل بهنیه سازی سایت خود به موبایل آشنایی لازم را بدست آورید، همچنین در قسمت های بعدی آن شما با انواع تبدیل ها در جهت این بهینه سازی آشنایی لازم را کسب خواهید کرد. برای درک بهتر از گوگل موبایل فرندلی در ادامه همراه باشید. بطور کلی ما می توانیم سایت خود را در 5 قدم بهینه سازی کنیم که اولین قدم برای بهینه سازی سایت انتخاب کردن یک متد مناسب برای موبایل است.
انتخاب موبایل متد
متد های زیادی برای تبدیل یک سایت به حالت موبایل وجود دارد که یکی از مهم ترین و کاربردی ترین متد هایی که شاید نام آنرا زیاد شنیده باشید، حالت واکنشگرایی می باشد که ما می توانیم این متد را با نام لاتین Responsive صدا بزنیم. امروزه بیشتر افراد و یا طراحان سایت برای راحتی و سرعت بخشیدن به کار خود از این متد استفاده می کنند. شما به وسیله این متد می توانید سایت خود را به سادگی برای موبایل ها بهینه سازی کنید. در واقع ما به این متد Responsive Design نیز می گوییم که در ادامه توضیحات کامل تری درباره آن به شما خواهیم داد.
متد Responsive Design
این متد از مزیت های زیادی برخوردار می باشد، بطور مثال اگر قصد دارید سایت شما سئو شده باشد و مشکلی در این زمینه نداشته باشد شما می توانید با استفاده از Responsive Desgin کار خود را بدون هیچ گونه ریسکی انجام دهید، این متد در حدی قابل اعتماد است که یکی از پیشنهاد های ویژه گوگل برای شما می باشد که به وسیله آن می توانید سایت خود را بهینه سازی کنید.
شما برای استفاده از این متد می توانید از فریم ورک های آماده ای استفاده کنید تا کار شما را راحت تر کرده باشند، در این قسمت قصد داریم یکی از فریم ورک هایی که از محبوب بالایی برخوردار می باشد را به شما معرفی کنیم. شما به وسیله فریم ورک بوت استرپ می توانید سایت خود را به بهترین نحو شکل و با کوتاه ترین کد ها بهینه سازی کنید. شما برای نصب و فعال سازی این فریم ورک می توانید به مراجعه کنید. حال که سایت خود را بهینه کرده اید قصد داریم خطا هایی از گوگل موبایل فرندلی را به شما آموزش دهیم تا بتوانید به سادگی از آنها عبور کنید.
خطا ها در گوگل موبایل فرندلی
در بعضی مواقع شاید سایت شما در گوگل موبایل فرندلی دچار مشکل باشد و امتیاز سبز رنگ به شما داده نشود در این حالت توصیه می کنیم که از راه کار های زیر برای حل مشکلات خود استفاده کنید.
خطای Viewport not set
درباره این خطا قبلا بحث های زیادی داشته ایم و گفته شده است که اگر ما از این دستور در قالب خود استفاده نکنیم سایت ما در لیست سایت های موبایل قابل مشاهده نمی باشد، پس اگر کد زیر را در قسمت head سایت خود در کنار Meta Tag ها قرار نداده اید بهتر است هرچه سریع تر این جایگذاری را انجام دهید تا مطالب سایت شما در حالت موبایل به نمایش داده شود. پس از جایگذاری این کد در قالب خود شما این خطا را حل کرده اید.
خطای Uses incompatible Plugins
این خطا بیشتر جنبه استفاده کردن از تکنولوژی های مدرن را دارد، یعنی به شما پیشنهاد می کند تنها از پلاگین هایی استفاده کنید که می توانند برای سایت شما مفید باشند، بطور مثال شما می توانید از html 5 در قالب خود استفاده کنید، اگر سایت شما از ورژن قدیمی تری برخوردار می باشد بهتر است هرچه سریع تر این اپدیت را انجام دهید. این بروزرسانی تنها مربوط به فایل های html شما نمی باشد، پس اگر قصد دارید تا از این خطا بگذرید باید از آخرین ورژن های فایل خود استفاده کنید. با آپدیت کردن فایل های خود به آخرین نسخه شما می توانید از خطای Uses incompatible Plugins بگذرید و امتیاز مثبت را از گوگل موبایل فرندلی بدست آورید.
خطای Viewport not set to device-width
این خطا مربوط به اولین کد ما می باشد که درباره آن توضیح دادیم، بطور مثال اگر شما مقدار طول خود را بصورت ثابت انتخاب کنید این خطا به شما داده خواهد شد، برای حل این خطا شما باید طول خود را به درصد و یا با استفاده از کلاس های بوت استرپ و … استفاده کنید. توجه داشته باشید که اگر طول تگ های شما ثابت باشد در دیوایس های مختلف شما نمی توانید جلوه نمایشی خوبی داشته باشید. پس برای حل کردن این مشکل شما باید از همان کد خطای اولی در قالب خود استفاده کنید.
خطای Content wider than screen
این خطا مربوط به اندازه محتوا می باشد که گاه ممکن است سایت شما از لحاظ افقی دارای اسکرول باشد، در این حالت گوگل موبایل فرندلی به شما ایراد می گیرد و برای برطرف کردن این خطا شما باید المان های Css خود را بطور شکل دهید که برابر با اندازه استاندارد یعنی 980 بر واحد پیکسل باشد، شما در طراحی می توانید از واحد های اندازه گیری مختلفی استفاده کنید که در این بخش پیکسل گزینه مناسبی می باشد.
خطای Text too small to read
ما با استفاده از واحد اندازه گیری درصد می توانیم تگ های خود را در اندازه های مختلف ست کنیم، اما تا به حال فکر کرده اید که چگونه باید اندازه متن های خود را کوچک و یا بزرگ کنید؟ هنگامی که شما با خطای Text too small to read مواجه می شوید باید فکری برای ریسپانسیو کردن آنها داشته باشید، ما برای متن های خود واحد هایی خاصی داریم که به عنوان مثال px یکی از این واحد های اندازه گیری می باشد، اما اگر شما می خواهید با توجه به اندازه صفحه شما متن شما کوچک و بزرگ شود می تواند بجای جایگذاری px از واحد جدیدی بنام em استفاده کنید.
توجه داشته باشید که واحد em از 1 تا 5 می باشد و هر چه این عدد بالاتر باشد اندازه متن شما بزرگ تر خواهد بود، قابل گفتن است که شما em خود را می توانید عددی بالاتر از 5 قرار دهید اما کاربرد خاصی در این حالت برای شما وجود ندارد.
خطای Clickable elements too close together
این خطا بیشتر جنبه فاصله های المان ها را به ما نمایش می دهد، بطور کلی اگر ما در سایت خود المان ها را در فاصله هایی یکسان قرار دهیم در حالت موبایل هم با همان اندازه ها به نمایش در می آیند که با توجه به تغییر اندازه صفحه خرابی برای ما به وجود می آورد. ما برای حل این مشکل به شما پیشنهاد می کنیم تا از css های جداگانه ای برای حالت موبایل خود استفاده کنید، بدین ترتیب شما می توانید المان های خود را در دو حالت بزرگ و کوچک به ترتیب جایگذاری کنید.
اگر نمی خواهید از فایل css جدیدی در سایت خود استفاده کنید شما می توانید با استفاده از تگ @Media در فایل css خود دسته بندی هایی را در اندازه های مختلف ایجاد کنید تا به وسیله آنها شما در سابز های مختلف تغییرات را به وجود آورید. در قسمت زیر مثالی از تگ Media برای شما خواهیم زد.
منبع: wix.com
