Unfortunately, many JavaScripts prepared without SEO considerations can have a serious negative impact on the overall performance of the website. I've outlined the key SEO considerations when getting started with auditing a JavaScript powered website/landing page.
SEO Tips for JavaScript-Powered Websites
Internal Link
Because internal linking is one of the top priorities of webmasters, regular link tags should be used within HTML or DOM to allow users to navigate from web page to page throughout the site, as opposed to leveraging JavaScript functions such as JavaScript onclick events. Internal linking is considered a strong signal to search engines regarding the exact website architecture and the overall importance of the pages.
Content Accessibility
For content to be clear to both the user and search engine bots, the content must be indexable within the upload event, require an indexable URL, and use SEO best practices for HTML to render JavaScript sites. Not only that, but every piece of content on a website should be unique from the website itself and other sources on the internet, as it aligns with basic SEO practices.
Availability
It has been reported that search engines implement headless crawling, a type of software that can access web pages but not show the user, and relay the content of the web page to another program running on the backend. A headless browser helps render the DOM to better understand the user's experience and content states on the page.
However, it is important to understand how JavaScript is run and how it interacts with search engine bots, otherwise it will yield huge organic results.
rendering
JavaScript can affect the overall rendering of a web page. So if something is blocking rendering, it can delay the page loading. As a general rule of thumb, Google recommends completely removing or at least deferring any JavaScript that prevents the top of the content layer from loading on a website.
Top of the fold refers to the portion of the web page that appears when the page first loads. The next section of the page is called the "bottom of the screen" that requires scrolling.
Single Page Application Considerations
A single page application (SPA) is a web application / website that is primarily designed and built to run efficiently on the web. Unlike loading an entire page from the server, these pages are dynamically rewritten and loaded with the parts you need.
The SPA approach provides a fast load time, uses less bandwidth, and makes the application behave more like a desktop application, giving the user a pleasant experience. It should be noted that there are many different SPA framework options available depending on the usage of the application. Among them; React.js, Angular.js, Backbone.js, Preact, Next.js etc. can be counted.
There can be many hurdles when Google tries to crawl and index content in the SPA. So, if you are using SPA, it is recommended to test multiple times using the "Fetch" command to understand what Google is getting.
JavaScript SEO Tools: Check Your JavaScript
With JavaScript's endless capabilities, a number of helpful tools are available to evaluate and fix problems with JavaScript code. Here are a few that you will find useful as an SEO:
URL Inspection Tool
The “URL Inspection Tool” in the “Google Search Console” displays information about whether Google has crawled/indexed a page, whether any errors have occurred and why.
DeepCrawl
DeepCrawl can be used to crawl and render JavaScript on all the different pages of a website in the same pattern that Google would. This smart tool allows you to effectively test and monitor rendering on a massive scale, and in turn help you understand if JavaScript can be crawled and indexed by search engine bots.
Mobile-Friendly Test
Google's mobile-friendliness tester provides information on how easy/difficult it is for a visitor to navigate your website on a mobile device.
Page Speed Information
Google's page speed analyzer (PSI) effectively details the performance of mobile and desktop devices. In addition, this tool provides suggestions on how this can be improved.
Site: Command
Site: Command is one of the most direct tools to help you see if Google is indexing your content correctly. To do this you can complete the command in Google – site: [your website URL] “text content or query”
Difference Controller
Diffchecker is a unique tool that allows you to compare two types of text files and review the differences between both. This is particularly useful for performing analysis of the original source code of web pages against the rendered code. This tool offers comprehensive comparisons of how content has changed since it was created.
Chrome Development Tools
Chrome DevTools are a set of tools that experienced web developers can add directly to Google's Chrome browser. Chrome DevTools can help you edit and make quick style changes without the need to use a text editor.
