【Nuxt.js】メタタグに問題がないのにtwitter cardが表示されない

Question

Twitter cardについての質問です。

Nuxt.jsであるページにTwitterのogpを対応させたいです。

しかし、https://cards-dev.twitter.com/validatorにて確認したところ以下のエラーが出ました。

ERROR: Fetching the page failed because the request timed out.

chrome拡張のLocalhost OGP チェッカーを使用して、firebaseで一時的にホスティングしてバリデーターで確認したところ、うまく表示されました。
問題は画像urlがundefinedになったことだけでした。

したがってメタタグ自体に大きな問題はないようです。

なのでおそらく私のサイト自体に問題があるようですが、原因がわかりません。どなたか考えられる原因を教えて下さいませんか？

head() {
    return {
      title: 'schedule page',
      meta: [
        {
          hid: 'twitter:card',
          name: 'twitter:card',
          content: 'summary' // カードタイ
          // content: 'summary_large_image' // カードタイ
        },
        {
          hid: 'og:type',
          property: 'og:type',
          content: 'website' // website とか blog とか
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: 'rand-s' // サイト名
        },
        {
          hid: 'og:url',
          property: 'og:url',
          content: `*****/schedules/${this.$route.params.id}` // サイトURL
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: 'a' // サイト説明文
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: process.env.DEFAULT_IMG // OGP 画像への絶対パス
        },
        {
          hid: 'og:site_name',
          name: 'og:site_name',
          content: 'rand-s' // サイト名
        }
      ]
    }
  }

twitterのトラブルシューティングに当エラーについて書かれていましたが、どれも当てはまりそうにありません。

1. Your CMS site is configured to block web crawlers.

=>CMSではないです。
2. Your website has a robots.txt file that is blocking Twitter from getting your Card metadata.
=>念の為プロジェクト内を検索しましたが、存在しませんでした。
3. Your Apache .htaccess file is denying requests.
=>apacheじゃありません。
4. An image is too large for our web crawler to download.
=>127.3 KBです。
5. A network lag is causing a delay in fetching your site/images.
=>ポートフォリオなので動作が軽く、ありえないと思います
6. Your web host may be blocking web crawler access to your site.
=>なさそうです。

twitterのトラブルシューティングはこちらです。

Answer 1

画像は static ディレクトリに配置され、環境変数 process.env.DEFAULT_IMG は <サイトドメイン>/IMAGE_PATH になってますか？？

Comments

[msickpaler]

ありがとうございます。ご指摘を受けて環境変数ではなくハードコーディングで以下の３つを試してみましたが変わりませんでした。
"@/assets/images/image.png" (assets/images配下)
"/image.png" (static配下)
"http://*****:80/path/to/image.png"(static配下)

Answer 2

SPAになってませんか？SSRかSSGじゃないとOGPは表示されません。

Comments

[msickpaler]

回答ありがとうございます！
念のためnuxt.config.jsを確認しましたが、universalと書いてありましたので問題なさそうです。