How to set page title in blazor?

13
votes

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".

6
blazor

6 Answers

15
votes

  1. Provide following script in your index.html (or in an included .js file):

    <script>
     setTitle = (title) => { document.title = title; };
</script>

  1. In each page inject the jsinterop:

    @inject IJSRuntime JSRuntime;

  2. 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"); ;        
   }    
}
13
votes

In ASP.NET CORE 5.0, a new component for Title is added

 <Title value="Page title" />

Msdn Reference: https://docs.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

enter image description here

5
votes

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

enter image description here

<!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

folder layout

@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" />

Index.razor

Final result

5
votes

From ASP.NET CORE 5.0, the official docs says that we can Influence HTML <head> tag elements easily by using Title component.

@using Microsoft.AspNetCore.Components.Web.Extensions.Head

<Title Value="{TITLE}" />

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.

1
votes

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.

enter image description here

Try it out in the demo app.

0
votes

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.

Blazor Head Element Helper

enter image description here

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.