我在我的角度版本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

问题描述

我在我的角度应用程序中使用了 ng2-metadata ，而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，打字稿和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

当前问题:

该代码似乎可以在浏览器中直观地运行，但是google bot似乎没有在google搜索结果中显示其他页面的标题和元标记.

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

推荐答案

许多搜寻器不适用于Single Page Apps.您可以使用 https://prerender.io/或 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 Hosting，请尝试最小化漫游器访问页面时调用的代码.不要加载任何库或运行任何东西，只要呈现渲染机器人和搜寻器所需的标签和数据是必需的.下面的示例.

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

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.

    }
  }

这篇关于我在我的角度版本4应用程序中使用ng2-metadata，并且google似乎只显示默认标题和描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！