SEO

This article will go over how to set up meta tags in your Custom Types and implement 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 meta fields 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 with the @prismicio/client query helpers. This can also be done using the next-slicezone package. See examples for both below.

Querying with the Slice Zone will only return the content of the Slice Zone in your document. Querying the whole document will return the metadata Learn how to set up the client and about querying your repo.

For every page, you can inject elements into the page head. This way, you can add meta tags inside the <head> of your page.
The following example shows how to add metadata fields to dynamic page pages/[uid].js. Next.js has a built-in component for appending meta tags to the head of the page. Learn more about this component.

Full metadata query example:

  • @prismic/client
  • next-slicezone
Copy
import React from 'react'
import DefaultLayout from 'layouts'
import { Header, SliceZone } from 'components'

import Head from 'next/head' // Next.js built-in Head component
import { Client } from '../path-to-your-API-client-config' // @prismic/client package to query content

const Page = ({ doc }) => {
  if (doc && doc.data) {
    return (
      <DefaultLayout>
        <Head>
          <title>{doc.data.meta_title}</title>
          <meta 
            name='description' 
            content={doc.data.meta_description}
          />
        </Head>
        <div className="page">
          <Header menu={menu} />
          <SliceZone sliceZone={doc.data.page_content} />
        </div>
      </DefaultLayout>
    )
  }
  return null;
}

export async function getStaticProps({ params }) {
  const client = Client()
  const doc = await client.getByUID('page', params.uid, ref ? { ref } : null) || {}
  return {
    props: {
      doc
    }
  }
};

export async function getStaticPaths() {
  const docs = await Client().query(
    Prismic.Predicates.at('document.type', 'page'),
    { lang: '*' }
  );
  return {
    paths: docs.results.map((doc) => {
      return { params: { uid: doc.uid }};
    }),
    fallback: false,
  };
}

export default Page
Copy
import { Client } from "../prismic-configuration";
import SliceZone from "next-slicezone";
import { useGetStaticProps, useGetStaticPaths } from "next-slicezone/hooks";
import Head from 'next/head'

import resolver from "../sm-resolver.js";
import Layout from "./../components/Layout";

const Page = (props) => {
  return (
    <Layout>
      <Head>
        <title>{props.data.meta_title}</title>
        <meta 
          name='description' 
          content={props.data.meta_description}
         />
      </Head>
      <SliceZone {...props} resolver={resolver} />
    </Layout>
  );
};

// Fetch content from prismic
export const getStaticProps = useGetStaticProps({
  client: Client(),
  apiParams({ params }) {
    return {
      uid: params.uid
    }
  }
});

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  formatPath: (prismicDocument) => {
    return {
      params: {
        uid: prismicDocument.uid
      }
    }
  }
});

export default Page;

Related articles:


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.