SEO

This article will go over how to best set up meta tags in your custom types to help with your SEO.


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

Add the Meta Fields to Your Custom Types

When adding your Meta fields, we recommend you to add 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 meta data.
  2. Click on the "+" sign next to the main tab and name it "SEO."
  3. Add the metadata fields to that tab.
  4. A Key Text field for the meta title(API ID: meta_title).
  5. A Key Text field for the meta description(API ID: meta_desc).

After you've added these fields, jump over to your document, add and publish your meta data.

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 Nuxt.js project

Once you've added and published your content, you will need to query the data from the API. For this you will need to query the data with the $prismic object, 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.

Then you will pass this information the head section of you vue.js file. Inside of the head method of _uid.vue file, you will have access to your returned data with the this keyword. Nuxt.js makes it very easy to configure meta fields as it comes built in with vue-meta, you can read more about this here.

Full Meta Data Query Example:

Below is a full example of how to query the data and pass it to the head.

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

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.