我在我的 angular 版本 4 应用程序中使用 ng2-metadata 并且 google 似乎只显示默认标题和描述

Question

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

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

我正在部署一个 AOT 构建，并且添加了 ng2-metadata aot 函数，如下面 link 建议的那样。

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

当前问题：

代码似乎可以在浏览器中正常运行，但 google 机器人似乎不会在 google 搜索结果中显示其他页面的标题和元标记。

*我已经完成了网站管理员工具的抓取请求以索引页面，即使它是 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/ or https://www.prerender.cloud/. I am using https://www.prerender.cloud/ 之类的预渲染解决方案与 Netlify 一起使用，效果很好。

如果您想继续使用 Firebase 托管，请尽量减少机器人访问页面时调用的代码。不要加载任何库或运行任何东西，除了呈现机器人和爬虫所需的标签和数据所必需的东西。示例如下。

index.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>

app.component.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.

    }
  }

Answer 2

Angular4自带元服务Angular通用，你可以试试

我在我的 angular 版本 4 应用程序中使用 ng2-metadata 并且 google 似乎只显示默认标题和描述

I'm using ng2-metadata with my angular version 4 app and google only seems to show the default title and description

seo

single-page-application

angular2-routing

angular