ASP.NET Core Blazor アプリで <head> コンテンツを制御する

  • [アーティクル]

Razor コンポーネントでは、ページのタイトル (<title> 要素) の設定やメタデータ (<meta> 要素) の変更など、ページの HTML <head> 要素のコンテンツを変更できます。

Razor コンポーネントの <head> コンテンツを制御する

HTML <title> 要素を HeadOutlet コンポーネントにレンダリングする PageTitle コンポーネントでページのタイトルを指定します。

コンテンツを HeadOutlet コンポーネントに提供する HeadContent コンポーネントで <head> 要素コンテンツを指定します。

次の例では、Razor を使用して、ページのタイトルと説明を設定します。

Pages/ControlHeadContent.razor:

@page "/control-head-content"

<h1>Control <head> content</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<PageTitle>@title</PageTitle>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "Description set by component";
    private string title = "Title set by component";
}

@page "/control-head-content"

<h1>Control <head> content</h1>

<p>
    Title: @title
</p>

<p>
    Description: @description
</p>

<PageTitle>@title</PageTitle>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "Description set by component";
    private string title = "Title set by component";
}

プリレンダリング中に <head> の内容を制御する

このセクションは、プリレンダリングされる Blazor WebAssembly アプリと Blazor Server アプリに適用されます。

Razor コンポーネントがプリレンダリングされるとき、PageTitle および HeadContent コンポーネントで <head> の内容を制御するために、レイアウト ページ (_Layout.cshtml) を使う必要があります。 これが必要になるのは、<head> の内容を制御するコンポーネントは、HeadOutlet コンポーネントが含まれるレイアウトより前にレンダリングする必要があるためです。 ヘッド コンテンツの制御にはレンダリングの順序が必要になります。

共有 _Layout.cshtml ファイルに HeadOutlet コンポーネントのコンポーネント タグ ヘルパーが含まれない場合、それを <head> 要素に追加します。

コンポーネントをページまたはビューに埋め込む Blazor Server アプリまたは Razor Pages/MVC アプリの必須の共有 _Layout.cshtml ファイルの場合:

<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

プリレンダリングされるホストされた Blazor WebAssembly アプリの必須の共有 _Layout.cshtml ファイルの場合:

<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

HeadOutlet コンポーネント

HeadOutlet コンポーネントにより、PageTitle および HeadContent コンポーネントによって提供されたコンテンツがレンダリングされます。

Blazor WebAssembly プロジェクト テンプレートから作成されたアプリでは、Program.cs で、HeadOutlet コンポーネントが WebAssemblyHostBuilder の RootComponents コレクションに追加されます。

builder.RootComponents.Add<HeadOutlet>("head::after");

::after pseudo-selector が指定されている場合、ルート コンポーネントのコンテンツは、コンテンツを置き換える代わりに、既存の head コンテンツに追加されます。 これにより、アプリでは wwwroot/index.html で静的な head コンテンツを保持することができ、アプリの Razor コンポーネントでコンテンツを繰り返す必要はなくなります。

Blazor Server プロジェクト テンプレートから作成された Blazor Server アプリでは、Pages/_Host.cshtml でコンポーネント タグ ヘルパーによって HeadOutlet コンポーネントの <head> コンテンツがレンダリングされます。

Blazor Server プロジェクト テンプレートから作成された Blazor Server アプリでは、Pages/_Layout.cshtml でコンポーネント タグ ヘルパーによって HeadOutlet コンポーネントの <head> コンテンツがレンダリングされます。

<head>
    ...
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

Not found ページ タイトル

Blazor プロジェクト テンプレートから作成された Blazor アプリでは、App コンポーネント (App.razor) の NotFound コンポーネント テンプレートによって、ページ タイトルが Not found に設定されます。

App.razor:

<PageTitle>Not found</PageTitle>

その他のリソース

Mozilla MDN Web Docs ドキュメント: