Home
React

    React > SEO Management

    SEO Management

    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 React app with the help of:

    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, first install both react-helmet and the react-datocms package:

    yarn add react-helmet react-datocms

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

    import React from "react";
    import { useQuery } from "graphql-hooks";
    import { renderMetaTags } from "react-datocms";
    import { Helmet } from "react-helmet";
    import "./App.css";
    const HOMEPAGE_QUERY = `
      {
        site: _site {
          favicon: faviconMetaTags {
            attributes
            content
            tag
          }
        }
        blog {
          seo: _seoMetaTags {
            attributes
            content
            tag
          }
        }
      }`;
    function App() {
      const { loading, error, data } = useQuery(HOMEPAGE_QUERY);
      if (loading) return "Loading...";
      if (error) return "Something Bad Happened";
      return (
        <div className="App">
          <Helmet>
            {renderMetaTags(data.blog.seo.concat(data.site.favicon))}
          </Helmet>
          {/* ... */}
        </div>
      );
    }
    export default App;

    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.