Seo Angular2-搜索引擎优化-如何操作元描述

谷歌的搜索结果是通过TitleTag显示的，

目前没有现成的解决方案，只有一个尚未解决的问题来实现它

当然，您可以自己实现类似title服务的东西，只需使用as模板

与
Title
服务类似的
Meta
服务正在开发中（目前只是一个pull请求）。
我已经开发并刚刚发布了插件，它在路由级别操纵Meta标记，并允许在组件构造函数中以编程方式设置Meta标记

您可以在github存储库中找到详细说明。此外，源文件可能有助于引入自定义逻辑。
由于Angular4，您可以使用。

这是可能的。我在我的应用程序中实现了它，下面我将描述它是如何实现的

基本思想是使用
@angular/platform浏览器中的
Meta

要动态更改特定元标记，您必须：

使用
removeTag（attrSelector:string）：void删除旧的
方法

使用
addTag（标记：MetaDefinition，forceCreation？）添加新标记：
布尔）：HTMLMetaElement
方法
当路由器触发路由更改事件时，您必须执行此操作

注意：事实上，还需要有默认的
…
和
标记
影响：

第一部分

第二部分

事实上，我目前使用的是这个解决方案更复杂的版本，它还用于显示不同语言的不同标题和元描述。

完整代码在project中可用。

带有ngx翻译解决方案的
app routing.module.ts
文件就在那里：

还有使用相同解决方案的生产应用程序：

当然，这不是唯一的办法，也许还有更好的办法。但我测试了这个解决方案，它是有效的

事实上，解决方案与相应帖子中关于更改标题的内容非常相似：

角度元文档：。事实上，它们的信息量不大，我不得不试验并研究real.js代码，以使这个动态元更改生效。
非常感谢。我想我会采用标题服务的方式。发布版本中有没有改变？我知道在平台浏览器中有一个内置的标题服务，但是有什么可以描述的吗？没有，到目前为止没有任何改变。这个PR现在已经被合并，是4.0.0-beta.0的一部分。我已经发布到live ng2元数据中，它工作得很好，但是当我让谷歌抓取我的页面时，它仍然说我有重复的元标记。还有什么我需要做的吗？我想你应该从你的html中删除“静态”标签。ng2元数据将动态地编写它们。非常适合我。非常感谢！我发现，当延迟加载的路由被删除时，@RonaldPadur这个方法不起作用used@AngularM延迟加载路由在angular中是一个大问题，特别是当您使用ngtools在AoT中编译应用程序时。Angular团队正在解决它的问题。这有助于谷歌正确索引标题和元标记吗？通过元添加/更新的标记不会被爬虫选中，有办法解决吗？我想这一定是为了与Angular Universal一起使用。对不起，实际上我不明白，在哪个文件中，我必须更新这个代码。这适用于Angular Universal。以下是我所做的更改：我尝试过添加这些标签，但在facebook的facebook开放图上没有显示。有什么办法可以解决吗？
<meta name="description" content="**my description for this route**"/>

import { Meta } from '@angular/platform-browser';

// [...]

constructor(private meta: Meta) {}

// [...]

this.meta.addTag({ name: 'robots', content: 'noindex' });

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import { StringComparisonComponent }  from '../module-string-comparison/string-comparison.component';
import { ClockCalculatorComponent }  from '../module-clock-calculator/clock-calculator.component';

import { Title, Meta } from '@angular/platform-browser';

const routes: Routes = [
  {
    path: '', redirectTo: '/string-comparison', pathMatch: 'full',
    data: { title: 'String comparison title', metaDescription: 'String comparison meta description content' }
  },
  {
    path: 'string-comparison',  component: StringComparisonComponent,
    data: { title: 'String comparison title', metaDescription: 'String comparison meta description content' }
  },
  {
    path: 'clock-time-calculator',  component: ClockCalculatorComponent,
    data: { title: 'Clock time calculator title', metaDescription: 'Clock time calculator meta description content' }
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title,
    private metaService: Meta
  ){
    //Boilerplate code to filter out only important router events and to pull out data object field from each route
    this.router.events
    .filter(event => event instanceof NavigationEnd)
    .map(() => this.activatedRoute)
    .map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
    })
    .filter(route => route.outlet === 'primary')
    //Data fields are merged so we can use them directly to take title and metaDescription for each route from them
    .mergeMap(route => route.data)
    //Real action starts there
    .subscribe((event) => {
        //Changing title
        this.titleService.setTitle(event['title']);

        //Changing meta with name="description"
        var tag = { name: 'description', content: event['metaDescription'] };
        let attributeSelector : string = 'name="description"';
        this.metaService.removeTag(attributeSelector);
        this.metaService.addTag(tag, false);
    });
  }

}