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 to display content.
JavaScript and SEO don't 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 crawling and executing JavaScript files requires a lot of resources - and when Google has to crawl billions of web pages every day, it naturally wants to save on resources.
Studies show that the amount of JavaScript Google crawls varies from website to website. It depends, among other things, on the amount and type of JavaScript on the website. Typically, Google does not crawl JavaScript that is very resource-intensive or that, according to Google's own assessment, is not necessary to crawl in order to index the content on the website.
This lack of JavaScript passthrough is a big problem if the content (especially text and images) on your website relies on JavaScript to be displayed. In that case, you risk Google not being able to see your content, which naturally has major consequences for your visibility on Google. The risk is quite real, because sometimes companies that contact us are faced with the problem that Google can't 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.
- Decrease 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. Do not block Google's access to JavaScript files via the website robots.txt file.
- Display content without the use of JavaScript. Do not develop a website where JavaScript is required to display the content (text and images).
- Show content without user interactions. Do not hide content and only show it after a user interaction (for example, clicking a 'Read more' button or scrolling to the bottom of the page). Google does not do interactions like these. However, you are allowed to hide content from users and only show it upon interaction, as long as the content is always part of the website's HTML source code.
Even if you display all content without 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.
Mapping JavaScript issues
A simple way to check if Google can index your text is to search for selected text snippets in quotation marks on Google. If your website appears in the search results, it's a sign that Google can read and index the text. Typically, you can examine just one page of each type (for example, the front page, a category page and a product page).
Similarly, you can check if Google can index your images. Go to Google Image Search and click the camera icon to the right in the search bar. You can then upload or enter the URL of the image you want to check. Pay special attention to images and text that require user interaction to be displayed.
You can use a tool such as Web Developer for Google Chrome to examine how your website looks without JavaScript. Click the 'Disable' tab, then 'Disable JavaScript' and finally reload the page. This can give an indication of how Google sees your website in the worst case scenario. Content, including menus leading to the content, should be viewable without JavaScript.
One last good test is to use the 'URL Inspection' feature in Google Search Console. Enter a URL from your website in the search bar at the top of Google Search Console and then click the 'Test active URL' button to 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 sending the website to the browser. There are many good articles about this on the web, so we'll skip the technical details here.
JavaScript is commonly executed using CSR, but SSR is actually a better solution for your SEO. This is partly because it improves the load time and thus 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 widespread.
If you have problems 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 disadvantages of the latter are so great that there is typically a better solution: dynamic rendering.
Dynamic rendering is a hybrid of CSR and SSR. In practice, when a user visits your website, a regular CSR version of the website is sent where JavaScript is executed in the user's browser. When a search engine visits your website, a static SSR version of the website is sent instead, where your web server has pre-executed all JavaScript.
Google recommends dynamic rendering on JavaScript-heavy websites and has written a guide here. There are several tools available for this purpose, including Prerender.io. It is 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 that aims to manipulate search engines.
Is JavaScript damaging your website?
Henning Madsen presents Quick JavaScript Switcher in the video below. It's a useful tool to see if your JavaScript website is affecting your visibility on Google. It's a simple plugin that quickly gives you an overview of which parts of the site are challenged in terms of SEO. Watch the video here:
