Does Google penalize

Question

I am using javascript to toggle a dropdown nav menu. I was thinking for users who have js disabled, then the nav won't appear. So I was going to use a noscript tag with the nav contents. Would Google look at this as duplicate content? Simple example of code:

HTML

<img id="menuicon" onclick="toggle_visibility('nav');" src="someurl" width="32" height="32" />

<ul id="nav">
<li><a href="">SomeMenuItem</a></li>
<li><a href="">SomeMenuItem</a></li>
<li><a href="">SomeMenuItem</a></li>
</ul>

<noscript>
<ul>
<li><a href="">SomeMenuItem</a></li>
<li><a href="">SomeMenuItem</a></li>
<li><a href="">SomeMenuItem</a></li>
</ul>
</noscript>

CSS

#menuicon { cursor: pointer; }
#nav { display: none; }

JS

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display === "block"){
      e.style.display = "none";
   }
   else {
      e.style.display = "block";
   } }

Answer 1

To avoid the chance of content duplication, what I would recommend is to have the menu items load up then after, use javascript to arrange it as you please. For example:

<div ID="menu">
<!-- Insert menu items here -->
</div>
<script>
document.getElementById("menu").style.visibility="hidden";
//code to arrange and position menu box as desired
(handle of thing to click to activate menu).onclick=showmenu;

function showmenu(){
document.getElementById("menu").style.visibility="visible";
}
</script>

The code needs to be worked on, but the point is, make the menu items available first so that regardless of javascript support, everyone has access to the menu. Then when javascript is active, after everything loads, the menu can then be styled and positioned as desired.

Answer 2

Firstly with regard to what @Mike says in his answer Google crawlers can now interpret content generated by Javascript as the crawl the DOM and not the source code so doing that doesn't really make a difference from a crawling standpoint. Additionally Google doesn't penalize content based in noscript tags as it is recognized that the content in noscript tags is only displayed where javascript has been disabled and this is a very small minority of internet users. Doing tests in the past Google hasn't even used keywords embedded in the noscript tag for the test site as a keyword as it wouldn't show up for all users.

Answer 3

Duplicate Content Vs Duplicate Element

It's a common mistake of webmasters from all over the globe to confuse duplicate content with duplicate elements. It would be helpful if you first established the differences between the two, before deciding which option is best for you.

What is Duplicate Content?

Google and other search engines determine duplicate content as pages that contain a very high proportion of content similar to that of another page internally, or externally. Using snippets, quote blocks from other pages or sites does not make a page become duplicate, assuming that some of the content you have within the content area is unique.

In this day and age duplicate content is expected, to avoid any punishment or confusion by the search engines its recommended that sites good use of canonical links, it was released for this purpose.

What is Duplicate Elements?

Duplicate elements are very common and not something that you should be concerned about, since Google and other major search engines expect template based elements such as navigations to be repeated multiple times on one page or many, for example it's common to see social links at the top of the site, and then again at the bottom, markup may differ or be exactly the same with different CSS styling.

Nowadays many sites use multiple navigation bars for desktop, and mobile, using media queries and display: none. Google does not care, however if possible you should avoid duplicate elements, why? reducing code and for administration purposes.

Avoiding Duplicate Elements

In most cases duplicate elements can be avoided by doing some research or knowledge, in a lot of cases like nav bars for mobiles, administrators do it because its all they know how to do, or they are lazy and want a quick dirty solution.

In your situation I believe that solution your using isn't the best practical solution and can be avoided. You can opt to use .no-js by using Modernizr or a similar no-js solution.

You simply add the class no-js to the body, whenever JavaScript is enabled, it'll remove the no-js and add js, what this means is your able to control the style of your site without the hassle of having to use <noscript> and creating avoidable duplicate elements.

Your CSS will then look like this:

#nav { display: none; }
.no-js #nav { display: block; }

You can then use .no-js for all other features of your site that need tweaking for the no-js environment.