This post shows how HTML header meta data can be dynamically updated or changed for a Blazor Web assembly application routes hosted in ASP.NET Core. This can be usually for changing how URL link previews are displayed when sharing links.
Code: https://github.com/damienbod/BlazorMetaData
Updating the HTTP Header data to match the URL route used in the Blazor WASM can be supported using a Razor Page host file instead of using a static html file. The Razor Page _Host file can use code behind and a model from this class. The Model can the be used to display the different values as required. This is a Hosted WASM application using ASP.NET Core as the server.
@page "/"
@model BlazorMeta.Server.Pages._HostModel
@namespace BlazorMeta.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Blazor BFF AAD Cookie 2021 @Model.SiteName" />
<meta property="og:url" content="https://damienbod.com" />
<meta property="og:image" content="https://avatars.githubusercontent.com/u/3442158?s=400&v=4">
<meta property="og:image:height" content="384" />
<meta property="og:image:width" content="384" />
<meta property="og:site_name" content="@Model.SiteName" />
<meta property="og:description" content="@Model.PageDescription" />
<meta name="twitter:site" content="damien_bod" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="@Model.PageDescription" />
<meta name="twitter:title" content="Blazor BFF AAD Cookie 2021 @Model.SiteName" />
<title>Blazor AAD Cookie</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorMeta.Client.styles.css" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
<div id="app">
<!-- Spinner -->
<div class="spinner d-flex align-items-center justify-content-center" style="position:absolute; width: 100%; height: 100%; background: #d3d3d39c; left: 0; top: 0; border-radius: 10px;">
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
@*<component type="typeof(App)" render-mode="WebAssembly" />*@
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
The code behind _Host class adds the public properties of the model which are used in the template _cshtml file. The OnGet sets the values of the properties using the path property of the HTTP request.
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace BlazorMeta.Server.Pages
{
public class _HostModel : PageModel
{
public string SiteName { get; set; } = "damienbod";
public string PageDescription { get; set; } = "damienbod init description";
public void OnGet()
{
(SiteName, PageDescription) = GetMetaData();
}
private (string, string) GetMetaData()
{
var metadata = Request.Path.Value switch
{
"/counter" => ("damienbod/counter", "This is the meta data for the counter"),
"/fetchdata" => ("damienbod/fetchdata", "This is the meta data for the fetchdata"),
_ => ("damienbod", "general description")
};
return metadata;
}
}
}
The MapFallbackToPage must be set to use the _Host Razor Page layout or fallback file.
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
endpoints.MapFallbackToPage("/_Host");
});
When the application is deployed to a public server, an URL with the Blazor route can be copied and pasted into the software services or tools which then display the preview data.
Each service uses different meta data headers and you would need to add the headers with the dynamic content as required. Underneath are some examples of what can be displayed.
LinkedIn URL preview
Slack URL preview
Twitter URL preview
Microsoft teams URL preview
Links:
https://www.w3schools.com/tags/tag_meta.asp
https://cards-dev.twitter.com/validator
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
Software Engineering 
[…] Setting dynamic Metadata for Blazor Web assembly (Damien Bowden) […]
[…] Setting dynamic Metadata for Blazor Web assembly – Damien Bowden […]
Thank you for the useful article!
In my case, I made a NuGet package that allows us to set meta elements dynamically in general ASP.NET Core applications (including hosted Blazor Wasm, and Blazor Server).
– https://www.nuget.org/packages/Toolbelt.Blazor.HeadElement.ServerPrerendering/
This package can be used quickly to setting meta elements from Blazor components, but due to that library uses some hack, it is unstable in some cases.
So I think, this article is very useful to control perfectly the application by developers themselves, for not to be black box it.
Thanks again!