The web has moved from plain HTML – as an SEO you can embrace that. Learn from JS devs & share SEO knowledge with them. JS’s not going away.
— 🍌 John 🍌 (@JohnMu) August 8, 2017
I would argue that this isn’t the case, as it can cause a problem for anyone who wants customers and search engines to be able to access their website’s content.
I’ve put together a glossary of the key terms and fundamental concepts you should know to help you get started on your journey of discovery.
Document Object Model (DOM)
The Document Object Model (DOM) is created when a page is loaded, and it is made up of nodes and objects which map out all of the different elements and attributes on a page.
The page is mapped out in this way so that other programs can modify and manipulate the page in terms of its structure, content, and styling.
Different editions of ECMAScript are released when the language is updated and tweaked over time, such as ES5 and ES6 (which is also referred to as ES2015).
A transpiler is a tool that transforms source code into a different programming language. The concept is a bit like Google Translate, but for code.
When rendering pages, Google uses a web rendering service which is based on Chrome 41. This means that Google’s rendering engine supports the same features and functionalities of that particular version of Chrome.
When you consider that the most up-to-date version is Chrome 71, you can see that many versions have been launched since Chrome 41 went live in 2015, and all of these versions came with new features. This is why Google’s rendering service currently supports ES5 rather than the later ES6 version of the language.
Single-page Application (SPA)
A single-page application (SPA) is a website or web app that dynamically re-writes and re-renders a page as a user interacts with it, rather than making separate requests to the server for new HTML and content.
Angular, Polymer, React & Vue
- Angular and Polymer were developed by Google.
- React was developed by Facebook.
- Vue was developed by Evan You, who used to work on Google’s Angular team.
If you want to learn more about how the different frameworks measure up, this guide gives a detailed comparison.
- Site speed
- Search engine crawling and indexing
Depending on which rendering method you use, you can reduce page load speed and make sure content is accessible to search engines for crawling and indexing.
Pre-rendering involves rendering the content on a page before it is requested by the user or search engine, so that they receive a static page with all of the content on there ready to go.
By preloading a page in this way, it means that your content will be accessible rather than a search engine or user’s browser having to render the page themselves.
Pre-rendering is usually used for search engine bots rather than humans. This is because a static, pre-rendered page will be less engaging for users as it will lack any dynamic content or interactivity.
Server-side rendering also ensures the full content can be seen and indexed by search engines.
The server will handle the initial request, but the rest of the work of processing and rendering a page falls on the user’s device or the search engine.
It is often advised against to use client-side rendering as there is a delay between Google crawling pages and then being able to render them.
Google puts pages that need to be rendered into a queue until enough resources become available to process them.
If you’re relying on Google to render a page client-side, this can delay indexing by up to a week after it is initially crawled.
Dynamic rendering involves using different rendering methods depending on whether a user’s browser or a search engine bot is requesting a page.
If your site usually renders client-side, when Googlebot is detected the page will be pre-rendered using a mini client-side renderer (for example, Puppeteer or Rendertron), so the content can be seen and indexed straight away.
Hybrid rendering involves a combination of both server-side rendering and client-side rendering.
The core content is pre-rendered server-side and sent to the client, whether that’s the user’s browser or the search engine crawler that’s requesting the content.
Now that you’ve brushed up on the key terms, you should be better equipped to hold your own in conversations with the developers!
- A Complete Guide to SEO: What You Need to Know in 2019
Featured Image: Unsplash
In-Post Image #1: HTTP Archive
In-Post Image #2: Computer Hope
All screenshots taken by author, January 2019