AngularでTypeScriptとUI Routerを使って、ルートに合わせてメタ説明を動的に追加する方法

Angular、TypeScript、Angular UI Router を使用してルートに基づいて動的にメタ説明を追加する方法

要件

このチュートリアルを完了するには、以下の要件を満たしている必要があります。

• HTML の基本的な知識
• Angular UI Router の基本的な知識
• Angular と TypeScript の基本的な知識

手順

1. Angular UI Router でルートを定義する

まず、Angular UI Router でアプリケーションのルートを定義する必要があります。各ルートには、data プロパティを含めることができます。このプロパティには、メタ説明を含むルートに関連するデータを含めることができます。

const routes = [
  {
    path: '/',
    component: HomeComponent,
    data: { metaDescription: 'This is the home page of my application.' }
  },
  {
    path: '/about',
    component: AboutComponent,
    data: { metaDescription: 'This is the about page of my application.' }
  },
  {
    path: '/products',
    component: ProductsComponent,
    data: { metaDescription: 'This is the products page of my application.' }
  }
];

1. RouterModule でルートを構成する

次に、RouterModule を使用して、定義したルートを構成する必要があります。

import { RouterModule } from '@angular/router';

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

1. Meta サービスを使用する

次に、Meta サービスを使用して、メタ説明を HTML ヘッドに追加する必要があります。このサービスは、@angular/platform-browser パッケージの一部です。

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

constructor(private meta: Meta) {}

ngOnInit() {
  this.meta.updateTag({ name: 'description', content: this.route.data.metaDescription });
}

このコードは、現在のルートの data.metaDescription プロパティの値を使用して、description メタタグの内容を更新します。

1. コンポーネント テンプレートで title タグを更新する

最後に、コンポーネント テンプレートで title タグを更新する必要があります。これにより、ページのタイトルが現在のルートに基づいて動的に更新されます。

<title>{{ route.data.metaTitle }}</title>

このチュートリアルでは、Angular、TypeScript、Angular UI Router を使用して、現在のルートに基づいて動的にメタ説明を追加する方法を説明しました。この手法により、SEO を改善し、ユーザーにとってより良いエクスペリエンスを提供することができます。

• この例では、data プロパティを使用してメタ説明とメタタイトルをルートに保存しています。他の方法でこれらの値を保存することもできます。

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string;
  metaDescription: string;

  constructor(private router: Router, private activatedRoute: ActivatedRoute, private meta: Meta) {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.updateMetaTags();
      }
    });
  }

  ngOnInit() {
    this.updateMetaTags();
  }

  private updateMetaTags() {
    const data = this.activatedRoute.data;
    this.title = data.title || 'My Application';
    this.metaDescription = data.metaDescription || 'This is my application.';

    this.meta.updateTag({ name: 'title', content: this.title });
    this.meta.updateTag({ name: 'description', content: this.metaDescription });
  }
}

<router-outlet></router-outlet>

app.routing.module.ts

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

const routes: Routes = [
  {
    path: '/',
    component: HomeComponent,
    data: { title: 'Home', metaDescription: 'This is the home page of my application.' }
  },
  {
    path: '/about',
    component: AboutComponent,
    data: { title: 'About', metaDescription: 'This is the about page of my application.' }
  },
  {
    path: '/products',
    component: ProductsComponent,
    data: { title: 'Products', metaDescription: 'This is the products page of my application.' }
  }
];

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
}

<h1>Welcome to my application!</h1>

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent {
}

<p>This is the about page of my application.</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent {
}

<ul>
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
</ul>

このコードは、以下の機能を提供します。

• HomeComponent、AboutComponent、ProductsComponent コンポーネントは、各ルートに対応するコンポーネントです。
• updateMetaTags メソッドは、title と metaDescription プロパティの値を使用してメタタグを更新します。
• AppComponent コンポーネントは、Router イベントをリッスンし、ルートが変更されたときにメタタグを更新します。
• 各ルートには、title と metaDescription プロパティを含む data プロパティがあります。
• /、/about、/products という 3 つのルートを定義します。

Angular には、Title サービスと呼ばれる別のサービスがあります。このサービスを使用して、ページのタイトルを設定できます。

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private title: Title, private router: Router, private activatedRoute: ActivatedRoute) {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.updateTitle();
      }
    });
  }

  ngOnInit() {
    this.updateTitle();
  }

  private updateTitle() {
    const data = this.activatedRoute.data;
    this.title.setTitle(data.title || 'My Application');
  }
}

このコードは、Title サービスを使用して、現在のルートの data.title プロパティの値に基づいてページのタイトルを設定します。

カスタムサービスを使用する

カスタム サービスを作成して、メタ説明とページのタイトルを管理することもできます。

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Meta } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root'
})
export class MetaService {
  constructor(private router: Router, private activatedRoute: ActivatedRoute, private meta: Meta) {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.updateMetaTags();
      }
    });
  }

  updateMetaTags() {
    const data = this.activatedRoute.data;
    this.meta.updateTag({ name: 'title', content: data.title || 'My Application' });
    this.meta.updateTag({ name: 'description', content: data.metaDescription || 'This is my application.' });
  }
}

このコードは、カスタム サービスを作成して、Router イベントをリッスンし、ルートが変更されたときにメタタグを更新します。

ng-seo パッケージを使用する

ng-seo は、Angular で SEO を改善するのに役立つライブラリです。このライブラリを使用して、メタ説明とページのタイトルを簡単に設定できます。

import { Component } from '@angular/core';
import { Title, Meta } from '@ng-seo/meta';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private title: Title, private meta: Meta, private router: Router, private activatedRoute: ActivatedRoute) {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.updateMetaTags();
      }
    });
  }

  ngOnInit() {
    this.updateMetaTags();
  }

  private updateMetaTags() {
    const data = this.activatedRoute.data;
    this.title.setTitle(data.title || 'My Application');
    this.meta.setDescription(data.metaDescription || 'This is my application.');
  }
}

このコードは、ng-seo パッケージを使用して、現在のルートの data.title および data.metaDescription プロパティの値に基づいてメタ説明とページのタイトルを設定します。