1

So I have a pretty good above the fold page for desktop, and it's structured like this: https://i.imgur.com/wz7mbZ7.png

The issue is, I am changing my website to make it more mobile friendly. On mobile, when I use the same landing page image (with a person on the left side), I don't have much space left for the main tagline, and the sub tagline together. And on mobile, I have to shrink the font size of the main tagline, and the font size of the subtagline down, which makes it more difficult for the user to read on mobile.

I don't want to get penalized by Google, but at the same time, I have read a lot of information from forums and websites, where general design guidelines recommend that you show Google crawler the same content for your mobile and desktop website. Some information I have read, warn you that showing different content to Google, even for mobile and desktop, risks violating Google's policy on cloaking.

Ideally, I would like to just not even render the subtagline if my webserver detects a mobile device - if I don't render the subtagline on mobile, that frees up a lot of space and I can make my main website tagline font size larger. I can do this with .Net, there is a function Request.Browser.IsMobileDevice which I can check to see if the device is mobile or not. If I use this function in .Net, I can easily show the subtagline for desktop, while not even rendering the subtagline for mobile. But will this trigger the cloaking policy of Google and will my website be penalized for it?

If I can't use the .Net method above to not render the subtagline on mobile because it violates Google's cloaking policies, I am down to a few options:

  1. Use a different landing page image on mobile and desktop. I can use a landing page image on mobile where there is no person on the left side, thus opening up space for my subtagline. But if I switch the landing page image on mobile versus desktop, will that violate some Google guideline?

  2. Use CSS and use "display: none" or "visibility: hidden" on the subtagline, and using a media query for mobile devices (ie. @media only screen and (min-width: 1px) and (max-width: 833px) ). This would hide the subtagline on mobile, allowing me to make the main tagline much larger. Based on the reading I have done, there is a possibility this may violate Google's cloaking guidelines.

  3. Trying to move the subtagline to below the fold on mobile. Technically, given the structure of my website, this one is tricky, and it's a last resort for me. I prefer not to do this, but if none of the other options above are feasible, I may try this as a last resort option.

Any help would be appreciated! I don't see any specific guildelines from Google about what happens when you show different content on mobile versus desktop, or if you try to hide content on mobile.

2 Answers 2

1

Minor point: don't say "visibility: hidden". This still allocates space for the text, and then makes that area blank. I'm really not sure what this is good for.

Another minor point: It's not necessary to say min-width: 1px. If you don't give a minimum, then it just doesn't test for a minimum. So a simple max-width: 800px means anything 800px or less.

I don't claim to know the inner workings of Google. They have said that they frown on hidden text, which includes display:none, white-on-white, and very tiny font sizes.

That said, I've routinely used media queries to make some text or images display: none on mobile. The apps where I did this we weren't worried about users finding us with Google -- it was sites where users clicked a link from another page or were sent a link in an email -- so I didn't investigate what Google did about it. But Google did index the pages, so it's not like they have some blanket rule like "if there's invisible text we won't index you". That would be problematic as lots of web sites have text that is only displayed under certain conditions.

4
  • Hi @Jay. Thank you very much for your answer and the correction on the "visibility: hidden" and min-width: 1px. Regarding your test that Google still indexed the pages, I would like to point out that I think you are referring to manual penalties, which are all or nothing penalties. However, I believe there is a class of penalty where your site/page is still indexed, but the ranking is decreased. Commented Jun 18 at 6:52
  • What I mean when I say Google may lower your ranking is similar to this statement from webfx.com/seo/glossary/what-are-google-penalties: "On the other hand, an algorithmic penalty happens automatically, without manual intervention from Google ... ... With this kind of penalty, you will still be ranking in search, but probably much lower." I believe that if you violate specific Google guidelines, your site/page can still be indexed, but Google will simply lower the ranking of it. And this is what I want to avoid. Commented Jun 18 at 6:55
  • Maybe it's my bad because I said, "penalty" in the original post. To clarify, there are manual penalties where you site can be de-indexed, and there are algorithmic penalties where your site's ranking can decrease, but your site is still indexed. I am referring to the latter and I want to avoid that, assuming my site/page is still indexed. Commented Jun 18 at 7:09
  • @ProgrammerJoe Sure, I understand that. Google's ranking algorithms are secret so I don't think anyone can give you a definitive answer. (I presume they are secret so that site designers don't game the system. Like if they advertised that having more than 5 links increased your score -- a deliberately silly example, I'm not saying they do that -- then anyone with less than 5 links would add some useless links to get up to 5.) So yeah, when I said that Google still indexed the page, I guess that proves nothing about the rankings.
    – Jay
    Commented Jun 19 at 16:11
0

So I thought I would answer this question myself, after the additional research on this issue and my discussions about this subject with other people on other SEO forums. I think any answer to this question requires a deeper delve into Google best practices and what Google may possible penalize. However, please note that nobody knows exactly how Google behaves (unless you work or have previously worked at Google). Also, please note that "penalize" can mean manual penalty where your site/page is delisted, and it may also mean an algorithmic penalty where your site/page is still listed in the index, but the ranking is reduced. Please read my comments in this post for further clarification on the differences between manual penalty and algorithmic penalty. We want to avoid both, of course. But the algorithmic penalty is much harder to track.

So first and foremost, we want to refer to whatever guidelines Google has wrote on hidden text. The main guidelines are at Spam policies for Google web search

For cloaking, here is the relevant text from the guideline:

Inserting text or keywords into a page only when the user agent that is requesting the page is a search engine, not a human visitor

For hidden text, here is the relevant text from the guideline:

Hidden text or links is the act of placing content on a page in a way solely to manipulate search engines and not to be easily viewable by human visitors. Examples of hidden text or links that violate our policies Using CSS to position text off-screen

So I did some reading and research on this issue. The best sources and discussions I could find were these two:

Use of display: none for mobile devices discussion at Webmasterworld forum

Discussion of hiding elements via media query at Moz forum

My conclusion on all the options is as follows:

  1. Use a different landing page image on mobile and desktop: I believe if you make your code transparent to Google bot, it should be okay to use different landing page images for mobile and desktop. To be accurate, I am referring to this HTML code example where the media query is within the source tag, and the source tag is within a nested picture tag. I believe this HTML snippet is very transparent to Google bot, and I would be very surprised if that was penalized at all.

  2. Use CSS and use "display: none" or "visibility: hidden" on the subtagline: Please refer to the aforementioned discussions from the Webmasterworld forum and the MOZ forum. In my opinion, it's probably okay if a media query is used in combination with "display : none." However, this is a grey area, and I am not 100% sure if this will work in all cases. IMO, option 1 above is probably safer.

  3. Trying to move the subtagline to below the fold on mobile: This is probably a safe option and I doubt Google would penalize for this, but I had some trouble getting this to work, based on the convoluted structure of my site.

  4. Detecting whether the device is a mobile device (ie. using the Request.Browser.IsMobileDevice function in.Net), and if it is a mobile device, don't render the subtagline: for this option, I am not so sure of, since the general consensus for mobile design is that the same content should be shown on mobile, as it is on desktop.

So among all the options above, I ended up going with option 1, simply changing the landing page image based on a media query that is within the source tag. In my opinion, it's transparent, it's easily seen by Googlebot (it's not even in a separate .css file, the media query is right in the source tag), and it does what I want.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.