SlackのUnfurling

このサイトは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…

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 はunfurlingに使用する画像を収集するスクリプト。og:image の設定でも使用されている（該当のソース）。つまり、プレビュー画像を正しく表示させるためには 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とそろっていいと思うのだけれど。