Introduction to JavaScript and SEO
This week, a question was raised about the impact of JavaScript on website content visibility. Thomas, the person who asked the question, disabled JavaScript to check the content of his webpage but couldn’t see any content except the banner H1 tag. This raises concerns about the potential effects on search engine optimization (SEO).
Why JavaScript Can Be A Problem
Googlebot, the search engine’s web crawler, discovers, crawls, parses, and indexes web pages. For JavaScript, the crawler needs to "render" the code, which can be a problem. JavaScript has to be downloaded and executed for the content to be parsed, taking more resources than parsing content in HTML. Sometimes, Google will defer the rendering stage and come back to a page to render it at a later date. Most websites use some JavaScript, which is fine, but if a website requires JavaScript to load crucial content, it might be a risk.
Diagnosing A Problem
To investigate the effect of JavaScript rendering on a site, it’s essential to start by turning off JavaScript and seeing what content remains. Looking at what is available to search bots to read on a page’s first load can help identify content accessible without JavaScript rendering.
Check Google Search Console
Using the Google Search Console URL Inspection tool to look at the rendered HTML can help determine if the content is present and readable by Google.
Check Chrome Browser
Going to "View Source" in Chrome can show what the pre-rendered HTML looks like. If the content is all there, there’s no need to worry further. However, if it’s not, using the Developer Tools in Chrome for further diagnostics can help. Looking in the "Elements" tab can confirm if the content is accessible.
Check The Robots.txt
Sometimes, developers block specific JavaScript files from being crawled by disallowing them in the robots.txt. This isn’t necessarily an issue unless those files are needed to render important information. Checking the robots.txt file to see if there are any JavaScript files blocked that could prevent bots from accessing the content of the page is essential.
Next Steps
JavaScript is a significant part of the modern web, and it’s not something to be escaped. Ensuring that websites utilize JavaScript so that both popular and emerging search engines can find and read the content is crucial.
Are We Using Client-Side Rendering Or Server-Side Rendering?
Client-side rendering utilizes the browser to render the JavaScript of a page, while server-side rendering renders the content by the server and then sends it to the browser. Server-side rendering is generally easier for bots, can be a quicker experience for users, and tends to be the default recommendation for SEO.
Is Our Main Content Able To Be Rendered Without JavaScript?
The most important content on a page needs to be possible to parse without JavaScript rendering. This is the safest way to ensure that bots can access the content.
Are We Using JavaScript Links?
Having links generated through JavaScript is not always an issue, but there is a risk that bots might not be able to resolve them unless they are properly contained in an HTML element with an href attribute.
Conclusion
Making sure content is accessible to bots, now and in the future, is crucial. If a website relies heavily on JavaScript to load content, it may struggle to communicate that information to some search engines. While Google is better at rendering JavaScript-heavy sites than it used to be, the SEO playing field is not just Google. To ensure a website can perform well in search platforms beyond Google, it may be necessary to change how the website renders content, making sure the main content is in HTML.