# Adding SEO to Nuxt pages

Similarly to what we offer with [responsive images](https://www.datocms.com/docs/nuxt/managing-images.md), our GraphQL API also offers a way to fetch [**pre-computed SEO meta tags**](https://www.datocms.com/docs/content-delivery-api/seo-and-favicon.md) **based on the content you insert inside DatoCMS**.

You can easily use this information inside your Nuxt app with the help of our [`vue-datocms`](https://github.com/datocms/vue-datocms) package.

Here's a sample of the meta tags you can automatically generate:

```html
<title>DatoCMS Blog - DatoCMS</title>
<meta property="og:title" content="DatoCMS Blog" />
<meta name="twitter:title" content="DatoCMS Blog" />
<meta name="description" content="Lorem ipsum..." />
<meta property="og:description" content="Lorem ipsum..." />
<meta name="twitter:description" content="Lorem ipsum..." />
<meta property="og:image" content="https://www.datocms-assets.com/..." />
<meta property="og:image:width" content="2482" />
<meta property="og:image:height" content="1572" />
<meta name="twitter:image" content="https://www.datocms-assets.com/..." />
<meta property="og:locale" content="en" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="DatoCMS" />
<meta property="article:modified_time" content="2020-03-06T15:07:14Z" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@datocms" />
<link sizes="16x16" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
<link sizes="32x32" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
<link sizes="96x96" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
<link sizes="192x192" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
```

To do that, install the [`vue-datocms`](https://github.com/datocms/vue-datocms) package:

Terminal window

```bash
yarn add vue-datocms
```

Then, inside your page, feed content coming from a `faviconMetaTags` or `_seoMetaTags` query into the `toHead` function and combine that with the [`useHead`](https://v3.nuxtjs.org/api/composables/use-head) composable:

```html
<script setup>
import { toHead } from "vue-datocms";

const QUERY = `query {
  site: _site {
    favicon: faviconMetaTags {
      attributes
      content
      tag
    }
  }
  blog {
    seo: _seoMetaTags {
      attributes
      content
      tag
    }
  }
}`;

const { data } = await useQuery(QUERY);

useHead(() => {
  if (!data.value) return {}

  return toHead(data.value.blog.seo, data.value.site.favicon)
})
</script>
```

Want to know more about SEO customization in DatoCMS? Check out this video tutorial:

[

(Image content)

Working with and customizing SEO Fields

Play video »

](https://youtu.be/WjF10isSjS0)

## Related content in "Nuxt"

- [Nuxt + DatoCMS Overview](https://www.datocms.com/docs/nuxt.md)

- [Include draft contents](https://www.datocms.com/docs/nuxt/include-draft-contents-during-development.md)
- [Responsive images](https://www.datocms.com/docs/nuxt/managing-images.md)

- [Displaying videos](https://www.datocms.com/docs/nuxt/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/nuxt/rendering-structured-text-fields.md)

- [Adding SEO to Nuxt pages](https://www.datocms.com/docs/nuxt/seo-management.md)
- [Real-time updates](https://www.datocms.com/docs/nuxt/real-time-updates.md)

- [Visual Editing](https://www.datocms.com/docs/nuxt/visual-editing.md)
- [Nuxt Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official   Nuxt 4](https://www.datocms.com/marketplace/starters/nuxt-starter-kit.md)