What is JavaScript?
JavaScript is a programming language used on the vast majority of websites. All popular CMS systems such as WordPress, Joomla, Shopify and Drupal rely on JavaScript to function fully. Typically, JavaScript is used for limited interactive functions that enhance the user experience on the website, but JavaScript can also be used for displaying content.
JavaScript and SEO do not always go hand in hand. Google and other search engines can crawl JavaScript files, but there's no guarantee that they will. The reason is that it takes a lot of resources to crawl and execute JavaScript files - and when Google has to crawl billions of web pages every day, it naturally wants to save resources.
Studies show that the amount of JavaScript that Google reviews varies from website to website. This depends, among other things, on the amount and type of JavaScript on the website. Typically, Google will not review JavaScript that is resource-intensive or that Google has determined is not necessary to index the content on the website.
This lack of JavaScript review is a big problem if the content (especially text and images) on your website depends on JavaScript to be displayed. In that case, you risk Google not seeing your content, which naturally has a big impact on your visibility on Google. The risk is very real, as companies who contact us sometimes face the very problem that Google cannot see their content because of JavaScript.
Tips for using JavaScript
The above pitfalls do not mean that you should not use JavaScript on your website, but there are a number of recommendations for the use of JavaScript that you should follow as far as possible:
- Remove JavaScript that is not used. You can use Google PageSpeed Insights to identify whole or parts of JavaScript files that are not used.
- Reduce all JavaScript files. You can use for example JavaScript Minifier to shrink JavaScript files and thereby reduce file sizes.
- Give Google access to all JavaScript files. You must not block Google's access to JavaScript files via the robots.txt file.
- Show content without using JavaScript. You must not develop a website where JavaScript is required for viewing content (text and images).
- Show content without user interactions. You must not hide content and only display it upon a user interaction (for example, a click on a 'Read more' button or a scroll to the bottom of the page). Google doesn't do interactions like these. You may, however, hide content from users and only display it on interaction, as long as the content is part of the site's HTML source code at all times.
Even if you display all content without using JavaScript, you should still follow the recommendations in points 1-3 above. Not least because reducing the amount of JavaScript on your website can have a positive impact on the load time of your website.
Survey of JavaScript problems
A simple way to check if Google can index your text is to search for selected text excerpts in quotes on Google. If your website appears in the search results, this is a sign that Google can read and index the text. Typically, you can just examine a single page of each type (for example, the front page, a category page and a product page).
Similarly, you can check whether Google can index your images. Go to Google Image Search and click on the camera icon on the right of the search bar. Then upload or enter the URL of the image you want to check. Pay particular attention to images and text that require user interaction to be displayed.
You can use a tool like Web Developer for Google Chrome to see what your website looks like without JavaScript. Click on the 'Disable' tab and then 'Disable JavaScript' and finally reload the page. This can give you an indication of how Google will see your website in the worst case. Content, including menus leading to content, should be able to be displayed without JavaScript.
A final good test is to use the 'URL Inspection' function in Google Search Console. Enter a URL from your website in the search box at the top of Google Search Console, then click the 'Test Active URL' button on the right. You can now see the HTML code that Google sees on your website and then check if your text and images are part of the HTML code.
Solutions for JavaScript-heavy websites
There are basically two ways to execute JavaScript: client-side rendering (CSR) and server-page rendering (SSR, also called prerendering). The former executes JavaScript in the browser, while the latter executes JavaScript on your web server before the web page is sent to the browser. There are many good articles on this on the web, so we'll skip the technical details here.
Usually JavaScript is executed using CSR, but SSR is actually a better solution for your SEO. Partly because it improves load time and therefore the user experience on your website, and partly because you use your own server resources to execute JavaScript, so Google doesn't have to do it itself. However, SSR is a very resource-intensive solution that is also technically difficult to implement, which is why CSR is much more widely used.
If you're having trouble with Google not indexing your content due to JavaScript, one possible solution is to switch from client-side rendering to server-side rendering. However, the drawbacks of the latter solution are so great that a better solution is typically available: dynamic rendering.
Dynamic rendering is a hybrid of CSR and SSR. In practice, it works by sending a regular CSR version of the website when a user visits your site, executing JavaScript in the user's browser. Instead, when a search engine visits your website, a static SSR version of the website is sent, with your web server having executed all JavaScript in advance.
Google recommends dynamic rendering on JavaScript-heavy websites and has written a guide here. Several tools are available for this purpose, including Prerender.io. It's important that the static page you send to Google contains the same content as what you send to regular users. If the content is not identical, this is known as cloaking - a method designed to manipulate search engines.
Is JavaScript harming your website?
Henning Madsen presents Quick JavaScript Switcher in the video below. It's a useful tool when you need to see if your JavaScript website is affecting your visibility on Google. It is a simple plugin that quickly gives you an overview of which parts of the page are challenged in terms of SEO. Watch the video here:
