Javascript is an important part of the web platform because it provides many features that render the web a powerful application platform. Making your JavaScript-powered web applications discoverable via Google Search can help you find new users and re-engage existing users as they search for the content you provide. While Google Search runs JavaScript with an evergreen version of Chromium, there are a few things that you can optimise. Googlebot processes JavaScript web apps in three main phases: Crawling, Rendering and Indexing.
A core understanding of Javascript is a mandatory requirement in the advanced SEO skillset. But before we dive deep into the nuances of Javascript SEO, we start with the basics: What is Javascript and how is it used?
What is JavaScript? When creating a modern web page, there are three major components:
HTML – Hypertext Markup Language serves as the backbone, or organizer of content, on a site. It is the structure of the website (e.g. headings, paragraphs, list elements, etc.) and defining static content. Consider HTML as the body and frame of the car.
CSS – Cascading Style Sheets are the design, glitz, glam, and style added to a website. It makes up the presentation layer of the page.
JavaScript – JavaScript is gas and pedal; the interactivity and a core component of the dynamic web.
JavaScript is either placed in the HTML document within <script> tags (i.e., it is embedded in the HTML) or linked/referenced. There are currently a plethora of JavaScript libraries and frameworks, including jQuery, AngularJS, ReactJS, EmberJS, etc.
For example, let's take a simple text label. We can mark it up using HTML to give it structure and purpose:
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}
What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.
APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.
They generally fall into two categories: (1) Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things and (2) Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web.
What is AJAX?
AJAX, or Asynchronous JavaScript and XML, is a set of web development techniques combining JavaScript and XML that allows web applications to communicate with a server in the background without interfering with the current page. Asynchronous means that other functions or lines of code can run while the async script is running. XML used to be the primary language to pass data; however, the term AJAX is used for all types of data transfers.
A common use of AJAX is to update the content or layout of a webpage without initiating a full page refresh. Normally, when a page loads, all the assets on the page must be requested and fetched from the server and then rendered on the page. However, with AJAX, only the assets that differ between pages need to be loaded, which improves the user experience as they do not have to refresh the entire page. One can think of AJAX as mini server calls. A good example of AJAX in action is Google Maps. The page updates without a full page reload (in other words, mini server calls are being used to load content as the user navigates).
What is headless browsing?
Headless browsing is the action of fetching webpages sans the user interface. It is important to understand because Google, and now Baidu, leverage headless browsing to gain a better understanding of the user’s experience and the content of webpages. PhantomJS and Zombie.js are scripted headless browsers, typically used for automating web interaction for testing purposes, and rendering static HTML snapshots for initial requests (pre-rendering).
What is the Document Object Model?
If you are delving into the nuances of Javascript SEO, you may hear that investigating what’s inside the source code of your web pages is one of the most important things in an SEO audit. However, with JavaScript in the picture, it gets more complicated. You need to understand what the DOM is, because it’s what Google is using to analyse and understand webpages. The DOM is what you see when you “Inspect Element” in a browser. Simply put, you can think of the DOM as the steps the browser takes after receiving the HTML document to render the page.
The first thing the browser receives is the HTML document. After that, it will start parsing the content within this document and fetch additional resources, such as images, CSS, and JavaScript files. The DOM is what forms from this parsing of information and resources.
You can think of it as the structured, organised version of the webpage’s code. Nowadays the DOM is often very different from the initial HTML document, due to what’s collectively called dynamic HTML. Dynamic HTML is the ability for a page to change its content depending on user input, environmental conditions (e.g. time of day), and other variables, leveraging HTML, CSS, and JavaScript.
The initial HTML (right-click – View page source) is just a cooking recipe. It provides information about what ingredients you should use to bake a cake. It contains a set of instructions. But it’s not the actual cake. DOM (right-click – inspect element) is the actual cake. In the beginning, it’s just a recipe (an HTML document) and then, after some time it gains a form and then it is baked (in other words, page fully loaded).
On next week's agenda, we will be discussing if Google can properly deal with your JavaScript content and what are the gruelling challenges. Do you have questions? Find us on Twitter @T_SEngineers
