Hugo のテンプレートで <meta> の keywords が配列になってしまうので調べました

SEO を考慮すると、 HTML の <meta> の description と keywords を記述しておくと良いそうですので、 Hugo のテーマを作るのに <meta> を記述しました。 が、 keywords が “word1, word2, word3” ではなく、 “[word1, word2, word3]” のようになってしまったので調べました。

環境

  • Hugo Static Site Generator v0.38.2

問題

front matter に次のように記述しました。

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

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

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

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

{{ define "main" }}
  {{ .Content }}
{{ end }}

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="記事の概要です。">
    <meta name="keyword" content="[word1, word2, word3]">
    <title>sample</title>
  </head>
  <body>
    <main>
      <p>This is sample content.</p>
    </main>
  </body>
</html>

[] で囲まれているので、配列になってしまっているようです。

Hugo Discussion

Hugo Discussion に同じような質問がありました。

<meta name="KEYWORDS" content="[word1, expression2, phrase3]">

How can I get rid of those [ ] in the rendered keywords metatag?

…略…

{{ with .Keywords }}<meta name="keywords" content="{{ range $i, $e := . }}{{ if $i }}, {{ end }}{{ $e }}{{ end }}">{{ end }}

(on an unrelated side note: Hugo 0.17 is very old and I would recommend you update to something newer)

Meta name="keywords” - support - Hugo Discussion

range で 1 つずつ処理しているようでした。

delimit

配列を分割できないかと思って調べていたら、 delimit Functions があるようでした。

delimit

Loops through any array, slice, or map and returns a string of all the values separated by a delimiter.

delimit | Hugo

配列 (array, slice, map) と delimit を渡すと、配列を delimit で区切った文字列にして返してくれるようです。

The examples of delimit that follow all use the same front matter: delimit-example-front-matter.toml

+++
title: I love Delimit
keywords: [ "tag1", "tag2", "tag3" ]
+++

delimit | Hugo

これを見ると、 front matter の keywords は配列で記述するようでした。 string で keywords: "word1, word2, word3" のように記述することはあまり良くなさそうです。

修正

front matter を次のように修正しました。

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

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

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

確認

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="記事の概要です。">
    <meta name="keywords" content="word1, word2, word3">
    <title>sample</title>
  </head>
  <body>
    <main>
      <p>This is sample content.</p>
    </main>
  </body>
</html>

うまくできたようです。

終わり

SEO について検索してみたら、 keywords はそれほど重要でもないみたいでした。

参考