آموزش کسب درآمداز طریق طراحی سایت

خطا Clickable elements too close together

سلام به خطا Clickable elements too close together  و Content wider than screen  خوردم جواب پیدا کردم اما جهت سئو و درج شدن داخل سایت عمدا مورد بررسی گذاشتم این موضوع 

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

این مسئله  روی سایت خودم افتاده و حدودا 19 خطا از من گرفته 

آدرس سایت 

کاربر فعال سوال شده در 1401/02/16 در بهینه سازی وردپرس.
افزودن نظر
1 پاسخ(ها)

    سلام. این خطاهایی هست که کنسول گوگل از ظارهر و استایل سایت ها (مربوط به css) میگیره. از اونجایی که گوگل ایندکس سایت ها رو بر اساس نوع طراحی برای موبایل انجام میده، پس براش مهمه که یه سری چیز ها روی سایت رعایت بشه. درباره خطا های بالا:

    آموزش رفع خطای Clickable elements too close together در کنسول گوگل: این خطا به معنی اینه که اجزای داخلی سایت که دارای لینک هستند خیلی به هم نزدیک هستند. پس وقتی کاربر تو موبایل میخواد با تاچ روی صفحه یه لینکی رو کلیک کنه، ممکنه اشتباها لینک نزدیک به اون رو کلیک کنه.

    این عکس میتونه مفهوم Clickable elements too close together رو بهتر برسونه. تو قسمت پایینی که افزونه ها هستند با کلیک روی کل قسکت اونا میره به صفحه افزونه:

    Clickable elements too close together خطای گوگلآموزش رفع خطای Clickable elements too close together

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

    Clickable elements too close together رفع خطای گوگلآموزش رفع اررور Clickable elements too close together

    البته از فاصله Padding (فاصله داخلی) هم میشه استفاده کرد ولی هر چیزی بهتر سر جای خودش استفاده بشه.


    آموزش رفع خطای Content wider than screen در کنسول گوگل: این خطا زمانی توی کنسول گوگل رخ میده که صفحه سایت اسکرول افقی داشته باشه. یعنی کاربر برای دیدن محتوای سایت باید او رو به سمت چپ و راست اسکرول کنه.

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

    Content wider than screen رفع خطای گوگلآموزش رفع ارور Content wider than screen

    توی صفحه هایی که ساخته میشه معمولا به 3 علت اسکرول افقی ایجاد میشه:

    • مورد اول: اگه بیشتر از اندازه نمایشگر های مرسوم عرض به المان ها داده میشه. مثلا اگه به عرض (width) یک سکش توی حالت موبایل بیایم عدد 600px رو مقدار دهی کنیم این صفحه اسکرول افقی میگیره. علت هم اینه که بیشتر موبایل ها دارای عرض حدودا 400 پیکسلی هستند.
    • مورد دوم: مقدار دهی منفی توی اندازه های مارجین یا پدینگ المان هایی که به حاشیه صفحه نزدیک هستند باعث ایجاد اسکرول افقی میشه. مثلا شما اگه به یه سکشن (Div) بیاید مقدار 10px- رو برای مارجین یا همون فاصله خارجی مقدار دهی کنید اون میخواد از حد خودش فراتر بره و اسکرول افقی ایجاد میشه.
    • مورد سوم : استفاده از المان هایی مثل اسلایدر ها یا کروسل هایی (carousel) که دارای دکمه های جابجایی توی بیرون محیط خودشون هستند یا اصلا از سمت سازنده دارای باگ تو کد های استایل هستند.

    رفع خطای Content wider than screen با رعایت موارد بالا امکان پذیره و البته میشه از کد هایی که اسکرول افقی رو محو میکنند هم استفاده کرد. مثل کد های استایل زیر:

    overflow:hidden; > برای حذف ناحیه اسکرول افقی

    یا

    overflow: auto;    > برای اسکرول افقی داخلی یا درونی

    وردپرس کار پاسخ داده شده در 1401/02/16.
    افزودن نظر

    پاسخ شما

    برای ارسال سوال, شما باید شرایط و ظوابط و شرایط استفاده از خدمات را قبول کنید