概要

Nuxt.jsで、タイトルタグや、OGPなどのメタタグを設定する方法についてのメモです。

Nuxt.jsの公式ドキュメントはこちら。
https://ja.nuxtjs.org/docs/2.x/features/meta-tags-seo

共通設定

全てのページに反映させたい共通の内容は、nuxt.config.js で設定できます。
デフォルトのOGPやタイトルをこちらで設定しておきます。

nuxt.config.js

  head: {
    title: 'タイトル',
    htmlAttrs: {
      lang: 'ja',
      prefix: 'og: http://ogp.me/ns#'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '共通ディスクリプション' },
      { hid: 'og:site_name', property: 'og:site_name', content: 'サイト名' },
      { hid: 'og:url', property: 'og:url', content: 'サイトURL' },  //絶対パスで指定
      { hid: 'og:type', property: 'og:type', content: 'website' },
      { hid: 'og:image', property: 'og:image', content: '画像URL' },  //絶対パスで指定
      { hid: 'og:title', property: 'og:title', content: 'タイトル' },
      { hid: 'og:description', property: 'og:description', content: '共通ディスクリプション' },
      { name: 'twitter:card', content: 'summary' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

上から順に<title>タグ、<title>タグ、<meta>タグ、<link>タグが生成されます。各タグに対し、属性と値を連想配列で指定していけばよいので、直感的にわかりやすいかと思います。
hidは、各メタタグを識別するための固有のIDです。任意の文字列でOKですが、propertyの値と揃えておくとわかりやすいかと思います。

上記の設定で、htmlには下記のように出力されます。

index.html

<html lang="ja" prefix="og: http://ogp.me/ns#">
  <head>
    <title>タイトル</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta data-hid="description" name="description" content="共通ディスクリプション">
    <meta data-hid="og:site_name" property="og:site_name" content="サイト名">
    <meta data-hid="og:url" property="og:url" content="サイトURL">
    <meta data-hid="og:type" property="og:type" content="website">
    <meta data-hid="og:image" property="og:image" content="画像URL">
    <meta data-hid="og:title" property="og:title" content="タイトル">
    <meta data-hid="og:description" property="og:description" content="共通ディスクリプション">
    <meta name="twitter:card" content="summary">
    <link rel="icon" href="/favicon.ico">
  </head>
  <!-- 省略 -->
</html>

個別ページの設定

ページごとに個別の値を設定する場合は、各ページのVueファイルの<script>タグ内で設定します。

page.vue

<script>
export default {
  head() {
    return {
      title: 'ページタイトル',
      titleTemplate: '%s - サイト名',
      meta: [
      { hid: 'description', name: 'description', content: 'ページディスクリプション' },
      { hid: 'og:url', property: 'og:url', content: 'ページURL' },  //絶対パス
      { hid: 'og:image', property: 'og:image', content: 'ページ用OGP画像URL' }  //絶対パス
      { hid: 'og:title', property: 'og:title', content: 'ページタイトル' },
      { hid: 'og:description', property: 'og:description', content: 'ページディスクリプション' },
      ]
    }
  }
}
</script>

hidは、nuxt.config.jsと同じ値を設定します。（hidの値が異なると、別のタグと認識されるため、重複してタグが出力されます）
titleTemplateを設定すると、titleに指定した値にを共通の書式で表示させることができます。

上記の設定で、htmlには下記のように出力されます。ページ側で設定した内容が反映されました。

page.html

<html lang="ja" prefix="og: http://ogp.me/ns#">
  <head>
    <title>ページタイトル - サイト名</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta data-hid="description" name="description" content="ページディスクリプション">
    <meta data-hid="og:site_name" property="og:site_name" content="サイト名">
    <meta data-hid="og:url" property="og:url" content="ページURL">
    <meta data-hid="og:type" property="og:type" content="website">
    <meta data-hid="og:image" property="og:image" content="ページ用OGP画像URL">
    <meta data-hid="og:title" property="og:title" content="ページタイトル">
    <meta data-hid="og:description" property="og:description" content="ページディスクリプション">
    <meta name="twitter:card" content="summary">
    <link rel="icon" href="/favicon.ico">
  </head>
  <!-- 省略 -->
</html>

参考

Nuxt.jsの公式ドキュメント： https://ja.nuxtjs.org/docs/2.x/features/meta-tags-seo
MetaAPi Refference: https://vue-meta.nuxtjs.org/api/