آموزش رفع خطای Clickable Elements Too Close Together در گوگل سرچ کنسول

امروزه بیش از ۵۰ درصد کاربران برای دسترسی به اینترنت از گوشی استفاده می‌کند. این آمار نشون میده اگه سایتتون برای در گوشی ظاهر خوبی نداشته باشه به سئو سایت آسیب میرسه، یعنی رتبه‌تون بالا نمیره و در نتیحه ترافیک هم دریافت نخواهید کرد. به بیان دیگه، اگر وب‌سایت برای کاربران گوشی بهینه نشده باشه، ممکنه گوگل خطای Clickable Elements Too Close Together رو براتون در نظر بگیره که نشون میده ناوبری سایتتون در گوشی ضعیف هستش. این یکی از مشکلات رایجی محسوب میشه که هر سئوکاری باید بهش اهمیت بده.

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

فهرست:

• خطای Clickable elements too close together یعنی چه؟
• چرا گوگل خطای clickable elements too close together را در گوگل سرچ کنسول نشان می‌دهد؟
• طراحی رابط ضعیف
• مشکل ریسپانسیو بودن موبایل
• گوگل نمی تواند درخواست های منبع را آغاز کند
• کدام عناصر HTML قابل کلیک هستند؟
• عنصر Anchor
• عنصر Button
• عنصر Input
• عنصر select
• عنصر Text area
• عنصر Image
• ۸ روش برای رفع خطای Clickable elements too close together
• ۱. URL مثال را مشخص کنید
• ۲. تست mobile-friendly انجام دهید
• ۳. هدف لمسی را برای بهبود عملکرد بهینه کنید
• ۴. از YellowPencil – Visual CSS Editor استفاده کنید
• ۶. تگ Mobile Viewport را پیکربندی کنید

خطای Clickable elements too close together یعنی چه؟

برای اینکه بتونیم این خطا رو برطرف کنیم، اول باید بدونیم که clickable elements توی یه سایت شامل چه چیزهایی میشن.

عناصر قابل کلیک هر عنصر تعاملی در سایتتون هستش مثلا دکمه ها، لینک ها، منوهای پیمایش، فرم ها و غیره که کاربر میتونه روی آنها کلیک کنه. این عناصر به کاربر این امکان را می دهند که اقدام خاصی این موارد رو انجام بده:

• پیمایش در صفحه
• انجام یک عمل
• ارسال فرم ها و غیره

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

در نتیجه، انجام عمل مورد نظر برای کاربر دشوار و ناامید کننده خواهد بود، که منجر به تجربه کاربری ضعیف میشه، بنابراین، گوگل پیشنهاد میکنه عناصر قابل کلیک رو کنار هم نذارید.

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

چرا گوگل خطای clickable elements too close together را در گوگل سرچ کنسول نشان می‌دهد؟

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

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

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

بنابراین، اگر صفحات وب شما با دستورالعمل ها هماهنگی نداره و توی گوشی مشکلاتی داره، این خطاها رو دریافت می‌کنید:

• Clickable elements too close together (عناصر قابل کلیک خیلی نزدیک به هم هستند)
• Content wider than the screen (محتوا گسترده تر از صفحه نمایش است)
• Viewport) Viewport not set تنظیم نشده است)
• “Viewport not set to “device-width (Viewport روی “device-width” تنظیم نشده است)
• Uses incompatible plugins (از پلاگین های ناسازگار استفاده می کند)
• Text too small to read (متن برای خواندن خیلی کوچک است)

اما تمرکز اصلی در این مقاله کلا خطای “Clickable elements too close together” هستش و میخوایم دلایل و روش برطرف کردنش رو برطرف کنیم.

حالا بیاید دلایل ایجاد این خطا رو یکی یکی بررسی کنیم.

طراحی رابط ضعیف

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

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

پس کاربران توی این شرایط چیکار می‌کنند؟

از سایت خارج میشن و میرن سراغ یه سایت دیگه.

مشکل ریسپانسیو بودن موبایل

یکی دیگه از دلایل دریافت این خطا، مشکل ریسپانسیو بودن هستش.

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

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

گوگل نمی تواند درخواست های منبع را آغاز کند

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

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

در صورت ایجاد هرگونه تغییر یا به روز رسانی در وب سایت برای اطمینان از بهینه سازی نسخه موبایل، این روش باید دنبال بشه.

کدام عناصر HTML قابل کلیک هستند؟

اگه وب سایتتون وردپرسی هستش، باید بدونید که کدوم عناصر HTML برای رویدادهای کلیکی استفاده میشن. این آگاهی به شما کمک میکنه تا مشکلی که در حال حاضر باهاش روبرو هستید رو بهتر درک کنید.

از نظر فنی، چندین عنصر قابل کلیک عملکرد کلیک رو اعمال می‌کنند که در ادامه آنها را ذکر می‌کنیم.

بیشتر بخوانید: تفاوت برگه و نوشته در وردپرس

عنصر Anchor

عنصر Anchor یا <a> برای ایجاد لینک در وب سایت استفاده میشه. این عنصر به کاربر اجازه میده تا به یه مکان خاص در صفحه حرکت کنه یا بره یه صفحه دیگه.

به عنوان مثال، این یه عنصر Anchor هستش:

</a>اینجا کلیک کنید<a href=”https://www.example.com”>

عنصر Button

عنصر دکمه یا <button> برای ایجاد دکمه های قابل کلیک در وب سایت استفاده میشه. این به راه اندازی یه اکشن کمک میکنه، مانند ارسال یه فرم یا انجام یه عملکرد جاوا اسکریپت هنگام کلیک کردن. به عنوان مثال، این یه عنصر دکمه اصلی با محتوای متنی هستش:

<button/>کلیک کنید<button>

عنصر Input

عنصر ورودی با <input> شروع میشه و با <input/> بسته میشه. برخی از عناصر ورودی عملکردهای کلیک مانند چک باکس ها <checkbox> و دکمه های رادیویی <input type=”radio”> رو انجام میدن.

سینتکس اصلی عنصر input این شکلیه:

<input type=”text” name=”inputName”>

عنصر select

اگه میخواهید گزینه ای رو از یه لیست انتخاب کنید، عنصر انتخاب یا <select> میتونه بهتون کمک کنه. یه منوی کشویی ایجاد کنید که کاربران بتونند روش کلیک کنند. به طور کلی در فرم ها یا برای انتخاب گزینه ها از مجموعه ای از انتخاب های از پیش تعریف شده استفاده میشه.

به عنوان مثال، سینتکس عنصر select این شکلیه:

<select>
  <option value=”option1″>Option 1</option>
  <option value=”option2″>Option 2</option>
  <option value=”option3″>Option 3</option>
</select>

عنصر Text area

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

به عنوان مثال، عنصر text area در HTML این شکلی هستش:

<label for=”message”>Message:</label>
<textarea id=”message” name=”message” rows=”۴″ cols=”۴۰″>

عنصر Image

عنصر تصویر با <img> شروع میشه و با <img/> تموم میشه. این عنصر برای نمایش تصاویر در وب سایت مورد استفاده قرار میگیره. اگرچه به طور ضمنی قابل کلیک نیست، اما میشه با قرار دادن عنصر <a> تصاویر رو به‌عنوان هایپرلینک قابل کلیک کرد.

به عنوان مثال، عنصر image در HTML این شکلی هستش:

<”توضیحات عکس”=img src=”image.jpg” alt>

۸ روش برای رفع خطای Clickable elements too close together

از اونجایی که خطای Clickable elements too close together هم بر تجربه کاربر و هم رتبه‌بندی تأثیر میذاره، باید در اسرع وقت اون رو برطرف کنید تا روی سئو سایتتون تاثیر منفی نذاره و تجربه سایتتون در موبایل رو بهبود ببخشید.

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

برای رفع خطای Clickable elements too close together این مراحل را دنبال کنید.

۱. URL مثال را مشخص کنید

اولین کاری که باید انجام بدید اینه که URL پرچم گذاری شده برای این خطا رو شناسایی کنید.

برای شناسایی URL مثال وارد سرچ کنسول خودتون بشید.

سپس به قسمت Mobile Usability برید و روی این خطا کلیک کنید. سپس به تعداد URL های تحت تاثیر و یه URL نمونه هدایت میشید.

در نهایت URL مثال رو توی یه تب جداگانه باز کنید.

۲. تست mobile-friendly انجام دهید

پس از شناسایی URL مثال، باید یه تست سازگار با موبایل اجرا کنید.

اما چجوری؟

به Google Mobile-Friendly Test برید، URL نمونه کپی شده رو جای‌گذاری کنید و روی Test URL کلیک کنید. چند دقیقه طول میکشه پس صبور باشید. وقتی تست به پایان رسید نتیجه ای مثل این بهتون نشون میده.

اما در عوض، اگه نتیجه گیج کننده ای دریافت کردید مثلا اینکه صفحه شما بدون خطا در دستگاه تلفن همراه قابل استفاده است، به Bing – Mobile Friendliness Test Tool بروید و URL مثال رو آزمایش کنید.

این به شما یه نتیجه شفاف رو ارائه میده، به عنوان مثال، لینک ها و اهداف ضربه ای بسیار نزدیک و کوچک هستند. این یعنی که URL نمونه تحت تأثیر خطا قرار گرفته و باید اصلاح بشه.

بیشتر بخوانید: مدیریت ابزارک ها در وردپرس

۳. هدف لمسی را برای بهبود عملکرد بهینه کنید

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

این خطا ممکنه به دلایل مختلفی نمایش داده بشه، اما رایج ترین دلیل اینه که هدف لمسی عناصر قابل کلیک بهینه نیست.

ایحاد یه طرح استاتیک واحد و بدون نقص برای همه دستگاه ها غیرممکن هستش. بنابراین، بهترین روش ایجاد طرح‌بندی انعطاف‌پذیر با استفاده از پیکسل‌های مستقل از دستگاه (دیپ) برای تعریف اهداف قابل لمس هستش. عناصر تعریف شده با استفاده از DIP میتونند به صورت پویا مقیاس شده تا به طور خودکار با اندازه صفحه نمایش کاربر متناسب بشن.

حداقل اندازه توصیه شده هدف لمسی ۴۸×۴۸ پیکسل برای صفحه نمایش گوشی هستش. تقریباً معادل ۹ میلی متر میشه که اندازه انگشت یه فرد معمولیه.

اکنون برای شناسایی عناصر قابل لمس منبع این مشکل، باید dpi هر عنصر رو بررسی کنید. به عنوان مثال، اگه اندازه لمس عنصر قابل کلیک کمتر از مقدار توصیه شده (مثلاً ۲۰ پیکسل) است، باید padding رو روی ۴۸ پیکسل تنظیم کنید.

چجوری؟

ابتدا باید تشخیص بدید که کدوم اهداف لمسی باعث ایجاد مشکل شدند. افزونه Mobile/Responsive Web Design Tester رو دانلود و در مرورگر کروم خودتون نصب کنید.

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

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

اکنون برای بررسی ناحیه محاسبه‌شده عنصر قابل لمس، inspect رو باز کنید.

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

پس از انتخاب عنصر بهینه‌نشده، اندازه هدف ضربه‌ای (tap target) و padding رو در گوشه سمت راست نمایش می‌دهد.

اکنون هدف لمسی رو به ۴۸ پیکسل افزایش بدید و برای هر هدف لمسی فاصله ۸ پیکسلی بذارید.

۴. از YellowPencil – Visual CSS Editor استفاده کنید

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

افزونه YellowPencil Visual CSS Style Editor رو در سایت وردپرس خود دانلود و نصب کنید. این افزونه به شما کمک میکنه روی هر عنصری کلیک کنید و بدون هیچ کدنویسی ویرایش بصری انجام بدید.

پس از اتمام نصب به Plugins > Installed Plugins بروید تا YellowPencil رو پیدا کرده و اون رو فعال کنید.

اکنون به YellowPencil > Customizations > Let’s Start برید. این شما رو به یه برگه جدید هدایت میکنه که در اون باید صفحه مورد نظر رو که باعث مشکلات در موبایل میشه، انتخاب کنید.

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

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

به عنوان مثال، اگه می خواهید padding رو تنظیم کنید، Padding رو انتخاب کنید و ۱۰ پیکسل به هر جهت اضافه کنید.

علاوه بر این، گزینه‌های Size و Position رو میتونید برای شکل دادن و جابجایی عناصر قابل کلیک استفاده کنید. در صورت تمایل مستقیماً کد CSS رو در پنل سمت چپ ویرایش کنید.

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

بیشتر بخوانید: تنظیمات عمومی رنک مث

۵. روش ورودی (input method) را بررسی کنید

روش ورودی input method نحوه تعامل کاربر با وب سایت شما رو تعیین میکنه. این میتونه از طریق صفحه نمایش لمسی، یا موس و پد لمسی باشه. این کار کمک میکنه تشخیص بدید که آیا از موبایل، تبلت یا ماوس استفاده میشه.

معمولا دقت کمتری نسبت به ماوس یا پد لمسی در نظر گرفته میشه. اکنون برای تعیین روش ورودی اولیه از تکنیک “pointer” کاربر استفاده می شود. ورودی می تواند یکی از دو مقدار را داشته باشد:

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

۶. تگ Mobile Viewport را پیکربندی کنید

یکی دیگه از دلایل رخ دادن این خطا اینه که وب سایت شما تگ viewport نداره. عدم وجود این تگ، باعث میشه سایت شما ریسپانسو نباشه.

تگ Viewport موبایل به مرورگر اطلاع میده که عرض درگاه نمایش رو مطابق با عرض دستگاه کاربر تنظیم کنه و تضمین میکنه که کاربران موبایل وب سایت بهترین تجربه رو در مشاهده و تعامل با عناصر قابل لمس داشته باشند

برای تنظیم تگ نمای موبایل وب سایت خود کد زیر را در کد HTML اضافه کنید: