0

I have a website that provides a custom UX experience implemented via JavaScript. When JavaScript is disabled in the browser the website falls back to CSS for the layout.

To make this possible I've added a noJS class to the <body> and quickly remove it via JavaScript.

<body class="noJS layout-wide">
<script type="text/javascript">var b=document.getElementById("body");b.className=b.className.replace("noJS","");</script>

This caused a problem when the page loads and JavaScript is enabled. The body immediately has it's noJS class removed, and this causes the layout to appear messed up until the JavaScript code for layout is executed (at bottom of the page).

To solve this I hide each article via JavaScript by adding a CSS class fix which is display:none as each article is loaded.

<article id="q-3217">....</article>
<script type="text/javascript">var b=document.getElementById("q-3217");b.className=b.className+" fix";</script>

After the page is ready I show all the articles in the correct layout.

I've read many times in Google's documentation not to hide content. So I'm worried that the Google will penalize my website for doing this.

1 Answer 1

2

Sounds like your potentially avoiding one problem and then creating a whole new one.

no-js is by far the most effective and commonly used method of rendering pages for both js and without js. I'm no JavaScript experience and personally I used Modernizr to add JS and remove.

Also I believe preferred method is in the <html class="no-js"> not the <body>, and I believe this is the preferred method because boilerplate, zurb foundation, twitter bootstrap and all the other frameworks use the HTML method which I would assume this is perfered for one or more many reasons.

Quick Fix for Rendering Issues

The reason your getting rendering issues is because your JavaScript is after the content and not before, when using no-js never defer it by placing it at the bottom any scripts that rely on it need to be above - Google page speed even mention that deferring scripts and styles should only be done where possible, in this case its not unless you come up with another method or ignore how the page renders. You could always use a aJax loader until the DOM/Elements is loaded.

In terms of proceeding with display:none method, Google won't hate it but you shouldn't over do it either in my honest opinion. Google will look to ensure that display:none has a trigger on the page which you do but the biggest problem with Google no one knows for sure when their bot has trouble, there's no debugging tools nor any logs of the crawl - that's why so many developers approach things at the least chance of failure.

My advice would be to hope over to Stack Overflow and ask the JavaScript Wiz Kids a good fix for your problem if what I say doesn't resolve it.

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.