僕は静的ページコーディングの際はejsを使用しています。
ejsでファイルを分割することでWordPressのようにheaderとfooterを共有でどのページでも呼び出せるようになり、下層ページがいくつあっても1回の修正で済みます。
そのままだと個々のページにmeta情報設定できない
どのページでもheaderやfooterを呼び出せる反面、そのままだとトップページも下層ページも同じmeta情報になってしまいます。
WordPressであればプラグインを使用したり、header.phpの条件分岐等で任意のものを設定できますがejsではそれはできません。
そこで配列をheaderに渡して、headerで渡された配列を呼び出すという形をとりました。
jsonを使う方法を後で知りましたが、こちらのやり方はテンプレート化して各ページで表示内容を変えて設定するだけなので手間もかからず個人的にはわかりやすいと思います。
meta方法の設定方法
index.ejs
<% const indexMeta = { //meta情報
title: 'トップページのタイトル' ,
description: 'トップページのディスクリプション' ,
keywords: 'hoge, huga, huga' , };
%>
<%- include('./common/_head', { meta: indexMeta } ) %>index.ejsでは上記のように配列を作り、title, description, keywordsをそれぞれ設定し変数に代入します。
その変数をincludeの引数に指定して、指定したファイル（ここでは_head.ejs）に配列を渡します。
{ meta: indexMeta } の記述はindexMetaをmetaという名前で渡すという意味です。
_head.ejs
<!-- meta情報 -->
<title><%= meta.title %></title>
<meta name="description" content="<%= meta.description %>" />
<meta name="keywords" content="<%= meta.keywords %>" />先ほどindex.ejsでは指定したファイル（ここでは_head.ejs）に対して、metaという名前で配列を渡しました。
ですので、ここでは<%= meta.description %>のようにしてあげれば渡されたデータを引っ張ってくることができます。
変数を指定すれば他にも活用できる
<!-- 変数渡すテスト -->
<% hoge = 'hogehogeだよ'; %><%= hoge %>meta情報に限らず、単純に<% hoge = 'hogehogeだよ！' %>のようにグローバル変数で設定すると他ページで呼ぶことも可能になるので変数を使えるだけで色々幅が広がってくると思います。
※僕のGulp環境のせいかもしれませんがグローバル変数で定義した場合、<% >内の変更だけでは変更が正常に適用されず、他の箇所を改行するとかでwatchを走らせて再コンパイルするよう注意が必要でした。
ぜひ活用してみてください。
