Search Engine Mentor
JavaScript SEO is a branch in Technical SEO that optimizes the JavaScript portion of your website if it is powered by JavaScript. By optimizing your website’s JavaScript, you can enable your website to be more visible hence gaining more traffic and increase its ranking.
If you are reading this guide, you probably already know what JavaScript is. For those who don’t, JavaScript is a programming language that enables interaction and manipulation within a website.
Why JavaScript SEO is Important
To an SEO, JavaScript can be a nightmare to the performance of your SEO. It significantly impacts the page loading speed when it isn’t implemented well.
On the other hand, web developers are huge fans of JavaScript because of how interactive and attractive a website can be when powered by JavaScript.
If an SEO and web developer work together, they can create a website that is both SEO and user friendly. After all, SEO is a tool to enable more users to find your content and users would stay on your website if it is user-friendly. This ultimately benefits everyone’s interests!
Is Your Website Powered by JavaScript?
JavaScript powered websites are websites that have content injected onto the webpage JavaScript codes. It is very likely that your website is powered by JavaScript due to how popular it is. As a testament to that, according to the State of the Developer Nation Q3 2020 survey, JavaScript is the most popular language with a whopping 12.4 million developers coding websites with it internationally.
To find out if a website you are on is powered by JavaScript, you can try inspecting the website by right-clicking it and selecting Inspect. For those who aren’t familiar with this, you can use a shortcut by clicking “F12” or “fn”+”F12” to get the same results.
After opening the inspect element, you will see:
To verify if you have JavaScript powering your website:
1. You can see <script> tags among the lines of code
2. You can also click on the “Sources” Tab and expand the list on the left hand side to expose files that are used to render the page. If you see any file with “.js” at the end, then you have JavaScript powering it.
Google and JavaScript Interaction
Google goes through websites by crawling, indexing and serving search results. When it crawls your website that has JavaScript, it will undergo the stages below:
1. At Crawl Queue
A queue of URL is enlisted for Googlebot to crawl, at this stage your URL is on a waiting list to get crawled.
2. At Crawler
Before Googlebot crawls a website, it will check if the website allows crawling. If the crawling is disallowed in the URL, it will skip the current URL to obtain the URL of the next website in the crawling queue. If the URL allows crawling, Googlebot will fetch the URL with a HTTP request.
3. At Processing
There are multiple layers to this, here is a breakdown of what happens during processing:
- URL Checks: The HTML that was received is checked for more URLS. If there are more then these URLs will be queued for crawling.
- Indexing Checks: Content of the page will be assessed, if it stays the same then the index will be the same. If there are changes, the index will be updated accordingly.
- Rendering Checks: If JavaScript is present within the website, it will need to be rendered. Hence this process identifies the need for rendering and sends it to get rendered if necessary.
4. Render Queue
A queue of URLs with continual updates waiting to be rendered.
5. Renderer
The Web Rendering Services obtains the URL from the queue and renders them. The result is a rendered HTML that can be processed.
6. At Index
At this stage, content of the website is analyzed to see how relevant it is to its keywords. Data and links from the website are also evaluated. All these components are passed into the PageRank algorithm to update its rank in search engines.
7. At Ranking
Google ranks your content based on findings in the Index. These rankings will arrange the relevance of Google searches by users.
Google SEO vs JavaScript
Before we move forward, it is important to understand the relationship between google and JavaScript. This will help you understand why some things in JavaScript hurt your SEO so much.
Googlebot will not Interact With Your Website
When Googlebot crawls your website, it does not act like humans that can expand the page or click on buttons to view more content.
The only thing Googlebot will recognize is the available items rendered in HTML as it is. If there is any requirement for user interaction to preview content, like clicking a button to start loading a certain content, the hidden code for the content will just go over Googlebot’s head. Googlebot can only index any expandable text if it is in the rendered HTML or source code.
Googlebot will not Scroll to View More Content
Unlike human users, Googlebot will not scroll down to check out more content if it is hidden initially on the page. This part gets a little technical, you’ll need to know the difference between client side rendering vs server side rendering.
Googlebot will only identify content if it is rendered on the server side. If parts of your content is rendered on the client side, Googlebot will miss those as it indexes your page.
JavaScript Can Slows Down Page Speed
Similar to crawl budget, websites have an assigned render budget as well. This lets Google prioritize their rendering efforts, meaning they can dedicate more time to rendering pages that they expect visitors to search for more often.
The reason JavaScript affects page speed load time is located in the nature of code interpretation. When we visit a website our browser translates code into the front-end interface – (the page the user actually sees). The browser (such as Google Chrome) reads the web page code from the top to the bottom and translates it, but when it encounters more resource-required scripts it stops and moves forward only when it interprets the particular code – it’s called render-blocking.
How to Make Your Site JavaScript SEO Friendly
An important thing to remember is that JavaScript SEO is not something you can easily improve on an existing website. It will make your life easier if you pitch in during the web development phase to ensure JavaScript SEO best practices are embedded within the website itself. Some implementations stated below will be difficult to amend once the website is built.
1. Maintain On-Page SEO
Make sure the basic on-page content is well optimized. Make sure all the title tags and descriptions are unique as well as not reused. Moreover, you should set the alt attributes in JavaScript if you want to optimize it for search engines.
2. Allow Googlebot Crawling
In order for your site to be JavaScript SEO friendly, Googlebot should be allowed to crawl your site, access the resources and render your web pages. To allow Googlebot crawling, add these lines in the robots.txt file:
User-Agent: Googlebot
Disallow:
Side Note: Robots.txt file is also known as Robots Exclusion Protocol. It is a text file that contains the instructions and permissions to give Google Bots access to pages you want them to crawl. Read more: Robots.txt
3. Dynamic Rendering
As described in how Google interacts with your website, Google will not interact or scroll your page. Hence if you want to improve your SEO, then all your content should be made available on the server.
A great way to get the best of both worlds is to enable dynamic rendering. This rendering method detects its audience before it chooses what to render.
If a crawler is detected then it will render HTML. On the other hand if a human user is detected then it will assume its usual rendering which is HTML with JavaScript.
4. Optimize Lazy loading
Lazy Loading is what happens when the webpage only loads the parts you scrolled on. In web development, this is an optimization to only show content that is required and load as you go. Lazy loading is good practice but there is a possibility that you hide your content from Googlebot as it crawls. The best way to optimize your JavaScript SEO is to ensure you lazy load your images and videos but not content. Try to get your developer to set up lazy-loading or fix it if you have not implemented this on your website.
5. Set Up 404 Error Page
Make sure your website does not have any broken or non-existent URLs. If you are in the process of preparing pages to link to a button, do not use your Homepage as a temporary link to the said button. It will confuse users and it may even show up as a soft 404 error on Google. To mitigate this, try to set up all your links carefully and purposefully. If it can’t be helped, redirect it to a 404 Error page that you create for the time being. It will still be a soft 404 error to Google but at least your users are clear about the redirection.
6, Eliminate Duplicate
When JavaScript is used for websites, there may be different URLs for the same content. This causes duplicate content issues, often caused by capitalization, IDs, or parameters with IDs.
To eliminate duplicate content, you can set each of your pages with unique ids and ensure all your headings are different for each page. Make sure you find such pages, choose the original/preferred URL you want indexed, and set canonical tags to avoid search engines from getting confused.
Ensure That Google Can Render Your Web Pages
Google Search Console is JavaScript SEO’s bread and butter. When you need to check how well your site is indexing then troubleshoot or how frequently Google crawls your website, this is the go-to tool. It generates reports to provide an SEO and developer what they need to improve the website’s indexing.
The URL Inspection Tool on Google Search Console gives you an insight of the web pages Google indexed. You can analyze things like structured data, indexing, indexability and other details with this tool. You can view the rendered version of your website, check Google Index for the status of your URL and other tasks.
How to Check What Your Rendered Pages Look Like?
There is no denying the importance of mobile-friendly web pages. If a user has to pinch to zoom in and out of your website on their phone, they will very likely abandon your website for more user-friendly websites. This tool helps you find out what you can optimize for a smaller screen in terms of function and look.
Inspect The Rendered HTML of Your Pages
Ask any web developer and they can tell you they’ve used this Chrome DevTools. It helps you preview your page as you edit codes of the pages on Google Chrome and help you troubleshoot easily. This tool is easily accessible with many shortcuts on your keyboard.
Final Word
JavaScript SEO is not the easiest thing to pick up. This guide gives you an overview of what you can expect from a collaboration between JavaScript and Google SEO. It will be critical to work together with your web developer to enhance the website for user experience and SEO-friendliness as you build the website.
If you are new to SEO, JavaScript can be a nightmare but JavaScript really shouldn’t be an SEO’s enemy. After all, it improves the experiences of users by making your website more interesting and interactive. There may be many technical aspects that you may need to learn or consult a web developer, but this will definitely propel you to be a better JavaScript SEO.