Blazor WASM Controlling Head Content
Blazor
29 Articles
In this article, let's learn about how to control head content like page title,
meta tags and other script tags in Blazor WASM application.
Note: If you have not done so already, I recommend you read the article on Blazor WASM Forms Validation.
Prior to .NET 6.0 there is no straight forward way to control head content in Blazor WASM application. We need to do some javascript hacks to
achieve this. With .NET 6.0, we got a new, easy and simple way to control head content. Now 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).
Table of Contents
- Why we need to control Head Content?
- Steps
HeadOutletComponentPageTitleComponentHeadContentComponent- Drawbacks
- Alternatives
- Realworld Example
- Summary
Why we need to control Head Content?
With Blazor WASM the responsibility of rendering HTML is on the client side and this brings a new challenge Search Engine Optimization (SEO) and Social Media Optimization (SMO). Search engine bots crawl our sites to list it in the search engine results while Social media bots crawl our sites when we share them on social media which makes the sharing link to look good with eye catching posters or with pages body content.
Ofcourse the (<body>) content of our site is more important but (<head>) content gives extra control with <meta> tags for SEO and SMO optimization.
Steps
- Add
HeadOutletComponent -builder.RootComponents.Add<HeadOutlet>("head::after");in Program.cs. - Add
PageTitleComponent -<PageTitle>Your Page Title</PageTitle>inside your component or page. - Add
HeadContentComponent -<HeadContent><meta name="description" content="description"></HeadContent>inside your component or page.
HeadOutlet Component
This is fairly a straight forward step and this will mostly be available and configured already in Program.cs in new Blazor WASM projects. If not
all you need to do is to add the following line builder.RootComponents.Add<HeadOutlet>("head::after");
in Program.cs.
This component takes the responsibilty of appending the content of PageTitle and HeadContent
to (<head>) tag using ::after pseudo element.
PageTitle Component
The PageTitle component is used to control page <title> when rendering HTML to a HeadOutlet component. This
can be placed anywhere inside component or page in your blazor application.
Code Sample - PageTitle
Demo - PageTitle Demo
This example binds <title> element to PageTitle.
HeadContent Component
The HeadContent component is similar to PageTitle component but used to
append its content to the <head> when rendering HTML to a HeadOutlet component. We can also give <title>inside this component. This
can be placed anywhere inside component or page in your blazor application.
Code Sample - HeadContent
Demo - HeadContent Demo
This example appends <meta name="Head Content Demo" content="Head Content Demo"> to <head>
element. You can inspect this page head to verify this. I have added screenshot for your reference.
Drawbacks
Browsers are more forgiving that sometimes they ignore our mistakes. Here is why?
What if we use PageTitle twice?
Code Sample - Multiple PageTitle
Blazor will not create two title tags inside of the head of your document. Instead, the last PageTitle component to be rendered will be reflected as the title of your document.
What if we give <title> inside HeadContent?
Code Sample - Page Title in both PageTitle and HeadContent
Browser will use second title. But I recommend using PageTitle component for titles as it designed for
that and it takes care of creating and updating.
What if we have mutiple HeadContent?
Code Sample - Multiple HeadContent
Blazor will not merge instead it will replace the contents of last HeadContent and remaining will be lost.
Alternatives
We can overcome the above drawbacks with Toolbelt.Blazor.HeadElement.
This is an awesome Nuget Package which covers some edge cases that are not covered by PageTitle and
HeadContent components.
Realworld example
Here is I ❤️ DotNet's HeadContent Configuration - A good Real world example.
Code Sample - Multiple HeadContent
Summary
In this article, we learn't about what is HeadOutlet, HeadContent and
PageTitle and how to control <head> content in HTML in blazor WASM
application. Make sure to use this for dynamic head contents. For static head contents it is better to add them directly in index.html.