[](https://github.com/mrpmorris/blazor-university/tree/master/src/Outlets/HeadOutletsAndContent)
Before .NET 8, setting the page title from a Blazor component required a JavaScript interop call: inject `IJSRuntime`, invoke `document.title = ...`, and remember to restore the title on disposal. Injecting `` tags or other `` elements was even more cumbersome, often requiring manual DOM manipulation through JS interop. Blazor now provides first-class support for controlling the document head through a dedicated outlet system.
## HeadOutlet
The entry point is the `` component. This component must be placed inside the `` element of the host page. In a default Blazor project, this is done in `Components/App.razor` (or the equivalent top-level entry point).
```razor
@* Components/App.razor *@
```
`HeadOutlet` acts as a render target. Any `` or `` component rendered elsewhere in the component tree will project its content into this outlet.
## PageTitle
The `` component sets the document's title. Place it anywhere inside a page, layout, or component. When the component renders, the browser's title bar updates to reflect the supplied content.
```razor
@* A page that wants to set its own title *@
@page "/products"
Products - My Store
Products
@* ...rest of the page... *@
```
When this page is navigated to, the browser title becomes "Products - My Store". When the user navigates away, the title is updated to whatever `PageTitle` the next page renders.
### Last-rendered-wins
If multiple `PageTitle` components are rendered at the same time, the one rendered last wins. This is important when a layout and a page both set a title. The layout might render:
```razor
@* MainLayout.razor *@
@inherits LayoutComponentBase
My Store
@Body
```
And the page might render its own `` as in the example above. During rendering, the layout's `PageTitle` renders first, then the page's `PageTitle` renders second. The page's title wins, giving each page control over its own title while allowing the layout to provide a sensible default.
## HeadContent
For anything other than the `` tag, use `<HeadContent>`. This component projects arbitrary markup into the document `<head>`. You can inject `<meta>` descriptions, Open Graph tags, `<link>` elements, `<style>` blocks, etc.
```razor
@page "/products"
<PageTitle>Products - My Store</PageTitle>
<HeadContent>
<meta name="description" content="View products in My Store" />
<meta property="og:title" content="Products - My Store" />
<link rel="preload" href="/images/products.jpg" as="image" />
</HeadContent>
```
The last-rendered-wins rule applies to `HeadContent` as well. If two components output a `<meta name="description">`, the one rendered last will be the one that appears in the DOM. This means a layout can provide default `<head>` content and individual pages can override it without conflict.
## Static SSR and prerendering
Because `HeadOutlet`, `PageTitle`, and `HeadContent` are part of the component render tree, they work during static server-side rendering and during the prerendering phase of interactive modes. The rendered `<title>` and `<head>` elements are written directly into the static HTML response. This makes Blazor applications fully crawler-friendly: search engines and social-media preview scrapers see the correct title and meta tags without needing any client-side JavaScript execution.
## A note on the old approach
If you have existing Blazor code that sets `document.title` via JavaScript interop, you can safely replace it with `<PageTitle>`. The new approach is declarative, works during SSR, and integrates with Blazor's lifecycle automatically. The JS-interop approach should be considered a legacy pattern.
Hire [Peter Morris](mailto:mrpmorris@gmail.com) for Blazor and C# work - author of Blazor-University.com, the definitive source for Blazor.