As Blazor being a SPA framework, I would like to know is it possible to set a page title for each individual page in Blazor?
I am currently working on Blazor webassembly project and cannot figure out a way how to add a page title since there is only one index.html as it should be in SPA, but would be really useful if it can be achieved to set title for each "page".
From ASP.NET CORE 6.0, the official docs says that we can Influence HTML <title> tag elements easily by using PageTitle component.
Add the HeadOutlet Component in Program.cs
builder.RootComponents.Add<HeadOutlet>("head::after");
Then use PageTitle Component
<PageTitle>@title</PageTitle>
Update 1:
Looks like this API has been put on hold to improve further. This has been removed from official docs link. Here is the github issue tracking the same. I'll update the answer once the API finally gets available in docs.
Update 2:
The above issue has been resolved and ASP.NET Core team added <PageTitle> component in ASP.NET Core 6.0. I have also updated the answer accordingly.
<Title> component in blazor
builder.RootComponents.Add<HeadOutlet>("head::after"); in the program.cs file is no longer needed. You can Just use the <PageTitle> element now.
Program.cs part
Note: starting with .Net 6.0 there is official support for changing the title, so the solution below is no longer needed.
Provide following script in your index.html (or in an included .js file):
<script>
setTitle = (title) => { document.title = title; };
</script>
In each page inject the jsinterop:
@inject IJSRuntime JSRuntime;
After each render, set the document title to the value of your choice:
@code
{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("setTitle", "this is the new title"); ;
}
}
IJSRuntime. Try to build and run anyways, it's just a IDE glitch.
From ASP.NET CORE 6.0 PageTitle component has been added which renders an HTML element to a HeadOutlet component
<PageTitle>title</PageTitle>
In ASP.NET CORE 5.0, a new component for Title is added In ASP.NET CORE 5.0, a new component for Title is added
<Title value="Page title" />
Msdn Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/additional-scenarios?view=aspnetcore-5.0#influence-html-head-tag-elements
First add the using statement in the component
@using Microsoft.AspNetCore.Components.Web.Extensions.Head
You can install (if not installed) using the command.
dotnet add package Microsoft.AspNetCore.Components.Web.Extensions --version 5.0.0-preview9.20467.1
5.0.0-preview9.20467.1 is the version when I am writing this. Please check the nuget url for the latest version
Nuget url: https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions/
Then add the Title tag.
<Title Value="My page title" />
See the sample output image below
.NET 6 RC1 introduced the PageTitle component to handle this scenario.
The PageTitle component is inside of the Microsoft.AspNetCore.Components.Web namespace.
You can place the component anywhere within your Blazor app and the contents of the PageTitle will be reflected as the title of your page. If you have multiple PageTitle components, the one that has been rendered last will become the title of your page.
In this case, the title will be "Page Title 2":
@page "/counter"
<PageTitle>Page Title 1</PageTitle>
<PageTitle>Page Title 2</PageTitle>
For PageTitle and HeadContent to work, you do need to add the HeadOutlet as a root component.
If you're using Blazor WASM completely client-side (no pre-render), you need to add the following line to your Startup.cs file after adding your App as a root component:
builder.RootComponents.Add<HeadOutlet>("head::after");
The head::after CSS selector instructs where to render the output of the HeadOutlet which will be respected for HeadContent, but if there's a title tag already present, the existing title tag will be updated.
If you're using Blazor WASM with pre-rendering, you'd put the following line inside the head of your _Layout.cshtml file:
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
This is assuming you have a _Layout.cshtml file from following Microsoft's docs to setup Blazor WASM pre-rendering.
If you want more details, I wrote a blog post on PageTitle, HeadContent, and HeadOutlet with more details at the Telerik Blog.
I also just found some very new documentation from Microsoft on PageTitle, HeadContent, etc that is relevant.
For those targeting .NET Core 3.1
Kudos to this post, you can make a reusable component.
Add below script to a js file, or add to index.html
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script>
window.setTitle = (title) => {
document.title = title;
}
</script>
</body>
</html>
In the shared folder create a new component PageTitle.razor
@inject IJSRuntime JsRuntime;
@code {
[Parameter]
public string Title { get; set; }
protected override async Task OnInitializedAsync()
{
await SetTitle();
}
private async Task SetTitle()
{
await JsRuntime.InvokeVoidAsync("setTitle", Title);
}
}
Add to the razor page you want to change the name of:
<PageTitle Title="Home sweet home" />
For Blazor Server in .net6.0
Add the following snippet inside the <head>tag contained within the _Host.cshtml file:
@using Microsoft.AspNetCore.Components.Web
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Example
@page "/"
@using Microsoft.AspNetCore.Components.Web
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title Placeholder</title>
<base href="~/" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
Then within your various Razor components you can use the <PageTitle> tag.
ExampleComponent.razor
@page "/ExampleComponent"
<PageTitle>Supplier Documents</PageTitle>
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" /> was the missing piece for me in Blazor Server.Since .NET 6 you can just use:
<PageTitle>@YourTitle</PageTitle>
You can use this Nuget package. It can change your Blazor page Title and even icon if you van to show notifications. Check the documentation for more details.
Try it out in the demo app.
The helper jsakamoto Toolbelt.Blazor.HeadElement is the only the solve the page title changes properly. In the end of the day, the main reason to change the title is to help SEO, therefore it must have SERVER SIDE PRERENDERING.
To use the helper, access the author's instructions on https://dev.to/j_sakamoto/yet-another-way-to-changing-the-page-title-in-blazor-and-more-43k
And more info on https://github.com/jsakamoto/Toolbelt.Blazor.HeadElement/#blazor-head-element-helper-
I would like to ask the author of this stackoverflow question, to make this the selected answer.
Just add <PageTitle>Your Page Title</PageTitle>
Starting on Net6 Preview 7 ...
You can Modify HTML content from Blazor components
Blazor now has built-in support for modifying HTML element content from components, including setting the and adding elements.
index.html has title, when the app is loaded for the first time, the title in index.html is displayed. Only on navigation, the PageTitle is rendered. How can we have PageTitle displayed in the first load (with index.html title still there)?I need an SEO-friendly solution and I found my own solution. Maybe you can use it and this solution is multilingual.
We need a helper static class:
public static class MetaHelper
{
public class MetaModel
{
public MetaModel(string title, string description)
{
Title = title;
Description = description;
}
public string Title { get; set; }
public string Description { get; set; }
}
public static MetaModel GetMeta(string path)
{
var culture = CultureHelper.GetCultureSlug();
// culture is ".com/en/faqs" or ".com/de/faqs" etc
path = path.Replace($"{culture }/", "");
if (path == "faqs")
{
return new MetaModel("Faq - website", "Frequently Asked Questions about ....");
}
else if (path == "page2")
{}......
return new MetaModel("Web site - Default Name", "Default description");
}
}
and we can use this helper in _host.cshtml page
@{
Layout = null;
var meta = MetaHelper.GetMeta(Request.Path);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>@meta.Title</title>
<meta name="description" content="@meta.Description">
