Seeking advice on the SEO implications of using ES6 backticks functionality for server-side includes

egoselfaxis
egoselfaxis used Ask the Experts™
I need some advice on whether or not a particular website development strategy that I'm considering implementing is feasible, ... or if it would be an SEO nightmare.  

What I'd like to do is to try to use ES6's "backticks" functionality to implement a very simple "includes" mechanism for re-usable elements within a static HTML page.  The idea would be to avoid having to use any kind of JS-based framework or library (ie: React, jQuery, etc), and to instead just leverage the native functionality within ES6.  

Consider the following very simple and very functional example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ES6 Backticks Test</title>    
  <style>
  .red { color:red; }
  </style>   
</head>
<body>	
<div id="example"></div>	
<script>
document.addEventListener("DOMContentLoaded",function(){
	let first = "Yvan", last = "Gagnon", nuts = 2
	example.innerHTML = `
	<h1 class="red">Hello ${first} ${last}!</h1>
	You collected ${nuts} nuts so far!
	<hr>
	Double it and get ${nuts + nuts} nuts!!
	` 	
});
</script> 			
</body>
</html>

Open in new window


This approach would allow me to create separate JS-based include files for different re-usable elements throughout a static HTML website (ie: header, footer, sidebar, etc), and I'm tempted to run with it.  However, .. would this be an SEO nightmare?  I ask because when I view the underlying source code, I don't see the rendered HTML source code.  All I see is exactly what you see in the code sample I've provided.  Still .. my understanding is that the major search engines are all now executing JavaScript when crawling sites, which allows for them to be properly indexed.  So what is the modern-day consensus on this?  Am I wasting my time? Or is this approach that I'm considering actually viable?

Thanks,
-- Yvan
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2016
what you are seeing is what the crawler will also see.
David FavorFractional CTO
Distinguished Expert 2018
As David Johnson said, "What you see (using your Browser's view source function) is same content a Crawler/Indexer will see.

Suggestion: Explain what "SEO nightmare" might mean to you, along with how you imagine your SEO might be effected.
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
The advice here is a little outdated. Yes, google will see your rendered html. You can view your rendered html by hitting the f12 key and going to the elements tab.  What you want to avoid is for your rendered js to take a long time.  Google outlines the fact they will be able to parse your js rendered pages here https://developers.google.com/search/docs/guides/javascript-seo-basics
Thanks guys!  This is the answer that I was hoping for.  

Cheers,
- Yvan
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
As a test, you can create a static page in the same format that is part of the navigation or linked from one of the top level pages and watch what happens. SEO is about always about testing.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial