Will they, won’t they see the JavaScript?

Update: All 6 tests passed. Google displayed the lyrics in search results for all the tests. I have added screenshots of the results below each test.

I recently came across an article written in 2015 by Adam Audette for Search Engine Land about how Googlebot crawls JavaScript with positive results. You can find the full article here. In particular I was interested in test 3, Dynamically Inserted Content. According to the article two tests were done:

1. Test the search engine’s ability to account for dynamically inserted text when the text is within the HTML source of the page.
2. Test the search engine’s ability to account for dynamically inserted text when the text is outside the HTML source of the page (in an external JavaScript file).

Audette says both tests were successful but the article unfortunately does not link to any code examples, just screenshots of test pages. I will do my own testing here, including code, first to see if the results can be duplicated, and second to test out a couple of additional methods of inserting content via JavaScript. I’ll provide code samples, followed by the inserted text. For the inserted text I’ll use some lyrics from popular songs. Note that I won’t add the lyrics into the code samples.

Test 1 – document.WriteIn

The article mentions a successful test using document.writeIn so my first test will use this method. For the first part of the test the text is within the HTML source of the page. Here is the code I’m using:

<script>
document.writeln("Lyrics will go here");
</script>

For the second part of the test, the text is outside the HTML source of the page in an external JavaScript file. Here is the code I’m using:

<script href="https://melroth.com/test/js/document.writein.js"></script>

Test 2 – insertAdjacentHTML

Now let’s do the same with insertAdjacentHTML using the first verse of Sia’s Elastic Heart. First with the text within the HTML source of the page using the following code:

<script>
<div id="elastic-heart-lyrics"></div>
document.getElementById("elastic-heart-lyrics").insertAdjacentHTML( "afterbegin", "Lyrics will go here" );
</script>

Here is the second verse inserted using an external JavaScript file.

<div id="elastic-heart-lyrics-second-verse"></div>
<script href="https://melroth.com/test/js/insertadjacenthtml.js"></script>

Test 3 – jQuery append()

Another method for inserting content via JavaScript is using jQuery append(). Many websites use jQuery, including WordPress. Because this website is built using WordPress I don’t need to link to jQuery for this code example – it is already loaded in the head of this page. My first test will use code inside the HTML source and I’ll use the first verse of Justin Bieber’s song Sorry. Here’s the code I’m using:

<div id="sorry-lyrics"></div>
<script>
$( "#sorry-lyrics" ).append( "Lyrics will go here" );
</script>

And now the same code, but with the text outside the HTML source, and using the second verse of the song Sorry:

<div id="sorry-lyrics-second-verse"></div>
<script href="https://melroth.com/test/js/insertadjacenthtml.js"></script>

Now what about Bing, the second most popular search engine? This article has been indexed, but any refinement of the search fails to find the lyrics. If you’ve had any luck with Bing send me a Tweet.