はじめに

PaperModテーマはTwitter Cardに対応しています。 ただし、Twitter Cardの設定は、config.tomlまはた各記事の*.mdのヘッダ情報に記述する必要があります。 各記事とconfig.tomlの両方に設定した場合は、各記事のヘッダ情報が優先されます。

設定方法

config.toml

config.tomlには、[params]の下に、imagesという項目を追加します。 imagesには、Twitter Cardに表示する画像のパスを記述します。 画像をstaticフォルダに配置する場合は、ファイル名だけの指定でOKです。

1
2

[params]
  images = ["twitter_card.jpg"]

フォルダ構成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

root
│  config.toml (ココに記述)
├─content
│  └─posts
│      └─記事フォルダ
│         │  index.md (ココに記述)
│         └─images
│             cover.png (ココに配置)
└─static
    twitter_card.jpg (ココに配置)

各記事のヘッダ情報

各記事のヘッダ情報には、coverの配下にimageという項目を追加します。 relativeをtrueにすると、記事の*.mdからの相対パスで指定できます。

1
2
3

cover:
  image: "images/cover.jpg"
  relative: true

記事の上部には表示させたくない場合

記事の上部にカバー画像を表示させたくない場合は、coverの配下にhiddenという項目を追加てtrueに設定します。

1
2
3
4

cover:
  image: "images/cover.jpg"
  relative: true
  hidden: true

画像のサイズについて

現状のPaperModの仕様でTwitter Cardのサイズは、summary_large_imageのみ対応しているようです。 summary_large_imageの適切なサイズ（解像度）は、諸説ありますが800 x 418（画像比1.91:1）あたりがよさそうです。

参考サイト1 参考サイト2

できれば、画像サイズをリサイズして投稿することをおすすめします。

設定の確認方法

Twitter Cardの設定を確認するには、Twitter Card Validatorを利用します。 ただし、私の環境ではうまくプレビューが表示されなかったため、もしプレビューが表示が表示されない場合は非公開のアカウント等を使って投稿前に一度確認しておくことをおすすめします。