Home
Legacy Next.js

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:

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

import { request } from "../lib/datocms";
import { renderMetaTags } from "react-datocms";
import Head from "next/head";
const HOMEPAGE_QUERY = `
  {
    site: _site {
      favicon: faviconMetaTags {
        attributes
        content
        tag
      }
    }
    blog {
      seo: _seoMetaTags {
        attributes
        content
        tag
      }
    }
  }`;
export async function getStaticProps() {
  const data = await request({
    query: HOMEPAGE_QUERY,
    variables: { limit: 10 }
  });
  return {
    props: {
      data
    }
  };
}
export default function Home({ data }) {
  return (
    <div>
      <Head>{renderMetaTags([...data.blog.seo, ...data.site.favicon])}</Head>
      {/* ... */}
    </div>
  );
}

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

Did this doc help you?
Still need help?
Explore our forum, contact support, or connect with our sales team. You can also chat live with other users in our Slack channel.