これまでなんとなく設定していたTwitterカードについて、きちんとhugoのテンプレートに対応させました。採用したのは、大きな画像の付いたTwitterカード。こんな感じに表示されます。
参考：keitakawamoto/orangebomb.org: My blog contents for Hugo.
やったこと
ブログ記事のトップ画像をTwitterカードに表示するため、archetypes/default.mdのFront Matterにeyecatchを追加。
+++
date = "{{ .Date }}"
slug = ""
title = ""
tags = ["", "", ""]
draft = true
eyecatch = "/img/post/original#01.jpg"
+++
あとは、<head>内にメタタグを設定。OGP設定については、以前から設定していましたが、こちらと本家サイトを参考に、トップページとそれ以外のページでtitleとimageを別々に設定して、Twitterカード用のタグを追加。
<!-- SEO -->
<link rel="canonical" href="{{ .Site.BaseURL }}">
{{ if eq .RelPermalink "/" }}
<title>{{ .Site.Title }}</title>
{{ else }}
<title>{{ .Title }} - {{ .Site.Title }}</title>
{{ end }}
<!-- og property -->
<meta property="og:title" content="{{ if eq .RelPermalink "/" }}<title>{{ .Site.Title }}</title>{{ else }}<title>{{ .Title }} - {{ .Site.Title }}</title>{{ end }}"></meta>
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:type" content="article">
<meta property="og:site_name" content="{{ .Site.Title }}">
<!-- og description -->
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<!-- og images -->
{{ if eq .RelPermalink "/" }}
<meta property="og:image" content="{{ .Site.BaseURL }}img/mwlogoicon.png">
{{ else }}
<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.eyecatch }}">
{{ end }}
<!-- Twitter Card Summary with large image -->
<meta name="twitter:card" content="summary_large_image" /></meta>
<meta name="twitter:site" content="{{ .Site.Social.writer_twitter_id }}"></meta>
<meta name="twitter:creator" content="{{ .Site.Social.writer_twitter_id }}"></meta>
<meta name="twitter:title" content="{{ if eq .RelPermalink "/" }}<title>{{ .Site.Title }}</title>{{ else }}<title>{{ .Title }} - {{ .Site.Title }}</title>{{ end }}"></meta>
<meta name="twitter:url" content="{{ .Permalink }}"></meta>
<meta name="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}"></meta>
{{ if eq .RelPermalink "/" }}
<meta name="twitter:image" content="{{ .Site.BaseURL }}img/mwlogoicon.png"></meta>
{{ else }}
<meta name="twitter:image" content="{{ .Site.BaseURL }}{{ .Params.eyecatch }}"></meta>
{{ end }}
本家サイト：Getting started with cards — Twitter Developers
Twitter Cardに表示する画像条件
| Summary card | Summary with large image | |
|---|---|---|
| アスペクト比 | 1:1 | 2:1 |
| 最小サイズ | 144 × 144 ピクセル | 300 × 157 ピクセル |
| 最大サイズ | 4096 × 4096 ピクセル | 同左 |
| 最大ファイルサイズ | 5MB | 同左 |
| 対応フォーマット | JPG、PNG、WEBP、GIF | 同左 |
はまったところ
画像ファイルは、フルパスで指定しないとアカン。最初、/img/xxxxxx.jpgとしてましたが、https://monoworks.co.jp/img/xxxxxx.jpgとなるように指定しないと、カード自体がうまく表示されませんでした。
確認サイト
下記ページにカードを表示させたいページのURLを入力して、カードが表示されればOKです。
公式：Card Validator | Twitter Developers
おしまい。
コメント
コメントなどありましたら、GitHubのディスカッションへお願いします。（書き込みには、GitHubのアカウントが必要です）