2

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:

  1. Using CSS display: none & display: block to show the content based on filter and,

  2. 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:

  1. https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering

  2. https://developers.google.com/search/docs/advanced/javascript/javascript-seo-basics

  3. https://stackoverflow.com/questions/4536626/javascript-isnt-good-for-seo-is-it

  4. https://moz.com/blog/javascript-seo-guide

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>
2
  • 2
    having your users download 500 questions just to display one of them in the page seems like a huge waste of bandwidth that will slow your site to a crawl. Dec 1, 2021 at 16:17
  • @StephenOstermiller thank you for your response, uhm... instead of download it more like display it all in script tag 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? Dec 1, 2021 at 16:26

1 Answer 1

4

You're making a mistake when you talk about JSON in this story. JSON is just a format and it plays exactly no role here. What is more important is JS rendering. Also, you're showing the source of your page. Source is as unimportant as JSON is. Google doesn't index source, it indexes DOM. So show DOM.

Now, as I understood, the real question here is: A user lands on a page with a bunch of query params in it (filters or not is of no importance either). The backend is not smart enough to understand what those parameters mean, so the backend always responds by sending all that it has (which is poor). Now on the front-end, you want to parse the query string with your pure JS and depending on the query params, filter the data displayed, correct?

If that is a correct interpretation, then the answer is: no difference. Google will execute your js and see the results. Just make sure you don't do any lazy loading or wait for user action to render the content. That would complicate things. In your shoes, I would definitely fix my backend to not flood the user with stuff that was never requested. Well, if I only had the two options that you presented, then I would not want to needlessly increase DOM's cardinality and sheer size.

For SEO, it is important to maintain the URL structure of every piece of unique content. So when dynamically hiding/showing content on a page without changing the URL, you should be ready for this content not to be indexed. And when the URL is changing on show/hide, you must make sure that re-visiting the changed url with no context will lead to correct piece of event being visible.

9
  • Thankyou for your answer, I agree with your statement regarding Backend for the long term solution. As for your interpretation, it almost correct except the Backend side. In this project, we are not using any Backend API and purely operate using dummy data for the first demo (which is the data around 500 items). and can I ask again? based on this word Well, if I only had the two options that you presented, then I would not want to needlessly increase DOM's cardinality and sheer size., So did you mean it is better to choose the 2nd option then? As for Google (continue below...) Dec 7, 2021 at 13:56
  • As for Google you said there in no difference, so it means, Google probably will still indexing all the content as long as it appear in the page event it have the same page but with only different in the content, is my interpretation correct? Dec 7, 2021 at 13:57
  • I don't know what you mean by the 'same page'. For Google, the page is 'same' if the URL is exactly the same. When there's no way to link to the 'other version' of the page. That is one of the harshest mistakes one can do. So no, 'same page' with the difference in context won't be properly indexed and ranked cuz it's one URL. There has to be something in the URL that distinguishes the version of the page, moreover, it has to be accessible directly.
    – BNazaruk
    Dec 7, 2021 at 16:33
  • Thankyou for the reply, so can I draw a conclusion that If I want to make SEO Priority then JSON DOM with a lot of data is not a good choice since it will still load in the same page with only dynamic content, and in this case in fact, JSON itself has no anyrole regarding SEO crawl, that's why If I want to make a long term solution it is better to make A new page instead for every content since with this, Google will read a lot of different content which is good for SEO Availability. Is my conclusion correct? if yes, can I ask you to edit your answer and add this conclusion to your answer?.. Dec 8, 2021 at 7:50
  • ... so I can give my check for this answer to help other people if someone trouble in this problem too, thankyou, and please notice me after that because I'm not sure if you edit your answer, is there any notification come to me Dec 8, 2021 at 7:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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