HugoのTwitterカードサイズを変更する

ブログをHugoに移行したわけですが、何も設定しないとTwitterシェアした際のカードに画像が載りません。これは設定ファイルあるいは個別のポストで画像を指定すれば自動的に反映されます。ところが、その際のTwitterカードのサイズがsummary_large_image固定です。これも設定できた方がいいと思うんですが、issueとか検索しても特に起票された形跡がないので誰も困ってないってことなんでしょうかね？で、このサイズのカードはちょっと主張が強いのでsummaryを使いたいです。

このサイトはHugoのテーマとしてGohugo Theme Anankeを使用しています。このテーマではTwitterカードのテンプレートはHugoが提供しているものを使っています。他のテーマは調べていないですが、大体のテーマは同様なのではないでしょうか。

で、残念ながらこのinternalなテンプレートは上書きできません（少なくとも調べても情報はでてきませんでした）。そのためカードをsummaryにするのは少し手間がかかります。そんわけで、このエントリではその手順を紹介します。

画像の指定

まずはカードに表示される画像ですが、上記のドキュメントを参照してもらうと設定方法が書かれています。一番手っ取り早いのはconfig.tomlに設定することでしょう。

[params]
  images = ["site-feature-image.jpg"]

実際には使用したい画像をstaticディレクトリに配置してそのパスを指定すればOKです。

テンプレートファイルとパーシャルファイルを用意する

画像を指定しただけですとカードがsummary_large_imageになってしまいますので、これを変更していきます。やるべきことは次の2つです。

  1. internalテンプレートをコピーしてきて編集する
  2. テーマのtwitter_cardsを読み込んでいるテンプレートを上書きする

internalテンプレートをまずはコピーしてきます。コピー先はlayouts/partials/twitter_cards.htmlとしました。content=summary_large_imageとなっている箇所が3箇所ありますので、すべてcontent=summaryに変更します。

次にテンプレートですが、anankeの場合は{ananke_root}/layouts/_default/baseof.htmlが該当のファイルでした。このファイルをlayouts/_default/baseof.htmlとしてコピーします。コピーできたら読み込み箇所を変更しましょう。

{{- template "_internal/twitter_cards.html" . -}}

を

{{- partial "twitter_cards.html" . -}}

に書き換えます。

作業は以上です。実際に確認してみてください。

まとめ

設定ファイルでカードの指定ができれば早かったのですが、残念ながらその機能はありませんでした。とはいえHugoはテンプレートの上書きが簡単にできるため、少しの手間で対応できました。カードでけぇ！とお困りの方は試してみてください。

comments powered by Disqus