4

Setting dynamic Metadata for Blazor Web assembly | Software Engineering

 3 years ago
source link: https://damienbod.com/2021/03/23/setting-dynamic-metadata-for-blazor-web-assembly/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Setting dynamic Metadata for Blazor Web assembly

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: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

blazor_metadara_linkedin.png?w=640&h=366

Slack URL preview

blazor_metadara_slack.png?w=640&h=158

Twitter URL preview

blazor_metadara_twitter.png?w=640&h=331

Microsoft teams URL preview

blazor_metadara_msteams.png?w=640&h=211

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

https://swimburger.net/blog/dotnet/pre-render-blazor-webassembly-at-build-time-to-optimize-for-search-engines

3 comments

  1. 878649c89fef9df00fa590cbb1920036?s=50&d=identicon&r=G

    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!

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK