ASP.NET Core Blazor アプリで <head> コンテンツを制御する
注意
これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 8 バージョンを参照してください。
警告
このバージョンの ASP.NET Core はサポート対象から除外されました。 詳細については、「.NET および .NET Core サポート ポリシー」を参照してください。 現在のリリースについては、この記事の .NET 8 バージョンを参照してください。
重要
この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。
現在のリリースについては、この記事の .NET 8 バージョンを参照してください。
Razor コンポーネントでは、ページのタイトル (<title> 要素) の設定やメタデータ (<meta> 要素) の変更など、ページの HTML <head> 要素のコンテンツを変更できます。
Razor コンポーネントの <head> コンテンツを制御する
HTML <title> 要素を HeadOutlet コンポーネントにレンダリングする PageTitle コンポーネントでページのタイトルを指定します。
コンテンツを HeadOutlet コンポーネントに提供する HeadContent コンポーネントで <head> 要素コンテンツを指定します。
次の例では、Razor を使用して、ページのタイトルと説明を設定します。
ControlHeadContent.razor:
@page "/control-head-content"
<PageTitle>@title</PageTitle>
<h1>Control <head> Content Example</h1>
<p>
Title: @title
</p>
<p>
Description: @description
</p>
<HeadContent>
<meta name="description" content="@description">
</HeadContent>
@code {
private string description = "This description is set by the component.";
private string title = "Control <head> Content";
}
@page "/control-head-content"
<PageTitle>@title</PageTitle>
<h1>Control <head> Content Example</h1>
<p>
Title: @title
</p>
<p>
Description: @description
</p>
<HeadContent>
<meta name="description" content="@description">
</HeadContent>
@code {
private string description = "This description is set by the component.";
private string title = "Control <head> Content";
}
@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" />
レイアウトを使ってコンポーネントのページ タイトルを設定する
レイアウト コンポーネントでページ タイトルを設定します。
@inherits LayoutComponentBase
<PageTitle>Page Title</PageTitle>
<div class="page">
...
</div>
HeadOutlet コンポーネント
HeadOutlet コンポーネントにより、PageTitle および HeadContent コンポーネントによって提供されたコンテンツがレンダリングされます。
プロジェクト テンプレートから作成された Blazor Web App では、App.razor の HeadOutlet コンポーネントによって <head> コンテンツがレンダリングされます。
<head>
...
<HeadOutlet />
</head>
Blazor Server プロジェクト テンプレートから作成された Blazor Server アプリでは、Pages/_Host.cshtml でコンポーネント タグ ヘルパーによって HeadOutlet コンポーネントの <head> コンテンツがレンダリングされます。
<head>
...
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
Blazor Server プロジェクト テンプレートから作成された Blazor Server アプリでは、Pages/_Layout.cshtml でコンポーネント タグ ヘルパーによって HeadOutlet コンポーネントの <head> コンテンツがレンダリングされます。
<head>
...
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
Blazor WebAssembly プロジェクト テンプレートから作成されたアプリでは、クライアント側の Program ファイルで、HeadOutlet コンポーネントが WebAssemblyHostBuilder の RootComponents コレクションに追加されます。
builder.RootComponents.Add<HeadOutlet>("head::after");
::after pseudo-selector が指定されている場合、ルート コンポーネントのコンテンツは、コンテンツを置き換える代わりに、既存の head コンテンツに追加されます。 これにより、アプリでは wwwroot/index.html で静的な head コンテンツを保持することができ、アプリの Razor コンポーネントでコンテンツを繰り返す必要はなくなります。
Blazor Web App でデフォルトのページ タイトルを設定する
App コンポーネント (App.razor) でページ タイトルを設定します。
<head>
...
<HeadOutlet />
<PageTitle>Page Title</PageTitle>
</head>
Blazor WebAssembly アプリでページ タイトルが見つからない
Blazor WebAssembly スタンドアロン アプリ プロジェクト テンプレートから作成された Blazor アプリでは、App コンポーネント (App.razor) の NotFound コンポーネント テンプレートによって、ページ タイトルが Not found に設定されます。
Blazor プロジェクト テンプレートから作成された Blazor アプリでは、App コンポーネント (App.razor) の NotFound コンポーネント テンプレートによって、ページ タイトルが Not found に設定されます。
App.razor:
<NotFound>
<PageTitle>Not found</PageTitle>
...
</NotFound>
その他のリソース
Mozilla MDN Web Docs ドキュメント:
ASP.NET Core