Maximilian Fixl
Maximilian Fixl

Reputation: 688

Multiple NuxtJS og:image Meta Tags

In the specification of Open Graph protocol - Arrays it is documented that multiple versions of the type og:image may be arranged.

We use on components basis this structure in NuxtJS ssr:

export default {
  data() {
    return {
      title: 'Home page'
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Home page description'
        }
        // And others...
      ]
    }
  }
}

The goal is to have multiple nodes of the tag <meta property="og:image" content="https://example.com/rock.jpg" /> generated by NuxtJS Meta. The thinking is, since these are dynamic pages, to build an array and merge them into the meta array.

export default {
  data() {
    return {
      title: 'Home page'
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Home page description'
        }
        // And others...
        ...this.getMetaOgImages
      ]
    }
  },
  computed: {
    getMetaOgImages() {

      const tempArr = []

      // this.images comes from map state vuex-store
      this.images.forEach(image => {

        tempArr.push(
          {
            hid: 'og:image',
            property: 'og:image',
            content: image.url
          },
          {
            hid: 'og:image:secure_url',
            property: 'og:image:secure_url',
            content: image.url
          }
        )
      })

      return tempArr
    }
  }
}

The computed property contains all urls, but in the browser (in the generated <meta> tags) only the first element is present.

It seems to me that vue-meta filters out the other elements because they are considered duplicates.

Can anyone confirm this or does anyone have experience with outputting multiple elements? According to the specification this is valid and should not be a problem.

Upvotes: 1

Views: 650

Answers (0)

Related Questions