Jekyllのテーマを自作する 基本編 – 第5回 – titleタグとmeta descriptionを作成する

今回は、少し細かいところになりますが、titleタグとmeta descriptionをよしなに表示させるようにします。

Jekyllのテーマを自作する 基本編 記事一覧

titleタグを修正する

こんな感じに表示できるようにします。

  • トップページでは「サイトタイトル | サイトの説明文」と表示する
  • 他のページでは「ページタイトル | サイトタイトル」と表示する

if文を使って、「_layouts/default.html」のtitleタグ内を以下のように書き換えます。

{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }} | {{ site.description}}{% endif %}

meta descriptionを修正する

meta descriptionはこんな感じに表示できるようにします。

  • トップページではサイトの説明文を表示する
  • それ以外ページでは、ページの概要を表示する(160文字)

If文を使って以下の用に書き換えます。


page.excerptは、デフォルトの設定では、ページの最初の一段落を取得します(厳密には’\n\n’の前まで)。

WordPressのように、前までなどに変更する場合は、_config.ymlに以下のように記述します。

excerpt_separator: ""

「_layouts/default.html」はこのようになりました。

さて、今回は以上です。次回はトップページの記事一覧を作成します。