Is it bad for SEO to remove some DOM element after page has loaded?

Question

I'm creating a blog template that generates a div with the main content within (articles, lists of posts, authors, etc.). This content is parsed by JavaScript when the page loads and then removed, to be rendered differently elsewhere.

I know that web crawlers can execute scripts nowadays, so, is it a bad practice for SEO to modify or remove tags where the main content is in?

Edit: to give more context to my question, the content is removed from the document but then re-added with a JS framework (Vue.js in this case). My approach was to use the initial data for SEO purposes, since I can't use Server Side Rendering on my project and I'm building a template for WordPress.

Answer 1

I think it's probably fine to render your page this way, but I want to stress the word probably.

Google will see how the page loads by rendering it. And so if the removed html code causes the same effect as the replacement javascript then I don't think you should get hit by any cloaking penalties. It's always difficult to know how the bot will interpret this however, as its algorithm is getting more and more complex as well as machine learning generated. However, if the bot interprets your site correctly it shouldn't hit you.

There are some other reasons to generate your site in this way. Some people have javascript disabled and so the HTML code likely won't be removed, allowing the page to be rendered the way intended for them. Also, other crawlers and search engines aren't able to read javascript as well as Googlebot can, so the content on your site will be more understandable for those robots as well.