Would it be considered a black hat?

Question

In my newly created e-commerce site where I sell tires, I have a tire search page. This, in fact, is the page where you will find your product and go to a specific product page. I wanted everything to be really beautiful and modern with a javascript form and ajax calls, but I also wanted it to be SEO friendly. Therefore, if you enter a page with JS rotated (or like Googlebot), you will see the following:

Here are listed all types of tires (summer, winter, other tires, etc.) on the left side and all products according to the selected type on the right side, linking to a specific product page.

And a regular user with JS enabled will see the same thing at first, but they will quickly be replaced with this when the DOM is ready:

After loading the forms, products are downloaded using ajax and updated every time you change something in the forms.

I showed it to my friend who claims that it was a “bad” cloaking. He claims that this was considered a violation of Googles’s principles for cloaking because I showed different content for the user and Google. In my opinion, this same content is displayed differently, but I really can’t afford to take a chance, and I am very new to SEO, so I really don’t know.

So, I went online when I came across this article claiming that there is both white cloaking (good) and black cloaking (bad). Unfortunately, I'm still not very sure whether this is good or bad, so ...

So my main question is:

• Is this method considered bad cloaking or good cloaking?

Additional questions:

• I considered displaying my top 20 generic products instead of displaying all tires filtered by tire type in the "Google" -view. Is this the best option to optimize my popular products?
• I also thought that all the products are on a long list, opinions on this?

Answer 1

This is normal. You are showing the same content, one is the best user experience and the other. This is a great example of progressive improvement .

Cloaking is when you only show content to search engines specifically for ranking management in search engines. Therefore, if you start showing content only on Google, especially if you filter the content based on the user agent or IP address, then you are cloaking and an SEO black hat.

Answer 2

As John Conde said, this is not cloaking. If loading content after the DOM was considered cloaking, we could not use many javascript or ajax scripts. What you have to do is always try to show the same "content" to js and non-js users.