‌رفع خطای viewport not set در google search console

شاید این مشکل برای شما هم پیش آمده باشد که وب سایتتان، در همه صفحات درست نشان داده نشود و در مرورگرهای موبایل با مشکل روبه‌رو شود. این یک خطای بزرگ برای Mobile Usability است؛ به همین دلیل تصمیم گرفتیم در رفع خطای viewport not set در google search console کمکتان کنیم. پس تا پایان این مقاله همراه ما باشید.

وبمستران در هنگام سئوسازی و استفاده از ابزار گوگل سرچ کنسول گاهی با خطاهای متفاوتی مواجه می‌شوند. یکی از این خطاهای بسیار عمده در سرچ کنسول مربوط به خطاهای Mobile Usability یا همان خطاهای نسخه موبایلی سایت می‌باشد. خطای viewport not set که به ندرت هم اتفاق می‌افتد، یکی از همان خطاهای Mobile Usability می‌باشد.

شما می‌توانید بعد از اتمام این مطالب، مقاله‌ی آشنایی با خطاهای Mobile Usability و رفع آن ها را مطالعه کنید.

viewport چیست؟

صفحاتی که در وب توسط کاربران قابل رویت است را viewport می‌گویند. همانطور که می‌دانید امروزه استفاده از صفحات موبایل از دسکتاپ بیشتر شده است. چرا که موبایل قابل دسترس‌تر بوده و برای کاربران راحت‌تر است. خوب است بدانید؛ اگر viewport وب سایت خود را به خوبی پیکربندی نکنید، کاربرانتان به مشکل خواهند خورد. اگر وب سایت شما بر روی CMS Hub ساخته شده است، لازم نیست نگران پیکربندی viewport باشید. سایت شما به طور خودکار با  viewport هر دستگاهی تنظیم می‌شود. اما اگر اینگونه نیست و شما از responsive design استفاده می‌کنید، باید viewport خود را پیکربندی کنید تا تجربه خوبی را به بازدیدکنندگان موبایل خود ارائه دهید. رفع خطای viewport not set در google search console

تفاوت ظاهر سایت شما با Viewport و بدون Viewport

خوب است برای رفع خطای viewport not set در google search console ابتدا تفاوت ظاهر سایتتان با viewport و بدون viewport را بدانید. وقتی برای موبایل‌ها viewport تنظیم نمی‌کنید، آن دستگاه‌ها یک صفحه وب را در عرض یک صفحه دسک‌تاپ معمولی ارائه می‌کنند و سپس متناسب با صفحه نمایش می‌دهند تا متن و گرافیک بسیار کوچک باشند که به آن “fallback width” گفته می‌شود و بین 800 تا 1024 پیکسل است. هنگامی که یک viewport را برای موبایل‌ها تنظیم می‌کنید، عرض صفحه وب به طور خودکار به موبایل کاربر مقیاس می‌شود و تجربه بسیار بهتری به آن‌ها می‌دهد. درتصویر زیر، صفحه‌نمایش سمت چپ دارای viewport پیکربندی نشده است؛ بنابراین مرورگر موبایل عرض دسک‌تاپ را در نظر می‌گیرد. صفحه سمت راست دارای یک viewport پیکربندی شده است؛ بنابراین مرورگر موبایل می‌داند که با عرض دستگاه مطابقت داشته باشد و صفحه را مقیاس بندی کند تا محتوا به راحتی قابل خواندن باشد.

بررسی پیکربندی Viewport

بهتر است ابتدا بررسی کنید که آیا از قبل یک Viewport پیکربندی شده است یا خیر. برای بررسی کافیست، به وب سایت Google Mobile Ready Check بروید. URL خود را در فیلد خالی قرار دهید و در پایین ارسال را بزنید. این ابزار، وب سایت شما را از طریق Google’s mobile-friendly test اجرا می‌کند و اگر viewport شما پیکربندی نشده باشد، به شما اطلاع می‌دهد. اگر هنوز viewport شما تنظیم نشده است، به خواندن ادامه دهید.

نحوه پیکربندی Viewport وب سایت

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

<meta name=viewport content=”width=device-width, initial-scale=1″>

در بسیاری از موارد، قرار دادن این تگ viewport در فایل هدر باعث می‌شود که viewport در کل سایت حمل شود و کل وب‌سایت شما را mobile-friendly کند. اما توجه داشته باشید که ممکن است مجبور شوید تگ viewport را به هر صفحه وب به صورت جداگانه اضافه کنید، به خصوص اگر از نرم افزارهای متفاوتی برای وب سایت خود در مقایسه با landing pages خود استفاده می‌کنید. اگر از راه حل یکپارچه‌ای مانند HubSpot Landing Pages یا CMS Hub استفاده نمی‌کنید، باید به صورت دستی بررسی کنید تا مطمئن شوید landing pages، صفحات سایت و وبلاگ شما دارای این برچسب viewport هستند تا برای موبایل مناسب باشند.

device-width چیست؟

اگر device-width را همانطور که هست رها کنید، به این معنی است که نمی‌خواهید عرض خاصی را برای نمایش محتوای خود تنظیم کنید و صفحه وب شما اندازه کاربر شما را انتخاب می‌کند. دستگاه به صورت خودکار از اکثر شما می‌خواهد این کار را انجام دهید. اگر به دلایلی می‌خواهید محتوای خاصی را برای یک دستگاه خاص نمایش دهید، باید device-width را با عرض پیکسل دستگاه مورد نظر جایگزین کنید. با تنظیم عرض در تگ (که باز هم نیازی نیست)، هر دستگاهی در آن عرض خاص رندر می‌شود. (این کار معمولاً توصیه نمی‌شود مگر اینکه صفحه/و یا سایتی را برای اندازه صفحه‌نمایش خاصی طراحی کرده باشید. همچنین، نمی‌توانید بیش از یک تگ viewport تنظیم کنید. باید یک اندازه دستگاه را انتخاب کنید و به آن پایبند باشید.)

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

<meta name=viewport content=”width=667, initial-scale=1″>

همه آیپدها دارای پهنای افقی 1024 پیکسل هستند؛ بنابراین شما باید این برچسب را در سایت خود قرار دهید:

<meta name=viewport content=”width=1024, initial-scale=1″>

به خاطر داشته باشید که با بیان اینکه عرض طرح شما با عرض دستگاه برابر است، زمانی که کاربران، موبایل خود را می‌چرخانند، با مشکل مواجه خواهید شد.

initial scale

initial scale قسمتی از تگ HTML که می‌تواند بدون توجه به هر چیزی در یک باقی بماند. این فقط تضمین می‌کند که وقتی شخصی محتوای شما را باز می‌کند، طرح بندی به درستی در مقیاس 1:1 نمایش می‌دهد. این به صفحه وب شما کمک می‌کند بدون توجه به جهت موبایل (عمودی در مقابل افقی) از تمام عرض افقی استفاده کند.

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