I know this topic already all over the forum. But still, I'm confused if there is no exact example of what they mean with dynamic render using Javascript.
so here is the background of my question:
I want to make a landing page for SEO purpose where the content is about some general question that people usually ask, but there are some feature that I need such as Filter based on question type, is the question itself already answer or not, and question type whether it is math, history, or biology. But for it, There is around 2 technique that I can use to make a dynamic content using HTML, CSS, and Vanilla JS since it can only show 1 category at a time. There are:
Using CSS
display: none & display: blockto show the content based on filter and,The other one using JSON data that I already make the exact structured for the content purpose such as this example below, and put it in the script tag for accessing it after append it to a specific div:
[{
"data": {
"items": [{
// around 500 question in here with several variable such as name, questionType, id, etc.
}]
}
}]
So, here is my question:
Which Technique that I better use if I want search engine to crawl for dynamic content? CSS hidden technique Which I already render all component but only give display: block for the default value and the other get display: none so its hidden but already in HTML body or using JSON data that I already put in HTML script tag, where I make it show based on parameter that the function send, so the content will be dynamic based on JSON data that match the value without rendering it all in HTML body first so the HTML structure can still be clean without repeating the same div which only the content is different over and over again?
and... this is just my curiosity but, perhaps... when we put JSON directly in script, Is search engine will automatically crawl it?
just for information, this is some article that I already read:
https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering
https://developers.google.com/search/docs/advanced/javascript/javascript-seo-basics
https://stackoverflow.com/questions/4536626/javascript-isnt-good-for-seo-is-it
I hope someone can help me regarding this problem, I'm quite confused even after read a lot of article regarding this problem
if you confused about how the data will looks like in code, it will looks like this:
<body>
<div>
// some content code in my website
<button onclick="filterData('history')">Filter Data</button>
<div id="dynamicContent"></div>
</div>
<script>
const datas = [{
"data": {
"items": [{
// around 500 question in here with several variable such as name, questionType, id, etc.
}]
}
}]
function filterData(param){
// function to assign the **datas** and **will append it to div with "dynamicContent" ID**
}
</script>
</body>
scripttag so when user open the page the data already prepared in the end of body before</body>so it already render but in script, if I use the 2nd option, and directly put all of it as div in the 1st option, but yeah I agree with the waste of bandwidth if user must download all of the data when we want to show it around less than 20 data at the same time. But let's back to the topic, any idea about the question above regarding how the SEO works regarding JSON that I put in there?