2

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 enter image description here

Google Search Console enter image description here

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.