このサイトはOGPを設定しているが（実装時のメモ）、このOGPなどのメタ情報から、URLのプレビューを展開することを、unfurling というらしい。

Unfurling: SlackやTwitter・FacebookなどのSNSでURLを貼ったときに、タイトル・説明・画像などのプレビューが自動表示される仕組み

Slackのunfurlingは、oEmbedやOGP、Twitter Cardのメタ情報を組み合わせて表示している。以下の解説記事が分かりやすかった。

Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your…
Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your…
Let’s start with the most obvious question first. This is what an “unfurl” is:
 medium.com

Slackだと画像がUnfurlingされない

たまたまこのサイトをSlackで共有した時、せっかく設定している og:image が表示されていないことを知る。

画像が表示されず

画像が表示されず

Open Graph ValidatorでSlackのエミュレートを見るとちゃんと og:image に設定した画像が表示されていた。どの設定が悪いのかパッと分からず、いろいろと試す羽目になってしまった。

原因は、twitter:card で summary_large_image を設定していなかったため。上に貼った記事をそれを示唆しているので、解説記事をよく読めって話。

<!-- <meta name="twitter:card" content="summary"> -->
<meta name="twitter:card" content="summary_large_image">

PaperModの実装を見る

このサイトで使用しているHugoテンプレート、PaperModが summary_large_image ではなく summary を設定しているので、これを summary_large_image に更新すればよい。

該当のソースを読むと、プレビュー画像があれば summary_large_image を、なければ summary を設定するようになっている。

 9{{- $images := partial "templates/_funcs/get-page-images" . -}}
10{{- with index $images 0 -}}
11<meta name="twitter:card" content="summary_large_image">
12<meta name="twitter:image" content="{{ .Permalink }}">
13{{- else -}}
14<meta name="twitter:card" content="summary">
15{{- end -}}

最初の行の get-page-images は og:image でも使用されている（該当のソース）、unfurlingに使用する画像を収集するスクリプト。つまり、プレビュー画像を正しく表示させるためには get-page-images.html が画像リストを返すようにすればよい。

ただ、get-page-images.html のパスが間違っていて "templates" が不要なので、それも直す必要がある。

 9{{- $images := partial "_funcs/get-page-images" . -}}
10{{- with index $images 0 -}}
11<meta name="twitter:card" content="summary_large_image">
12<meta name="twitter:image" content="{{ .Permalink }}">
13{{- else -}}
14<meta name="twitter:card" content="summary">
15{{- end -}}

まとめると、

  1. get-page-images.html スクリプトを動くようにする
  2. get-page-images.html のパスを修正する

両方を入れると、ちゃんとSlackで og:image がプレビューされた。

画像が無事表示された

画像が無事表示された

個人的には、summary の時は画像は小さくプレビューするようなunfurlingだと、Xとそろっていいと思うのだけれど。