Next.js > Adding SEO to pages

Adding SEO to pages

Similarly to what we offer with responsive images, our GraphQL API also offers a way to fetch pre-computed SEO meta tags 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 package.

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

<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="" />
<meta property="og:image:width" content="2482" />
<meta property="og:image:height" content="1572" />
<meta name="twitter:image" content="" />
<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="" />
<link sizes="32x32" type="image/png" rel="icon" href="" />
<link sizes="96x96" type="image/png" rel="icon" href="" />
<link sizes="192x192" type="image/png" rel="icon" href="" />

To use this feature, install the react-datocms package:

npm install react-datocms

Then, inside your page, feed content coming from a faviconMetaTags or _seoMetaTags query directly into the toNextMetadata function:

import { toNextMetadata } from "react-datocms";
import { performRequest } from 'lib/datocms';
import Head from "next/head";
site: _site {
favicon: faviconMetaTags {
blog {
seo: _seoMetaTags {
function getPageRequest() {
return {
variables: { limit: 10 }
export async function generateMetadata() {
const response = await performRequest(getPageRequest());
return toNextMetadata([, ])
export default function Home({ data }) {
const response = await performRequest(getPageRequest());
// [...]

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