Go to prismic.ioDeveloper Docs

Use Case: SEO

This article will demonstrate how to model meta tags in your custom types and implement them in your Nuxt project to optimize your app for search engines.

This article will demonstrate how to model meta tags in your page types and implement them in your Nuxt project to optimize your app for search engines.

To optimize your app for search engines, you must model meta fields in Prismic and pass that data to the head of your Nuxt page. Then, content writers can add meta titles and descriptions to their articles.

Add SEO fields to your page types

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

  • Open the pagetype 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, including — at least — 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.

Meta fields in a page type

Inject metadata in your Nuxt project

Once you’ve added and published your content, query the data from the API with the $prismic object, as described in Fetch Data.

You can inject meta tag elements into the page head for every page.

Nuxt.js comes built-in with vue-meta. Learn more about Meta tags and SEO in Nuxt.

Below is a complete example of passing the metadata to a vue file. This sample assumes you have configured your project according to our setup documentation.

<script>
export default {
  async asyncData({ $prismic, params, error }) {
    const document = await $prismic.api.getByUID("page", params.uid)
    if (document) {
      return { document }
    } else {
      error({ statusCode: 404, message: "Page not found" })
    }
  },
  head() {
    return {
      title: this.document.data.meta_title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.document.data.meta_description,
        }
      ]
    }
  }
}
</script>

Related articles