How do I set meta tags in Nuxt SSR?

Viewed 1216

I've been trying to set up some dynamic meta tags for my Nuxt SSR project following the Nuxt documentation. Surprisingly neither having head property as an object, not using it as a function did not result in meta tags displaying properly when I view page source. Link preview doesn't work either.

Here's my head object in nuxt.config.js:

head: {
    title: 'Somesite',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'og:site_name', property: 'og:site_name', content: 'Somesite' },
      { hid: 'og:type', property: 'og:type', content: 'website' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

And here's what I have in my pages:

head() {
    return {
      title: 'Some title',
      meta: [
        {
          property: 'og:title',
          content: 'Some title',
        },
        {
          hid: 'description',
          name: 'description',
          content: 'Some description',
        },
        {
          property: 'og:description',
          content: 'Some description',
        },
        {
          property: 'og:image',
          content:
            'https://res.cloudinary.com/practicaldev/image/fetch/s--arLlmpvP--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xgexxq7w0ejq02zqd5r.png',
        },
        {
          property: 'og:url',
          content: 'http://google.com/',
        },
        {
          hid: 'twitter:site',
          name: 'twitter:site',
          content: '@sometwitter',
        },
        {
          hid: 'twitter:description',
          name: 'twitter:description',
          content: 'Some description',
        },
        {
          hid: 'twitter:creator',
          name: 'twitter:creator',
          content: '@sometwitter',
        },
        {
          hid: 'twitter:title',
          name: 'twitter:title',
          content: 'Some title',
        },
        {
          hid: 'twitter:card',
          name: 'twitter:card',
          content: 'summary',
        },
        {
          hid: 'twitter:image',
          name: 'twitter:image',
          content:
            'https://res.cloudinary.com/practicaldev/image/fetch/s--arLlmpvP--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xgexxq7w0ejq02zqd5r.png',
        },
      ],
    }
  },

The title works fine but not the meta tags. Here's what I see when I view page source:

<meta data-n-head="ssr" data-hid="description" name="description" content="## Build Setup">
<meta data-n-head="ssr" data-hid="og:title" name="og:title" property="og:title" content="bamboo">
<meta data-n-head="ssr" data-hid="og:description" name="og:description" property="og:description" content="## Build Setup">

Side note: I wasn't even able to determine where ## Build Setup comes from.

Interestingly though, when I inspect component in Vue Devtools I see correct meta info (screenshot). Vue Devtools screenshot

1 Answers

I had the same problem, I didn't konw why. But I just think if every meta needs a only name, so I add a ‘hid’ attribute for every meta, and I solve this problem.enter image description here

Related