Blazor 中 HeadOutlet 是必需的占位符组件,必须置于 _Host.cshtml 或主布局的 内,用于渲染 PageTitle 和 HeadContent;PageTitle 用于动态设置页面标题,就近路由组件生效;HeadContent 支持添加 meta、link 等 SEO 标签。
Blazor 中的 HeadOutlet 和 PageTitle 是用于管理 HTML `
HeadOutlet:必须放在 _Host.cshtml 或主布局中
HeadOutlet 是一个“占位符”组件,负责将子组件中定义的 head 内容(比如 PageTitle、HeadContent)实际渲染到 HTML 文档的 `
- S
erver 渲染(Blazor Server)或 WebAssembly(Blazor WASM)项目中,都需确保 HeadOutlet出现在根布局(如MainLayout.razor)或_Host.cshtml的 `` 内部 - 典型写法(在
MainLayout.razor的 `` 中): - 如果漏掉它,所有
PageTitle和HeadContent都不会生效,页面标题仍为默认值
PageTitle:简洁设置当前页面标题
PageTitle 是最常用的 head 管理组件,专用于动态更新 `
HeadOutlet,无需额外配置。
- 用法简单:
用户管理 - 推荐放在页面组件(
.razor)顶部,靠近@page指令,便于维护和语义清晰 - 支持表达式和参数绑定,例如:
编辑 @user.Name - 多个
PageTitle同时存在时,以**最靠近当前路由组件的那个为准**;嵌套路由中,子组件的PageTitle会覆盖父布局的
配合 HeadContent 实现更复杂的 head 控制
当需要添加 meta、link、script(仅限静态 head 脚本)等标签时,要用 HeadContent 组件,它也依赖 HeadOutlet 才能生效。
- 示例:添加 SEO 描述和 Open Graph 标签
-
HeadContent可在任意组件中使用,但同样要确保有HeadOutlet接收 - 注意:动态 script 标签(含 src 或内联 JS)在 Blazor 中不推荐放这里,可能执行时机不可控;应改用
IJSRuntime延迟注入
基本上就这些。用好 HeadOutlet + PageTitle 就能解决大部分页面标题管理需求,加上 HeadContent 就可覆盖基础 SEO 场景。不复杂但容易忽略 —— 记得检查 HeadOutlet 是否已就位。

erver 渲染(Blazor Server)或 WebAssembly(Blazor WASM)项目中,都需确保 






