Learn JavaScript SEO Basics for Google Search

If you suspect that JavaScript issues may block your web page or content from appearing in Google Search, you can troubleshoot them with our guide. JavaScript plays a vital role in the web platform by offering features that make the web a powerful application platform. Ensuring your JavaScript-powered web applications are discoverable on Google Search can help you engage existing users and find new ones.

In this guide, we discuss how Google Search processes JavaScript and best practices for optimizing your JavaScript web apps for Google Search. You can find more information on this topic from Google Home, Search Central, and Documentation.

How Google Processes JavaScript

Google processes JavaScript web apps in three phases: crawling, rendering, and indexing. Googlebot takes a URL from the crawl queue, crawls it, extracts links, and passes it into the processing stage. The processing stage queues the page for rendering, and the page goes from the render queue to the renderer, which passes the rendered HTML back to processing for indexing and link extraction.

Googlebot queues pages for both crawling and rendering. When Googlebot fetches a URL from the crawling queue, it checks if it's allowed to crawl by reading the robots.txt file. Googlebot parses the response for other URLs in the HTML links and adds the URLs to the crawl queue. To prevent link discovery, use the nofollow mechanism.

Crawling a URL and parsing the HTML response works well for classical websites or server-side rendered pages where the HTML in the HTTP response contains all content. However, some JavaScript sites may use the app shell model, where the initial HTML doesn't contain the actual content. In such cases, Google needs to execute JavaScript before it can see the actual content that JavaScript generates.

Googlebot queues all pages for rendering unless a robots meta tag or header tells Google not to index the page. The page may stay on this queue for a few seconds or longer. Once Google's resources allow, a headless Chromium renders the page and executes the JavaScript. Googlebot parses the rendered HTML for links again and queues the URLs it finds for crawling. Google also uses the rendered HTML to index the page.

Tips for JavaScript SEO

To optimize your JavaScript web apps for Google Search, follow these best practices:

• Use unique and descriptive <title> elements and meta descriptions to help users quickly identify the best result for their goal.
• Write compatible code and follow guidelines for troubleshooting JavaScript problems.
• Use meaningful HTTP status codes to tell Googlebot if a page can't be crawled or indexed or if a page has moved to a new URL.
• Avoid soft 404 errors in client-side rendered single-page apps.
• Use the History API instead of fragments to ensure that Googlebot can parse and extract your URLs.
• Properly inject the rel="canonical" link tag with JavaScript to avoid unexpected results.
• Use robots meta tags carefully and make sure they don't prevent Googlebot from indexing your page.
• Use long-lived caching strategies to reduce network requests and avoid WRS using outdated resources.
• Use structured data and test your implementation to avoid issues.
• Follow best practices for web components and ensure that Google can still see your content after rendering.
• Implement lazy-loading in a search-friendly way to improve bandwidth and performance.
• Design your pages for accessibility to cater to the needs of all users.

Essential SEO Guidelines for Webmasters: Conclusion

JavaScript SEO is important to ensure that your web pages and content are discoverable on Google Search. Follow these best practices to optimize your JavaScript web apps and make them more search-friendly. Watch this video for even more from Google:

Source: Core Principles of SEO for JS