web-dev-qa-db-ja.com

Angularのクロールされたページのスクリーンショットは、Google Search Consoleで空白です

Angular を使用してSPAページを設定し、 Rendertron を介してサーバー側レンダリングの効果を達成しました facebookデバッグツール で、動的に生成されたメタデータですが、Googleコンソール検索のプレビューが空白でした

GooglebotがDOM自体を動的にレンダリングできることを理解していますが、なぜそれが常に空白なのですか？ HTMLの構造に問題がありますか？

Facebookデバッグツールenter image description here

Google Search Consoleenter image description here

seogoogle-search-consolegooglebotangular
2
Chunbin Li

この問題を通して、私はそれを解決する方法を見つけました

angular.ioがインデックス付けされなくなったようです

Angularは、サーバー側のレンダリング方法を使用せずに、Googlebotによってインデックスを作成できます。

デバッグ方法

次のコードをindex.htmlに追加し、Google Search Consoleを開いてクロールします。

ユーザーエージェントが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);

});

考えられる理由

1。未使用のポリフィル

@ MrCroft

/** IE9, IE10 and IE11 requires all of the following polyfills. **/の下の次の行のコメントを外します。

2。最新にアップグレードAngular version

考えられる問題を特定しやすくなります

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

1
Chunbin Li