How to Fix Mobile Usability Errors in Google Search Console

Here is how you can find and troubleshoot mobile usability errors in Google Search Console.

Video Transcript:

David: Cool. Do you recall your question, or would you like me to read what you submitted?

Onawa: I do remember most of it, but I think you’ll probably have a better chance with what I wrote.

David: The question you asked was: in Google Search Console, you received a “content wider than screen” and a “clickable elements too close together” error. And so, you say you think you fixed the clickable elements, but you’re not seeing the “wider than screen” or anything different from the portfolio pages that don’t have that error. Okay, if I understand the question correctly, you went into Search Console and saw the error under Mobile Usability.

Onawa: Correct.

David: I’m glad you’re looking in there because Search Console is going to literally tell us how Google understands their site. We can spend thousands on tools, but we can bypass that and get it straight from Google. And you know they are mobile-first in the way they index websites. So, when they’re evaluating websites to show up in Google or Rank, they’re looking at the mobile version and deciding if the mobile version is worthy. They’re not looking at the desktop version to decide whether to rank a site. So, that’s why this is so important.

There are a couple of errors in that; you identified two. The “content wider” and the “clickable elements.” So, a couple of notes with these. The first note is that when you see this error in Search Console, you can click on the error, and it will give you at least a few example pages that seem to have this error. So, when I’m familiar with the website, I ask myself: Is there something in common? Is this a common template, for instance, that all these pages share that might have something in common? If so, I want to review the template and check whether there’s an issue in the template file. Or sometimes it’s just individual pages, one or two, that’s going…

The second thing I do is, within Search Console or outside it, you can access Google’s Mobile-Friendly Test. That’s just a website that Google has for free. This is where Google Search Console is getting this data. They are running it on your site for you, so Search Console is a great way to get it site-wide on each page. Remember, this is a page-by-page tool, not a site-wide tool. In this case, if you saw errors in Search Console, you would put the page that Search Console says is an error. And we just hit the test URL.

Dave: But if you were developing a site, probably the best place to do this would be maybe two places. One would be the home page, as it typically looks different from the other pages on the site. And then maybe an example inner page, such as the About page.

David: Right. But if you were in development and this was on the staging server, you couldn’t use this tool because the crawler needs access to the pit tool. So, it only works on live pages.

Dave: Yeah. When we develop, it’s always live. Just a side note.

David: To get back to our question. This will indicate whether there are any specific errors. If there were an error, it would show us a screenshot on the right-hand side. And with that, you can see how Google is rendering the mobile version of your page. So, it might look great on your phone. You might use Chrome. I’m using Firefox development tools to show a mobile version. But in this case, it’s the Google crawler’s ability to see the page. Regarding the error you received, “elements too wide for screen,” that can sometimes be due to an image whose dimensions are too wide. And so, it doesn’t fit. And it pushes content off the screen size for the bot viewing the page. Embedded videos can also be a problem because, typically, they don’t shrink and scale, or they can only shrink so far. Please review the screenshot of your page and confirm whether it is squishing off the side. Then you should be able to identify the problem. That’s how I would troubleshoot it.

Dave: Even if you can’t, even if it just looks fine to me, I love it. It’s fine. Or if the way you’ve done it, the image goes off on mobile or whatever. That doesn’t affect you search-wise, does it?

David: So, Google is evaluating the mobile version of the page for ranking. And in this way, usability is an SEO ranking factor. Because, you know, you’ve probably heard that usability is a ranking factor. This is one way usability could be a ranking factor.

Dave: So, David, I’m thinking about how sometimes we will do an image in the background, right? In the hero area. And it’s only there to make it look pretty. All that kind of stuff. Does Google care about that kind of thing?

David: I would run this test and see if it throws one of those errors. Now, after all that, it is common to look at this and say, “I do not see a problem,” yet still receive an error in Search Console. In fact, I sometimes receive an email from Search Console stating that your web pages are no longer mobile-friendly. And I’ll be like, I literally haven’t touched that page in months. I go to Search Console and submit for validation. And then a couple of weeks later, Google says, yep, it’s fine. So, it’s like sometimes Google has an internal glitch. And they’ll give a false positive, especially with this mobile-friendly test. First, use this to test; it will give you a screenshot of what it looks like on mobile.

Onawa: Okay. Yeah. That helps because this particular portfolio has dozens of literal copies of the same page, and only about four of them, I think, are coming up with content that is wider. I think I’ve fixed the click one.

David: Clickable elements too close together.

Onawa: Yeah. But the too-wide one was confusing because it was a copy of other pages that tested fine.

David: Right. Test them with this, review the screenshot, and if it looks fine, submit it for verification again. It might have just been one of those Google glitches.

Dave: When you do this, what if the screenshot it generates doesn’t even match the site?

David: Then you should think about why that’s the case. Because remember, it’s using the Google bot to screenshot it. This is what Google sees when it crawls your page. For instance, another use of this exact tool that Google has endorsed is WordPress. And so, for a moment, we say, “Oh, thank goodness we don’t have to worry about this stuff.” But, you know, a lot of people are using JavaScript frameworks to build websites. I don’t know why. It’s a terrible idea. But you can use this tool to see if Google can even read your JavaScript framework. Google said that if you have a question about whether we can read your JavaScript framework-rendered site, use this tool. In other words, Dave, to answer your question: if it renders differently, you should consider whether you are, for instance, excluding Google from seeing JavaScript. It was common practice, especially on older WordPress websites, to tell Google not to index the folder containing all the code. Don’t look at the CSS, don’t look at the JavaScript, because it used to not matter. Now it does. We want to grant Googlebot access to those resources. It could be as simple as updating robots.txt to allow crawling, so it can now see JavaScript and CSS and render the page appropriately. But, Dave, if you’re looking at a particular site, I’d check Search Console to see if you’re seeing those errors under mobile usability.

Dave: Okay.

David: If they show up as mobile usability errors in Search Console, then that trumps the screenshot. However, the screenshot feature in this tool can be very helpful for troubleshooting.

Dave: Yeah. Like when I look at one of the sites, I mean, it looks like CSS isn’t loaded properly or something like that.

David: Right. It could be as simple as an outdated robots.txt file that’s preventing Google from seeing the CSS. Again, that was what we used to do because Google didn’t support our CSS. But now it does, because that allows media queries to target the mobile version of the site. Right?

Dave: On the one side, it looks like it sees all the text. And it just looks like there’s no image in the background or something like that.

David: Well, right. And that’s why I’d go into the Search Console and check to see if it’s throwing those errors there. If it doesn’t see the errors there, I would be okay with that. If there are errors, I would work to resume and double-check my robots.txt to ensure it’s allowing Google to see your content.

Dave: So, I don’t know if I’ve got it because I’ve got a site audit standard operating procedure, and I don’t know if doing this test is on that. And it probably should be, huh?

David: Well, doing this test on every single page is a pain.

Dave: Yeah, I wouldn’t do it on everything. So, in other words, if there is some sort of redesign, or give me your opinion on our site, or something like that?

David: Yes. So, if we’re talking about a site you’re currently working on, one of the steps of the Curious Ants process is to weekly check Search Console.

Dave: Yeah.

David: And one of the things you should check every week is for these errors. And so that’s a much more scalable way to use this tool site-wide than to put a couple of pages in, and they all look fine. So, Onawa, does that help answer your question?

Onawa: Yes, that gives me a lot to go on, and I didn’t notice or use the mobile-friendly test, so that helps too. It’ll help me figure it out.

David: Yeah. If you go into Search Console and you click deeper into it, it will actually bring up a screenshot in Search Console, too.

Onawa: Okay.

David: So, you could just click a little further in and get to it.

Onawa: I’m very, very new with Search Console.

David: Yeah. Yeah. And you’ll find it to be a hugely helpful tool. The more you get into it. Great, cool, great question.

Dave: That was a great question.