SEOのための角度ユニバーサルの最適化

今日、我々はconvert our existing Angular application into Angular Universalに我々の旅行を続けています.
そして、我々がこれを望む理由の1つは、SEOです.
それは、タイトルとメタサービスが超便利になるところです.
彼らは、ページのタイトルとメタ説明を設定するのを助けることができます.
すべてのボットは何を読むことができる意味を読む.
その結果、ページのソースコードを開き、タイトルとメタ説明を参照してください.

角度コンポーネントへのタイトルの追加

私たちのwelcome.component.tsを開くことから始めましょう.これは我々のテストグラウンドです.メインページではないので、ページソースを見ながらすぐに結果を見るべきです.
我々は、コンポーネントにTitleサービスをインポートすることから始めます.

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

次の部分は、TitleServiceをコンストラクタに注入することです.

constructor(private titleService: Title) { }

現在、このコンポーネントを通してtitleServiceを使用するオプションがあります.
我々は、タイトルを設定するngOnInit関数を使用します.

ngOnInit(): void {
    this.titleService.setTitle('Welcome to my Angular app');
}

今すぐユニバーサルで我々のアプリを実行してテストしてみましょう.

npm run build:ssr && npm run serve:ssr

ブラウザを開き、歓迎ページをご覧ください.我々は、タイトルが行動に入るのを見るべきです:

しかし、主な目標は、それが今も同様にサーバーのレンダリングバージョンで調整されているので、ページソースを検査しましょう.

はい、我々はそれを得た、これはクローラとボットが読むことができる何かです🤩.

角コンポーネントへのメタタグの追加

タイトルの作業では、タグを見ることができます.メタサービスは、すべての種類のクールなタグを作成することができます.
今日はメタタグに焦点を合わせます.
まず最初に、Metaサービスを輸入することから始めましょう.

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

次に、コンストラクタのコンポーネントを利用できるようにしましょう.

constructor(private titleService: Title, private metaService: Meta) {}

そして、私たちがtitleserviceで見たように、我々は現在ngOnInitでこれを呼ぶことができます.
メタ説明といくつかのタグを設定しましょう.

this.metaService.addTags([
  {name: 'keywords', content: 'Welcome, Hello'},
  {
    name: 'description',
    content: 'We would like to welcome you to the wonderful world of Angular Universal'
  }
]);

もう一度我々のアプリを実行して試してみましょう:

npm run build:ssr && npm run serve:ssr

今、我々は頭を予想して、メタタグが注入されるかどうか見ることができます:

そして、そこに行くと、今のパワーは、サーバー側のレンダリングアプリケーションでメタ説明とタイトルを注入する必要があります.
これはクローラやボットのインデックスを正しくあなたのウェブサイトに役立ちます.
今日のソースコードはGitHubです.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook