Google Webmaster Tools warns of "mobile usability issues" due to images in topics?


#1

Hi there, I just got this warning message from Google Webmaster Tools about my Discourse forum:

Google systems have tested 61 pages from your site and found that 28% of
them have critical mobile usability errors. The errors on these 17
pages severely affect how mobile users are able to experience your
website. These pages will not be seen as mobile-friendly by Google
Search, and will therefore be displayed and ranked appropriately for
smartphone users.

The detailed warning for every one of the specifically flagged pages says:

Make sure your pages don’t require horizontal scrolling to view completely.

All of these pages do contain large (in terms of dimensions) images in the post contents. However, I checked these pages on my Samsung Galaxy S3 smartphone in portrait and horizontal orientation with the stock Android browser and with mobile Firefox, and they navigate like a dream, with all the images perfectly scaled and no horizontal scrolling necessary (or even possible).

I have made absolutely no customizations to the default Discourse styles, with the exception of adding the Adsense plugin, which incidentally is configured to use responsive ad sizes and also works correctly by adapting to different devices’ screen sizes.

I normally wouldn’t care about these Google Webmaster errors, but it appears that these perceived errors will result in my Discourse site being penalized in Google search results, which is a Bad Thing™. Any suggestions or comments? Thanks!


Google's Mobile Friendly Test
(Mittineague) #2

Did you set your User-Agent to Google when you tested?


#3

Nope, just as a regular user. It would seem really stupid on Google’s part to give warnings about user experience based on their crawler’s experience.


(Jacob Chapel) #4

That is what they do. They have a mobile crawler that they test sites with.

The problem stems from Discourse serving the no-js server rendered version of the site. So in Googles eyes, it might think the no-js version is not mobile optimized. Though in my own testing using the Googlebot mobile user agent, the content came back and did not cause scrolling.

What version of Discourse are you running @sb56637?

FYI you can test this yourself using Google Chrome and by emulating a mobile phone, but using the Googlebot mobile user agent.

Googlebot User Agent

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

#5

Thanks @chapel for the reply!

Huh, that seems incredibly asinine, even for Google. By “crawler” do you mean the same one that they use for their search index? Or do they run another type of crawler for compatibility and user-experience testing? I still don’t see how they can penalize a site for being “unfriendly” to a non-human user agent that never gets used by the general public, or why they would use a non-standard user agent for making judgments on real-world user experience.

1.2.0.beta4

So can anything be done on the Discourse side to work around Google’s logic? Possibly not showing any images to the Google user agent?


(Jacob Chapel) #7

They expect you to treat their mobile bot like any user. That is how they tell you’re site is a proper experience for mobile users.

Google expects that every website treat their bots like a user otherwise you might be cloaking and they might punish your ranking.

The best thing to do is to make sure the no-js HTML has mobile friendly CSS. It might be missing mobile image resizing.


#8

OK, thanks for the reply. In that case I should probably mark this as a bug?


(Jeff Atwood) #10

I suspect this plugin is somehow your issue. I can’t repro this scary message… here’s what the google webmaster tools looks like on meta.discourse:

Similarly when searching from my iPhone, I get mobile-friendly everywhere on Google.

I would be very, very suspicious of this plugin you have installed, because I can’t repro what you’re describing at all…


(Jeff Atwood) #11

This is also dangerously incorrect, that’s not how Google indexes mobile sites t all. Just follow the Google Webmaster guidelines and test using regular mobile agents…

edit: at the very least, use

  • Webmaster Tools
    • Search Traffic
      • Mobile Usability

Which kicks off to

https://developers.google.com/speed/pagespeed/insights/?url={URL GOES HERE}

And as we found, that’s more reliable than the

https://www.google.com/webmasters/tools/mobile-friendly/?url={URL GOES HERE}

that @Mittineague brought to our attention.


(Khoa Nguyen) #12

I use Google Adsense Plugin with only 1 responsive ad slot. And I got mobile-friendly everywhere too
https://s3.amazonaws.com/pushbullet-uploads/ujuNrweFVG8-HSUak4182dcY8GRKK0qu0asY8XW5ip8V/Screenshot_2015-01-15-07-21-46.jpg

@sb56637 you can check your site mobile friendly here:
https://www.google.com/webmasters/tools/mobile-friendly/


(Mittineague) #13

It does seem it’s the images that can be a problem

https://www.google.com/webmasters/tools/mobile-friendly/?url=https%3A%2F%2Fmeta.discourse.org%2Ft%2Finconsistent-view-after-loading-updated-topics%2F14982


(Jeff Atwood) #14

Thanks yeah perhaps it is the topics with images. We’re looking into it, I updated the title to reflect.


(Jeff Atwood) #15

Still, it’s a little unclear… I picked a random topic with image and this is what I get:

Notice it says

Size content to viewport

The contents of your page fit within the [mobile] viewport.


(Mittineague) #16

Confusing indeed. Seems Google has more than one way to evaluate.
The exact same page

https://www.google.com/webmasters/tools/mobile-friendly/?url=https%3A%2F%2Fmeta.discourse.org%2Ft%2Fblue-box-welcome-message%2F22161


(Jeff Atwood) #17

Yep, Google’s own internal systems are not up to date.

It’s no big deal to set a CSS rule to scale the images on the JS-off parts of the site, but that’s not really how Google’s spiders work.

So we would just be changing it on the off chance that somebody happened to get the JS-off page on a mobile device, somehow… which doesn’t seem very likely to me. Even ancient 2011 mobile devices will try to load our mobile site, though they will be awful at it.

edit, OK I am adding this to the JS-off pages:

<meta name="viewport" content="width=720, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">

Since the default thumbnail width is 690px, this makes it fit. It’s kind of a weird issue since, as mentioned above, if you are ever seeing any of this, something has gone catastrophically wrong because you are somehow viewing the JS-off content on a mobile device! Even Google’s own spider knows how to render as a proper mobile device and has for years…


(Jacob Chapel) #18

My point was to see the no-js content that Discourse responds with when a Googlebot user agent is detected.

I was not advocating that to test your site for mobile users. You should use a normal mobile user agent for that.

Test it, use the Googlebot mobile user agent, you will get the no-js/crawler layout which is simplified.

The links shared are good though, glad to see them as they are good for testing if Google determines a page mobile friendly.


#19

I confess I don’t fully understand Google’s methods, and I agree with @codinghorror that the suspect would seem to be the Adsense plugin since that’s the only thing that differs in the code between my site and Discourse Meta. But then again, I run Adsense on all pages, including the topic listings and the home page (Latest topics), and the only ones that Webmaster Tools is complaining about are all exclusively topics with large dimension images.

UPDATE: The problem is definitely the large dimension images, at least to Google’s user agent:

  • My home page (“Awesome! This page is mobile-friendly.”)
  • A topic without large images (“Awesome! This page is mobile-friendly.”)
  • A topic with large dimension images (“Not mobile-friendly : Content wider than screen”)
    Incidentally, on my real browsers, both mobile and desktop, I see properly scaled Adsense ads on all these pages. However, in the mobile preview of “How Googlebot sees this page” it does not show Adsense at all.

(Jeff Atwood) #20

The preview is incorrect as previously noted – Googles own tools disagree. Try the different preview urls in this topic.

Anyway the “fix” is harmless so that is fine,


(Jacob Chapel) #21

You’re wrong. The page speed insights has nothing to do with Googlebot. The mobile tool shows accurately what Discourse sends to the bot since Discourse detects the bot and sends the js-off pages. We know the issue, which is images larger than the viewport on js-off views causing horizontal scrolling, please don’t spread misinformation.


(Jeff Atwood) #22

Regardless, if you are in the js-off view as a human being you are in a bad, weird place. Triply so if you are on a mobile device.

Google knows that the rendering will always be significantly different for a device that reports it is mobile, which is why the spider now spiders that way, the result pages say “mobile friendly”, etc.

… etc.

(pssst, it will even say mobile friendly in the search results if the page contains an image! try it yourself!)