Reputation: 688
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