Dynamic Meta for Nuxt.js Dynamic Meta for Nuxt.js vue.js vue.js

Dynamic Meta for Nuxt.js


No, it won't be possible to provide dynamic meta tags while serving pre-rendered static HTML.

Running Nuxt in universal mode makes it possible to fetch page data from API (via fetch, asyncData or nuxtServerInit action), generate HTML content of the page (including dynamic meta tags) and serve it to the user.

Simple usage example with SSR:

export default {  async asyncData ({ query, store }) {    const { make, model, cardID } = query    // Validate query params    // fetch data from API    try {      const carDetails = await store.dispatch('getCardInfo', { make, model, cardID })      return {         cardDetails      }    } catch (error) {      // Redirect to error page or 404 depending on server response    }  },  head () {    return {      title: this.carDetails.title,      meta: [        { hid: 'og-title', property: 'og:title', content: this.carDetails.title },        // other meta      ]    }  }}

This will ensure that page data is loaded before component has been rendered and valid meta tags will be included for search engines consumption.

Sidenote: rather than using query params, you may want to check dynamic routes, which are significantly better for SEO, as well as user friendly URL (e.g. example.com/cars/audi/a6/133852)