OGPにContentfulからの画像を当て込む方法

Question

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]に設定しようとしているんですが。。。
これではうまく表示されてくれません。。。

わかる方何卒よろしくお願い申し上げます。

Comments

[mikkame]

SSRしないとogpは読み込んでくれないと思うんですがそこは大丈夫ですか？
（Facebookのクローラはjsを実行しない）

[ryoii]

ご指摘ありがとうございます。
SSRは行なっております。

[CHERRY]

asyncData で OGP を設定するなら、asyncDataは SSR 側で実行する必要がありますが、SSR 側でダメということでしょうか？

[ryoii]

SSR側でasyncDataを実行するというのはどういうことでしょうか？
asyncDataを使うだけではSSRにならないのでしょうか？
質問を質問で返す形で大変恐縮です。

[ryoii]

https://nuxt-api-state.lec.cafe/6.SSR%E3%81%AE%E8%A8%AD%E5%AE%9A/#fetch-/-asyncdata
こちらにasyncDataはブラウザ上では動作しないと書いてあります。
asyncDataはどこで動作しているのでしょうか？

[ryoii]

https://crieit.net/posts/Netlify-404
原因はこの辺かもしれないなという感じです。

Answer 1

facebookのシェアデバッカーのレスポンスコードが404だったので、ちゃんとgenerateできていないことに気づき、それが原因でした。

nuxt.config.js

const ctfConfig = getConfigForKeys([
  'CTF_TYPE_ID',
  'CTF_SPACE_ID',
  'CTF_CDA_ACCESS_TOKEN'
]);
const { createClient } = require('./plugins/contentful')
const cdaClient = createClient(ctfConfig)
const clientPromise = cdaClient.getEntries({
  'content_type': 'client',
  order: '-sys.createdAt'
});
module.exports ={
  mode: 'universal',
  generate: {
    async routes() {
      return Promise.all([clientPromise])
      .then(([hoges]) => {
        const urls = []
        hoges.items.forEach(item => {
          urls.push(`${item.fields.name}/hoge1`)
          urls.push(`${item.fields.name}/hoge2`)
          urls.push(`${item.fields.name}/hoge3`)
          urls.push(`${item.fields.name}/piyo`)
          urls.push(`${item.fields.name}/fuga`)
        });
        return urls
      });
  }
}