[Middleman 3][blog]初めてのMiddleman：Middleman-Titleでタイトルタグを手軽に設定する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

前回、Middleman-OGPについて紹介しました。

今回はMiddleman-Titleを使ってページのタイトルを設定したいと思います。Middleman-Titleを使うとサイトのタイトルと記事毎のタイトルを記事タイトル | サイトタイトルのように設定できます。

インストールと有効化

GemfileにMiddleman-Titleを追加します。

gem 'middleman-title'

config.rbでMiddleman-Titleを有効化し設定を加えます。

activate :title, site: 'サイト名', separator: ' | '

site:はまんまサイト名ですがseparatorは日本でよく使われている|等の区切り文字のことです。

基本的な設定はこれだけです。

タイトルタグにヘルパーを指定します。

<title><%= page_title %></title>

あとは各ページのYAML Front Matterにページのタイトルを加えます。

title: ページタイトル

これでコンパイルするとこのようなタイトルタグになります。

<title>ページタイトル | サイト名</title>

YAML Front Matterにオプションを加えるとWebサイト名を先頭に持ってこれます。

---
title: ページタイトル
title_reverse: true
---

<title>サイト名 | ページタイトル</title>

サイト全体に適用したい場合はconfig.rbに設定を加えます。

activate :title, site: 'サイト名', reverse: true

タイトルで階層構造を表現したい場合、YAML Front Matterのタイトルを配列にすることで実現できます。

---
title:
- ページタイトル
- カテゴリ名
---

<title>ページタイトル | カテゴリ | サイト名</title>

簡単に使えて便利ですね。