4

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.

dvoutt
  • 930
  • 2
  • 9
  • 23
  • You should be able to do exactly the same setup per file. If your data is async, you could get it this way IMO: https://stackoverflow.com/a/67633638/8816585 – kissu Jul 09 '21 at 22:20
  • Thanks for sharing the AsyncData, some good learning. But I’m unsure how that would get rendered into the HTML via the generate command. Wouldn’t this simply be available after the page is loaded in? – dvoutt Jul 11 '21 at 00:55
  • This would be generated ahead of time. Try to `yarn generate`and `yarn start`, and check the source code. – kissu Jul 11 '21 at 02:16
  • Just trying to figure out how to write it since I'm not actually making any external calls to get the data as it's pretty much all static. – dvoutt Jul 12 '21 at 13:54
  • If it's static, write it down. – kissu Jul 12 '21 at 13:55
  • I am in the example above that is exactly what I did, I just have a method that is formatting it. But `yarn generate` doesn't render it into the HTML file at build time. – dvoutt Jul 12 '21 at 13:57
  • This should work totally fine. Do you have a [repro]? – kissu Jul 12 '21 at 14:06
  • I don't have a minimal example ready to go. And I thought that would be how Nuxt would handle it, but it renders the `head()` data after DOM load, so it's always missed by anything fetching from the original HTML before the JS loads up. – dvoutt Jul 12 '21 at 14:10
  • 1
    I've created a brand new project, followed this page instructions: https://nuxtjs.org/docs/2.x/components-glossary/pages-head And got a successful static result via the `View page source`. You do have `target: static` and `ssr: true` in your `nuxt.config.js` file, right? – kissu Jul 12 '21 at 14:12
  • Not using the `ssr: true` which would make sense to my issue. Trying to switch it and I have an issue with an npm module that I will need to try and find a workaround for. I Will report back after I figure that would. – dvoutt Jul 12 '21 at 14:26
  • If you don't set `ssr: true`, this will indeed only stay as SPA, hence no static content without JS. Your module is probably not compatible with SSR, set it to `mode: client` as shown here: https://nuxtjs.org/docs/2.x/directory-structure/plugins#object-syntax – kissu Jul 12 '21 at 14:32
  • 1
    Thanks, it definitely required being put into `ssr: true` and yes the module was not compatible but wasn't a plugin or something Vue-based at all. I just had to write a conditional on a variable to check the `process.client` being true or not to result in the build issue. – dvoutt Jul 12 '21 at 16:12

2 Answers2

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.

dvoutt
  • 930
  • 2
  • 9
  • 23
0

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.

kissu
  • 40,416
  • 14
  • 65
  • 133