: Will Google treat this JavaScript code as a bad practice? I have a website that provides a custom UX experience implemented via JavaScript. When JavaScript is disabled in the browser the website
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.
More posts by @Pope3001725
1 Comments
Sorted by latest first Latest Oldest Best
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.