Update the HTML head from a Blazor component

When building a Blazor component, you may need to modify the HTML head section of your application to add meta tags, links to external stylesheets, or other resources. The HTML head is where you can add this information and it can be updated dynamically as part of your Blazor component. In this blog post, we will explore how to update the HTML head from a Blazor component.

The HTML head section contains information about the document, such as the title, character set, and metadata. This section is typically located between the

and tags of an HTML document. In a Blazor application, the HTML head section can be modified using the HeadOutlet component.

The HeadOutlet component is a built-in component that allows you to add content to the head section of the HTML document. This component can be used in any Blazor component, including pages and layouts. To use the HeadOutlet component, you need to add it to your component and wrap any content you want to add to the head section inside it.

Here is an example of how to use the HeadOutlet component to add a title to the HTML head and the meta description:

@page "/my-page"
@using Microsoft.AspNetCore.Components.Web

<PageTitle>My Page</PageTitle>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

<h1>My Page</h1>

@code {
    private string description = "Description in a component";
}

You can also use the HeadOutlet component to add links to external stylesheets and scripts. Here is an example of how to add a link to an external stylesheet:

<HeadContent>
    <link rel="stylesheet" href="https://example.com/styles.css" />
</HeadContent>

In this example, we have added a link element to the HTML head with a rel attribute of "stylesheet" and an href attribute of "https://example.com/styles.css". This will tell the browser to load the external stylesheet and apply its styles to the page.

Conclusion

In summary, the HeadOutlet component allows you to update the HTML head from a Blazor component. This component can be used to add titles, meta tags, links to external resources, and other content to the HTML head. By using the HeadOutlet component, you can make your Blazor components more dynamic and responsive to user interactions.

---

Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: Learning GitHub.

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

Emanuele BartolesiFollow

🏆 Microsoft MVP & GitHub Star ⭐ | 🔓 Auth0 Ambassador & 📢 Codemotion Ambassador | 👨‍🎓 LinkedIn Technical Instructor

Comments

[Matias Masso]

Hi Emanuele, The metadata I need to place on head is not available until OnAfterRenderAsync event, but he headoutlet does not seem to be refreshed then even after using StateHasChanged(). Any option?
Also, I need to place json-ld structured data for SEO purposes on the HeadOutlet but I get an RZ9992 error saying scripts should not be placed inside components. Is there any alternative?