meta tags in Blazor

Today I wanted to added the missing meta tags on both my posts and pages, this turned out to be quite simple with the latest feature updates to Blazor in .NET 6.0 that came out recently. I thought this would make for a good topic to talk about and why you should add these meta tags to your website.

meta tags

meta tags are used to hold metadata about a page on your site and come in the form of the <meta /> html tag. These tags can be used to hold any piece of information you don’t have with your site that isn’t directly rendered to the page. These however are typically used to by search engines to generate results and are one of the main pieces of information to get right for good SEO or social media sites to format links.

Some of the typical tags you might see used are:

description meta tag

<meta name="description" content="the description of your site goes here." >

The description meta tag is used to describe the pages content.

Twitter specific meta tags

<meta property="twitter:card" content="summary" >

<meta property="twitter:creator" content="@ghevey" >

Twitter has specific meta tags it uses to categorise and display page links on its site. the two above are examples of tags that they use. You can get a full list from Twitter’s documentation

Open Graph meta tags

<meta property="og:title" content="Site Title" >

<meta property="og:description" content="the description of your site goes here." >

The Open Graph protocol is used by Facebook and other social media sites to understand the pages content better. Above is the title and description tags from the protocol. You can find out more over on the Open Graph website

adding tags to the head in Blazor

As of .NET 6.0 Blazor has a new way to handle producing head content for your website. This is the HeadOutlet component

The HeadOutlet component is Microsoft’s new way to make changes to a pages head elements. I won’t be going through how to setup your project to use this as it is different depending on your project structure. However Microsoft docs website has a great guide on setting up your project to use the HeadOutletcomponent.

Once you have your project setup you can then make changes to your pages

Affecting the Page Title

In your Blazor page component you are able to use the <PageTitle></PageTitle> tag.

This can be either set directly with a string

@page "/"

<PageTitle>"Index Page"</PageTitle>

....

or it can be set with a variable.

@page "/"

<PageTitle>@_title</PageTitle>

....

@code {
    private string _title = "Index Page set by a variable";

    ....
}

you can also use string interpolation to mix static and dynamic content

@page "/blog/{slug}"

<PageTitle>@($"{Slug} blog post")</PageTitle>

....

@code {
    [Parameter]
    public string? Slug { get; set; }

    ....
}

Adding meta tags

To add meta tags to your pages you can add the <HeadContent></HeadContent> tag to your page.

Inside this tag you can add any of the meta tags needed and they will be added.

@page "/"
@inject NavigationManager _navigationManager

<PageTitle>@_title</PageTitle>
<HeadContent>
    <meta name="description" content="@_description" />
    @*Twitter specific meta tags *@
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:creator" content="@@ghevey" />
    @* OpenGraph meta tags *@
    <meta name="og:url" content="@_navigationManager.Uri" />
    <meta name="og:title" content="@_title" />
    <meta name="og:description" content="@_description" />
</HeadContent>

....

@code {
    private string _title = "Index Page set by a variable";
    private string _description = "Page Description";
    ....
}

Above sets both your page title and different meta tags. The above utilises the basic SEO and social media meta tags needed.

one interesting to call out above is the og:url meta tag. This is getting the url from the NavigationManager which you can inject into your component seen at the top of the example.

As you can see with .NET 6.0 it is quite easy to change the head tags from your Blazor page components.