Adding SEO to pages — Remix

Remix Blog

Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.

Remix > 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 meta tags based on the content you insert inside DatoCMS.

Here's a sample of the meta tags you can automatically generate. It includes meta tags for SEO, social share and website favicons:

<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/..." />

You can easily include all this information inside your Remix app with the help of our react-datocms package, so make sure to install it, if you've not already done it:

npm i --save react-datocms

Adding SEO and social share meta tags

With Remix, you can specify meta tags for a page using the meta export:

export function meta({ data }) {
    title: "Something cool",
    description: "This becomes the nice preview on search results."
  };
};

With DatoCMS you can feed content coming from a _seoMetaTags query directly into Remix by using the toRemixMeta function, which generates a compatible object for Remix's meta function:

import { request } from "../lib/datocms";
import { toRemixMeta } from "react-datocms";
import { useLoaderData } from "remix";
const HOMEPAGE_QUERY = `
  {
    blog {
      seo: _seoMetaTags {
        attributes
        content
        tag
      }
    }
  }`;
export async function loader() {
  return request(HOMEPAGE_QUERY, {
    variables: { limit: 10 }
  });
}
export function meta({ data }) {
  return toRemixMeta(data.blog.seo);
};
export default function Home() {
  // ...
}

Adding favicon links and meta tags

If you want to add all the link and meta tags needed to generate favicons for your website, you can use the renderMetaTags helper along with the faviconMetaTags GraphQL query:

Why not using the links export?

Remix offers a links export to define which <link> elements to add to the page, but for performance reasons it doesn't receive any loader data, so you cannot use it to render favicons meta tags! The best way to render them is using renderMetaTags in your root component, like in the example.

import {
  Links,
  LiveReload,
  Meta,
  Form,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from 'remix';
import { renderMetaTags } from 'react-datocms';
import { load } from '~/lib/datocms';
export const loader = async ({ request }) => {
  return load(`
    {
      site: _site {
        favicon: faviconMetaTags(variants: [icon, msApplication, appleTouchIcon]) {
          attributes
          content
          tag
        }
      }
    }
  `);
};
export default function App() {
  const { site } = useLoaderData();
  
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
        {renderMetaTags(site.favicon)}
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        {process.env.NODE_ENV === 'development' && <LiveReload />}
      </body>
    </html>
  );
}

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

Working with and customizing SEO Fields

Play video »