Is changing HTML with JavaScript bad for SEO?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

As of 2018, the above answers are probably wrong. There is good evidence that google bots expect content to be dynamic and do their work accordingly. After all, the overwhelming majority of web content is dynamic to one degree or another these days, and google wouldn't be providing very useful or valuable search results if they ignored that.

https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

https://medium.freecodecamp.org/seo-vs-react-is-it-neccessary-to-render-react-pages-in-the-backend-74ce5015c0c9

https://medium.com/@l.mugnaini/spa-and-seo-is-googlebot-able-to-render-a-single-page-application-1f74e706ab11

https://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa