Will google index content declared in an inline javascript variable?

https://stackoverflow.com/questions/19367147

30-06-2022
|

Question

I can't seem to find a clear answer on this. If my page looks like this:

<html>
<head>
  <script>
    var mypets = [ 
        { 'type': 'dog', 'name':'rover' }, 
        { 'type': 'cat', 'name':'kitty' }];
    $('#btnShowEm').click(function() { $('#emptyAtFirst').text(mypets[0].name); });
 </script>
</head>
<body>
  <div id='emptyAtFirst'></div>
  <button id='btnShowEm">ShowEm</button>
</body>
<html>

Will Google index the 'mypets' data even though it is not displayed in the html at the start? The real world page declares lots of content in a similar javascript object and displays bits of it in response to user actions; I want to know if I have to do something more in order to get the page to index based on all the content, not just what is visible in html before the javascript stuff runs.

Solution

I do not recommend that you rely on content stored in JavaScript to drive your SEO efforts.

Google has said "If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site." That's why Google recommends using Lynx to preview your site to see how their spider sees it.

Although it is almost certain that Google does read all your JS, I doubt they give you as much (if any) rank juice from JavaScript code. It is better to place your important content in your HTML. Perhaps HTML5 data-attributes are more favorable to search engines. If this is the case, to maximize the likelihood that the search engine will read it, you will probably want to have all this content in the HTML when the initial page loads, rather than populating it via JavaScript after page load.