> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nuxt/nuxt/llms.txt
> Use this file to discover all available pages before exploring further.
# SEO and Meta Tags
> Manage your Nuxt app's SEO with powerful head configuration, composables, and components powered by Unhead.
Nuxt provides comprehensive SEO and meta tag management powered by [Unhead](https://unhead.unjs.io). You can configure sensible defaults and use powerful composables to manage your app's head tags dynamically.
## Nuxt Config
Set static head tags for your entire app using the `app.head` property in your `nuxt.config.ts`:
```ts nuxt.config.ts theme={null}
export default defineNuxtConfig({
app: {
head: {
title: 'Nuxt', // default fallback title
htmlAttrs: {
lang: 'en',
},
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
],
},
},
})
```
This method does not support reactive data. Use `useHead()` in `app.vue` for reactive meta tags.
Set tags here that won't change, such as your site title default, language, and favicon.
### Default Tags
Nuxt provides these default tags to ensure your website works well out of the box:
* **viewport**: `width=device-width, initial-scale=1`
* **charset**: `utf-8`
You can override these defaults using keyed shortcuts:
```ts nuxt.config.ts theme={null}
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-16',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
},
},
})
```
## useHead Composable
Use the `useHead` composable to manage head tags programmatically with full reactive support:
```vue app/app.vue theme={null}
```
For more control, explore `useHead` and `useHeadSafe` composables in the API documentation.
## useSeoMeta Composable
Use `useSeoMeta` to define SEO meta tags as a type-safe object, helping you avoid typos and common mistakes:
```vue app/app.vue theme={null}
```
This composable prevents common errors like using `name` instead of `property` for Open Graph tags.
## Meta Components
If you prefer defining head tags in your template, Nuxt provides these components: ``, `<Base>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>`, and `<Head>`.
<CodeGroup>
```vue app/app.vue theme={null}
<script setup lang="ts">
const title = ref('Hello World')
</script>
<template>
<div>
<Head>
<Title>{{ title }}
{{ title }}
```
Note the capitalization of these components to avoid conflicts with native HTML tags.
Wrap your components in `` or `` for more intuitive tag deduplication.
## Reactivity
All head properties support reactivity through computed values, getters, or reactive objects:
```vue useHead theme={null}
```
```vue useSeoMeta theme={null}
```
```vue Components theme={null}
```
## Title Templates
Use `titleTemplate` to provide a dynamic template for customizing page titles. The template can be a string (where `%s` is replaced with the title) or a function:
```vue useHead theme={null}
```
Set `titleTemplate` in your `app.vue` file to apply it across all pages. You cannot use function-based templates in `nuxt.config`.
When you set the title to `My Page` on another page, it appears as "My Page - Site Title" in the browser tab.
## Template Parameters
Use `templateParams` for additional placeholders beyond the default `%s`:
```vue theme={null}
```
## Body Tags
Use `tagPosition: 'bodyClose'` to append tags to the end of the `` tag:
```vue theme={null}
```
Valid options are: `'head'`, `'bodyClose'`, or `'bodyOpen'`.
## Practical Examples
### Page-Specific Meta with definePageMeta
Set metadata based on the current route using `definePageMeta` with `useHead`:
```vue pages/some-page.vue theme={null}
```
```vue layouts/default.vue theme={null}
```
### Dynamic Titles
Set dynamic page titles using `titleTemplate`:
```vue app/app.vue (String) theme={null}
```
```vue app/app.vue (Function) theme={null}
```
### External CSS and Fonts
Enable Google Fonts using the `link` property:
```vue useHead theme={null}
```
```vue Components theme={null}
```
## Best Practices
1. **Use useSeoMeta for SEO**: Leverage type safety to avoid common meta tag mistakes
2. **Set defaults in app.vue**: Apply site-wide settings using `useHead` in `app.vue`
3. **Override per page**: Use `definePageMeta` and `useHead` in pages for page-specific meta
4. **Keep it reactive**: Use refs and computed values to update meta tags dynamically
5. **Follow Open Graph standards**: Ensure proper `og:` and `twitter:` tags for social sharing