Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Building web apps I don't have to worry so much about SEO for back end things so dynamically changing the HTML isn't an issue.

I am using backbone.js with a front end site I'm building and the site is a tour based site, ex several sections within the scroll flow.

So when the page loads, I store the original HTML in a variable origHtml then set the HTML to change into something like this.$el.find('.section-one').html('<h1>Welcome</h1>');

This is a part of an animation I am working on and then after some animation happens, that block is out of view and I reset that HTML to the original one.

It's not absolutely necessary to do it that way, but I like playing with backbone.js/javascript and am curious if this is a problem. Because I could just create an extra section and hide/display:none when appropriate, but I am trying to avoid using hide/display:none http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ (an article I read a while back).

I mean this is just experimenting/learning for me what is the optimal way to manipulate HTML for front-end websites?

P.S.: I understand some people may say you need to provide fallbacks for non JavaScript users, and I say no, anyone who does not have a browser that supports JavaScript or does not have JavaScript enabled should not be on my site, plus that demographic is like under 2% (might be wrong) but it's very low.

Additional: If this is bad for SEO I think it would still be okay to use position:absolute and either set opacity:0 on the element I want hidden, or use margin-right: -9999 or even use display:none I don't care I just like the JavaScript way but Id like to understand whats best.

share|improve this question
    
Be careful alienating accessibility-impaired users with your approach (this can be illegal in some regions). People browse the web without JavaScript for many reasons (including ad/script blocking, accessibility, web-crawlers etc. Even Google has a "Basic HTML" view option for Gmail... –  Mike Hudson Mar 3 at 3:05

2 Answers 2

up vote 4 down vote accepted

A search engine will examine the HTML you provide at the start. Anything after that will be ignored. However, Google has said they now do some rudimentary examination of script. Whether they consider altered HTML in that examination, we won't know.

So, any HTML you add or change after the initial download will probably be ignored. Whether you consider that a good or bad thing is up to you to know.

share|improve this answer

To answer your question:

Is changing HTML with JavaScript bad for SEO?

In your case, yes. Don't manipulate important SEO factors like H1, H2, Title tags, img alt text, etc. using JavaScript. You need core SEO factors hard-coded if you want Google to reward you for them.

I learned this the hard way. I had a #1 ranking website that looked amazing to an actual user (not a bot), but to Google, it looked like crap (i.e had no text/content). It was similar to what you're describing, and relied heavily on JavaScript. Eventually, as Google got smarter, my website dropped, and now isn't even in the first 10 pages.

To know for sure how Google sees your page, look at the cached version. If you Google your website, click "view cached" in the little drop-down next to the link, and you'll see how Google sees it, and that will directly answer your question.

It's unfortunate that Google doesn't use their seemingly infinite resources to create a better Google-bot that renders JavaScript (i.e integrated headless browser), but until they do (if ever), you should start hard-coding the things that matter.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.