我将 ng2-metadata 与我的 angular 版本 4 应用程序一起使用，而谷歌似乎只显示默认标题和描述 [英] I'm using ng2-metadata with my angular version 4 app and google only seems to show the default title and description

问题描述

我将 ng2-metadata 与我的 angular 应用一起使用，而 google 似乎只显示默认标题和元描述.

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

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

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

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

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

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

当前问题:

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

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.

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

*I've done a webmaster tools crawl request to index the pages even though its a 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"
      }
    }
  }
];

推荐答案

许多爬虫不能很好地处理单页应用程序.您可以使用像 https://prerender.io/ 或 https://www.prerender.cloud/.我在 Netlify 中使用 https://www.prerender.cloud/ 并且效果很好.

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.

如果您想继续使用 Firebase 托管，请尽量减少机器人点击页面时调用的代码.不要加载任何库或运行任何需要渲染机器人和爬虫所需的标签和数据的东西.示例如下.

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.

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

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.

    }
  }

这篇关于我将 ng2-metadata 与我的 angular 版本 4 应用程序一起使用，而谷歌似乎只显示默认标题和描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！