# Meta Tags

You can customize the meta tags for your site through several different ways:

## `useMeta` Composable

Within your `setup()` function you can call `useMeta` with an object of meta properties with keys corresponding to meta tags: `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.

For example:

```js
export default {
  setup () {
    useMeta({
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
      ],
      bodyAttrs: {
        class: 'test'
      }
    })
  }
}
```

## `head` Component Property

If you would prefer to use the options syntax, you can do exactly the same thing within your component options with an object or function called `head`. For example:

```js
export default {
  head: {
    script: [
      {
        async: true,
        src: 'https://myscript.com/script.js'
      }
    ]
  }
}
```

**Note that `head()` does not have access to the component instance.**

## Meta Components

Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>` and `<Head>` components so that you can interact directly with your metadata within your component template.

Because these component names match native HTML elements, it is very important that they are capitalized in the template.

`<Head>` and `<Body>` can accept nested meta tags (for aesthetic reasons) but this has no effect on _where_ the nested meta tags are rendered in the final HTML.

For example:

```html{}[app.vue]
<template>
  <div>
    Hello World
    <Head :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
      <Title>{{ dynamic }} title</Title>
      <Meta name="description" :content="`My page's ${dynamic} description`" />
      <Link rel="preload" href="/test.txt" as="script" />
    </Head>

    <button class="blue" @click="dynamic = Math.random() * 100">
      Click me
    </button>
  </div>
</template>

<script>
export default {
  data: () => ({ dynamic: 49 })
}
</script>
```
