我将 ng2-metadata 与我的 angular 版本 4 应用程序一起使用，而谷歌似乎只显示默认标题和描述

Question

我在我的 angular 应用程序中使用ng2-metadata，而 google 似乎只显示默认标题和元描述。

我的技术：用于托管的 Angular 版本 4、webpack、typescript 和 firebase。

我正在部署 AOT 构建，并且我添加了 ng2-metadata aot 函数，如下面的链接所示。

这是我正在使用的包： https : //www.npmjs.com/package/ng2-metadata

当前的问题：

该代码似乎可以在浏览器中直观地工作，但谷歌机器人似乎没有在谷歌搜索结果中显示其他页面的标题和元标记。

*我已经完成了一个网站管理员工具抓取请求来索引页面，即使它是一个 SPA。

这是我的博客页面的路线之一（我已经删除了一些文字）：

import { Route} from '@angular/router';
import { BlogComponent } from './blog.component';

export const BlogRoutes: Route[] = [
 {
    path: 'blog',
    component: BlogComponent,
    data : {
      metadata : {
        title : 'My Website | Blog',
        override : true,
        description : "The latest news & blog post....",
        keywords: "blog, reading, posts"
      }
    }
  }
];

Answer 1

许多爬虫不能很好地与单页应用程序配合使用。您可以使用预渲染解决方案，例如https://prerender.io/或https://www.prerender.cloud/。我正在使用https://www.prerender.cloud/和 Netlify，效果很好。

如果您想继续使用 Firebase Hosting，请尝试尽量减少机器人访问页面时调用的代码。不要加载任何库或运行任何需要渲染机器人和爬虫所需的标签和数据的东西。下面的例子。

索引.html

<script>
  (function(w,d){
    w.myApp = w.myApp || {}; w.myApp.robot = false;
    var AM_I_ROBOTS = ['googlebot', 'twitterbot', 'facebookexternalhit', 'google.com/bot.html', 'facebook.com/externalhit_uatext.php', 'tweetmemebot', 'sitebot', 'msnbot', 'robot', 'bot', 'spider', 'crawl'];
    var ua = navigator.userAgent.toLowerCase(); w.myApp.userAgent = ua;
    for (var i = 0, len = AM_I_ROBOTS.length; i < len; i++) { if(ua.indexOf(AM_I_ROBOTS[i]) !== -1  ) { w.myApp.robot = true; break; }}
    })(window,document);
 </script>
 <script>
    if(!window.myApp.robot){
    // Google Analytics code
    }
 </script>
 <script>
    if(!window.myApp.robot){
    // Facebook Connect code
    }
 </script>

应用程序组件.ts

export class AppComponent implements OnDestroy, OnInit, AfterViewInit {

  ...

  public webRobot: boolean = false;
  private static AM_I_ROBOTS:[string] = ['googlebot', 'twitterbot', 'facebookexternalhit', 'google.com/bot.html',
    'facebook.com/externalhit_uatext.php', 'tweetmemebot', 'sitebot', 'msnbot', 'robot',
    'bot', 'spider', 'crawl'];

  ... 

  constructor(private auth: Auth,
              private localStorage: LocalStorageService,
              private meta: MetaService,
              ...
              private otherService: OtherService, 
  ) {
  }

  ngOnInit(): void {
    this.init();
  }

  init() {
    const robots = AppComponent.AM_I_ROBOTS;
    const ua = navigator.userAgent.toLowerCase();
    for (var i = 0, len = robots.length; i < len; i++) {
      if(ua.indexOf(robots[i]) !== -1  ) {
        this.webRobot = true;
        break;
      }
    }

    // for service that should be informed to 
    // run minimally with robots
    this.otherService.init(this.webRobot);

    // for service that should not be called with robots
    if (!this.webRobot) {

      this.auth.init();

      // etc.

    }
  }