Use Case: SEO
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.
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_titleand another one API ID ofmeta_description. Save your changes.
The next time your editors open a document using this page type, the meta fields will be available.
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>Was this article helpful?
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.