JavaScript and SEO. How Should I reconcile them?

Question

According to some SEO experts and theories like Progressive Enhancement (PE), page content should be presented appropriately to users even with JS disabled. And I totally agree with this.

Here is my situation, on our client's About Us page, there is a div which lists their company events. Due to space and another considerations they hide some of event lists with JS as well as CSS element display:none.

So far, two things really really scare me about this.

• One, CSS element-display:none. My experience tells this is very dreadful in terms of SEO.
• Two, JavaScript disabled. With JavaScript of my browser disabled, I simply cannot see the hidden event lists. Obviously without JS, the learn more tag is nonfunctional. This kind of situation is definitely going against PE theory and SEO experts' warning.

In addition to those two scaring things, I also have one puzzlement.

I used Google web master tool to fetched this page and it showed all of hide event lists. If Google robot craws my site with JS disabled, how could it fetch those hidden content? or if it is able to fetch those hidden content, does it mean the PE theory is outdated and those experts are wrong?

What should I do now? Thank you for your time.

Answer 1

Firstly, display:none is not universally considered to be a SEO faux pas; crawlers can still 'crawl' that text; there are just conflicting theories as to if it affects reputation, or if they'll index it with equal weight.

The PE theory and SEO/findability theory overlap, but their 'interests' differ at times; you could in theory do something thats bad PE without it being bad SEO.

If JavaScript is disabled, PE theory says 'you should be able to functionally use all of the site'. But, if the default is display:none; and it becomes display: block via JavaScript, that's not PE, since a JS disabler could never view your content (though a crawler might).

The better practice is to have display:(not none) be the default, and set display: none; via JavaScript. That way, JS disablers see and use the content (even if in a visually unappealing way), and enablers experience it the way you inteded

That covers you on both counts, since crawlers can't tell if JS is being used to hide something, in case there IS SEO-negativity associated with display:none;

Answer 2

Spiders essentially see what you see when you "view source." If you hide your content with CSS or JS, chances are the spider will still be able to see them because they mostly look at the raw HTML source (where the content was declared). However, if you load your content with JS (via AJAX, etc.) then spiders will not be able to see your content because they do not typically execute javascript.

As long as all content is described in the HTML source then you should be OK for the most part.

Answer 3

As others have answered, crawlers see the raw source of your page. While in some situations "display:none" might be held against you, my current thinking is that if you're not abusing it (to stuff unrelated keywords into your page), it's probably okay.

That said, to do progressive enhancement right, you should ensure that the page displays all content with javascript disabled. Use javascript to hide and reconfigure things ondomready.

That way, if I have javascript turned off, I can still see everything. If I'm a search engine, I don't have to get worried about seeing "display:none" in your CSS. And if I'm the other 99% of users, javascript hides some content just-in-time, so I can enjoy the sexyness that is whatever the hell you're doing in javascript to make stuff sexy.