Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Blazor <head> components #25705

Closed
3 tasks
Tracked by #27883
MackinnonBuck opened this issue Sep 8, 2020 · 8 comments
Closed
3 tasks
Tracked by #27883

Update Blazor <head> components #25705

MackinnonBuck opened this issue Sep 8, 2020 · 8 comments
Assignees
@MackinnonBuck
Labels
affected-most This issue impacts most of the customers area-blazor Includes: Blazor, Razor Components Done This issue has been fixed enhancement This issue represents an ask for new feature or an enhancement to an existing one feature-blazor-builtin-components Features related to the built in components we ship or could ship in the future Priority:2 Work that is important, but not critical for the release severity-major This label is used by an internal tool User Story A single user-facing feature. Can be grouped under an epic.
Milestone
6.0-preview7

Comments

@MackinnonBuck
Copy link
Member

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 Adding partial namespaces in Blazor's razor markup #22194 might be an acceptable solution, but we might want an additional fix that covers all use cases.
@MackinnonBuck MackinnonBuck added enhancement This issue represents an ask for new feature or an enhancement to an existing one area-blazor Includes: Blazor, Razor Components labels Sep 8, 2020
@mkArtakMSFT mkArtakMSFT added this to the Next sprint planning milestone Sep 9, 2020
@ghost
Copy link

ghost commented Sep 9, 2020

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.

@SteveSandersonMS SteveSandersonMS added affected-most This issue impacts most of the customers severity-major This label is used by an internal tool labels Oct 7, 2020 — with ASP.NET Core Issue Ranking
@ghost
Copy link

ghost commented Oct 9, 2020

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.

@ghost
Copy link

ghost commented Nov 16, 2020

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.

@SteveSandersonMS SteveSandersonMS mentioned this issue Nov 17, 2020
Closed
27 tasks
@mkArtakMSFT mkArtakMSFT mentioned this issue Nov 18, 2020
Closed
@araxemy
Copy link

araxemy commented Nov 30, 2020 •
edited
Loading

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?

@smartprogrammer93
Copy link

@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.

@SteveSandersonMS SteveSandersonMS mentioned this issue Dec 17, 2020
Closed
@DamianEdwards
Copy link
Member

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!

@mkArtakMSFT mkArtakMSFT added the User Story A single user-facing feature. Can be grouped under an epic. label Jan 31, 2021
@mkArtakMSFT mkArtakMSFT added the Priority:2 Work that is important, but not critical for the release label Jan 31, 2021
@guardrex guardrex mentioned this issue Mar 4, 2021
Merged
@javiercn javiercn added the feature-blazor-builtin-components Features related to the built in components we ship or could ship in the future label Apr 20, 2021
@guardrex guardrex mentioned this issue Apr 24, 2021
Closed
@guardrex guardrex mentioned this issue May 2, 2021
Closed
41 tasks
@MackinnonBuck MackinnonBuck self-assigned this Jun 28, 2021
@jsakamoto
Copy link

@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 MackinnonBuck mentioned this issue Jul 8, 2021
Merged
@MackinnonBuck
Copy link
Member Author

Completed in #34218.

@ghost ghost added Done This issue has been fixed and removed Working labels Jul 19, 2021
@MackinnonBuck MackinnonBuck mentioned this issue Jul 20, 2021
Merged
10 tasks
mkArtakMSFT pushed a commit that referenced this issue Jul 20, 2021
@MackinnonBuck
Blazor <head> modification using a section-based approach (#34218) (#…
4e1b7bd 
…34518)

## Description

This PR introduces a way for developers to modify the HTML `<head>` contents from Blazor.

## Customer Impact

With this feature, customers will be able to easily
* Modify the document title (tab name).
* Add link previews for links to their web app.
* Optimize their website for SEO.
* Dynamically change style sheets (e.g. switch between light and dark modes).

Other SPA frameworks have third-party libraries enabling `<head>` modification, so this change makes Blazor an even more viable alternative.


Addresses #25705
@ghost ghost locked as resolved and limited conversation to collaborators Aug 18, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@MackinnonBuck MackinnonBuck

Labels
affected-most This issue impacts most of the customers area-blazor Includes: Blazor, Razor Components Done This issue has been fixed enhancement This issue represents an ask for new feature or an enhancement to an existing one feature-blazor-builtin-components Features related to the built in components we ship or could ship in the future Priority:2 Work that is important, but not critical for the release severity-major This label is used by an internal tool User Story A single user-facing feature. Can be grouped under an epic.
Projects
None yet
Milestone
6.0-preview7
Development

No branches or pull requests
8 participants
@jsakamoto @DamianEdwards @SteveSandersonMS @javiercn @MackinnonBuck @smartprogrammer93 @mkArtakMSFT @araxemy