この記事では、
nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす
で紹介されていた、metaまわりの実装をスッキリさせる方法を元にｍeta情報を一箇所で管理する方法をまとめます。
予め、この記事のもと設定が終わっている条件とします。
目次
実現すること
- meta情報の一覧性を高めるため、メタ情報を一箇所で管理できるようにする
- 各ページでmeta情報を定義するのをやめて、すべてのページのメタ情報が含まれるjson形式の定義ファイルを１つ作成しそこにまとめて書いたものが反映されるようにする
手順
- メタ情報をまとめた定義ファイルをjsonで作成
- nuxt.config でそれを読み込みを定義し、どこからでも参照できるように
- jsonで定義されたｍeta情報は、ファイルパスに基づいて各ページに反映されるように
準備
１． meta情報定義ファイル metadata.jsonを作成
ファイルパスに基づいてmetaデータを切り分けられるような構造にした。
独自のフォーマット。
例は、about、activity、works、projectsページがある場合の定義例。
ファイルは、
@/assets/data/metadata.json
このように、asset内に配置しました。
２． プロジェクト内で使用できるように、nuxt.config.js に読み込み設定
これまでの設定が完了したことで、
context.env.metaData
で metadata.json で定義したデータにアクセスできるようになった。
metaに反映
記事 の本題と紹介されている部分 assets/mixins/meta.js の箇所に手を加えていきます。
mixin内で、metaData 値でアクセスできるようにする
metaData 値でアクセスできるように、assets/mixins/meta.js の asyncDataの箇所を追加します。
head 関数内の調整
次に、head 関数内を調整していきます。
書くページのファイルのパスは、
const path = `${this.$router.history.base}${this.$route.path}`;
で取れるようなので
やや雑な感じですがこのような感じにします。