Welcome to WebmasterWorld Guest from 54.90.204.233

Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

Is using display: none: for mobile devices SEO friendly?

     
1:15 am on Nov 4, 2014 (gmt 0)

Full Member

10+ Year Member

joined:June 26, 2008
posts:265
votes: 5


Hello,
I'm working on making our website responsive. So I use the following CSS function:

@media screen and (max-width: 600px) {
.classname {
display: none:
}
}

So when viewers see my website with a small mobile device they will see only parts of the content, for example the first paragraph instead of the whole page. If they see the page on a Desktop they will see the full content. But since the content is set to display: none; on mobile do you think this can cause any SEO issues?

Thanks!
6:15 pm on Nov 4, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Apr 30, 2008
posts:2630
votes: 191


Have you tried to search for a part of this text that is hidden on small devices with display: none? I am not sure but i believe that if you can find it in SERPs, you should not have SEO problem.

I would also repeat this search on a mobile device withbless than 600 px to see what happens there.
6:17 pm on Nov 4, 2014 (gmt 0)

Preferred Member

10+ Year Member Top Contributors Of The Month

joined:Dec 12, 2004
posts:647
votes: 10


Google renders the page for desktop & mobile and ignores the invisible content.
6:51 pm on Nov 4, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15452
votes: 739


If it's present in the page source, the googlebot will see it. In fact, unless they are allowed to crawl your stylesheets, they don't know it's set for "display: none". Unless you define the style separately in each individual document (<p class = "invisible"> is probably a red flag even if they can't see the stylesheet).

But I don't think that was the question. Suppose you have a site with a luscious keyword-stuffed paragraph in an attractive location-- only it's got nothing to do with page content, so it's styled for {display: none} on all devices everywhere. If a search engine found out you were doing this, you can bet they would not look kindly on it. The question then becomes: will search engines evaluate the page differently if certain material is only visible to some devices? And will this difference spill over to results for media that do display this content?

Surely it depends on what you're concealing. An extra navigation section? A huge picture? Probably goes under "Who cares". But substantive content...
7:56 pm on Nov 4, 2014 (gmt 0)

Preferred Member

10+ Year Member Top Contributors Of The Month

joined:Dec 12, 2004
posts:647
votes: 10


Surely it depends on what you're concealing. An extra navigation section? A huge picture? Probably goes under "Who cares". But substantive content...


Things have changed. Instead of trying to guess why, Google simply keeps hidden content out of index.

[webmasterworld.com...]

If it's present in the page source, the googlebot will see it.


If you change, hide or remove something via javascript/stylesheet, Googlebot (now) ignores it.

And if you block the stylesheet Google won't know that the page is mobile-optimized.
8:54 pm on Nov 4, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 6, 2006
posts:1191
votes: 41


I use it on many sites. I haven't found a problem.
Presumably you have set a viewport declaration, in which case Google will know it's mobile optimised. I certainly wouldn't block the stylesheet, G probably won't like that.

Incidentally I'm getting good results with putting up a separate mobile optimised page with much slimmed-down content, referred to by this script:

<script type="text/javascript">
<!--
if (screen.width <= xxx) {
document.location = "http://www.mobile-website-address";
}
//-->
</script>

Set 'xxx' to whatever size you wish to target as a mobile device. Make sure you set the correct canonical declarations.
9:37 pm on Nov 4, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15452
votes: 739


a separate mobile optimised page with much slimmed-down content, referred to by this script

Does this script execute before the page in its entirety has loaded? Seems like it would just double the user's download.
10:11 pm on Nov 4, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4171
votes: 262


To see how Google might treat the various ways of serving up mobile content, just look at their recommendations, they tell you what/how they consider to be suitable ways to deal with it here: [developers.google.com...]
Google supports three different configurations for creating smartphone-optimized websites:

Responsive design: serves the same HTML for one URL and uses CSS media queries to determine how the content is rendered on the client side. This removes the possible glitches of user-agent detection and frees users from redirects. This is Google's recommended configuration.
Dynamic serving: serves different HTML for one URL depending on the user-agent. Use the Vary HTTP header to indicate you're doing this.
Separate mobile site: redirects users to a different URL depending on the user-agent. Use bidirectional link annotations to indicate the relationship between the two URLs for search engines.

Make sure you aren't blocking resources like JavaScrpt and CSS for search engines, regardless of which configuration you're choosing. For how-to on the technical implementation, visit our details page.
11:01 pm on Nov 4, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 6, 2006
posts:1191
votes: 41


Does this script execute before the page in its entirety has loaded

Yep. The script needs to be at the start of the <head> section. Google finds the mobile page quickly too which is why the canonical declaration is so important. I accidentally missed one out and the mobile site was listed in the main SERPs until I put it right.

The joy of this method is 'no compromises'. You can build a site suitable for desktop and tablet, complete with all the bells and whistles, and a fast loading, lightweight site for mobile. Plus the main site can still be made responsive if you wish. This can be useful if your visitor has javascript turned off.
4:39 pm on Nov 12, 2014 (gmt 0)

Junior Member from US 

10+ Year Member

joined:Oct 31, 2005
posts: 196
votes: 11


I am using responsive design for a site that has three columns, where the middle one has all the important content. The fist column has some secondary navigation and images, the third column has images and search.

The mobile version just shows the middle column's content and uses display:none; in the css to hide the first column.

So this hidden column (using css) like I said, has secondary nav links in it, some of which have partial keywords in the anchor text.

Is this going to get the site dinged by Google?
9:04 pm on Nov 12, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15452
votes: 739


Follow-up:
Googlebot (now) ignores it.

Isn't that like saying "The jury will disregard..." ? Sure they can say they're ignoring it, and can keep it out of search results. But they've still seen it.

It's also worth remembering that mobiles of any size don't have to use a google mobile app. People can always choose to go online and use google.com. If you do this, will they still switch you over to the mobile results?
5:24 am on Nov 13, 2014 (gmt 0)

New User from IL 

5+ Year Member

joined:June 15, 2009
posts:2
votes: 0


I dont think it matter from an SEO point of view

But...
it still messes up the load time. Hidden elements still exists in the page and thus slow it down.

The best (but time consuming) approach is to conditionally load those elements.
4:59 pm on Dec 31, 2014 (gmt 0)

Junior Member from US 

10+ Year Member

joined:Oct 31, 2005
posts: 196
votes: 11


I am using responsive design for a site that has three columns, where the middle one has all the important content. The fist column has some secondary navigation and images, the third column has images and search.

The mobile version just shows the middle column's content and uses display:none; in the css to hide the first column.

So this hidden column (using css) like I said, has secondary nav links in it, some of which have partial keywords in the anchor text.

Is this going to get the site dinged by Google?
8:27 pm on Jan 5, 2015 (gmt 0)

Junior Member from US 

10+ Year Member

joined:Oct 31, 2005
posts: 196
votes: 11


Has anybody changed their site to a responsive design where they hid columns/content and then started losing traffic?
11:50 pm on Jan 5, 2015 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 12, 2014
posts:95
votes: 0


None; the aside tag is hidden on mobile.
5:26 pm on Jan 6, 2015 (gmt 0)

Junior Member from US 

10+ Year Member

joined:Oct 31, 2005
posts: 196
votes: 11


@EastTexas thanks for the response. What exactly do you mean?
1:11 am on Jan 9, 2015 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 12, 2014
posts:95
votes: 0


I hide the aside tag when viewed on mobile phone.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members