Events
Power BI DataViz World Championships
Feb 14, 4 PM - Mar 31, 4 PM
With 4 chances to enter, you could win a conference package and make it to the LIVE Grand Finale in Las Vegas
Learn moreThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
<head>
content in ASP.NET Core Blazor appsNote
This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.
Warning
This version of ASP.NET Core is no longer supported. For more information, see the .NET and .NET Core Support Policy. For the current release, see the .NET 9 version of this article.
Important
This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
For the current release, see the .NET 9 version of this article.
Razor components can modify the HTML <head>
element content of a page, including setting the page's title (<title>
element) and modifying metadata (<meta>
elements).
Specify the page's title with the PageTitle component, which enables rendering an HTML <title>
element to a HeadOutlet
component.
Specify <head>
element content with the HeadContent component, which provides content to a HeadOutlet
component.
The following example sets the page's title and description using 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";
}
This section applies to prerendered Blazor WebAssembly apps and Blazor Server apps.
When Razor components are prerendered, the use of a layout page (_Layout.cshtml
) is required to control <head>
content with the PageTitle and HeadContent components. The reason for this requirement is that components that control <head>
content must be rendered before the layout with the HeadOutlet component. This order of rendering is required to control head content.
If the shared _Layout.cshtml
file doesn't have a Component Tag Helper for a HeadOutlet component, add it to the <head>
elements.
In a required, shared _Layout.cshtml
file of a Blazor Server app or Razor Pages/MVC app that embeds components into pages or views:
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
In a required, shared _Layout.cshtml
file of a prerendered hosted Blazor WebAssembly app:
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Set the page title in a layout component:
@inherits LayoutComponentBase
<PageTitle>Page Title</PageTitle>
<div class="page">
...
</div>
The HeadOutlet component renders content provided by PageTitle and HeadContent components.
In a Blazor Web App created from the project template, the HeadOutlet component in App.razor
renders <head>
content:
<head>
...
<HeadOutlet />
</head>
In Blazor Server apps created from the Blazor Server project template, a Component Tag Helper renders <head>
content for the HeadOutlet component in Pages/_Host.cshtml
:
<head>
...
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
In Blazor Server apps created from the Blazor Server project template, a Component Tag Helper renders <head>
content for the HeadOutlet component in Pages/_Layout.cshtml
:
<head>
...
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
In an app created from the Blazor WebAssembly project template, the HeadOutlet component is added to the RootComponents collection of the WebAssemblyHostBuilder in the client-side Program
file:
builder.RootComponents.Add<HeadOutlet>("head::after");
When the ::after
pseudo-selector is specified, the contents of the root component are appended to the existing head contents instead of replacing the content. This allows the app to retain static head content in wwwroot/index.html
without having to repeat the content in the app's Razor components.
Set the page title in the App
component (App.razor
):
<head>
...
<HeadOutlet />
<PageTitle>Page Title</PageTitle>
</head>
In Blazor apps created from the Blazor WebAssembly Standalone App project template, the NotFound
component template in the App
component (App.razor
) sets the page title to Not found
.
In Blazor apps created from a Blazor project template, the NotFound
component template in the App
component (App.razor
) sets the page title to Not found
.
App.razor
:
<NotFound>
<PageTitle>Not found</PageTitle>
...
</NotFound>
dotnet/blazor-samples
) (how to download)Mozilla MDN Web Docs documentation:
ASP.NET Core feedback
ASP.NET Core is an open source project. Select a link to provide feedback:
Events
Power BI DataViz World Championships
Feb 14, 4 PM - Mar 31, 4 PM
With 4 chances to enter, you could win a conference package and make it to the LIVE Grand Finale in Las Vegas
Learn moreTraining
Module
Use pages, routing, and layouts to improve Blazor navigation - Training
Learn how to optimize your app's navigation, use parameters from the URL, and create reusable layouts in a Blazor web app.