Dynamically loaded content on webpage not recognized in keyword density checker - does Google do the same, and can I fix it?

Question

Context

I have a website. On one of my pages, users can create articles. They fill out a form with their article and the article is placed in my database. There is another page where users' articles (along with their article titles) are dynamically loaded using jQuery and AJAX when a user visits the page.

I'm currently working on my SEO - specifically, keyword density. I went to a keyword density calculator (https://www.webfx.com/tools/keyword-density-checker/ - I also used http://tools.seobook.com/general/keyword-density/) and put in the URL of one of the articles a user had made on my site (https://www.writingboxco.com/readArticles.php?article_id=136&userid=2&user=). When I submit the link in the density checker, it only displays the words that were NOT dynamically added to the page - like the name of my website, among other things. So it only lists about 10 words. The contents of the article did not show up.

I'm wondering if the Google crawler does the same thing - it doesn't see the contents of the users' articles, because the content is loaded dynamically, which would create an SEO problem.

I'm unsure if I'm doing something wrong with the way I structure my page or load my articles that makes it hard for readers to access the dynamically loaded content.

My jQuery is at the bottom of the inside of my body tag, so I didn't use $(document).ready() or anything of that sort, if that helps. I just went straight into the AJAX call.

These keyword density checkers do allow for text input instead of a link, but the problem is not that I just need to find the density of these keywords - I also need to ensure I'm formatting my pages so that crawlers can get all the content contained within my users' articles.

Question

Do you need to include certain code when dynamically loading content using jQuery and AJAX so that Google/another page searcher gets all the content on a particular webpage instead of excluding the dynamically loaded content?

If there's any code you would like to see, let me know. I'm not sure what I would need to include. Let me know if there are any questions.

Answer 1

Googlebot is much more advanced than this keyword density tool. Googlebot can execute JavaScript and it will index the words on the page that appear when the page is loaded after the initial JavaScript is run.

If you can easily change your site to not load content with JavaScript it is better for SEO. Even though Google can execute the JavaScript, your site and changes to your site will get indexed faster without JavaScript. Other search engines like Bing, Baidu, and Yandex won't be able to index your website if it depends on JavaScript to render. Sites that are built with JavaScript frameworks often deploy pre-renderer technology to show an HTML page to search engines.

When using AJAX with Google you need to avoid some common problems:

1. Allow Googlebot to crawl all your JS.
2. Don't rely on user interaction to load content. Googlebot doesn't click, scroll, other othewise interact with pages. It just loads them and sees what shows up.
3. Assign URLs to every piece of content. Even if your site is a "single page", search engines need the ability to deep link into specific content.
4. Use <a href="..."> elements in your rendered pages for navigation so that Googlebot can crawl different URLs. Even if you intercept clicks on links and load the content with AJAX, Googlebot needs the anchor tags to crawl all your content.