Crawled page screenshot for Angular site is blank in the Google Search Console

Question

I set up a SPA page through Angular, and achieved the effect of Server Side Render through Rendertron, In the facebook debug tool, I could get my dynamically generated Meta data, but the preview of Google Console Search was blank

I understand that Googlebot can dynamically render the DOM itself , but why is it always blank? is there something wrong with the structure of my HTML?

Facebook Debug Tool

Google Search Console

Answer 1

Through this issue, I found a way to solve it

It looks like angular.io may no longer be indexing

Angular can be indexed by the Googlebot without using server-side render way.

How to debug

add the following code to your index.html, and then open Google Search Console to crawler it.

you can debug by the error msg that the user agent is GoogleBot

https://developers.google.com/search/docs/guides/debug-rendering

window.addEventListener('error', function(e) {
    var errorText = [
        // key point of debug
        'UserAgent: ' + navigator.userAgent ,
        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);

});

Possible reasons

1. Unused polyfill

@MrCroft

uncomment the following line under /** IE9, IE10 and IE11 requires all of the following polyfills. **/:

---

2. Upgrade to latest Angular version

it makes it easier for you to identify possible problems

https://github.com/angular/angular/issues/21272#issuecomment-370153525