Angular2 - SEO - 如何操纵元描述

Question

Angular2 - SEO - 如何操纵元描述

谷歌搜索结果通过TitleTag和<meta name="description"..."/>标签显示.该<title>-Tag是通过Angular2 editiable 如何更改网页标题中angular2路由器

剩下的就是描述.

是否可以在angular2中编写一个指令,它操纵<head>页面部分的元标记.
因此,根据所选路线,元描述会发生变化,如:

<meta name="description" content="**my description for this route**"/>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nic*_*oub 34

从Angular4开始,您可以使用Angular Meta服务.

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

// [...]

constructor(private meta: Meta) {}

// [...]

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

luk*_*uke 11

有可能的.我在我的应用程序中实现了它,下面我提供了它是如何制作的描述.

基本思路是使用Metafrom@angular/platform-browser

要动态更改特定元标记,您必须:

使用removeTag(attrSelector: string) : void 方法删除旧的.
使用addTag(tag: MetaDefinition, forceCreation?: boolean) : HTMLMetaElement方法添加新的.

当路由器触发路由更改事件时,您必须执行此操作.

注意:事实上,还必须有index.html的默认值<title>...</title>和<meta name="description"..." content="..."/>头部,所以在动态设置之前,已经存在一些静态内容.

我的app-routing.module.ts内容:

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);
    });
  }

}

Run Code Online (Sandbox Code Playgroud)

可以看出data,每条路线都有一个额外的物场.它包含title和metaDescription字符串,将用作标题和元标记内容.
在构造函数中,我们过滤掉路由器事件,并订阅过滤的路由器事件.在那里使用Rxjs,但实际上没有必要使用它.常规if statements,loops可以使用插入流,过滤器和地图.
我们还将数据对象字段与事件合并,以便我们可以轻松地使用信息title和metaDescription字符串.
我们动态更改<title>...</title>和<meta name="description"..." content="..."/>标记.

功效:

第一部分

第二部分

事实上,我目前使用这个解决方案的更复杂版本,它也使用ngx-translate来显示不同语言的不同标题和元描述.
完整代码可在angular2-bootstrap-translate-website-starter项目中找到.带有ngx-translate解决方案
的app-routing.module.ts文件就在那里:app-routing.module.ts.

还有生产应用程序使用相同的解决方案:http://www.online-utils.com.

当然,这不是唯一的方法,可能有更好的方法来做到这一点.但我测试了这个解决方案并且它有效.

实际上解决方案与关于更改标题的相应帖子非常相似:如何在angular2路由器中更改页面标题.

Angular Meta文档:https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html.事实上,它们并不是非常有用,我不得不尝试并研究真正的.js代码,以使这种动态元变更起作用.

Answer 3

Bur*_*sci 5

我开发并刚刚发布了@ ngx-meta/core插件,它在路由级操纵元标记,并允许在组件构造函数中以编程方式设置元标记.

您可以在@ ngx-meta/core github存储库中找到详细说明.此外,源文件可能有助于引入自定义逻辑.

Answer 4

Gün*_*uer 3

目前没有开箱即用的解决方案，只有一个未解决的问题来实现它https://github.com/angular/angular/issues/7438。

你当然可以自己实现类似标题服务的东西，只需使用 TitleService作为模板

Meta与 service 类似的服务正在Title开发中（目前只有一个 pull request）。

此 PR 现已合并，成为 4.0.0-beta.0 的一部分 (2认同)

归档时间：	9 年，7 月前
查看次数：	20683 次
最近记录：	7 年，5 月前