بر کسی پوشده نیست که اکثر مردم از طریق موبایل به اینترنت دسترسی دارند. بنابراین عدم سازگاری وبسایت با موبایل می‌تواند رشد ترافیک بالقوه و دید کلی در جستجو را دچار مشکل کند.
یکی از راه‌هایی که این اتفاق می‌تواند بیفتد زمانی است که گوگل صفحه شما را با خطای “clickable elements too close together” یا به فارسی “عناصر قابل کلیک بیش از حد به هم نزدیک هستند” علامت‌گذاری می‌کند.
خطاهای “clickable elements too close together” که یکی از خطاهای آشنا برای وبمستر ها می‌باشد نشان‌دهنده ناوبری ضعیف در حالت موبایل است.
در این مقاله ما به بررسی علت های این خطا خواهیم پرداخت و شما خواهید توانست با روش هایی که به شما آموزش می دهیم این مشکل را حل کنید.
خطای lickable elements too close together به چه معناست؟
عناصر قابل کلیک به هر المانی که صفحه وجود داشته باشد مانند دکمه‌ها، لینک ها،منوها،فرم ها وغیره می گویند که این عناصر توسط کاربر قابل کلیک کردن هستند و تا یک اقدام خاص مانند وارد زیر را انجام دهند :
- ناوبری در صفحه وب
- انجام یک عمل
- ارسال فرم‌ها و غیره
هنگامی که کاربران در سایت شما حضور دارند روی متون و یا تصاویر و المان های خاص کلیک می کنند. اگر نزدیکی بین عناصر قابل کلیک بیش از حد نزدیک باشد عناصر همسایه نیز کلیک خواهند شد و اینگونه خواهد بود که احتمال کلیک اشتباهی بالا خواهد رفت، خطای clickable elements too close together نیز به همین معنا و برای حل چنین مشکلی توسط گوگل به مدیر سایت نمایش داده می‌شود تا از بروز چنین مشکلی جلوگیری شود.
بهترین روش این است که فاصله قابل توجهی بین عناصر قابل کلیک برای کاربران موبایل حفظ کنید. این امر استفاده از هر هدف قابل کلیک را به راحتی تسهیل می‌کند و اطمینان حاصل می‌کند که عناصر همسایه صفحه وب تداخلی ایجاد نمی‌کنند.
چرا گوگل خطای clickable elements too close together را نمایش می‌دهد؟
پس از درک معنای این خطا که در بالا خدمت شما عرض کردیم، مرحله بعدی شناسایی دلیل نمایش خطا توسط Google Search Console است.
گوگل برای بررسی یک سایت بات های موبایل را مامور می کند، پس توجه داشته باشید که گوگل در حالت موبایل سایت شما را مشاهده می‌کند. بنابراین شما باید یک وبسایت طراحی کنید که کاربران موبایل بتوانند به راحتی در آن جا به جا شوند. اگر گوگل هرگونه مشکل استفاده از موبایل را تشخیص دهد، عملکرد سئوی شما کاهش می‌یابد و ترافیک را از دست خواهید داد.
در اینجا لیستی از خطاهایی که ممکن است در صورت وجود مشکل استفاده از موبایل با آنها مواجه شوید را گرد آورده ایم:
- عناصر قابل کلیک بیش از حد به هم نزدیک هستند (Clickable elements too close together)
- محتوا عریض‌تر از صفحه نمایش است (Content wider than the screen)
- دیدگاه تنظیم نشده است (Viewport not set)
- دیدگاه به “عرض دستگاه” تنظیم نشده است (Viewport not set to device-width)
- از افزونه‌های ناسازگار استفاده می‌کند (Uses incompatible plugins)
- متن برای خواندن بسیار کوچک است (Text too small to read)
با این حال تمرکز اصلی ما درک مشکل “Clickable elements too close together” و تعیین دلایلی است که گوگل را به چنین اقدامی ترغیب می‌کند، سه دلیل اصلی وجود این خطا را می توانید به موارد زیر اشاره کرد :
ضعف در طراحی رابط کاربری (UI)
در هنگام طراحی یک وبسایت باید به خاطر داشته باشید که همه بازدیدکنندگان شما از دسکتاپ نیستند. در واقع بیش از نیمی از جمعیت ترافیک وب از دستگاه‌های موبایل سرچشمه می‌گیرد و اگر هنگام طراحی وبسایت آن موارد را در نظر نگیرید می‌تواند منجر به تجربه کاربری ضعیف برای آنها شود.
اگر عناصر زیادی را روی یک صفحه وب قرار دهید و مقیاس‌بندی کنید، صفحه وب برای صفحه‌های موبایل شلوغ می‌شود. در نتیجه هنگامی که کاربران موبایل از وبسایت شما بازدید می‌کنند به سخی می تواند روی المان مد نظر کلیک کند و این یک تجربه بد کاربری (UX) هم برای کابر به حساب می آید.
کدام تگ های HTML قابل کلیک کردن هستند؟
اگر یک سایت وردپرسی دارید باید بدانید که کدام یک از عناصر قابل کلیک هستند تا بتوانید خطای عناصر به هم نزدیک را حل کنید
عنصر لنگر یا همان تگ <a>
عنصر لنگر یا تگ ‘<a>’ برای سایت لینک در صفحات وب استفاده می شود، این عصر باعث می شود که کاربران در صفحات مختلف وب بچرخند و صفحات جدید باز کنند.
|
1 |
<a href="https://www.example.com">Click Here</a> |
عنصر دکمه یا Button element
عنصر دکمه یا تگ ‘<button>’ یکی دیگر از تگ های پرکاربر در HTML است که وضیفه آن ساخت دکمه های قابل کلیک در یک وبسایت است. این دکمه می توانید برای سایت دکمه ارسال یک فرم نیز قابل استفاده باشد.
|
1 |
<button>Click Me</button> |
عنصر ورودی یا Input element
عنصر ورودی با ‘<input>’ شروع می‌شود و با ‘<input />’ بسته می‌شود. برخی از عناصر ورودی مانند کادرهای انتخاب (‘<input type=”checkbox”>’) و دکمه‌های رادیویی (‘<input type=”radio”>’) عملکردهای کلیک را انجام می‌دهند و از قابلیت های این عنصر می باشند.
|
1 |
<input type="text" name="inputName"> |
عنصر انتخاب یا Select element
وقتی که بخواهید یک گذینه را در یک لیست انتخاب کنید بهترین گذینه استفاده از تگ ‘<select>’ می باشد، با استفاده از این تگ می توانید لیستی از شهر ها و یا ماشین ها و غیره بسازید.
|
1 2 3 4 5 6 7 8 9 |
<select> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> |
عنصر منطقه متنی یا Text area element
عملکرد اصلی عنصر ناحیه متن یا ‘<textarea>’ انجام ورودی متن چند خطی است. اما می‌توان آن را با اتصال کنترل‌کننده‌های رویداد به عنوان یک عنصر قابل کلیک استفاده کرد.
|
1 2 3 |
<label for="message">Message:</label> <textarea id="message" name="message" rows="4" cols="40"></textarea> |
عنصر تصویر یا تگ img
این تگ HTML برای نمایش تصویر استفاده می شوند اما این عناصر به صورت تکی قابل کلیک نیستند اما می توان این تگ را درون یک تگ ‘<a>’ گذاشت و آن را تبدیل به یک لینک کرد، پس اگر تصاویر خود را لینک دار می کنید و خطای Clickable elements too close together دارید این مورد را نیز بررسی کنید.
2 مرحله برای حل خطای Clickable elements too close together
1 – آدرس صفحاتی که این خطا را دارد مشخص کنید
اولین کاری که باید انجام دهید، شناسایی URL است که این خطا را دارد.
برای شناسایی URL نمونه وارد حساب Google Search Console خود شوید و URLی را که این خطا را برمی‌گرداند بررسی کنید.
سپس به بخش Mobile Usability بروید و روی خطایی که در آن نوشته شده است کلیک کنید. این شما را به تعداد URLهای آسیب‌دیده و یک URL نمونه خواهد رساند.
در مرحله آخر هم URL هایی که دچار خطا هستند را در تب های جداگانه باز کنید.
2. تست موبایل فرندلی بگیرید
پس از شناسایی URL، باید یک تست سازگاری با موبایل یا همان موبایل فرندلی را اجرا کنید، اما اگر به دنبال روش قدیمی تست حالت موبایل هستید این روش منسوخ شده و mobile friendly testing tool گوگل نیز بازنشته شده است.
خطا ها مشخص هستند و باید به کمک طراح سایت خود این موارد را حل کنید، توجه داشته باشید که اکثر این خطاها به دلیل پست نویسی اشتباه است که باید این موارد را حل کنید.
