Adding SEO to pages

Legacy 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:

1
<title>DatoCMS Blog - DatoCMS</title>
2
<meta property="og:title" content="DatoCMS Blog" />
3
<meta name="twitter:title" content="DatoCMS Blog" />
4
<meta name="description" content="Lorem ipsum..." />
5
<meta property="og:description" content="Lorem ipsum..." />
6
<meta name="twitter:description" content="Lorem ipsum..." />
7
<meta property="og:image" content="https://www.datocms-assets.com/..." />
8
<meta property="og:image:width" content="2482" />
9
<meta property="og:image:height" content="1572" />
10
<meta name="twitter:image" content="https://www.datocms-assets.com/..." />
11
<meta property="og:locale" content="en" />
12
<meta property="og:type" content="website" />
13
<meta property="og:site_name" content="DatoCMS" />
14
<meta property="article:modified_time" content="2020-03-06T15:07:14Z" />
15
<meta name="twitter:card" content="summary" />
16
<meta name="twitter:site" content="@datocms" />
17
<link sizes="16x16" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
18
<link sizes="32x32" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
19
<link sizes="96x96" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />
20
<link sizes="192x192" type="image/png" rel="icon" href="https://www.datocms-assets.com/..." />

To do that, install the react-datocms package:

yarn add react-datocms

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

1
import { request } from "../lib/datocms";
2
import { renderMetaTags } from "react-datocms";
3
import Head from "next/head";
4

5
const HOMEPAGE_QUERY = `
6
  {
7
    site: _site {
8
      favicon: faviconMetaTags {
9
        attributes
10
        content
11
        tag
12
      }
13
    }
14
    blog {
15
      seo: _seoMetaTags {
16
        attributes
17
        content
18
        tag
19
      }
20
    }
21
  }`;
22

23
export async function getStaticProps() {
24
  const data = await request({
25
    query: HOMEPAGE_QUERY,
26
    variables: { limit: 10 }
27
  });
28

29
  return {
30
    props: {
31
      data
32
    }
33
  };
34
}
35

36
export default function Home({ data }) {
37
  return (
38
    <div>
39
      <Head>{renderMetaTags([...data.blog.seo, ...data.site.favicon])}</Head>
40
      {/* ... */}
41
    </div>
42
  );
43
}

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

Working with and customizing SEO Fields

Play video »