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.


If you want to give your content writers the power to add meta titles and descriptions to your articles, then thankfully working with Prismic and Next.js makes this process easy. You'll just need to set up your meta fields in Prismic and pass that data to the head of your [uid].js file.

Add the Meta Fields to your Custom Types

When adding your Meta fields, we recommend adding a tab in your Custom Type for your SEO fields. Here are the steps to add an SEO tab in your custom-type:

  1. Go to your Custom Type where you want to add the metadata.
  2. Click on the "+" sign next to the main tab and name it "SEO."
  3. Add the metadata fields to that tab.
  4. Title field for the meta title(API ID: meta_title).
  5. Rich text field for the meta description(API ID: meta_desccription).

After you've added these fields, Go to your document, add and publish content.

Example of Meta Fields in a Prismic Doc:

Here's an example of what this looks like in our documentation repo.

Querying and Defining your Meta info in your Next.js Project

Once you've added and published your content, you will need to query the API's data. For this, you will need to query the data with the @prismicio/client query helpers, and we do this because this will return the full document object from Prismic.

Querying with the Slice Zone will only return the content of the Slice Zone in your document. Learn more about querying your repo here.

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 here.

Full Meta Data Query Example:

Copy
import Head from 'next/head'

const page = (page) => {
  if (page && page.data) {
    const meta_title = RichText.asText(post.data.meta_title)
    const meat_desc = RichText.asText(post.data.meta_desccription)
  return (
    <div>
      <Head>
        <title> {meta_title} </title>
        <meta 
          name='description' 
          content = {meta_desc}
         />
      </Head>
    </div>
  )
}

export async function getStaticProps({params}) {
  const client = Client();
  const doc = (await client.getByUID('page', params.uid)

  return {
    props: {
      page: doc,
    },
  }
}
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.