Developers / Next.js / SEO

SEO

This article will go over how to set up meta tags in your page 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 page types and then pass that data to the <head> of your page.

Add the SEO fields to the page types

We recommend using tabs in your page types for your SEO fields. Here are the steps to add an SEO tab in your page type:

Open the page type where you want to add the metadata fields.
Click on the "+" sign next to the main tab and name it "SEO."
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 page 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.

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 Head from 'next/head'
import { SliceZone } from '@prismicio/react'
import * as prismic from '@prismicio/client'

import { createClient, linkResolver } from '../prismicio'
import { components } from '../slices'
import { DefaultLayout } from '../layouts'

const Page = ({ metaTitle, metaDescription, slices }) => {
  return (
    <DefaultLayout>
      <Head>
        <title>{metaTitle}</title>
        <meta name="description" content={metaDescription} />
      </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: {
      metaTitle: page.data.meta_title,
      metaDescription: 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) => prismic.asLink(page, { linkResolver })),
    fallback: false,
  }
}

export default Page
import Head from 'next/head'
import { SliceZone } from '@prismicio/react'
import * as prismic from '@prismicio/client'

import { createClient, linkResolver } from '../prismicio'
import { components } from '../slices'
import { DefaultLayout } from '../layouts'

const Page = ({ metaTitle, metaDescription, slices }) => {
  return (
    <DefaultLayout>
      <Head>
        <title>{metaTitle}</title>
        <meta name="description" content={metaDescription} />
      </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: {
      metaTitle: page.data.meta_title,
      metaDescription: 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) => prismic.asLink(page, { linkResolver })),
    fallback: false,
  }
}

export default Page

Going further with Schema.org

In addition to the basic metadata demonstrated in this article, you can provide search engines detailed information about your pages' content using Schema.org schemas. See our Schema.org article to learn more.

Fetch Data

Learn about the different queries you can do with Next.js and Prismic

Template content

Learn how to template content from the Prismic API.

Schema.org

Learn how to integrate improve SEO with Schema.org.

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.

SEO