Fix Search-related JavaScript problems

This guide helps you identify and fix JavaScript issues that may be blocking your page, or specific content on JavaScript powered pages, from showing up in Google Search. While Googlebot does run JavaScript, there are some differences and limitations that you need to account for when designing your pages and applications to accommodate how crawlers access and render your content.

Googlebot is designed to be a good citizen of the web. Crawling is its main priority, while making sure it doesn't degrade the experience of users visiting the site. Googlebot and its Web Rendering Service (WRS) component continuously analyze and identify resources that don’t contribute to essential page content and may not fetch such resources. For example, reporting and error requests that don’t contribute to essential page content, and other similar types of requests are unused or unnecessary to extract essential page content.

If you suspect that JavaScript issues might be blocking your page, or specific content on JavaScript powered pages, from showing up in Google Search, follow the steps below:

1. To test how Google crawls and renders a URL, use the Mobile-Friendly Test or the URL inspection tool in Search Console. You can see loaded resources, JavaScript console output and exceptions, rendered DOM, and more information by clicking the more information link on the page verdict card.

   Optionally, we also recommend collecting and auditing JavaScript errors encountered by users, including Googlebot, on your site to identify potential issues that may affect how content is rendered.

   ▸

   Show example

   Here's an example that shows how to log JavaScript errors that are logged in the global onerror handler.

   window.addEventListener('error', function(e) {
       var errorText = [
           e.message,
           'URL: ' + e.filename,
           'Line: ' + e.lineno + ', Column: ' + e.colno,
           'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
       ].join('\n');
   
       // Example: log errors as visual output into the host page.
       // Note: you probably don’t want to show such errors to users, or
       //       have the errors get indexed by Googlebot; however, it may
       //       be a useful feature while actively debugging the page.
       var DOM_ID = 'rendering-debug-pre';
       if (!document.getElementById(DOM_ID)) {
           var log = document.createElement('pre');
           log.id = DOM_ID;
           log.style.whiteSpace = 'pre-wrap';
           log.textContent = errorText;
           if (!document.body) document.body = document.createElement('body');
           document.body.insertBefore(log, document.body.firstChild);
       } else {
           document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
       }
   
       // Example: log the error to remote service.
       // Note: you can log errors to a remote service, to understand
       //       and monitor the types of errors encountered by regular users,
       //       Googlebot, and other crawlers.
       var client = new XMLHttpRequest();
       client.open('POST', 'https://example.com/logError');
       client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
       client.send(errorText);
   
   });

2. Expect Googlebot to decline user permission requests.
3. Don't rely on data persistance to serve content.
4. Ensure that your application uses feature detection for all critical APIs that it needs and provide a fallback behavior or polyfill where applicable.
5. Make sure your web components are search-friendly:
   1. To encapsulate and hide implementation details, use shadow DOM.
   2. Put your content into light DOM whenever possible.
6. After you fix the items in this checklist, test your page with the Mobile-Friendly Test or the URL inspection tool in Search Console again.

   If you fixed the issue, a green check mark appears and no errors display. If you still see errors, post in the JavaScript Sites in Search Working Group.