EJSを使用している環境でtitleやmeta name="description"といったメタ情報をJSONファイルひとつで管理できるようにする方法です。

使用するプラグインとファイル構成

プラグインのインストール

今回はgulpでEJSを使用するので、まず下記コマンドで「gulp-ejs」をインストールします。

$ npm i -D gulp-ejs

ファイル構成

ここで使用する方法は以下のようなファイル構成のものを使用した想定になり、後述するコード内のパスなどについてもこの構成をもとにしています。

├─ /src
│  └─ /ejs
│      ├─ index.ejs
│      ├─ /page
│      │  └─ index.ejs
│      └─ /templates
│         ├─ _head.ejs
│         └─ meta.json
└─ gulpfile.js

タスクの記述

まずはgulpfile.jsに下記のようなタスクを記述し、プラグインを読み込む際に「gulp」と「gulp-ejs」に加え、JSONファイルを読み込むために必要な「fs（File System）」も併せて記述しておきます。

gulpfile.js
var gulp = require( 'gulp' ),
    ejs = require( 'gulp-ejs' ),
    fs = require( 'fs' );

gulp.task('ejs', function() {
  var json = JSON.parse(fs.readFileSync('src/ejs/templates/meta.json'));
  return gulp.src(['src/ejs/**/*.ejs', '!src/ejs/**/_*.ejs'])
      .pipe(ejs({json}, {}, {ext: '.html'}))
      .pipe(gulp.dest('dist'));
});

JSONファイルの作成

次にタイトルや各種メタ情報を指定するためのJSONファイルを作成します。
今回のサンプルの構成では/src/ejs/templates内にあるmeta.jsonが該当のファイルになるのでそこに下記のような形で記述し、ここではtitle, meta name="description", link rel="canonical"の3項目を指定する想定となっています。

meta.json
{
  "default": {
    "title": "default title",
    "description": "default description",
    "canonical": "http://example.com/"
  },

  "home": {
    "title": "document",
    "description": "home description",
    "canonical": "http://example.com/"
  },

  "page": {
    "title": "page - document",
    "description": "page description",
    "canonical": "http://example.com/page/"
  }
}

"home": { ... }や"page": { ... }といったようにページ毎にそれぞれオブジェクトを用意し、その中にページで使用したいタイトルやディスクリプションを記述していきます。
ここでは2ページ分の記述しかありませんが、対応するページを増やしたい場合は"page": { ... }の後に,を付けて同じように追記し、名前をユニークなものに変更することで追加できます。
また、詳しくは後述しますがデフォルトとなる値を指定したオブジェクトも併せて記述しておきます。

EJSへの記述 & コンパイル

最後にEJSファイルがJSONの内容を読み込むように記述していきます。
まず、各EJSファイルが共通で読み込むファイルとして下記のような内容が記述された_head.ejsを作成します。

_head.ejs
<%
  var _default = json['default'];
  for ( var key in _default ) {
    if ( typeof page[key] === 'undefined' ) {
      page[key] = _default[key];
    }
  }
-%>
<head>
<meta charset="UTF-8">
<title><%= page['title'] %></title>
<meta name="description" content="<%= page['description'] %>">
<link rel="canonical" href="<%= page['canonical'] %>">
</head>

記述されている内容としては、まずコード上部でそれぞれのkeyに値があるかをチェックしており、もしなかった場合はJSONファイルでデフォルト値として設定したものがそれぞれ適用されるようにします。
例えば、上でサンプルとしてあげたJSONで"home"にある"title": "document"はコンパイル後にtitleへ「document」と出力されるものですが、JSONからこの部分を削除してコンパイルすると、titleにはデフォルト値として指定した「default title」が出力されるという動きになります。

JSONで指定したものを出力させるための記述は<%= page['key'] %>という形で記述していき、"title"なら<%= page['title'] %>、"description"なら<%= page['description'] %>という形で該当箇所にそれぞれ指定していきます。

次に各ページ用のEJSファイルに上で作成した共通用ファイルを読み込ませていき、読み込みの際にはそのページを表すパラメータを引数の部分に指定します。
今回のサンプルであれば、/src/ejs/index.ejsはTOPページとなるのでパラメータをhomeに、/src/ejs/page/index.ejsについてはパラメータをpageにして、それぞれheadを挿入したい箇所に下記のような形で記述して_head.ejsを読み込ませます。

/src/ejs/index.ejs
<%-
  include('./templates/_head', {
    page: json['home']
  });
%>
/src/ejs/page/index.ejs
<%-
  include('../templates/_head', {
    page: json['page']
  });
%>

あとは$ gulp ejsを実行すれば/dist内にHTMLが出力され、ソースを確認するとそれぞれJSONで指定していたものがhead内の各箇所に適用されているのを確認できると思います。

今回のサンプルではページ数が少なかったですが、例えばこれが数十・数百ページあるといったようなときにわざわざ各ページをいじらなくてもJSONファイルひとつだけですべて設定・編集できるようになるので、作業中に各種メタ情報が高頻度で変わるとか最後に一気に指定するような場合では非常に便利だと思います。 また、alternate属性やOGP設定のように、今回のサンプルではなかったものを追加して管理しやすくすることも同じように記述していくことで容易にできます。