OGPにContentfulからの画像を当て込む方法
Contentfulからの画像をOGPの画像設定に当て込みたいのですがうまく表示してくれなく、、、
Facebookのシェアなどで画像が表示されない状況です。
行き詰まってしまったので、わかるかたご意見お願い申し上げます。
export default {
asyncData({ params, error, payload, env }) {
if (payload) return { article: payload }
return client
.getEntries({
'content_type': env.CTF_HOGE_TYPE_ID,
'fields.name': params.name,
order: '-sys.createdAt'
})
.then(entrie => {
return {
article: entrie.items[0]
}
})
.catch(console.error)
},
head () {
return {
title: `${this.article.fields.name_ja} PROFILE`,
meta: [
{ hid: 'description', name: 'description', content: `${this.article.fields.work}` },
{ hid: 'og:url', property: 'og:url', content: `https://www.hogehoge.com/${this.article.fields.name}/profile` },
{ hid: 'og:type', property: 'og:type', content: 'article'},
{ hid: 'og:title', property: 'og:title', content: `${this.article.fields.name_ja} `},
{ hid: 'og:description', property: 'og:description', content: `${this.article.fields.work}` },
{ hid: 'og:image', property: 'og:image', content: `https:${this.article.fields.client_top_image.fields.file.url}`},
{ hid: 'og:image:alt', property: 'og:image:alt', content: `${this.article.fields.name_ja}`},
/* twitter card */
{ property: 'twitter:url', content: `https://www.hogehoge.com/${this.article.fields.name}/profile` },
{ hid: 'twittter:title', property: 'twitter:title', content: `${this.article.fields.name_ja} `},
{ property: 'twitter:description', content: `${this.article.fields.work}` },
{ property: 'twitter:image:src', content: `https:${this.article.fields.client_top_image.fields.file.url}` },
]
}
}
}
asyncDataでContentfulから受け取った画像URLをheadのmeta[og:image]に設定しようとしているんですが。。。
これではうまく表示されてくれません。。。
なお、SSRは行なっております。
わかる方何卒よろしくお願い申し上げます。