Blazor WASM Controlling Head Content

Blazor WASM Controlling Head Content

blazor

20 Articles

Improve

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.

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

  1. Why we need to control Head Content?
  2. Steps
  3. HeadOutlet Component
  4. PageTitle Component
  5. HeadContent Component
  6. Drawbacks
  7. Alternatives
  8. Realworld Example
  9. 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

  1. Add HeadOutlet Component - builder.RootComponents.Add<HeadOutlet>("head::after"); in Program.cs.
  2. Add PageTitle Component - <PageTitle>Your Page Title</PageTitle> inside your component or page.
  3. 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

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.


Blazor WASM HeadContent Demo Screenshot

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.

  • Blazor
  • Head Outlet
  • Page Title
  • Head Content