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

Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

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

virtualreality

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

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!

aakk9999

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

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.

levo

6:17 pm on Nov 4, 2014 (gmt 0)

Google renders the page for desktop & mobile and ignores the invisible content.

lucy24

6:51 pm on Nov 4, 2014 (gmt 0)

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...

levo

7:56 pm on Nov 4, 2014 (gmt 0)

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.

superclown2

8:54 pm on Nov 4, 2014 (gmt 0)

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">

</script>

Set 'xxx' to whatever size you wish to target as a mobile device. Make sure you set the correct canonical declarations.

lucy24

9:37 pm on Nov 4, 2014 (gmt 0)

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.

not2easy

10:11 pm on Nov 4, 2014 (gmt 0)

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.

superclown2

11:01 pm on Nov 4, 2014 (gmt 0)

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.

aok88

4:39 pm on Nov 12, 2014 (gmt 0)

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?

lucy24

9:04 pm on Nov 12, 2014 (gmt 0)

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?

sagive

5:24 am on Nov 13, 2014 (gmt 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.

aok88

4:59 pm on Dec 31, 2014 (gmt 0)

aok88

8:27 pm on Jan 5, 2015 (gmt 0)

Has anybody changed their site to a responsive design where they hid columns/content and then started losing traffic?

EastTexas

11:50 pm on Jan 5, 2015 (gmt 0)

None; the aside tag is hidden on mobile.

aok88

5:26 pm on Jan 6, 2015 (gmt 0)

@EastTexas thanks for the response. What exactly do you mean?

EastTexas

1:11 am on Jan 9, 2015 (gmt 0)

I hide the aside tag when viewed on mobile phone.