What is the best way to create an alert bar with css but without javascript on the top of the page, like the one StackOverflow has for saying "Stack Overflow works best with JavaScript enabled"?
I've heard this is bad for SEO as it's duplicate content on every page. How do I prevent that?
something like this:
...
<body>
<div id="jsNotify"><p>This page works best with JavaScript</p></div>
<script type="text/javascript">
var elm = document.getElementById("jsNotify");
elm.parentNode.removeChild(elm);
</script>
...
This will add the notification at the top of the page, but will remove it if you have JavaScript enabled.
I'm not sure how you can force search engines to dismiss the text inside it. But if you have links, then you can use nofollow to stop the search engine from following the link, like so:
<a href="http://www.example.com/" rel="nofollow">limited site</a>
With respect to SEO, this won't count as duplicate content any more than a template header or navigation would.
Duplicate content on every page should not affect search engine rankings as long as the content is short & simple, like a copyright notice. Stuffing your pages with too many duplicate keywords is another matter as keyword stuffing will be seen by search engines as an attempt to spam the the engine.
You can try putting content that you only want users without JavaScript to see within a noscript tag.
<noscript>Please enable JavaScript.</noscript>