Anyone new or inexperienced at SEO or marketing in general will inevitably come across JavaScript early on and frequently thereafter. It’s unavoidable, but easy to be intimidated by and to shy away from.

But the more you learn about JavaScript the more you appreciate its potential search performance impact. It is essential to come to terms with for any SEO or individual wanting to reap the rewards of SEO.

Ultimately if a site can’t be crawled or the content can’t be understood by a search engine then nothing will be indexed. The site won’t rank and will not be found. Which is clearly bad for business – even with no Javascript knowledge.

 

What is Javascript?

According to Wikipedia it’s “a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language.”
 
If this makes little sense – don’t worry. To form a basic understanding to benefit SEO a definition doesn’t have to be this complex.

That’s why we’ve created this Javascript Basics for SEO article. Modern web pages are comprised of three major components:

  • HTML – Hypertext Markup Language. Imagine this to be the “skeleton” to the web pages “physical form” – let’s use a Zebra as an example. As the bones in a Zebra skeleton provide structure so too does HTML to a site. It organises the static content on a site into headings, paragraphs, lists etc.
  • CSS – Cascading Style Sheets. Picture this as the “fur” that covers the Zebra skeleton. Much like a Zebra has an instantly recognisable black and white appearance, the CSS is the design, style and wow factor added to a website, making up the presentation layer of the page.
  • JavaScript – We have what looks like a Zebra now, but it wouldn’t be a great deal of use in the savannah as just skin and bones. JavaScript provides the “muscle” enabling movement to a form and the interactivity to a website. JavaScript is either embedded in the HTML document within script tags, predominantly the header and footer or linked to a script hosted elsewhere.

 
There are currently a wealth of Javascript (JS) libraries and frameworks. Some that we work with here at Impression include: jQuery, AngularJS, ReactJS and EmberJS. As well as jQuery UI, Chart.js is a good example of the most visual. The latter is for interactive charts while the former offers a bank of user experience (UX), datepicker inputs you see all over the web, scrollers and drag and drops. Then there is node.js which focuses on run-time updates enabling pages to update in real time.
 
Put simply, as muscles make a Zebra run, JS is a programming language that makes webpages interactive and animated, bringing a page to life to engage a user.
 
Now we know what JS is, in simple terms at least, we can look at the most common question relating to SEO and JavaScript – how do we make javascript SEO friendly?

This should be broken down to whether or not search engines can see the content and grasp the website experience. If so, great. If not, what solution can be used to right this?

 

Key Concepts to Understand

Javascript Crawling & Indexing

Google crawls a website using its ‘Googlebot’ crawler and indexes with the ‘Caffeine’ infrastructure. Each performs very different functions – Googlebot is all about discovery.
 
It’s a complex system, factoring in crawl queuing, scheduling and budget, URL importance, and server response time to name a few. But in essence it finds all URLs and crawls them.
 
When the crawler finds URLs that have been changed or added since its previous visit, they are sent to the indexer. The indexer will try make sense of the URL by analysing the content as well as assessing subprocesses like canonicalisation, page layout and more.
 
Also, importantly, the Web Rendering Service (WRS) within the indexer renders webpages and then executes JavaScript. We can see just how Google’s WRS sees your page on Search Console’s Fetch & Render feature.

The crawler and indexer work harmoniously. The crawler sends anomalies to the indexer, which in turn feeds new URLs (discovered sometimes by executing JavaScript) to the crawler. The indexer also helps prioritise URLs for the crawler, with more emphasis on high value URLs that the indexer wants crawling more frequently.
 

What is Ajax in JS?

Asynchronous JavaScript and XML, known as AJAX, is a set of web development techniques combining, you guessed it, JavaScript and XML to create asynchronous web applications.
 
Asynchronous meaning “not existing or occurring at the same time”, so the web applications can communicate with a server without interfering with other functions or lines of code on a page by operating in the background.
 
Usually, all the assets on a page are requested and fetched from the server and then rendered on the page. AJAX can be implemented to update the content or a layout without initiating a full page refresh. Usefully, as often pages on a site don’t differ greatly, using AJAX means only the assets that differ need to be loaded, which improves the UX.
 
A great example of this in action is Google Maps; the page updates as the user navigates without a full page reload.
 

What is the DOM?

Think of the Document Object Model (DOM) as the web browser’s actions taken after receiving the HTML document to render the page.
 
It is essentially an application programming interface (API) for markup and structured data such as HTML and XML.

The HTML document is the first thing the browser receives. Following that, it will start analysing the content within and fetching additional resources, such as images, CSS, and JavaScript files. What forms from this parsing of information and resources is referred to as the Dom. It can therefore be thought of as organised, structured interpretation of the webpage’s code. A “bridge” that connects web pages and programming languages.
 
While the DOM is a language-agnostic (unrestricted to a specific programming language or library) API, it is most commonly used in web applications for JavaScript and dynamic HTML.
 
As a result of dynamic HTML, the DOM is often very different from the initial HTML document. Dynamic HTML is the ability for a page to change its content depending on user input, environmental (such as time of day), and other variables, leveraging HTML, CSS, and JavaScript.

From an SEO perspective it’s important to understand the DOM, because it’s how Google analyses and understands webpages. Visually, the DOM is what you see when you “Inspect Element” in a browser.

 

The challenges JavaScript pose for SEO

Internal linking

As previously mentioned, the main issue with JS is if bots are unable to find URLs and understand the site’s architecture. Crawling and indexing can become slow and inefficient.
 
On JavaScript-based websites where most or all internal links are not part of the HTML source code, the crawler will only find a limited set of URLs in the first instance. Then it has to wait for the indexer to render these pages before extracting new URLs.

The evaluation of a site’s internal link graph, therefore, has to happen again and again as new URLs are extracted from JavaScript. With every new set of pages the indexer identifies in the site’s JavaScript code, the internal site structure is re-evaluated and the relative importance of pages can change.
 
Importantly this can lead to issues, whereby key pages are deemed unimportant due to a lack of internal link value. Likewise, relatively unimportant pages are misinterpreted as high value because there are plain HTML links pointing to them.
 
Further, because internal linking is a strong signal to search engines regarding the site’s architecture and importance of pages, pages are crawled and rendered according to their perceived importance. You could, therefore, see Google investing more time crawling and rendering the wrong pages over the pages you actually want to rank.
 
As a resolution, internal linking should be implemented with regular anchor tags within the HTML or the DOM rather than using JavaScript functions to allow the user to traverse the site.
 
JavaScript’s onclick events is not a suitable replacement for internal linking. While certain URLs might be found and crawled, likely through XML sitemaps or in JavaScript code, they won’t be associated with the overall navigation of the site.
 

Blocking

One issue to avoid is blocking search engines from your JavaScript.

This may be accidental, but however it happens, if search engines are blocked from crawling JavaScript, they will not see your site’s whole picture. When search engines don’t experience what the end user is, it can reduce appeal and negatively affect SEO.

The best way to resolve this issue is through providing search engines access to the resources they need by working with the website development team to determine which files should and should not be accessible to search engines.
 

PushState

One recommendation is pushState, currently supported by Google. It’s Navigation-based and used to manipulate the browser History API.
 
Simply, pushState updates the address bar URL, ensuring only what needs to change on the page is updated.
 
The best use is seen with infinite scroll (when the user scrolls to new parts of the page the URL will update). This means the user shouldn’t need to refresh the page, as the content updates as they scroll down while the URL is updated in the address bar.

 

Final Thoughts

Hopefully this overview helps some readers form a base knowledge of a very important component of the web, so when you’re next on safari you can appreciate the zebra in front you.
 
Find more detail on Javascript application in the data layer and adapting for mobile first.

Darol Lucas

SEO Executive

I'm an SEO Executive at Impression, where I enjoy implementing the latest technical strategies for our clients to help promote and grow their businesses online.