[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples/Code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
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:
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.
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);
});
Make sure to prevent soft 404 errors.
In a single-page application (SPA), this can be especially difficult.
To prevent error pages from being indexed, you can use one or both of the following strategies:
Redirect to a URL where the server responds with a 404 status code.
Show example
fetch(`https://api.kitten.club/cats/${id}`)
.then(res => res.json())
.then((cat) => {
if (!cat.exists) {
// redirect to page that gives a 404
window.location.href = '/not-found';
}
});
Don't use fragment URLs to load different content.
Don't rely on data persistence to serve content.
Use content fingerprinting to avoid caching issues with Googlebot.
Ensure that your application uses
feature detection
for all critical APIs that it needs and provide a fallback
behavior or polyfill where applicable.
Make sure your content works with HTTP connections.
Make sure your web components render as expected.
Use the Mobile-Friendly Test or the
URL Inspection Tool to
check if the rendered HTML has all content you expect.