Influencing HTML Head from a Blazor component #10450

danroth27 · 2019-05-22T15:44:40Z

In Blazor apps the root of the HTML document is typically controlled by the layout component. If other components need to influence the contents of the HTML Head tag (e.g. to add or change Meta or Title tags) there isn't really an established patterns to do that today.

Andrzej-W · 2019-05-24T01:45:28Z

Hopefully it will work during prerendering in Blazor client side app. It is needed for SEO and social sites integration.

roduman · 2019-08-09T08:29:27Z

Very lacking this functionality today

vertonghenb · 2019-08-19T17:17:49Z

Sometimes it's even needed to adjust the <body> tag (most of the time the css classes due to theme requirements. For example the case where you open/close sidebars and it's based on the css class of the body tag. Currently I use the following code snipped to do so via Interop:

window.application = {
    toggleAsideOnMobile() {
        const className = 'kt-aside--on';
        const body = document.getElementsByTagName('body')[0];
        const aside = document.getElementById('kt_aside');
        body.classList.toggle(className);
        aside.classList.toggle(className);
        return true;
    },
    toggleTopbarOnMobile() {
        const className = 'kt-header__topbar--mobile-on';
        const body = document.getElementsByTagName('body')[0];
        body.classList.toggle(className);
        return true;
    }
};

chucker · 2019-08-19T17:28:06Z

@vertonghenb unless it has to be the <body> tag, you don't need JS for that. Inside the components, you can simply emit different CSS classes.

Blazor doesn't have built-in tooling for that, but you can use something like CssBuilder.

vertonghenb · 2019-08-19T17:42:18Z

@chucker Yes, I know but it has to be the body tag.

TrabacchinLuigi · 2019-09-12T20:18:03Z

I stumbled upon this today, what I really need is the ability to write in the browser history, and I guess it simply takes to add some parameters to what already exist, the layout of the page can inspect the route and generate SEO metadata during load... It still is in a MVC controller after all...

I suspect SEO engines just do a lot of requests without using JavaScript so... I don't see how that is useful, here a workaround for those who want per request page title or meta

File: _Host.cshtml

@page "/"
@namespace MyWebApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@inject Data.ApplicationDbContext  ApplicationDbContext

@{
    var seoEntity = ApplicationDbContext.ExampleSeoTable
        .SingleOrDefault(x => x.path == this.HttpContext.Request.Path);
    var title = seoEntity?.Title ?? "This page have no title in the db";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@title</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
...
</html>

TrabacchinLuigi · 2019-09-12T21:07:11Z

@vertonghenb I don't see why anything need to be modified to achieve what you ask :

File _Host.cshtml

<!DOCTYPE html>
<html lang="en">
...
</head>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</html>

Then

File App.razor

@code { ... }
<body class="@someClasses">
<Router AppAssembly="@typeof(Program).Assembly">
...
</Router>
</body>

vertonghenb · 2019-09-13T14:26:50Z

@TrabacchinLuigi I don’t know that was possible, awesome! Thanks for sharing!

dotkiwi · 2019-09-13T23:23:18Z

@TrabacchinLuigi Hmm, I'm not sure if this would work, please correct me if I'm wrong. Since components can't contain <script> tags, if you place the <body> tag inside a component then you have nowhere to place <script> tags. <script> tags are meant to be in the <body> are they not?

vertonghenb · 2019-09-14T01:46:27Z

@TrabacchinLuigi Hmm, I'm not sure if this would work, please correct me if I'm wrong. Since components can't contain <script> tags, if you place the <body> tag inside a component then you have nowhere to place <script> tags. <script> tags are meant to be in the <body> are they not?

That's a good argument!

TrabacchinLuigi · 2019-09-14T07:18:13Z

@dotkiwi @vertonghenb as far as i know script tags can be placed in head tag, inside body tag or after it, it just depends on when you want that script to be available and start executing (also how bad is that script, the trend of putting scripts at the end of the page started because of people writing bad libs not tied to events, and by doing so the scripts worked only if they where "rendered by the browser" after the rest of the dom), in this case it should not matter, the page is very lightweight and the majority of the content is downloaded later by Blazor ...

zachneu · 2020-03-01T21:55:41Z

Is there anyway now to add script and css references from a Razor component now? I have several Razor components with their own JavaScript files and css files. If i use these components i'll have to link to their JavaScript and css files in "index.html" manually. Is there some way this can be done from the Razor component?

DamianEdwards · 2020-04-10T23:29:38Z

Another use case to document that the lack of this feature is impacting right now is web analytics solutions. Today, in systems like Application Insights, page views are tracked via the JavaScript SDK which can be configured to auto-track route changes and report those as page views (no problem there). The issue is the document title is used as the page view name, so looking at page views in your analytics dashboard just shows all views being for the application home page (as the title never changes).

muratgur · 2020-05-03T20:13:59Z

Is there anyway now to add script and CSS references from a Razor component now? I have several Razor components with their own JavaScript files and css files. If i use these components i'll have to link to their JavaScript and css files in "index.html" manually. Is there some way this can be done from the Razor component?

This is a very reasonable request. How can I add style links inside a component? FAQ page needs custom style for example. The Head tag is in _Host.cshtml and as far as I understand there is no way right now?

GioviQ · 2020-05-03T20:47:49Z

@muratgur you can see how I can achieve this here https://github.com/enkodellc/blazorboilerplate/blob/development/src/Shared/Modules/BlazorBoilerplate.Theme.Material.Demo/ThemeTagHelperComponent.cs

dodyg · 2020-05-26T13:59:05Z

This feature will be very useful in supporting RTL and LTR layout switching.

walterlv · 2020-05-27T00:46:35Z

@GioviQ I've tried this component.

But this only works in the Browser and we can find that the title changes in the browser's tab. But the title WILL NOT UPDATE if someone tries to share a link through some social apps, because the title is updated using the Web Socket but the social apps only fetch the title once and will not update further.

GioviQ · 2020-05-27T15:41:26Z

@walterlv I think you're right, so what is the solution?

SPWwj · 2020-06-02T07:38:11Z

need a way for server to render prerender component base on first time request url. this will help seo to fetch necessary info, meanwhile allow user to serve the seamlessly

EffectivelyEfficient · 2020-06-23T11:13:22Z

To add to the example by @vertonghenb and when using MapFallbackToPage, the _Host.cshtml file is evaluated, then if present, the cshtml layout file is evaluated. In addition, a dependency injected service can be accessed by the blazor ServerPrerendered, and the layout page.

So to influence the HTML Head when using ServerPrerendered, you make sure you are constructing the HTML Head in a cshtml layout file. You then use a transient dependency injected service to carry the value from Blazor to the layout.

@vertonghenb I don't see why anything need to be modified to achieve what you ask :

File _Host.cshtml

<!DOCTYPE html>
<html lang="en">
...
</head>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</html>

Then

File App.razor

@code { ... }
<body class="@someClasses">
<Router AppAssembly="@typeof(Program).Assembly">
...
</Router>
</body>

danroth27 added area-blazor Includes: Blazor, Razor Components Needs: Design This issue requires design work before implementating. labels May 22, 2019

mkArtakMSFT added this to the 3.0.0-preview8 milestone May 22, 2019

mkArtakMSFT assigned javiercn May 22, 2019

mkArtakMSFT added the PRI: 2 - Preferred label May 23, 2019

mkArtakMSFT modified the milestones: 3.0.0-preview8, 3.1.0 May 23, 2019

mkArtakMSFT modified the milestones: 3.1.0, 5.0.0, 5.0.0-preview1 Aug 12, 2019

mkArtakMSFT mentioned this issue Aug 19, 2019

Sections #10452

Closed

mkArtakMSFT added PRI: 1 - Required and removed PRI: 2 - Preferred labels Aug 19, 2019

mkArtakMSFT mentioned this issue Aug 19, 2019

[Blazor] Allow ability to change page title dynamically. #9897

Closed

guardrex mentioned this issue Sep 5, 2019

[3.1] Supply content to a Blazor layout from a component dotnet/AspNetCore.Docs#12889

Closed

mkArtakMSFT mentioned this issue Sep 10, 2019

Question: Dynamic title tag for Blazor app #13857

Closed

javiercn mentioned this issue Nov 4, 2019

Blazor WebAssembly Layout file import CSS files #16779

Closed

ADefWebserver mentioned this issue Dec 24, 2019

Dynamically set SEO properties ADefWebserver/Blazor-Blogs#18

Closed

mkArtakMSFT added this to the 5.0.0-preview2 milestone Jan 23, 2020

mkArtakMSFT mentioned this issue Feb 19, 2020

'Found malformed component comment' exception when using custom render tree logic #19128

Closed

mkArtakMSFT modified the milestones: 5.0.0-preview2, 5.0.0-preview4 Mar 11, 2020

mkArtakMSFT modified the milestones: 5.0.0-preview4, 5.0.0-preview5 Apr 27, 2020

mkArtakMSFT mentioned this issue May 5, 2020

Blazor Roadmap for .NET 5 #21514

Closed

11 tasks

mkArtakMSFT modified the milestones: 5.0.0-preview5, Next sprint planning May 5, 2020

pranavkm removed Needs: Design This issue requires design work before implementating. PRI: 1 - Required labels Jun 15, 2020

pranavkm assigned MackinnonBuck and unassigned javiercn Jun 24, 2020

mkArtakMSFT modified the milestones: Next sprint planning, 5.0.0-preview8 Jul 6, 2020

MackinnonBuck added the Working label Jul 7, 2020

MackinnonBuck mentioned this issue Jul 10, 2020

Influence HTML head from Blazor #23833

Merged

5 tasks

MackinnonBuck added Done This issue has been fixed and removed Working labels Jul 23, 2020

MackinnonBuck closed this as completed Jul 23, 2020

ghost locked as resolved and limited conversation to collaborators Aug 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Influencing HTML Head from a Blazor component #10450

Influencing HTML Head from a Blazor component #10450

danroth27 commented May 22, 2019

Andrzej-W commented May 24, 2019

roduman commented Aug 9, 2019

vertonghenb commented Aug 19, 2019 •

edited

Loading

chucker commented Aug 19, 2019

vertonghenb commented Aug 19, 2019

TrabacchinLuigi commented Sep 12, 2019 •

edited

Loading

TrabacchinLuigi commented Sep 12, 2019

vertonghenb commented Sep 13, 2019

dotkiwi commented Sep 13, 2019 •

edited

Loading

vertonghenb commented Sep 14, 2019

TrabacchinLuigi commented Sep 14, 2019 •

edited

Loading

zachneu commented Mar 1, 2020

DamianEdwards commented Apr 10, 2020

muratgur commented May 3, 2020

GioviQ commented May 3, 2020

dodyg commented May 26, 2020

walterlv commented May 27, 2020

GioviQ commented May 27, 2020

SPWwj commented Jun 2, 2020

EffectivelyEfficient commented Jun 23, 2020

Influencing HTML Head from a Blazor component #10450

Influencing HTML Head from a Blazor component #10450

Comments

danroth27 commented May 22, 2019

Andrzej-W commented May 24, 2019

roduman commented Aug 9, 2019

vertonghenb commented Aug 19, 2019 • edited Loading

chucker commented Aug 19, 2019

vertonghenb commented Aug 19, 2019

TrabacchinLuigi commented Sep 12, 2019 • edited Loading

TrabacchinLuigi commented Sep 12, 2019

vertonghenb commented Sep 13, 2019

dotkiwi commented Sep 13, 2019 • edited Loading

vertonghenb commented Sep 14, 2019

TrabacchinLuigi commented Sep 14, 2019 • edited Loading

zachneu commented Mar 1, 2020

DamianEdwards commented Apr 10, 2020

muratgur commented May 3, 2020

GioviQ commented May 3, 2020

dodyg commented May 26, 2020

walterlv commented May 27, 2020

GioviQ commented May 27, 2020

SPWwj commented Jun 2, 2020

EffectivelyEfficient commented Jun 23, 2020

vertonghenb commented Aug 19, 2019 •

edited

Loading

TrabacchinLuigi commented Sep 12, 2019 •

edited

Loading

dotkiwi commented Sep 13, 2019 •

edited

Loading

TrabacchinLuigi commented Sep 14, 2019 •

edited

Loading