使用Angular动态添加和删除<meta name =“ robots” content =“ noindex” />

时间:2019-03-29 15:43:11

标签: angular google-search-console

Google Search Console未索引我的Angular SPA应用程序。 Angular团队动态地在头部插入了“ noindex”元标记,在页面渲染完成后,Angular组件删除了“ noindex”元标记。据我了解,该策略应该避免在Angular渲染网站之前对SPA编制索引,并避免对404页进行索引。我采用了与Angular.io SPA相同的方法,但是使用Google Search Console却看到了不同的结果。

我的SPA是一个普通的Angular CLI项目,其中包含多个延迟加载的路由模块,而延迟加载的路由模块中的组件负责删除“ noindex”元标记。

很明显,Google索引Angular.io很好https://www.google.com/search?q=angular+router+-site%3A+angular.io

这是我的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site Title</title>
  <meta name="description" content="My SEO meta description" />
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script>
    // Dynamically, pre-emptively, add `noindex`, which will be removed when the doc is ready and valid
    tag = document.createElement('meta'); tag.name = 'robots'; tag.content = 'noindex';
    document.head.appendChild(tag);
  </script>

</head>
<body>
  <app-root></app-root>
</body>
</html>

还有Angular.io index.htmlhttps://github.com/angular/angular/blob/57f7996b6d2bee5a63902637fdec5b60b9a857cd/aio/src/index.html#L35

这是我的app.route.ts

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    loadChildren: './routed/home/home.module#HomeModule',
    data: {
      page: 'home',
    }
  },

  // <editor-fold desc="Catch-All Routes">

  {
    path: '**',
    loadChildren: './routed/not-found/not-found.module#NotFoundModule'
  }

  // </editor-fold>
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRouterModule { }

这是我的延迟加载路由home模块组件的节选,该组件删除了“ noindex”元标记。

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  constructor(private metaService: Meta) {
    this.metaService.removeTag('name="robots"');
  }

  ngOnInit() {
  }

}

这是Angular.io组件,负责删除“ noindex”元标记https://github.com/angular/angular/blob/57f7996b6d2bee5a63902637fdec5b60b9a857cd/aio/src/app/app.component.html#L53

https://github.com/angular/angular/blob/57f7996b6d2bee5a63902637fdec5b60b9a857cd/aio/src/app/layout/doc-viewer/doc-viewer.component.ts#L161

在chrome开发人员工具中查看页面源代码时,<head>标签不包含“ noindex”元标签。但是,登录到Google Search Console并执行实时测试时,出现以下错误:“被'noindex'标记排除。在'robots'元标记中检测到'noindex'”

0 个答案:

没有答案