5 روش برای رفع Content Wider Than Screen

شاید شما هم زمانی‌که می‌خواهید سئوی یک سایت را ارتقاء دهید، در قسمت سرچ کنسول به این مشکل برخورده باشید. اگر گزارشی شامل خطای ” محتوا بزرگ‌تر از صفحه “ یا ” Content Wider Than Screen “ دریافت کرده‌اید، می‌توانید با چند روش ساده آن را رفع کنید. پس با ما همراه باشید تا 5 روش برای رفع خطای محتوا بزرگ تر از صفحه را با هم بررسی کنیم.

برای کسب اطلاعات بیشتر در مورد خطاهای گوگل سرچ کنسول و رفع آن‌ها، مقاله‌ی معرفی و رفع خطاهای گوگل سرچ کنسول را مطالعه نمایید.

1. خودداری از متغیرهای مطلق در اعلانات CSS

خوب است بدانید؛ یکی از بهترین راه‌های رفع خطای ” Content Wider Than Screen ”  استفاده نکردن از متغیرهای مطلق در اعلانات CSS است. نباید محتوای شما برای نمایش و عملکرد صحیح به viewport خاصی نیاز داشته‌باشد. بنابراین، به جای استفاده از مقادیر مطلق، باید مقادیر نسبی عرض و موقعیت را برای عناصر CSS خود انتخاب کنید. با استفاده از مقادیر نسبی تا جایی که ممکن است، می‌توانید طرح‌بندی‌های انعطاف‌پذیری ایجاد کنید که متناسب با طیف وسیعی از اندازه‌های صفحه نمایش باشد.

2. حداکثر عرض برای عکس

یک تصویر با ابعاد ثابت می تواند بزرگتر از نمای خود ظاهر شود و به نوبه خود خطای “Content wider than screen” را ایجاد کند. برای اطمینان از اینکه تصاویر شما بر اساس ابعاد صفحه نمایش مقیاس می شوند، بهترین کار این است که تمام تصاویر حداکثر عرض 100٪ را اختصاص دهید. در واقع تصویر را مجبور می‌کند تا برای فضای موجود کوچک شود. حتی اگر از حداکثر عرض استفاده می‌کنید، همچنان باید از ویژگی‌های عرض و ارتفاع در تگ <image> خود استفاده کنید، زیرا مرورگرهای وب مدرن از این اطلاعات برای رزرو فضا برای تصاویر هنگام بارگذاری استفاده می‌کنند. با استفاده از تگ <image>، می‌توانید از تغییر طرح‌بندی در زمانی که تصاویر شما در نهایت روی صفحه ظاهر می‌شوند جلوگیری کنید.

3. تگ‌های Meta Viewport

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

4. تکنیک‌های چیدمان CSS

همچنین می‌توانید با تغییر طرح‌بندی سایت، خطای “Content wider than screen “ را برطرف کنید. برای کمک به ایجاد طرح‌بندی‌های انعطاف‌پذیرتر، ممکن است بخواهید تکنیک‌هایی مانند Flexbox، CSS Grid Layout یا Multiple-Column Layout (Multicol) را در نظر بگیرید.

5. استفاده از CSS Media Queries

درخواست‌های رسانه می‌توانند تغییر سبک‌ها را بر اساس دستگاه کاربر، از جمله صفحه‌های لمسی، آسان‌تر کنند. بنابراین، اگر در این مرحله همچنان با خطای “Content wider than screen” سروکار دارید، توصیه می‌کنیم در صورت لزوم از queryهای رسانه CSS استفاده کنید. پس از انجام این تغییرات، وقت آن است که آزمایش کنید تا ببینید آیا با موفقیت خطای “Content wider than screen” را حل کرده‌اید یا خیر. می‌توانید این کار را با اجرای مجدد گزارش Mobile Usability و تأیید صحت رفع با استفاده از مراحلی که در بخش بعدی توضیح می‌دهیم انجام دهید. شما می‌توانید بعد از اتمام این مطالب، مقاله‌ی آشنایی با خطاهای Mobile Usability و رفع آن ها را مطالعه کنید.

چگونه حل خطای خود را تأیید صحت کنیم؟

صرف نظر از اینکه با کدام یک از خطاهای بالا سر و کار دارید یا روش‌هایی که برای رفع آن استفاده می‌کنید، تعیین اینکه آیا تغییرات شما مشکل را حل کرده است یا خیر، ضروری است. می‌توانید این کار را با اجرای مجدد تست‌های Mobile Usability گوگل می‌توانید انجام دهید. برای انجام این کار، به گزارش Mobile Usability خود برگردید و خطای “Content wider than screen” را پیدا کنید. سپس گزینه Validate fix را انتخاب کنید. توجه داشته باشید که اگر می‌خواهید وضوح خطای خود را برای “محتوا بزرگ‌تر از صفحه” تأیید کنید، می‌توانید همین مراحل را تکرار کنید. سپس گوگل وب سایت شما را بررسی می‌کند و پیامی دریافت می‌کنید که در حال تأیید تغییرات است.

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