Hugo のテンプレートで <meta> の description に出力する内容を調べました

前回の記事では、 <meta> の keywords について調べました。 今回は、 <meta> の description について調べました。

front matter

description

the description for the content.

Front Matter | Hugo

front matter に description を記述することができるようです。

.Description

the description for the page.

Page Variables | Hugo

テンプレートからは {{ .Description }} で参照できるようです。

今まで作成してきた記事の front matter には description を記述してこなかったので、今からこれを記述するのは大変になってしまいます。

.Summary

.Summary

a generated summary of the content for easily showing a snippet in a summary view. The breakpoint can be set manually by inserting at the appropriate place in the content page. See Content Summaries for more details.

Page Variables | Hugo

Hugo の概要を出力するプロパティである {{ .Summary }} をそのまま出力できるかな。

baseof.html

baseof.html ファイル (theme/<THEME>/layouts/_default/baseof.html) を次のように作成しました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {{ block "description" . }}
      <meta name="description" content="{{ .Description }}">
    {{ end }}
    <meta name="keywords" content="{{ delimit .Keywords ", " }}">
    <title>{{ .Title }}</title>
  </head>
  <body>
    <main>
      {{ block "main" . }}
        {{ .Content }}
      {{ end }}
    </main>
  </body>
</html>

{{ block "description" . }} で description をオーバーライドできるようにしました。

single.html

single.html ファイル (theme/<THEME>/layouts/_default/single.html) を次のように作成しました。

{{ define "description" }}
  <meta name="description" content="{{ .Summary }}">
{{ end }}
{{ define "main" }}
  {{ .Content }}
{{ end }}

{{ define "description" }} で description をオーバーライドしました。 {{ .Summary }} を出力しています。

content

---
title: sample
date: 2018-04-13
description: 記事の概要です。
keywords: "word1, word2, word3"
---
*This* is sample content.

This **is** sample content.

This is ***sample*** content.

This is sample `content`.

Hugo のサーバーで確認

Hugo のサーバーで確認します。 生成された HTML は次のようになっていました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="sample This is sample content.
      This is sample content.
      This is sample content.
      This is sample content.">
    <meta name="keywords" content="word1, word2, word3">
    <title>sample</title>
  </head>
  <body>
    <main>
      <h2 id="sample">sample</h2>
      <p><em>This</em> is sample content.</p>
      <p>This <strong>is</strong> sample content.</p>
      <p>This is <strong><em>sample</em></strong> content.</p>
      <p>This is sample <code>content</code>.</p>
    </main>
  </body>
</html>

{{ .Summary }} は、 HTML のタグが取り除かれるようです。

<meta> のクォーテーションの中に改行が含まれますが、 W3C のバリデーションでエラーがなかったので、大丈夫だと思っています。

終わり

front matter の description が記述されていた場合はそちらを優先したいので、 default Function を使って、 {{ default .Summary .Description }} のように記述しようかな。

参考