Angular アプリケーションでメタ タグを動的に管理し、SEO とソーシャル共有を最適化します。

Angular アプリケーションでは、クライアント側 JavaScript を通じて直接メタ タグを動的に追加または更新しても、検索エンジン クローラーやソーシャル メディア ボットに対しては効果がありません。これらは通常、JavaScript を実行せず、最初の HTML のみを解析するためです。特にさまざまなページ コンテンツに対して、動的でクローラーが認識可能なメタ タグを実現するには、Angular Universal などのサーバー側レンダリング (SSR) ソリューションを採用する必要があります。これにより、メタ タグを含む完全な HTML をサーバー側で事前レンダリングして、SEO とソーシャル共有プレビューの問題を解決できます。

クライアント側のメタタグ更新の制限を理解する

多くの開発者は、 @angular/platform-b​​rowser によって提供される Meta サービスを使用して、コンポーネントの ngOnInit ライフサイクル フックまたはコンストラクターでタグを追加または更新するなど、Angular アプリケーションで Meta タグを動的に設定しようとしています。ただし、このアプローチは、検索エンジン最適化 (SEO) やソーシャル メディア共有 (LinkedIn、Facebook など) のプレビュー効果には効果がありません。

その理由は、検索エンジン クローラーとソーシャル メディア ボットは通常、サーバーから返された生の HTML ドキュメントのみをクロールして解析するためです。これらはクライアント側の JavaScript コードを実行しないか、非常に限定された JavaScript のみを実行します。これは、Angular アプリケーションを通じてブラウザーに動的に挿入されたメタ タグは、これらのボットによって認識されないことを意味します。ページの「ソース コード」を表示すると、これらの動的に追加されたタグは表示されません。これらのタグは、最初の HTML の一部ではなく、DOM がロードされて JavaScript が実行された後に挿入されるためです。

たとえば、次のコードは、Angular コンポーネントに Meta タグを動的に追加しようとします。

 import { コンポーネント } から '@angular/core';
import { Meta } から '@angular/platform-b​​rowser';

@成分（{
  セレクター: 'アプリルート',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
エクスポート クラス AppComponent {

    コンストラクター(プライベートメタサービス:メタ) {
        // コンストラクターにメタタグを追加します this.metaService.addTag({ property: 'og:title', content: 'Constructor Title' });
    }

    ngOnInit() {
        // ngOnInit にメタタグを追加します this.metaService.addTag({ property: 'og:description', content: 'ngOnInit description' });
    }

    title = '私の Angular アプリ';
}

これらのタグはブラウザの DOM に正常に追加されますが、外部のクローラーには表示されないままになります。

解決策: 動的メタタグを実装するための戦略

メタ タグが検索エンジンやソーシャル メディア ボットによって正しく認識されるようにするには、サーバー側でこれらのタグを含む HTML を生成する必要があります。主な戦略は 2 つあります。

1.静的メタタグ（サイト全体で統一）

Web サイト全体でメタ タグが必要な場合、つまりすべてのページが同じタイトル、説明、画像を共有する場合、最も簡単な方法は、メタ タグを src/index.html ファイルに直接ハードコーディングすることです。

 


  <meta charset="utf-8">
  <title>私の Angular アプリケーション</title>
  <base href="/">
  <meta name="viewport" content="width=device-width、initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- 静的メタタグの例-->
  <meta name="description" content="これは Angular アプリケーションの説明です。">
  <meta property="og:title" content="私の Angular アプリのタイトル">
  <meta property="og:description" content="ソーシャル メディア上の Angular アプリの説明。">
  <meta property="og:image" content="https://example.com/assets/logo.png">
  <meta property="og:url" content="https://example.com/">
  <meta name="twitter:card" content="summary_large_image">
  <!-- その他のメタタグ -->



  

以上がAngular アプリケーションでメタ タグを動的に管理し、SEO とソーシャル共有を最適化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。