ES6 Syntax and SEO

ECMAscript 6 is the latest JavaScript syntax form that improves your code readability, primarily by Search Engine crawlers such as Googlebot.

Google’s ability to read JavaScript

Search Engines have always struggled with the ability to interpret JavaScript. This originates from JavaScript’s dynamic attributes, allowing data on page to be changed and manipulated without information having to ever be fetched and sent to off-page servers.

Sites have traditionally always been written in static HTML, relying on tags such as <h1>, <p> and <img> to display information. As time has progressed the internet has become more and more developed, allowing for more powerful applications to be created.

This greatly improves User Experience and allows for more powerful apps to be created, such as Netflix, Spotify, and a lot of high-end applications. These are called Progressive Web Apps (PWA’s), and have become far more popular for enterprises due to their versatility and beautiful in-built features.

However, having a PWA causes one particular issue: being Crawler readability. Through the nature of JavaScript, most functions are “called” from directories within a theme package, and therefore don’t register as static information in the HTML that is interpretable by Search Engines.

For example if we had a function called “overlay.js” which would create a beautiful, dynamic overlay at particular intervals, our HTML might look a little something like this:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="/overlay.js"></script>
  </body>
</html>

Google gets on to your site, and reads that you’re running a script “overlay” in the body, but doesn’t actually understand what that script is meant to do, or what value it could provide in terms of Google Rankings.

As a result of this importing, the static information displayed to a browser (as seen above) is severely lacking in tangible information, and therefore becomes difficult for an Engine like Google to determine:

  • What your site is about?
  • What value it provides to prospecting users?
  • Is there any malicious information on this page?
  • What keywords are you involved with?

And thus ECMAScript was born. ECMAscript is the father, and dictating legible version of JavaScript which has become Web Developer staple. The reason for it’s success lies behind the simple classification and “bundling” of code, which Google has taught their bots how to parse.

Beware though, Social Media’s still rely on Open Graph (og:) protocol, and only Google (as of 2019) is capable of reading ECMAScript, with most other Search Engines still being dependant on static HTML snapshots.

An overview of ECMAScript 6 (ES6)

ES6 isn’t different in any sense to traditional JavaScript, but opens up new functions to Web Developers, and is a way to write the code. Developers say that JavaScript is a dialect of ES6, where JavaScript will teach you how to use a scripting language, ES6 will teach you how to create a scripting language.

ES6, launched in 2017 is the international minimal standard of JavaScript that is supported by most browsers. Since 2017, every year there has been a new ECMAScript update, only recently resulting in ES9, launched in June 2018. ES9 is officially referred to as ES2018.

Each update of the language provides new functionality, such as “arrows,” “promises,” “rest and spread properties,” which have become the highlights of the ECMAScript 2018 release.

EditionOfficial NameDate Released
ES9ES2018June 2018
ES8ES2017June 2017
ES7ES2016June 2016
ES6ES2015June 2015
ES5.1ES5.1June 2011
ES5ES5December 2009
ES4ES4Abandoned
ES3ES3December 1999
ES2ES2June 1998
ES1ES1June 1997

What makes ES6 so special, if ES9 has already been released?

Well, Search engines are actually playing catch up when it comes to JavaScript. Since the only recent announcement of Google’s ability to parse JavaScript, it has only been able to understand the fundamentals of the language. The fundamentals, as they’ve come to conclude, lie around the ES6 functionality mark.

Therefore in order for your PWA to be legible by Google, and soon most other Search Engines, it has to abide by the laws and functionalities of ES6. Any additional features included in later versions of ECMAScript will not yet be supported, and thus not legible to bots. This will prevent the indexing of material reflected in those scripts; so it is vital to keep important information that identifies your site, either in ES6, or in static HTML.

Over the coming years we will likely see Google making a quick turnaround, especially through Google’s AI mechanics in RankBrain, to quickly pick up JavaScript. This will result in the full indelibility of dynamic content, sometime within the foreseeable future.

Leave a Reply