【Nuxt.js】SPA モードで Twitter Card が読み込まれず困った話

解決方法

各ページ（routing）ごとに OGP を設定したい場合

universal（SSR）モードに設定しましょう。

SPA モードだと、ページごとのOGP設定（というかそもそもmetaタグ）が反映されないので、SSR モードを使用しましょう。

nuxt.config.js にて、以下のように設定します。

export default {
  mode: 'universal',

  head: {
    htmlAttrs: {
      prefix: 'og: http://ogp.me/ns#'
    },
    // 以下各種設定が続く……
  }

  // 以下各種設定が続く……
}

次に、各ページの vue ファイル内で以下のように記述します。
ここは、Nuxt-headプロパティを参考にしつつ、Twitter カードの設定方法に従って記述すれば良いです。

（※Twitter カード設定方法参考：【2019年版】Twitterカードとは？使い方と設定方法まとめ - サルワカ）

<script>
export default {
  head() {
    return {
      meta: [
        { hid: 'twitter:card', name: 'twitter:card', content: /*カードタイプ*/ },
        { hid: 'twitter:site', name: 'twitter:site', content: /*@ツイッターID*/ },
        { hid: 'og:type', property: 'og:type', content: /*website とか blog とか*/ },
        {
          hid: 'og:title',
          property: 'og:title',
          content: /*サイト名*/
        },
        {
          hid: 'og:url',
          property: 'og:url',
          content: /*サイトURL*/
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: /*サイト説明文*/
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: /*OGP 画像への絶対パス*/
        },
        { hid: 'og:site_name', name: 'og:site_name', content: /*サイト名*/ }
      ]
    }
  }
}
</script>

全ページで同じ OGP 設定で良い場合

単純に、nuxt.config.js で meta タグ設定をする だけです。

各 layout や page の vue ファイルに head() プロパティを使って指定した場合、初期レンダリング時には正しく head の内容が出力されないようで、Twitter Card が正しく読み込まれません。

※僕の場合、Twitter Card が正しく読み込まれなかった理由はまさにこれで、layouts/default.vue に head() プロパティで各種メタタグを設定しようとしていたのが原因でした orz

nuxt.config.js に以下のように記述します。

export default {
  head: {
    meta: [
      { hid: 'twitter:card', name: 'twitter:card', content: /*カードタイプ*/ },
      { hid: 'twitter:site', name: 'twitter:site', content: /*@ツイッターID*/ },
      { hid: 'og:type', property: 'og:type', content: /*website とか blog とか*/ },
      {
        hid: 'og:title',
        property: 'og:title',
        content: /*サイト名*/
      },
      {
        hid: 'og:url',
        property: 'og:url',
        content: /*サイトURL*/
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: /*サイト説明文*/
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: /*OGP 画像への絶対パス*/
      },
      { hid: 'og:site_name', name: 'og:site_name', content: /*サイト名*/ }
    ]
  }
}