Title

Title is a component that renders the title element on the server, and hydrates it on the client.
tsx
<Title>My Site</Title>
tsx
<Title>My Site</Title>


Usage

Setting the title for your site

root.tsx
tsx
export default function Root() {
return (
<Html lang="en">
<Head>
<Title>Default Application Title</Title>
</Head>
</Html>
);
}
root.tsx
tsx
export default function Root() {
return (
<Html lang="en">
<Head>
<Title>Default Application Title</Title>
</Head>
</Html>
);
}

The Title tag contains the title for the page that is rendered in the browsers top tab bar. It is a wrapper of the title element and is a re-export from @solidjs/meta.

Setting the title for a specific page

These are typically placed in the Head element but can also be placed throughout your application code to overwrite the current title. A Title lower in the tree will override a parent's title.

Using a Title in a route component will only display that title when the user visits this page.

src/routes/profile.tsx
tsx
export default function MyPage() {
return (
<>
<Title>My Page Title</Title>
<h1>My Super Cool Page</h1>
</>
);
}
src/routes/profile.tsx
tsx
export default function MyPage() {
return (
<>
<Title>My Page Title</Title>
<h1>My Super Cool Page</h1>
</>
);
}