web-dev-qa-db-ja.com

Angular2-SEO-メタ記述の操作方法

Googleの検索結果は、TitleTagおよび<meta name="description"..."/>タグを介して表示されます。 <title>- Tagは、Angular2経由で編集可能です angular2ルーターでページタイトルを変更する方法

残っているのは説明です。

ページの<head>部分のメタタグを操作する、angular2でディレクティブを記述することは可能ですか？.
選択したルートに応じて、メタの説明は次のように変わります。

<meta name="description" content="**my description for this route**"/>
seoangularmeta-tags
21
Ronald Padur

Angular4以降では、 Angular Meta service を使用できます。

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

// [...]

constructor(private meta: Meta) {}

// [...]

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

可能です。私は自分のアプリにそれを実装し、以下でそれがどのように作られたかの説明を提供します。

基本的な考え方は、_@angular/platform-browser_からMetaを使用することです

特定のメタタグを動的に変更するには、以下を行う必要があります。

  1. removeTag(attrSelector: string) : voidメソッドを使用して古いものを削除します。
  2. addTag(tag: MetaDefinition, forceCreation?: boolean) : HTMLMetaElementメソッドを使用して新しいものを追加します。

そして、ルーターがルート変更イベントを発生させたときにそれをしなければなりません。

注意：実際には、index.htmlのheadにデフォルトの_<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);
    });
  }

}
_
  1. ご覧のとおり、各ルートに追加のdataオブジェクトフィールドがあります。タイトルとメタタグのコンテンツとして使用されるtitleおよびmetaDescription文字列が含まれています。
  2. コンストラクターでは、ルーターイベントをフィルターで除外し、フィルター処理されたルーターイベントにサブスクライブします。 Rxjsはそこで使用されますが、実際には使用する必要はありません。通常の_if statements_およびloopsは、ストリーム、フィルター、およびマップの代わりに使用できます。
  3. また、データオブジェクトフィールドをイベントにマージして、titleやmetaDescription文字列などの情報を簡単に使用できるようにします。
  4. _<title>...</title>_および_<meta name="description"..." content="..."/>_タグを動的に変更します。

効果：

最初のコンポーネント String comparison title and meta description tags

2番目のコンポーネント Clock time calculator title and meta description tags

実際、私は現在、 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 docs： https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/Meta-class.html 。実際、それらはあまり有益ではなく、この動的なメタ変更を機能させるために、実際の.jsコードを実験して調べる必要がありました。

8
luke

ルートレベルでメタタグを操作し、コンポーネントコンストラクター内でプログラムでメタタグを設定できるプラグインを開発し、リリースしました @ ngx-meta/core .

詳細な手順は @ ngx-meta/core github repositoryで見つけることができます。また、ソースファイルはカスタムロジックの導入に役立つ場合があります。

5
Burak Tasci

現在、それを実装するための未解決の解決策だけはありません https://github.com/angular/angular/issues/7438 。

もちろん、タイトルサービスのようなものを自分で実装できます。テンプレートとして TitleService を使用するだけです

Metaサービスに似たTitleサービスが現在開発中です（現在はプルリクエストのみ）。

3
Günter Zöchbauer