Fix Mobile Usability Errors in Google Search Console
Articles,  Blog

Fix Mobile Usability Errors in Google Search Console


Welcome back, this is John Locke and I’m
re-recording this video on fixing mobile usability errors in Google Search
Console. For those who don’t know, Google Search Console is a free tool that you
can sign up for. You can verify your website by adding a text record to your
domain name records, or uploading a small HTML file to the root of your domain,
or verifying through Google Analytics. It’s something that I highly recommend
that you do. 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
mobile usability errors, or other types of errors, that you might want to fix. Today
we’re going to look at three of the most common of these mobile usability errors,
and how to fix them, how to get them validated. These are “the text is too
small”, “the content is too wide for the screen”, and “the tap targets are too close
together” or “the tap targets are too small”. So let’s look at each of these.
I just recently fixed some of these on my own website. I’m going to try and find
some other properties in my own Search Console and show you in real time how to
fix these. So let’s go so this website. Here is a friend of mine, I built his
site I’ve done some SEO for his site. This is ClassicMuscleCustoms dot com. I
notice he has some errors here for mobile usability. Let’s see, the text is
too small to read, the clickable elements are too close together. So let’s see if
we can fix those for them. Wen I come to his website, let’s look at “the text is
too small” first. What Google is really looking for with mobile usability is a
font size that’s at least 16 pixels. So if the pixel size is less than 16
pixels, it’s it’s going to give that type of error, because it’s too small for
people to read on a phone, in some cases. So these look…the these fonts all look
fine. I know the inner pages on this site, they have the same style. So
this all looks fine. Let’s check this. I don’t know if you can
see this part, but that looks like it’s 18 pixels. Okay so it looks fine down here.
Aha, this might be what’s triggering it. The footer area. let’s look at the links
here. That link is…these links in the left are 14 pixels. This looks like
it’s 14 pixels – that indeed is 14 pixels. So that’s too small. This
copyright notice down here is 13 pixels. Let’s see if we can fix that. Okay
we’re going to fix that and come back. Let’s take a look now. This is what it looks
like when everything is 16 pixels, a minimum of 16 pixels on mobile. That shouldn’t
be too bad. By the way, this is a responsive site, meaning you have the same styles
on mobile that you do on desktop. I don’t shrink anything down, the stuff scooches around. okay so let’s see if we can fix this other thing. By the way, with this screen that you’re seeing, here is the
old version of Google Search Console. These are all the messages here for
all the sites that I manage. There’s some in here that are about mobile
usability, some other messages about some other stuff. Okay so let’s look at
“clickable elements are too close together on mobile”. Let’s see if we can
figure this out. What Google is really looking for with “items that are too
close together”… because not everybody’s fingers are the same size.
And you don’t have the mouse on mobile, you have your finger and you’re tapping
things. When we are talking about “tap targets”, Google wants tap targets that
are 48 pixels by 48 pixels. That is the tap target that they’re looking for. A 48
pixels square. Then what they’re looking for with “tap targets too close
together” — in my experience they want about 26 pixels of
clearance between each tap target. One way that I can check this is using CSS. I can do this really
quick. Let’s see if these are too close together. Those look like they have
enough room. Those look fine. So I don’t think that’s the problem. I’m
trying to figure it out. Let’s look here. Let’s look in the actual mobile menu, and
see if the tap targets are too close together. I mean this looks like it’s
it’s enough room between all these links. Let me check, let me see. I’m going to play with some CSS here. These honestly look like they’re close — I mean they don’t look like they’re too close together. They don’t look like they’re not far
enough apart. So I’m not really sure what’s triggering that warning. Let’s go down here. Let’s see.
Margin-top, if we do 26 pixels, so if I do – 26 pixels for each deal, they’re not quite bumping into one
another. Maybe what I need to do is something
like this. Just give it a little bit more room. Maybe something like that. Just give it like one more pixel of room. Maybe that’ll take care of it. Okay let’s see if I can find this. I’m
going to fix this really quick. The other thing that I want to look at with the
tap targets, really quick is this sort of thing where there are embeds from his
Facebook albums. These also might be too close together, I’m guessing. But let’s
see what we can do here to fix this. Because this is a third-party tool,
called EmbedSocial that we’re using here. Let’s see if we could make it a little bit easier. That might give a little bit more
room, so that right there might give a little bit more room. I don’t think
that’s a full twenty six pixels. But that might give it a little bit more room for people to tap. Now I’m going to fix this. I’m going to go ahead and
fix this. Then we’re going to come back. And what we’re going to do is, we’re
going to submit these errors as fixed. Let’s do “fix mobile usability issues”.
We’re going to click this button. And this is the new Search Console, so it says “two
errors, two issues” These are valid URLs. These are old URLs. So “text too small” to
read validation, we’re going to click this. It says “not started”, so we’re
going to validate the fix. If we’re done fixing, it’s going to go and try
and crawl whatever pages or whatever parts of the site that it found these
errors on, before. But it’s not going to validate it right away. What it’s going
to do is, it’s going to start a process where Googlebot will go and crawl it, and
render it, and then…[whispers] So here we go, here’s the
actual pages where it says that it originally found these errors. Let’s take a look. This says, this one “tap targets too close” no
I’m not really seeing anything out of the ordinary on these. Oh interesting.
Okay this is something. This is something that I need to fix here. It says
“text too small”, but honestly the only things where I see that is here, and
yeah that’s the only thing I can see. This is something I actually need to fix.
This is an old Facebook album. What this is going to do basically, now that we’ve
started this process…”clickable elements too close together”… it’s going to start a
process where it’s it’s going to go in and look at all these different pages.
Then once it looks at everything, and it might take a few days, it takes a few
days to validate everything. Once it does that, it’ll it’ll give us a notice,
that either things passed, or it didn’t. So this is the user agent type for
Googlebot, right? Here’s smartphone crawler. So basically it simulates a
smartphone. Basically even though this says right here that it isn’t started to
process, it actually has. It will tell us pretty
soon that it’s it’s going to fetch and render those pages.And it’s taking a
look at everything. Once that’s done, that error will be fixed. If you go back to the
old search console, you’ll see that it’s validating the most mobile usability
issues. We can even check the validation flow process. It says it started. We can see the
details right here. So it’s “pending”, and then once it’s done, it will say “passed”
“failed” or “other”. So here’s the site that we launched not that long ago. Here’s
another site this is for Industrial Air Filtration USA, and this issue is “content
is wider than the screen”. Let’s take a look at that. So this is okay. I guess
this is already fixed, “content wider than the screen”. It must already be fixed. Okay with the “content wider than the screen”,
usually what this ends up being is either a video or an image, or
something else that when it’s viewed on mobile, it extends outside of the screen,
and it doesn’t fit in the natural flow of the page. If you have to
scroll to the side to see what’s in there, then then something is not right.
That’s usually what it is. It’s usually a video or image or an embedded object in
the page that’s overflowing. So you might need to get with a developer to fix it.
Let’s see if I can show you some of the mobile usability issues I just fixed on
my site very recently. Okay… “uses incompatible plugins”. That one’s
fixed. That was a video that I embedded from wordpress.org, and I hadn’t updated
that page in a while. Alright, so these are some of the things that I recently
fixed on my own website. “Text too small to read”. This is passed. “Content wider than
screen”. I guess this is not available. I guess that’s passed. “Clickable elements too
close together”. This one hasn’t started yet. Let’s look at see if we can find another.
“Content wider than the screen”. I guess it’s already fixed. So how I fixed mine again, the “text too
small to read”? 16 pixels. I just increased everything to that. “Content wider than
screen”? There is one instance where there is something overflowing the page. So I
fixed that. “Clickable elements too close together”? Remember you want your tap target
that is 48 by 48 pixels, and you want 26 pixels of clearance. So let’s look at
this one. Trust is the key. “Clickable elements too close together”. It says now
some of these pages, it doesn’t crawl all that often, but I’m not seeing anything
where it’s too close together, so I have a feeling that this one will be marked
as fixed. Once it goes back to that. All right well, anyway, I hope this gives
you an idea, the three most common mobile usability errors. Again to sum up, the three most
common things or these. “Clickable elements are too close together” or “The
tap target is too small” and “The text is too small”. So 16 pixels. “Content is wider
than the screen” and again with the content is wider than the screen, most of
it the time, it’s either an image or a video that is overflowing the page. 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 it will tell you, and show
you the flow of getting it fixed. I hope that is helpful to you. My name is
John Locke. My business is Lockedown Design and SEO. I’m here every single day
making videos on SEO. Thanks again to all the new subscribers who have come on
recently, and until next time, peace.

Leave a Reply

Your email address will not be published. Required fields are marked *