Blazor WASM Controlling Head Content
Blazor
31 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
- HeadOutlet Component
- PageTitle Component
- HeadContent Component
- 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 HeadOutlet Component - builder.RootComponents.Add<HeadOutlet>("head::after"); in Program.cs.
- Add PageTitle Component - <PageTitle>Your Page Title</PageTitle> inside your component or page.
- Add HeadContent Component - <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
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
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.