Question: [![Actual "Fetch as Google" results.](https://i.stack.imgur.com/ZBitb.jpg)](https://i.stack.imgur.com/ZBitb.jpg)

Googlebot sees content differently (doesn't index it at all) than the visitor if the content was generated dynamically from a JS file (see image above). Let's say I have the following code:

```
<body>
<div>Bunch of Content</div>
   <script type="text/javascript" src="/js/somefile.js" />
<div>Bunch of Content</div>
</body>

```

How can I display the actual resulting HTML in the document when the page loads:

```
<body>
<div>Bunch of Content</div>
   <p>Javascript dynamically created this string and this string.</p>
   <p>Date: timestamp by JS</p>
   <p>Other info dynamically created by JS.</p>
<div>Bunch of Content</div>
</body>

```

I have JS doing the heavy lifting to generate some content dynamically specifically for the page. The problem is, because the content is being generated in a JS file, the content never gets loaded in the DOM for indexing by crawlers.

Is there a way to do this? Thanks!

Answer: 
Google CAN index dynamic content, but it does not mean it will index it, or display it in search results, as it usually only looks for it in search of negative aspects (like black-hat SEO practices), although for some sites it may decide to use it for its index (it's a blind guess really, when it comes to how Google handles this, as they don't disclose this kind of details).

If your JS is making an AJAX request, and you're the owner of the API or whatever endpoint you're calling from the request, then your best bet is to cache the result on the server side, and modify your HTML page (which should be dynamic) so it renders the latest cached result in the HTML sent to the browser, but wrapped in a container tag (like a `<div>`) with an inocuous CSS rule like `opacity: 0;` so the content isn't visible to users by default, which should be changed to `opacity: 1;` by your JS file once the up-to-date HTML is loaded.
You could use jQuery to accomplish this, like in the example below:

```js
$(document).ready(function() {
  var el = "<section>Dynamically added content</section>";
  $('.a').after(el);
})
```

```css
div {
  padding: 10px;
  background-color: #ccc;
}

section {
  padding: 10px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">Bunch of Content</div>

<div>Bunch of Content</div>
```

**Update**: If you're using Ajax to get data from the server, then you would include the update on your code from the returning data object. You could extend this to iterate through the values you get.

```
$.getJSON('[Your url]', { param: 'value' },
    function (data) {
       var el = "<section>" + data.value + "</section>";
       $('.a').after(el);
     });
});

```