# Adding SEO to pages
Similarly to what we offer with [responsive images](https://www.datocms.com/docs/next-js/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 Next app with the help of our [`react-datocms`](https://github.com/datocms/react-datocms) package.
Here's a sample of the meta tags you can automatically generate:
```html
DatoCMS Blog - DatoCMS
```
To use this feature, install the [`react-datocms`](https://github.com/datocms/react-datocms) package:
Terminal window
```bash
npm install react-datocms
```
Then, inside your page, feed content coming from a `faviconMetaTags` or `_seoMetaTags` query directly into the `toNextMetadata` function:
```jsx
import { toNextMetadata } from "react-datocms";
import { performRequest } from 'lib/datocms';
import Head from "next/head";
const PAGE_CONTENT_QUERY = `{
site: _site {
favicon: faviconMetaTags {
attributes
content
tag
}
}
blog {
seo: _seoMetaTags {
attributes
content
tag
}
title
}
}`;
function fetchContent() {
return performRequest(PAGE_CONTENT_QUERY, {
variables: { limit: 10 }
});
}
export async function generateMetadata() {
const { site, blog } = await fetchContent();
return toNextMetadata([ ...site.favicon, ..blog.seo ])
}
export default function Home() {
const { blog } = await fetchContent();
// [...]
}
```
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 "Next.js"
- [Next.js + DatoCMS Overview](https://www.datocms.com/docs/next-js.md)
- [Optimizing calls to DatoCMS](https://www.datocms.com/docs/next-js/optimizing-calls-with-react-cache-function.md)
- [Managing images](https://www.datocms.com/docs/next-js/managing-images.md)
- [Displaying videos](https://www.datocms.com/docs/next-js/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/next-js/rendering-structured-text-fields.md)
- [Adding SEO to pages](https://www.datocms.com/docs/next-js/seo-management.md)
- [Setting up Next.js Draft Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-draft-mode.md)
- [Real-time updates](https://www.datocms.com/docs/next-js/real-time-updates.md)
- [DatoCMS Cache Tags and Next.js](https://www.datocms.com/docs/next-js/using-cache-tags.md)
- [Visual Editing](https://www.datocms.com/docs/next-js/visual-editing.md)
- [Next.js Starter Kit
Words are nice... but code speaks louder. Dive into a fully commented project template,
showcasing these techniques (and more) in action.
✅ Official Next 16](https://www.datocms.com/marketplace/starters/next-js-starter-kit.md)