dotnet/aspnetcore

Update Blazor <head> components

MackinnonBuck opened this issue · 8 comments

MackinnonBuck commented

Summary

Through some experimentation, it was discovered that there is opportunity for improvement with the Blazor Head components (Title, Link, and Meta). This issue is for tracking the items that need to be addressed regarding these components.

Details

Following are the items that need to be addressed:

  • Change <Title> to render the ChildContent as the document title and remove the Value parameter. This is more consistent with the HTML <title> element.
  • Make <head> changes apply before page navigation events so they can be picked up properly by web analytics, etc.
  • Update tooling not to warn about usage Blazor Head components. The completion of #22194 might be an acceptable solution, but we might want an additional fix that covers all use cases.
msftbot commented

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

msftbot commented

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

msftbot commented

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

araxemy commented

Any updates on this?!
These are obviously crucial features for any serious Blazor project, yet we still don't have them, we were shocked to know there is still no built-in way to change a document's title in Blazor.
This doesn't seem so time-consuming to implement. So, any news?

  • 👍4
  • 😕1
smartprogrammer93 commented

@araxemy I agree that this is very crucial. Implementation is not time consuming but API design is what takes time. It is important to the Asp.net team when implementing a feature to make sure that the design of the code is as close as it could be to the standards carried out through out the project making sure it is easily maintainable and scalable.
I am actually in desperate need for this feature since I am developing an E-commerce Front-end and cant find a suitable work around (works well with SEO) to solve this issue.

DamianEdwards commented

I've published an example of how this might be done. I've used an approach similar to this in other apps and can confirm it updated the page title in a way that ensured it was picked up correctly on client-side navigation events tracked by web analytics libraries (e.g. Application Insights) so that the correct page title is tracked when a page view is reported.

This approach uses a <PageHeadManager> component that wraps the router, and then on each page a <PageHead> component that you can just put whatever content in you like, e.g.:

<PageHead>
    <meta name="author" content="This guy right here" />
    <meta name="keywords" content="some keywords yo" />
    <meta name="abstract" content="what even is a page anyway?" />
    <title>Home</title>
    <link href="css/home.css" rel="stylesheet" />
</PageHead>

Any feedback welcome!

  • 👍12
jsakamoto commented

@smartprogrammer93

I am actually in desperate need for this feature since I am developing an E-commerce Front-end and cant find a suitable work around (works well with SEO) to solve this issue.

Sorry to late (I could not notice this thread for over a half year), and sorry to bother you, but please let me introduce the workaround for managing page head content that we can use today.

The workaround is the "Toolbelt Blazor Head Element" NuGet packages that I built.

I released the first version of those packages two years ago when the Blazor was the preview version.

Those packages allow us to add or change a document title, link, meta elements in a page head with Blazor component syntax.

...
<!-- This is "Pages/Counter.razor" -->
<Title>Counter (@currentCount) - My App</Title>
...

Those packages can work fine both Blazor WebAssembly and Blazor Server.
And also support server-side prerendering on a Blazor WebAssembly app ASP.NET Core hosted.
Furthermore, those packages also can work with a build-time statically prerendering on Blazor WebAssembly app scenario.

How to prerender Blazor wasm at publish time - cover slide (2)

Those packages are used in the "Powered 4 TV" site, the "MudBlazor" document site, etc.

Of course, ASP.NET Core built-in support and a standardizing way to managing page head content should be welcome, and I think so too.

I just wanted to notify somebody that there is a "workaround".
Thanks for reading this post!

MackinnonBuck commented

Completed in #34218.

  • 🎉1
  • 🚀1