> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/sveltejs/svelte/llms.txt
> Use this file to discover all available pages before exploring further.
#
> Insert elements into the document head
```svelte theme={null}
...
```
This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `body` content.
As with ``, `` and ``, this element may only appear at the top level of your component and must never be inside a block or element.
## Usage
### Basic meta tags
```svelte theme={null}
Hello world!
```
### Dynamic page title
```svelte theme={null}
{title}
```
### OpenGraph meta tags
```svelte theme={null}
{pageTitle}
```
### Stylesheets and fonts
```svelte theme={null}
```
### Favicon
```svelte theme={null}
```
### Canonical URL
```svelte theme={null}
```
### Inline styles
```svelte theme={null}
```
### Script tags
```svelte theme={null}
```
### Viewport and mobile optimization
```svelte theme={null}
```
### Language and character encoding
```svelte theme={null}
```
## Server-Side Rendering
During server-side rendering, the content of `` is extracted separately from the body content. This allows you to insert the head content into the HTML document's `` section:
```js theme={null}
import { render } from 'svelte/server';
import App from './App.svelte';
const { head, body } = await render(App);
const html = `
${head}
${body}
`;
```
## Multiple svelte:head Elements
If multiple components define `` elements, their contents will be combined. Later elements will appear after earlier ones in the document head.