Nuxt - Can you pre-render meta data?

Question

Setup

I'm using GitHub Pages to host my website statically. To generate SEO data I'm using the native head() method supported by the Nuxt framework. Here is a sample of my setup.

export default {
  head() {
    return meta({
      title: 'Page title here',
      description: "Page description here",
      image: this.image, // programmatic image
    })
  }
}

Issue

As expected with a single page application, the metadata is being rendered into the DOM as the page is loaded. The initial data in the HTML comes from the nuxt.config.js, information designated for my homepage. This is causing an issue that when any page gets scraped they all have the same metadata.

Goal

Is it possible to render each page's metadata in their respective HTML files when running nuxt generate? This way the appropriate metadata is available when Google, Facebook, Instagram, and other platforms scrape metadata.

Answer 1

With some help from @kissu, the issue was caused by the fact that in my nuxt.config.js I had the Server Side Rendering turned off with the following property being st ssr: false when it should have been ssr: true. There were subsequent issues with Node JS that needed to be resolved along the way.

Answer 2

You need to use ssr: true if you need some SEO, otherwise it will only stay as an SPA.

target can be either server (default) or static.