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.
What Is the 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.
What Is ECMAScript?
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).
What Is Transpiling?
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.
What Is Chromium?
To do this, Google uses Chromium, which is an open-source project whose code forms the basis of the Chrome browser.
As Chrome is updated, new versions of the browser are released with new features. Until May 2019, Googlebot was using a WRS based on Chrome 41 which was released back in 2015.
Since then, Google announced it was making Googlebot evergreen, meaning its WRS will be continually updated every time a new version of Chrome comes out.
What Is 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.
What Are 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!
Featured Image: Paulo Bobita
In-Post Image #1: HTTP Archive
In-Post Image #2: Computer Hope
All screenshots taken by author