Hugo製のサイトをちょっと良くする

もくじ

• はじめに
• 投稿日時を<time>タグに書き込む
• OGPに対応させる
• 著作権表記
• おわりに

はじめに

Hugoで作ったこのブログをちょっと良くするために様々なカスタマイズを施したので、Tipsとして記録に残す。

なお、本稿ではHugoのテーマのカスタマイズ方法については割愛する。テーマの自作・カスタマイズについてはまく氏の記事が詳しい。

投稿日時を<time>タグに書き込む

記事の投稿日時は人間が読む分には<p>タグや<div>タグなどに入っていても問題はないが、セマンティクスと機械可読の面から考えると<time>タグを用いるのが好ましい。<time>タグを使う際はinnerTextに人間向けの日時を、datetime属性に機械向けの日時を記述する。

それを踏まえて、記事のフロントマターから投稿日時を抽出して<time>タグに書き込むコードを掲載する。

{{ $createdDateForMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $createdDateForHuman := .Date | time.Format "2006/01/02" }}
<p class="created-date">
    投稿日:
    <time datetime="{{ $createdDateForMachine }}">{{ $createdDateForHuman }}</time>
</p>

このコード内ではHugoの組み込み関数time.Formatを利用して機械向けの日時createdDateForMachineと人間向けの日時createdDateForHumanを定義し、<time>タグに書き込んでいる。画面上に表示される日時を変えたいときはcreatedDateForHumanのテンプレート文字列を書き換えればよい（ちなみに……このテンプレート文字列はGo言語のTime.Format関数がとる引数のフォーマットに準拠している）。

OGPに対応させる

OGP（Open Graph Protocol）はWebページに関するメタデータを機械可読性が高い形で記述するための規格で、主にSNSにシェアしたときに表示されるサイト名やページの概要、サムネイルなどが記載されたカードを生成するために使われる。

HugoにはInternal TemplateとしてOGP用のテンプレートが用意されているが、このテンプレートはカスタマイズができずかゆいところに手が届かない。ということで、このブログでは自前実装のOGP用のテンプレートを使っている。以下に実際のコードを掲載する。

<meta property="og:title" content="{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s - %s" .Title site.Title }}{{ end }}">
<meta property="og:description" content="{{ .Description }}">
<meta property="og:type" content="{{ if .IsHome }}blog{{ else }}article{{ end }}">
<meta property="og:url" content="{{ .Permalink }}">

このコードではog:descriptionに記事のdescriptionを指定しているため、各markdownファイルのフロントマターにdescriptionを書かないとエラーを吐く点には注意してほしい。

著作権表記

Webページや出版物に記載されることのある©マークによる著作権表記は無方式主義を採用する日本では法的な効力を持たない一方、記事や作品の著作者・著作日時が分かりやすいというメリットがあるために記載されることが多い……らしい（専門家の方にボコボコにされたくないので、これ以上の説明は割愛する）。

さて、万国著作権条約に準拠した著作権表記は©マーク、著作物の最初の発行年、著作者名の3つを含む必要がある。つまり著作権表記内の発行年の部分が記事の公開日時と異なっていたり、自動的に更新されてはまずいということだ。これは記事の著作日時を分かりやすくするという点においても同様だろう。

そこで、このブログではフロントマター内のdateプロパティを参照してフッター内の著作年を動的に設定するコードを加えている。以下に実際のコードを掲載する。

<em class="copyright">Copyright © {{ if .IsPage }}{{ .Date | time.Format "2006" }}{{ else }}2023{{ end }} <a href="//twitter.com/{{ $.Site.Params.author.twitter }}" target="_blank">{{ $.Site.Params.author.name }}</a>. All Rights Reserved.</em>

なお、このコードはconfig.toml（またはconfig.yaml）内にparams.author.nameとparams.author.twitterプロパティを追加しないとエラーを吐く。必要がなければ当該箇所を削るなりハードコードするなりしてほしい。

おわりに

Hugo製のサイトでも真面目にもろもろをやっていくためのTipsについて解説した。今後もこうした小さな改善を積み重ねていきたい。