Responsive Design Using display:none For Mobile And SEO Risks

[projectmanuk]

Hi, first of all, a Merry Christmas to you all.

We are considering making our site responsive in order to accommodate the ever increasing number of mobile visitors. Our website is relatively information heavy, and we realise that it may not be the best user experience for mobile if we display the same content for them simply by re-arranging the layout. In other words, we will probably have to hide some content to mobile users by using display:none.

To summarise, a typical page on our website will show one bulk of content for desktop and tablet users (depending on their screen resolution), and a different bulk of content for mobile users. How will Google see this method of content delivery, and will we shoot ourselves in the foot by doing this?

I fail to comprehend what content Google will see, if someone could enlighten us that would be great.

Thanks,

[menntarra 34]

Some people say display:none is not good for google, and some say, google does not care. What is my thinking is that if you use it to really trick google, then you can be in trouble, else i think you're good to go.
On the other hand, if you really are scared, use this to hide things, wherever you can:

.hidden /* hidden class */
{position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
clip: rect(1px, 1px, 1px, 1px);}

[FranticFish]

I'm not sure about that.

IMO if Google care about 'display:none' to hide content, then they also about other CSS methods of hiding content - the above method included, as well as positioning something off the visible page with a huge negative margin.

But I don't think they do care. CSS menus, show/hide areas like concertinas, less/more information boxes - all of these use CSS to hide content until it is requested.

The point is that the text is in the source, so that the search engine can discover the content in a similar way that a human can. It's all there for the asking.

With a responsive design, it can be a slightly different scenario. If you show your desktop page to Googlebot-mobile with text in it that is not available to a mobile user when they visit the site, then you could be said to be cloaking - especially if your page ranks for something Googlebot-mobile sees that a mobile visitor from Google is then prevented from seeing.It's hard IMO to not see that as you getting that visitor under false pretences.

If you're bothered about that, then you need to ensure that Googlebot-mobile gets to see the same text that mobile visitors see.

[edited by: FranticFish at 9:52 pm (utc) on Dec 23, 2013]

[lucy24]

One thing to watch out for: {display: none} won't prevent any content from loading. In particular, if the {display: none} element includes a background image, you must also, separately, say {background-image: none}. Otherwise the image will be loaded even though it doesn't display. The same goes for ordinary foreground images. (I have personally tested this.)

[JD_Toims]

IMO if Google care about 'display:none' to hide content, then they also about other CSS methods of hiding content - the above method included, as well as positioning something off the visible page with a huge negative margin.

But I don't think they do care.

---

Systems and methods for detecting hidden text and hidden links

Abstract

A system detects hidden elements in a document that includes a group of elements. The system may identify each of the elements in the document and create a structural representation of the document. The structural representation may provide an interconnection of the group of elements in the document. The system may also determine whether one or more elements of the group of elements are hidden based at least in part on locations or other attributes or properties of the one or more elements in the structural representation.

[patft.uspto.gov...]

Google Granted Patent on Invisible Text and Hidden Links

Linked from the Guidelines is a Google page on Hidden Text and Links, where Google tells us to wary about doing things such as:

Using white text on a white background
Locating text behind an image
Using CSS to position text off-screen
Setting the font size to 0
Hiding a link by only linking one small character—for example, a hyphen in the middle of a paragraph

[seobythesea.com...]

---

Make sure if you use display:hidden or display:none anything not showing is easily displayed by a user.

[lucy24]

display:hidden

visibility: hidden
?

[JD_Toims]

My fingers have a mind of their own sometimes when I type, go with the point -- lol :)
Of course that's what I meant, but without the space -- visibility:hidden -- LOL

[Zivush]

we realize that it may not be the best user experience for mobile if we display the same content for them simply by re-arranging the layout. In other words, we will probably have to hide some content to mobile users by using display:none.

I am against this sort of assumption. Short/thin content may be good for mobile apps but not for mobile responsive websites.
I'd say, it's the best user experience to provide everything that is given on the main website, because mobile users want to read the same content that is provided on desktop. You have to find creative ways to display the same information - text, video, image or any other creative media.
You better see some examples of big sites and how they deploy responsive design.

However, I think it's safe to hide some navigation links or images, not sure about text content (as it is a key part of the page itself and its ranking). You wouldn't want to take the risk.

[Dymero]

Pretty sure Google is on record as saying that not showing some content on mobile vs desktop is okay, so long as the same things are being shown for both users and the crawler.

However, be aware that simply hiding text won't prevent it from actually being seen by the crawler, as it crawls the code. So it's theoretically possible that Google could use the hidden text to, say, create the snippet in the search results.

[Whitey]

You better see some examples of big sites and how they deploy responsive design.

The big e-commerce sites that I watch are reducing content significantly. They appear not interested in bloating pages for SEO purposes, and actually, those I speak with have long said they don't build with SEO in mind - it's too unreliable. Enabling SE access with good UI/UX involving streamlining fast facts is key.

( It's worth noting that some big sites have real problems adapting to this environment where complexity is part of the process ).

I think the whole ranking thing is driven by brand signals and good UI - for the rest Google doesn't care. Fits perfectly with the vision of Panda.

Some of the best sites are becoming much more intuitive and visual, time is poor , and people need to find and absorb information faster on smaller, more convenient devices. So there's tendency towards fast UX.

In that environment Google must go with the flow - it's a follower, not a leader in trends. So, personally, I don't think it matters to hide or not ( provided your intentions are legit , per earlier posts ) - just focus on what you anticipate users want to see and work on building brand. The rest will follow.

[projectmanuk]

Thank you all for your comments and I didn't want to be rude but I have been away.

I understand that I should not be looking for a definite answer, and probably should trust my gut feelings about this one. Hiding content is different from hiding navs or sidebars, it is after all the most critical part of the page - things that make the page unique.

I think we will review the text on the pages, and think of better ways of presenting them on mobile, without having to hide things.

Thanks for your help!