Blazor
Built-in Components
Created: 04 Feb 2026
Updated: 04 Feb 2026
Control <head> Content in ASP.NET Core Blazor Apps
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).
This is essential for:
- SEO optimization - Dynamic page titles and meta descriptions
- Social media sharing - Open Graph and Twitter Card meta tags
- Page-specific styling - Loading CSS only when needed
- Accessibility - Proper document titles for screen readers
How It Works
┌─────────────────────────────────────────────────────────┐
│ App.razor │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <head> │ │
│ │ <HeadOutlet /> ◄── Renders dynamic content │ │
│ │ <PageTitle>Default Title</PageTitle> │ │
│ │ </head> │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
▲
│ Collects content from
│
┌─────────────────────────────────────────────────────────┐
│ Any Page/Component │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <PageTitle>@title</PageTitle> │ │
│ │ <HeadContent> │ │
│ │ <meta name="description" content="@desc"> │ │
│ │ </HeadContent> │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
HeadOutlet Component
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
<PageTitle>BlazorApp</PageTitle>
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
Note: You can set a default page title inApp.razorby adding<PageTitle>after<HeadOutlet />.
Control <head> Content in a Razor Component
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.
Basic Example
The following example sets the page's title and description using Razor:
ControlHeadContent.razor:
@page "/control-head-content"
<PageTitle>@title</PageTitle>
<HeadContent>
<meta name="description" content="@description">
</HeadContent>
<h1>Control <head> Content Example</h1>
<p>Title: @title</p>
<p>Description: @description</p>
@code {
private string title = "Control <head> Content";
private string description = "This description is set by the component.";
}
Result in HTML <head>:
<head>
<title>Control <head> Content</title>
<meta name="description" content="This description is set by the component.">
</head>
Practical Examples
Example 1: Dynamic Title with Buttons
@page "/head-outlet-demo"
<PageTitle>@title</PageTitle>
<HeadContent>
<meta name="description" content="@description">
</HeadContent>
<h1>Control <head> Content Example</h1>
<div class="card mb-4">
<div class="card-body">
<h5>Current Head Content</h5>
<p><strong>Title:</strong> @title</p>
<p><strong>Description:</strong> @description</p>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h5>Change Title Dynamically</h5>
<div class="btn-group mb-3">
<button class="btn btn-primary" @onclick="@(() => SetTitle("Home Page"))">Home</button>
<button class="btn btn-success" @onclick="@(() => SetTitle("Products"))">Products</button>
<button class="btn btn-warning" @onclick="@(() => SetTitle("Contact Us"))">Contact</button>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h5>Change Description</h5>
<input type="text" class="form-control" @bind="description" />
</div>
</div>
@code {
private string title = "Control <head> Content";
private string description = "This description is set by the component.";
private void SetTitle(string newTitle)
{
title = newTitle;
}
}
Example 2: SEO Meta Tags
@page "/blog/article"
<PageTitle>@articleTitle</PageTitle>
<HeadContent>
<meta name="description" content="@articleDescription">
<meta name="keywords" content="Blazor, .NET, Web Development">
<meta name="author" content="@authorName">
<link rel="canonical" href="https://example.com/blog/article">
</HeadContent>
<article>
<h1>@articleTitle</h1>
<p>@articleDescription</p>
</article>
@code {
private string articleTitle = "10 Tips for Blazor Development";
private string articleDescription = "Discover the top 10 tips to improve your Blazor workflow.";
private string authorName = "John Doe";
}
Example 3: Social Media Meta Tags
@page "/product/@ProductId"
<PageTitle>@product.Name - My Store</PageTitle>
<HeadContent>
<meta name="description" content="@product.Description">
@* Open Graph for Facebook, LinkedIn *@
<meta property="og:title" content="@product.Name">
<meta property="og:description" content="@product.Description">
<meta property="og:image" content="@product.ImageUrl">
<meta property="og:type" content="product">
@* Twitter Card *@
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="@product.Name">
<meta name="twitter:description" content="@product.Description">
</HeadContent>
<h1>@product.Name</h1>
@code {
[Parameter]
public string ProductId { get; set; } = string.Empty;
private Product product = new();
protected override async Task OnInitializedAsync()
{
product = await ProductService.GetProductAsync(ProductId);
}
}
Example 4: Page-Specific Styles
@page "/dashboard"
<PageTitle>Dashboard</PageTitle>
<HeadContent>
<style>
.dashboard-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 12px;
}
</style>
</HeadContent>
<h1>Dashboard</h1>
<div class="dashboard-card">
<h3>Total Users</h3>
<p>1,234</p>
</div>
Set a Page Title via Layout
Set the page title in a layout component:
@inherits LayoutComponentBase
<PageTitle>Page Title</PageTitle>
<div class="page">
@Body
</div>
Set a Default Page Title
Set the default page title in the App component (App.razor):
<head>
...
<HeadOutlet />
<PageTitle>BlazorApp</PageTitle>
</head>
Pages that don't specify their own <PageTitle> will use this default.
Not Found Page Title
In Blazor apps, the NotFound component can set the page title:
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="typeof(MainLayout)">
<p>Sorry, the page you requested was not found.</p>
</LayoutView>
</NotFound>
Component Hierarchy
When multiple components set head content, the last rendered component wins:
App.razor (PageTitle: "BlazorApp" - default)
└── MainLayout.razor
└── ProductPage.razor (PageTitle: "Product Details")
▲
│
This title is displayed