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. So, do you recall your question, or do you want me to read it off 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: Okay. Okay. So, the question you asked was, in Google Search Console, you got 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, so if I understand the question right, you went into Search Console, and you saw the error under mobile usability.

Onawa: Correct.

David: And that’s great. 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. Now, there are a couple of errors you might find in that, and you found two of them. The “content wider” and the “clickable elements.” So, a couple of notes with these. The first note is 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. And so, what I like to do is ask myself, especially if I’m familiar with the website, is there something in common? Is this a common template, for instance, that all these pages share that might have something in common? And if it is, then I want to look at the template and see if maybe 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 of Search Console, you can access what’s called Google’s Mobile-Friendly Test. That’s just a website that Google has for free. Let me pull it up and share my screen. So, all you have to do really is Google the Google Mobile-Friendly Test, and you’ll see that… There we go. So, 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 of getting it site-wide on each individual page. I’m having a little slow problem, but we could just simply enter any URL on this website. Let’s grab one. Let’s just grab this one from Curious Ants. And we paste it because, 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 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 because it typically looks different than the other pages of the site. And then maybe an example inner page like the about page.

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

Dave: Yeah. So, when we do our development, it’s always live. Just a side note.

David: There are other ways to test this. But this takes a while. I’m just having slow computer problems lately.

Tricia: I have, too.

David: I think it’s my new password manager.

Tricia: Well, mine is that I need to clear off something. I just need to clear mine out.

Dave: This isn’t a consequence of being in the Curious Ants group, is it?

Tricia: I think mine is a consequence of having too many images and videos of Moxie.

David: To get back to our question. This is going to tell us if there are any specific errors. If there were an error, it would actually show us on the right-hand side a screenshot. 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. Now with the error you received, “elements too wide for screen,” sometimes that is a function of having an image that the dimensions are too wide on. And so, it doesn’t fit. And it kind of pushes things off the screen size for the bot that’s 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. But look at the screenshot of your page and see if it does squish off the side. Then you should be able to identify what might be your 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 of the ways usability might 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 saying all of that, it is very common to look at this and say, I do not see a problem, and still get an error in Search Console. In fact, sometimes I will randomly get an email from Search Console that says your web pages are no longer mobile-friendly. And I’ll be like, I literally haven’t touched that page in months. And so what I do is I go to Search Console, and I hit 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. So, the first thing is just to use this to test because 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 like four of them, I think, are coming up with the content wider. So, I think the click one I’ve fixed.

David: Clickable elements too close together.

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

David: Right. Test them with this, see what the screenshot looks like, and then, 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 then you should think about why that’s the case. Because remember, it’s using the Google bot to screenshot it. So that is what Google sees when they see your page. So, for instance, another use of this exact tool Google has endorsed is we all use 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. And so, Google said, if you have a question of whether we can read your JavaScript framework rendered site, use this tool. So, in other words, Dave, to answer your question, if it renders differently, you should wonder whether you are, for instance, excluding Google from seeing a JavaScript. It used to be a practice, especially on old WordPress websites, where you would tell Google don’t go to the folder that has all the code. Don’t look at the CSS, don’t look at the JavaScript, because it used to not matter. Now it does. So, we really want to give Google bot access to those things. And it could be as simple as changing a robots.txt to allow it to see everything so that it can now see the JavaScript and CSS and render the page appropriately. But, Dave, if you’re looking at a particular site, I would go into Search Console and see if you’re finding those errors under mobile usability.

Dave: Okay.

David: If they show up as mobile usability errors in Search Console, then that trumps the screenshot. But the screenshot in this tool can be really helpful to troubleshoot problems.

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

David: Right. And it could be as simple as an old robots.txt that’s not allowing Google to see the CSS. Again, that used to be what we do because Google didn’t care about our CSS. But now it does because that allows the media queries to see 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, then I would be like, okay, fine. But if there are errors, then I would work to resume, and I would just double-check my robots.txt to make sure it’s allowing Google to see your stuff.

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 does give me a lot to go on, and I didn’t see or 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.