Hello friends, welcome to my new Fresh Article. If you are a blogger, you must be associated with the search console. Today, we will discuss a common issue of that search console, which is the mobile usability issue.
Search consoles have a lot of issues, you know about some issues or you will know about some issues later. One of those issues is the mobile usability issue and I will discuss four more issues in this issue. Those issues are-
Type of Mobile Usability Issues of GSC
- Text Too Small to Read,
- Clickable Elements Too Close Together,
- Content Wider Than the Screen,
- Viewport Not Set [to “device-width”]
First, Find Affected Links in Search Console
- Go to your Search Console,
- Click on the Mobile Usability section,
- Now you can find types of issues,
- Then open these issues one by one,
- Now you can find affected URLs.
Second, Follow These Two Steps
- If you are using a cache plugin, you will not see any changes immediately. So keep the cache plugin deactivated until this task is completed.
- For an immediate preview of the solution, use the Google Rich Test website. Search with the link here, then you will see if there is an error. If you fix the error, you will see that too.
- NOTE:- In most cases, the following four issues come together due to an error. So don’t forget to Reach Test the affected URL after completing each step.
How to Fix Mobile Usability Issues of GSC?
I have done a lot of research on these issues but have not found the right solution. Finally, I have solved it myself, the solution that I will give you and through which you can fix your mobile usability issues.
Let me tell you first, you have to understand the meaning of the issues. Then you can solve issues on your own, you don’t need anyone else’s help. Let us explain the issues to you …..
1. Text Too Small to Read
As you can see from the name of the issue, the size of the text is so small that it is difficult for visitors or search engines to read or understand. So you understand that the size of any text on your site or maybe all the text on the site is very small.
If you can resize those texts to the correct size, it will be automatically fixed. I will give the correct solution but there are some conditions, you have to keep in mind. Look at the solution first, then I will say the conditions.
How to Fix Text Too Small to Read?
If your theme has a blog text customization option, go there and make the text size 16px-20px. If the theme does not have that option, you can solve this problem with a small CSS code.
- How to Add CSS Code?
- First, log in to your WordPress admin panel,
- Click on the Customization option under the Appearance section,
- Open the Additional CSS code section,
- Download the CSS code and past it here,
- Finally, Publish and test URLs in Reach Test Tool.
CONDITIONS:- Suppose the affected URLs contain certain article URLs, then the CSS code may not be required. You can optimize the article, such as text size.
2. Clickable Elements Too Close Together
Your article must contain clickable elements. If such clickable elements are very close, then such an issue arises. That is, the elements are so close that the visitor wants to click on one, clicking on the other. To eliminate this problem you need to keep the correct spacing between the elements.
How to Fix Clickable Elements Too Close Together?
- In most cases, this issue is automatically fixed as soon as the first issue is fixed. So after fixing the first issue, test the URL once.
- In many cases, this issue occurs even if the caption text of the image is used. So if you use caption text in images, delete them.
- Test URL in Reach Test tool.
- If this issue is still not fixed, check the space-related options in your theme.
3. Content Wider Than the Screen
As you can see in the image above, the text or image on the left is hidden. This is the result of this mobile usability issue, which is due to several reasons. E.g.-
- Non-Responsive theme,
- Not a mobile-friendly theme,
- The image size is incorrect,
- Container customization is incorrect.
How to Fix Content Wider Than Screen?
- I hope if you follow the above method then this issue can be fixed automatically.
- Adjust the size of the images you are using in the article. I will recommend keeping the size of the image 700/400.
- To Change the Image Size-
- Open the article,
- Click on the image,
- Now click on the setting on the top-right side,
- Just scroll, and you can find the dimension settings.
- Use a mobile-friendly theme,
- Check the theme’s container settings.
4. Viewport Not Set [to “device-width”]
The viewport is a meta tag that helps to set web pages according to different screens. But on some sites it is in a different format, you need to use the correct viewport meta.
<meta name="viewport" content="width=device-width, initial-scale=1" />
How to Fix Viewport not set [to “device-width”]?
This is in the header.php section of your theme, check once the correct viewport meta is present. If missing, add the above viewport meta after the <head> tag.
Finally, Start the Validation for Fix Mobile Usability Issues
If you see the error fixed in Google Reach Test Tools, start validation of all issues. Search engines will take some time, then all mobile usability issues will be fixed automatically.