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

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

titleタグを修正する

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

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

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

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

meta descriptionを修正する

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

トップページではサイトの説明文を表示する
それ以外ページでは､ページの概要を表示する（160文字）

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

<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">

page.excerptは､デフォルトの設定では､ページの最初の一段落を取得します（厳密には'\n\n'の前まで）｡

WordPressのように､<!–more–>前までなどに変更する場合は､_config.ymlに以下のように記述します｡

excerpt_separator: "<!--more-->"

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

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }} | {{ site.description}}{% endif %}</title>
  <!-- Normalize.css -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Main CSS -->
  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  <meta name="viewport" content="width=device-width">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
</head>

<body>

<!-- サイト名とナビゲーション部分｡全ページ共通 -->
<header class="header">
  <div class="container">
    <div class="site-title"><a href="{{ '/' | relative_url }}">{{ site.title }}</a></div>
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="{{ '/' | relative_url }}">Home</a></li>
        <li class="nav__item"><a href="{{ '/about/' | relative_url }}">About</a></li>
      </ul>
    </nav>
  </div>
</header>



{{ content }}
  
  
  
<!-- フッター｡全ページ共通 -->
<footer class="footer">
  <div class="container">
    <div class="footer__container">
      <p class="copyright"><small>&copy; 2017 {{ site.author.name }}</small></p>

      <div class="social-link">
        {% if site.author.github %}
          <p class="social-link__item">
            <a href="https://github.com/{{ site.author.github }}"><i class="fa fa-github"></i></a>
          </p>
        {% endif %}
        {% if site.author.twitter %}
          <p class="social-link__item">
            <a href="https://twitter.com/{{ site.author.twitter }}"><i class="fa fa-twitter"></i></a>
          </p>
        {% endif %}
      </div>
    </div><!--footer__container-->
  </div><!--container-->
</footer>

</body>
</html>

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

次は Jekyllのテーマを自作する基本編 – 第6回 – トップページに記事一覧を作成する

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

titleタグを修正する

meta descriptionを修正する

トラックバック

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