JavaScript SEO: An Introduction

Javascript SEO - Phone

What is JavaScript SEO?

JavaScript is a high-level programming language that allows developers to do more on a web page.

Every time you see interactive maps, content updates, or 2D and 3D images on a site- that’s JavaScript at work.

It’s also what lets websites work offline and independent from the host network. Progressive web apps wouldn’t even be possible without JavaScript.

And what about JavaScript (JS) SEO? Is it just another high-level language or a fancy term for search engine optimization?

No, it’s actually the part of technical SEO that makes JavaScript powered sites load quicker even with parsing and execution of JS code.

Such sites are also easy for search engines to crawl, index, and render, and allow people using outdated browsers to also have access to the web pages while maintaining consistent metadata and internal linking throughout the particular site.

Now the big question is…

Why Does JavaScript Matter for SEO?

Javascript SEO - Search

Photo by Evgeni Tcherkasski on Unsplash

JavaScript starts to matter for SEO when it affects choice of content displayed, modifies site features, or impacts page load speed. So while it’s unnecessary for SEO professionals to learn to code in JS, understanding how it’s used can help control any impact on search performance.

Here are a couple of other reasons why JavaScript matters for SEO:

  • Integral part of the web

As we have mentioned earlier, JS determines what content to show and which ones to hide- which CSS and HTML doesn’t do. Making JS have more influence on the way users interact with a site, the appearance of web pages, and functionality.

  • Can either be good or bad

Let’s get this out of the way: JavaScript is neither inherently good nor bad- it just depends on how you use it.

If most of your users have bad connectivity then a JS-powered website which can also work well offline serves you better. But if you’re running a news site, traffic blog, or something where every minute counts- having a site that takes several minutes to load hurts your traffic.

Understanding how JS works can help you offer helpful input to developers. Ensuring your site is not only optimized for search engines but also for end users.

  • JS SEO isn’t always known by all developers

JavaScript SEO is a branch of technical search engine optimization. Making it a specialty for SEI professionals but not a requirement for developers. So while developers know how to add meaning and mark up raw content as well as make web pages interactive- they don’t necessarily understand JS SEO. Just as most SEO professionals don’t understand coding languages.

Which brings us to the next question …

How to Overcome the Gap Between SEO Professionals and Developers

Javascript SEO - Canyon

It’s easy to see why there’s a disconnect between SEO gurus and developers. Both parties are used to working alone and not paying attention to what the other is doing. But that’s no longer plausible if you want to create a powerful online presence. All efforts need to be focused on achieving a similar goal and the first step to doing this is understanding how developers work.

You should know how developers define requirements as well as make, implement, and validate choices. Knowing how the process works puts you in a better position to influence the little decisions developers regularly make. You’ll also be able to:

  • Use SEO to define requirements from the beginning

When collaborating with developers, it’s important that you define requirements from the start. Both parties should work together to determine the critical elements of the product. Giving each other guidance and trying to figure out what’s needed for the solution to work. Not only to satisfy users but also search engines. And therefore reducing the likelihood of problems happening down the road.

  • Provide documentation and validate solution

Always provide developers with the documentation guide from Google. And because you understand the coding side of things, you can offer suggestions on which tools to use. You’ll also participate in each stage of product development so you can influence the end result and make sure the solution actually works the way you want it to.

Once the website is up and running, both the developer and the SEO technician can test the site for any red flags. Offering solutions to simplify processes and optimize the product even more.

How to Ensure your JavaScript Framework is SEO Friendly

Javascript SEO - Glass Wall

Photo by Diggity Marketing on Unsplash

Since JavaScript SEO is technically a branch of SEO. A lot of the aspects of the framework are similar to the basics of technical SEO. Nonetheless, here’s what you should do:

  • Allow search engines to see your JavaScript

You need to give search engines access to resources by allowing crawling. If you don’t, then users and web crawlers will have a completely different view of your web pages. Such that your site won’t be user friendly and some of your pages will be hidden from search engines.

For Google’s search engine, you can make your site visible by going to Robot.txt and adding:

User-Agent: Googlebot

Allow: .js

Allow: .css

  • Check URL structure

In the past, JS-powered websites had fragment identifiers in the URL. But Google no longer supports hashes (#) and hashbangs (#!) for indexing dynamic JS pages. Instead, your framework should use the pushState History API method. Which creates and updates new URLs in the same origin as the current URL- without changing the URL unless you want to.

Unlike the hash-based approach where you need to encode all relevant data into a short string. The pushState method lets you associate arbitrary data with a new history entry. Allowing the URL to update for different parts of your web pages such that even when users refresh a page, they’ll remain at the exact same spot.

Here’s how the code of your new browser history will look like in JavaScript:

const state = { ‘page_id’: 1, ‘user_id’: 5 }

const title = ”

const url = ‘aok-marketing.html’

history.pushState(state, title, url)

JavaScript SEO is an entirely recent concept that even SEO gurus aren’t quite familiar with. But if your website is JS-powered you need to understand the process (or at least the basics). So you can provide constructive feedback to both your developer and technical SEO expert. Ensuring the end product solves the intended problem and appears in search engine results.