前回下記の記事で、テスト的に関西人事交流会のサイトにNuxt.jsを導入してみました。

今回はこの記事の続きで、headタグ内の設定をしていこうと思います。

下記は設定したheadタグ内のmetaデータとOGPタグです。

nuxt.config.js

export default{
    // 〜省略〜
    head: {
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
        ]
    }
    // 〜省略〜
}

page/index.vue(トップページのファイル)

export default {
	data () {
		return {
			title: '関西人事交流会 | 「人事が変われば採用が変わる。」'
		}
	},
	head() {
		return {
			title: this.title,
			meta: [
				{ hid: 'description', name: 'description', content: '「人事が変われば、採用が変わる」をモットーに、人事・採用に関わるすべての人たちの情報交換の場を提供する、関西人事交流会のサイトです。' },
				{ hid: 'og:url', property: 'og:url', content: 'http://kansai-jinji.com/' },
				{ hid: 'og:title', property: 'og:title', content: this.title },
				{ hid: 'og:type', property: 'og:type', content: 'website' },
				{ hid: 'og:description', property: 'og:description', content: '「人事が変われば、採用が変わる」をモットーに、人事・採用に関わるすべての人たちの情報交換の場を提供する、関西人事交流会のサイトです。' },
				{ hid: 'og:image', property: 'og:image', content: '画像のURL' },
				{ hid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
				{ hid: 'og:site_name', property: 'og:site_name', content: '関西人事交流会 「人事が変われば、採用が変わる」' },
				{ hid: 'og:locale', property: 'og:locale', content: 'ja_JP' }
				{ hid: 'fb:app_id', property: 'fb:app_id', content: 'appIDを入力' }
			],
		}
	}
}

nuxt.config.jsとトップページを管理するファイルのpage/index.vue設定を記述しました。
2つのファイルに分けて書いている理由は共通の設定と個別での設定を分けているからです。

1. nuxt.config.jsでしていること

nuxt.config.jsでは共通の設定を記述しています。文字コードの指定とviewportの設定とファビコンの設定をしています。

先程記述したコードが下記の通りに生成されます。

<meta data-n-head="true" charset="utf-8">
<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1">
<link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico">

nuxt.config.jsは各ページで共通して設定できることを記述していくファイルになります。metaデータ以外にも外部ファイル化したCSSやJSなど設定できます。

2. page/index.vueでしていること

page/index.vueでは各個別ページの設定を記述しています。タイトル、ディスクリプション、OGPタグ等設定をしています。

先程記述したコードが下記の通りに生成されます。

<title data-n-head="true">関西人事交流会 | 「人事が変われば採用が変わる。」</title>
<meta data-n-head="true" data-hid="description" name="description" content="「人事が変われば、採用が変わる」をモットーに、人事・採用に関わるすべての人たちの情報交換の場を提供する、関西人事交流会のサイトです。">

<meta data-n-head="true" data-hid="og:url" property="og:url" content="http://kansai-jinji.com/">
<meta data-n-head="true" data-hid="og:title" property="og:title" content="関西人事交流会 | 「人事が変われば採用が変わる。」">
<meta data-n-head="true" data-hid="og:type" property="og:type" content="website">
<meta data-n-head="true" data-hid="og:description" property="og:description" content="「人事が変われば、採用が変わる」をモットーに、人事・採用に関わるすべての人たちの情報交換の場を提供する、関西人事交流会のサイトです。">
<meta data-n-head="true" data-hid="og:image" property="og:image" content="画像のURL">
<meta data-n-head="true" data-hid="twitter:card" name="twitter:card" content="summary_large_image">
<meta data-n-head="true" data-hid="og:site_name" property="og:site_name" content="関西人事交流会 「人事が変われば、採用が変わる」">
<meta data-n-head="true" data-hid="og:locale" property="og:locale" content="ja_JP">
<meta data-n-head="true" data-hid="fb:app_id" property="fb:app_id" content="appIDを入力">

主に、タイトルとディスクリプション、OGPタグ関連を設定しています。

meta情報関連も各個別のページで管理ができるので、Nuxt.jsは素敵なフレームワークです。

3. もう少し効率良くファイルをまとめる

難しい部分は特になく、すんなりとNuxt.jsでmeta情報の設定ができました。

ただ、良く見ると共通にできる部分もあります。ドメイン、タイトル、画像のURL、ja_JP、appID、下層ページでのog:type(下層ページはarticle)等々、いちいち書くのが煩わしくなりそうな感じです。

なので、共通にできる部分は共通にして効率良くファイルを管理していきます。

nuxt.config.js

export default {
  env: {
    title: process.env.BASE_TITLE || '関西人事交流会 | 「人事が変われば採用が変わる。」'
  },
  head: {
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
        ]
    }
}

head:{}の上にenv:{}を追加してその中に共通のタイトルを設定します。
envはクライアントサイドとサーバーサイドで共有される環境変数を作成できます。

titleというプロパティは、BASE_TITLEが設定されていればそちらの値を反映し、設定されてなければ【関西人事交流会 | 「人事が変われば採用が変わる。」】が反映されるようになっています。

同様にドメイン、画像のURL、appID等残りの共通している情報をまとめていきます。

nuxt.config.js

export default {
  env: {
    url: process.env.BASE_URL || 'http://kansai-jinji.com',
    title: process.env.BASE_TITLE || '関西人事交流会 | 「人事が変われば採用が変わる。」',
    appID: process.env.BASE_appID || '0000000',
    Img: process.env.BASE_Img || '/assets/img/common/ogp_img.png'
  },
  head: {
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
        ]
    }
}

page/index.vue

export default {
	head() {
		return {
			title: process.env.BASE_TITLE,
			meta: [
				{ hid: 'description', name: 'description', content: '「人事が変われば、採用が変わる」をモットーに、人事・採用に関わるすべての人たちの情報交換の場を提供する、関西人事交流会のサイトです。' },
				{ hid: 'og:url', property: 'og:url', content: process.env.BASE_URL },
				{ hid: 'og:title', property: 'og:title', content: process.env.BASE_TITLE },
				{ hid: 'og:type', property: 'og:type', content: 'website' },
				{ hid: 'og:description', property: 'og:description', content: '「人事が変われば、採用が変わる」をモットーに、人事・採用に関わるすべての人たちの情報交換の場を提供する、関西人事交流会のサイトです。' },
				{ hid: 'og:image', property: 'og:image', content: process.env.BASE_Img },
				{ hid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
				{ hid: 'og:site_name', property: 'og:site_name', content: process.env.BASE_TITLE },
				{ hid: 'og:locale', property: 'og:locale', content: 'ja_JP' }
				{ hid: 'fb:app_id', property: 'fb:app_id', content: process.env.BASE_appID }
			],
		}
	}
}

これで、修正が出ても共通にしているので一箇所修正すれば問題ないです。

4. まとめ

今回はheadタグ内の情報をまとめていきました。共通で設定する部分も多い箇所なので、どのようにまとめるか手を動かす前の設計の部分が非常に重要だと思います。

次回は、トップページ以外のページを作成して下層ページの管理の仕方をまとめていこうかなと思います。