Nuxt.js

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

Nuxt.js SPAモードでTwitterCardが読み込まれず困った話 - eyecatch

解決方法

各ページ(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: /*サイト名*/ }
    ]
  }
}

最後に、キャッシュ更新をお忘れなく

Card Validator にて、デプロイ済みのサイトURLを入力して、正しくカードイメージが表示されることを確認しましょう。

上記のように設定してもうまくいかない場合は、

  • robots.txt の設定の問題
  • SSL の問題
  • meta タグの書き方間違い

などが考えられます。

ちなみに、Card Validator で『Preview Card』ボタンを押して、右側の『Log』欄に出てくるエラーメッセージを見れば、案外簡単に問題がわかる場合もありますので、一度確認してみてください。

参考サイト

nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい

Nuxt.jsでtitle・description・OGPタグを設定しSEO効果を出す方法【SSR(サーバーサイドレンダリング)】

【2019年版】Twitterカードとは?使い方と設定方法まとめ - サルワカ

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA