我使用的是ng2元数据，我的角版本4应用程序和谷歌似乎只显示了默认的标题和描述。

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

我使用的是ng2元数据，我的角应用程序和谷歌似乎只显示了默认的标题和元描述。

My tech: Angular version 4, webpack, typescript and firebase for hosting.

我的技术:角版本4,webpack, typescript和firebase的托管。

I'm deploying an AOT build and I have added the ng2-metadata aot function like the below link suggests.

我正在部署AOT构建，我已经添加了ng2元数据AOT功能，就像下面的链接所建议的那样。

This is the package I'm using: https://www.npmjs.com/package/ng2-metadata

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

Current issue:

当前问题:

The code seems to work in the browser visually but the google bots don't seem to show the other pages title and meta tags in the google search results.

代码似乎在浏览器中工作，但是谷歌机器人似乎没有显示其他页面标题和在谷歌搜索结果中的元标签。

*I've done a webmaster tools crawl request to index the pages even though its a SPA.

*我已经做了一个网站管理员工具抓取网页索引，即使它是一个SPA。

This is one of my routes for my blog page (I've removed some of the text):

这是我的博客页面的一条路线(我删除了一些文本):

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"
      }
    }
  }
];

2 个解决方案

#1

Many of the crawlers do not work well with Single Page Apps. You can use a prerender solution like https://prerender.io/ or https://www.prerender.cloud/. I am using https://www.prerender.cloud/ with Netlify and it works well.

许多爬虫都不能很好地使用单页应用程序。您可以使用像https://prerender这样的预发布解决方案。io /或https://www.prerender.cloud/。我使用的是https://www.prerender.cloud/和Netlify，它运行良好。

If you want to stay with Firebase Hosting, try to minimize the code that is called when a bot hits the page. Don't load any libraries or run anything expect what is necessary to render the tags and data you need for the bots and crawlers. Example below.

如果您希望继续使用Firebase托管，请尽量减少当机器人访问页面时调用的代码。不要加载任何库，也不要运行任何可能需要的东西来呈现你需要的标签和数据。下面的例子。

index.html

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.

    }
  }

#2

Angular 4 come with meta service and Angular Universal, you can try it.

角4与元服务和角通用，你可以尝试。

#1