Nuxt.jsでOGP設定をする方法

Nuxt.jsでOGP設定を行う機会があったので下記にまとめます。

共通のOGPはnuxt.config.jsで設定

各ページで共通のOGPはnuxt.config.jsファイルでおこないます。

nuxt.config.js

head: {
    htmlAttrs: {
      lang: 'ja',
      prefix: 'og: http://ogp.me/ns#'
    },
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
      { hid: 'og:site_name', property: 'og:site_name', content: 'サイト名' },
      { hid: 'og:type', property: 'og:type', content: 'website' },
      { hid: 'og:url', property: 'og:url', content: 'サイトのURL' },
      { hid: 'og:title', property: 'og:title', content: 'サイトタイトル' },
      { hid: 'og:description', property: 'og:description', content: '共通ディスクリプション' },
      { hid: 'og:image', property: 'og:image', content: '画像のURL' },
      { name: 'twitter:card', content: 'summary' }//　twitterの画像サイズ
    ],
  },

上記のようにheadの中に記述していきます。
まずは、htmlタグにprefix属性をつけます。これはOGPを使う宣言のようなものです。
prefix: 'og: http://ogp.me/ns#'

後は設定したい項目をmetaタグ内の記述していきます。

{ name: 'twitter:card', content: 'summary' },でtwitter用の画像サイズを変えることができます。

• summaryは画像とテキスト情報が横並びのタイプ
• summary_large_imageは画像が横いっぱいに表示され、その下にテキスト情報記載されるタイプ。

各ページでOGP設定

各ページでOGP設定する時は、各ページのvueファイルでおこないます。

page.vue

<script>
export default {
  head() {
    return {
      meta: [
        { hid: 'og:description', property: 'og:description', content: 'ディスクリプション' },
        { hid: 'og:url', property: 'og:url', content: 'ページのURL' },
        { hid: 'og:image', property: 'og:image', content: '画像のURL' },
      ]
    }
  }
};
</script>

APIのデータなどで動的にOGPを設定したい場合については、下記の記事で解説しています。

ローカル環境でOGPを確認する

ローカル環境でOGPの確認をする際は、グーグル拡張機能のLocalhostOGPチェッカーが便利です。
LocalhostOGPチェッカー

ワンクリックでURLを生成してくれるので、そのURLをOGP確認できるサービスに使えます。

OGP確認　SNSシェア時のOGP画像・タイトル・説明文のサイズ・見え方を確認

URLを入力するだけで、facebook・twitter・はてなブックマーク・LINEでページをシェアした際のOGP画像を表示してくれます。

OGPの画像サイズのみを確認したい時は下記のサイトが便利です。
画像をドラックするだけで確認できます。
OGP画像シミュレータ