Google Search Console:- Mobile Usability Errors Fixing Guide

SHARE:

Search Console Mobile Usability error fixing. text is too small to read, content is too wide for the screen, clickable elements are too close together

Hello friends, I hope you are doing well. this is Babita Singh with a great value-driven tutorial on fixing all Mobile Usability Errors in Google Search Console.

For those who don't know that, what is Google Search Console, here is a complete detailed post for them, which lets you know all about Google Search Console, and make you understand that how to utilize its tools & features? and how to improve SEO, for getting higher ranking in search engine results.
Google search console mobile usability error fixing
Once Google has verified your site, and they start crawling your site, they may from time to time send you messages that let you know that you have some Mobile Usability Errors or other types of errors, that you should fix.

READ MORE:-
Today we're going to look at 4 of the most common Mobile Usability Errors, and we'll learn how to fix & validate them. These are...
  1. The text is too small to read
  2. The content is too wide for the screen
  3. The clickable elements are too close together or the tap targets are too small 
  4. The viewport is not set
So let's look at each of these and fix all errors one by one, but before fixing these errors manually, you must check your website, is it mobile-friendly or not? for analyzing your website just check it here for Mobile-friendly test

Text is too small to read:-

According to Google guidelines for mobile usability, the font size should be at least 16 pixels, And if your site's font size is less than 16 pixels, you gonna get this type of error, because it's too small for the people who read on a phone.

google search console:- text is too small to read error

So, you need to fix this error for giving a proper visualized image to your site's visitors on a phone, so that they can easily find a user-friendly view while reading your posts. so for fixing this error you need to follow this process...
  • Go to your Google Search Console dashboard, and click on the "Mobile Usability" link, under Enhancement Section at left-hand side menu-bar.
  • Here click on the "Error" option and scroll down below.
  • Now click on the error text showing "Text is too small to read".
  • Now you will find all pages affected with this error. 
  • You should double-check your all affected URLs with Mobile-friendly test too.

The "Text is too small to read" Error Fixing in Blogger.

If you are running your site on Blogger, and you get this Mobile Usability Error in your Blogger Site, then you just follow this step by step process...
  • Go to your Blogger site dashboard and click on the "Theme" option under the left-hand side menu-bar.
  • Now click on the "Customize" button, and then go to the "Advanced" option and then click on the "Add CSS" link.
  • Now open an affected page link with this error by clicking on the page link in Google Search Console, and it will be open in a new tab.
  • Here select some "body text" and then right-click and select the option "Inspect Element".
  • Here new HTML window will be open here to try to find where the ".post-body" font element has mentioned, just copy this HTML code and paste it to Custom CSS place which we oped before in Blogger's Customize option under Advanced CSS option.
    Google search console text too small to read error
  • Now increase the font size on Custom CSS Box, it should be least 16px and above then click on the "Apply to Blog" button. and your "text is too small to read" issue will be resolved.
    google search console text is too small to read error

The "Text is too small to read" Error Fixing in WordPress.

For resolving "Text is too small to read" error in WordPress Website you need to install a plugin naming "TinyMCE Advanced". for installing this plugin and using it for removing all mobile usability errors you need to follow these steps.
  • Go to your WordPress site Dashboard and select the plugin option under the left-hand menu-bar.
  • Here click on the "Add New" link then type in the search bar "TinyMCE" and you will find this plugin, just click on the "Active" button.
  • Now go to the plugin option again and click on the "settings" link under the "TinyMCE Advanced" plugin. 
  • Now it will take you to the setting page where you will find the "Font Size" option just right tick ☑ on that option. then scroll down and Drag and Drop font size or font family option in the menu-bar on the same page and then click on the "save changes" button.
  • Now open the effected post on WordPress, here you will find the font size option in the menu-bar so select all font and increase the size minimum 26px and update this post. now your error will be removed from the Google Search Console site automatically.

The content is too wide for the screen:-

You get the warning that "content is too wide for the screen" because the size of your Images is widened then a screen so you need to make this size small to fit in the screen. so for doing so you need to do only one thing...
  • Reduce the size of images under 500px in WordPress
  • Use "Small, Medium, Large" size in Blogger, never use "Extra Large" size.
  • Also if you create Images for Blogger, try to use the size less than 500px, then you should use the "Original" size only. if you follow these guidelines you won't get these errors ever.

The clickable elements are too close together:-

Google Search Console sends you a warning for this error because your Main menu-bar or Footer Menu-bar categories don't have enough padding that is why your menu links are shown together on a mobile screen.

google search console clickable elements are too close together

So for removing this error, you need to increase the padding pixel in Your Theme settings, but if you don't know anything about codings then just follow my tips below...

The "Clickable elements are too close together" Error Fixing in Blogger.

Friends, for removing this error on your Blogger site you should follow the same processor we followed before for solving the issue "Text is too small to read" but at this time we will inspect our menu-bar elements. so let's do the processor...
  • Here you need to right-click on the main menu-bar tab options such as "Home, Categories" and select the "Inspect Elements" option.
  • Now also click on the blue arrow icon at the upper left corner on this new window. because this will show you the exact code of all links, text, and other elements. also, click on the mobile screen icon as well.
    google search console:- clickable elements are too close together
  • Now click on the "Home" button and you will be able to see the exact code of the home menu button. Now Just Copy all HTML codes. for ".main-menu ul.menu li a". 
  • Now go to your Blogger site dashboard and click on the "Customize" option under the theme tab. here at the last, you will see the "Advanced" option and when you click on you see the "Add CSS" option box.
  • Now just Paste your Copied HTML Code here and make some changes by increasing padding by 2-5px, and click on the "Apply to blog" button. and your error will be removed.

"Clickable elements are too close together" Error Fixing in WordPress.

If you are running your site on WordPress and you get the warning from Google Search Console that "clickable elements are too close together", here you need to add margin in between your Menu-bar options, and for doing so follow the processor mentioned below...
  • Go to your site and set your screen for Mobile Display, and now right-click on the "Home" button then select the "Inspect" option.
  • Now it will show you the HTML Coding for Menu-bar Tabs, now Copy this all HTML Code mentioned in the "menu" section. Copy complete code including "menu".
  • Now go to your WordPress site dashboard and click on the "Customize" option under the Appearance tab. here you will find the Additional CSS option. now paste your copied HTML Code here.
  • Now Add Some Extra coding "Margin: 2rem" and increase padding size by 2px-5px and save these coding and your this Mobile Usability Error will be resolved.

The viewport is not set:- 

This is a common issue most site owners get from Google Search Console, you get a warning about this error because your Website doesn't open perfectly on mobile due to pixel and size setting issues.

So you need to make some settings for a mobile screen so that your website can adjust it's size according to mobile or tablet screens easily. so for fixing this issue just follow these steps below...

The "Viewport is not set" error fixing in Blogger:-

  • Copy this HTML Code from here <meta content=’width=device-width, initial-scale=1’ name=’viewport’/>.
  • Go to your Blogger dashboard >> Theme >> Three Dots >> Edit HTML.
  • Here find <Head> using Ctrl+F, and just below it paste above code here and click on the "save" button.

The "Viewport is not set" error fixing in WordPress:-

For fixing this issue on your WordPress site just follow these steps and your issue will be resolved...
  • Go you your WordPress site dashboard >> Appearance >> Theme Editor.
  • Here you get a function "PHP", here you need to find header PHP. Under Header PHP you find the "Head" tag.
  • Now copy this code from here "<meta name=”viewport” content=”width=device-width, initial-scale=1”>"
  • Now paste your copied code just after <Head> tag, and click on the "Update file" button. Now you have done.
Now you have fixed all mobile usability errors on your site so now you need to go to your Google Search Console dashboard and click on the URL Inspection tab and inspect live your all affected pages one by one with this error. 

Here you can see your all errors have been removed and your pages ready for indexing so submit your request for indexing for these pages and congratulate you have done.

Also, fix all coverage and crawl errors in Google Search Console here...
So if you're stuck with that, get a developer and they can usually fix it pretty quick. Then you submit it in Google Search Console and you will get rid of these errors.

I hope that is helpful to you. if you find this post "Google Search Console:- Mobile Usability Errors Fixing Guide" valuable then share it with your friends, so that they can fix their mobile usability related errors.
Babita Singh
Thanks, and make it a great day
Babita Singh

COMMENTS

BLOGGER
Name

Blogging Tools,8,Copywriting Tools,1,Digital Marketing Tools,6,Gmails Power Features,2,Google Tools,10,Post Scheduling Tools,2,SEO Tools,6,Social Media Marketing Tools,2,Website Analysis Tools,5,
ltr
item
Digital Marketing Tools:- Google Tools For Online Marketers: Google Search Console:- Mobile Usability Errors Fixing Guide
Google Search Console:- Mobile Usability Errors Fixing Guide
Search Console Mobile Usability error fixing. text is too small to read, content is too wide for the screen, clickable elements are too close together
https://1.bp.blogspot.com/-LJPIWZ3en7k/XtdWTdsEdYI/AAAAAAAACd4/jZ3O2Ybfd3ki75WfZaDscTkdOQpQbhK8wCLcBGAsYHQ/s1600/mobile%2Busability.webp
https://1.bp.blogspot.com/-LJPIWZ3en7k/XtdWTdsEdYI/AAAAAAAACd4/jZ3O2Ybfd3ki75WfZaDscTkdOQpQbhK8wCLcBGAsYHQ/s72-c/mobile%2Busability.webp
Digital Marketing Tools:- Google Tools For Online Marketers
https://www.prodigitalmarketingtools.com/2020/06/google-search-console-mobile-usability-error-fixing.html
https://www.prodigitalmarketingtools.com/
https://www.prodigitalmarketingtools.com/
https://www.prodigitalmarketingtools.com/2020/06/google-search-console-mobile-usability-error-fixing.html
true
7186187585424453050
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy