SEO

This article will go over how to set up meta tags in your Custom Types and implement them in your application to help with your SEO.


Give your content writers the ability to add meta titles and descriptions to the articles with dedicated fields in your Custom Types and then pass that data to the <head> of your page.

Add the meta fields to the Custom Types

We recommend using tabs in your Custom Types for your SEO fields. Here are the steps to add an SEO tab in your Custom Type:

  1. Open the Custom Type where you want to add the metadata fields.
  2. Click on the "+" sign next to the main tab and name it "SEO."
  3. Add the metadata fields to that tab. For example, a Key Text field with the API ID of meta_title and another one API ID of meta_description. Save your changes.

The next time your editors open a document using this Custom Type, the meta fields will be available.

Example of metadata in a Prismic document

Here's an example of an SEO tab and fields in our documentation repo.
Here's an example of an SEO tab and fields in our documentation repo.

Query and define the meta info in your Next.js project

After publishing the content, query the full document object from Prismic using @prismicio/client, as described in Fetch Data.

For every page, you can inject meta tag elements into the page head. The following example shows how to add metadata fields to a dynamic page called pages/[uid].js. Next.js has a built-in component for appending meta tags to the head of the page. Read Next's official docs to learn more.

Example of metadata in a Next.js component

This sample assumes you have configured your project according to our setup documentation.

Copy
import { SliceZone } from "@prismicio/react";
import * as prismicH from "@prismicio/helpers";

import { createClient, linkResolver } from "../prismicio"; // @prismic/client package to query content
import { components } from "../slices/index";

import DefaultLayout from 'layouts'
import Head from 'next/head' // Next.js built-in Head component

const Page = ({ seoTitle, seoDesc, slices }) => {
  return (
    <DefaultLayout>
      <Head>
        <title>{seoTitle}</title>
        <meta name="description" content={seoDesc} />
      </Head>
      <SliceZone slices={slices} components={components} />
    </DefaultLayout>
  );
};


export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });
  const page = await client.getByUID("page", params.uid);

  return {
    props: {
      seoTitle: page.data.meta_title,
      seoDesc: page.data.meta_description,
      slices: page.data.body,
    },
  };
}

export async function getStaticPaths() {
  const client = createClient();
  const pages = await client.getAllByType("page");

  return {
    paths: pages.map((page) => prismicH.asLink(page, linkResolver)),
    fallback: false,
  };
}

export default Page;

Related articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.