Blog

Twitter Social Cardの設定方法

概要

この記事では、Hugoで作ったブログにTwitter Social Cardを設定する方法を説明します。

Twitter Social Cardとは

Twitter Social Cardとは、Twitterで記事をシェアした際に表示される画像のことです。 以下のような画像がTwitter Social Cardです。

Twitter Social Card

Twitter Social Cardは、以下の種類があります。

  • Summary Card
  • Summary Card with Large Image
  • App Card
  • Player Card

この中でもブログのシェアを行う場合は、Summary Card か Summary Card with Large Image を利用することが多いです。

そのれぞれのカードがどのようなものかについてはTwitterの公式ドキュメントを参照してください。

Twitter Social Cardの設定方法

Twitter Social Cardの設定方法は、以下の2つの方法があります。

  • テーマによる設定
  • テーマに依存しない設定

テーマによる設定

テーマによっては、Twitter Social Cardの設定を行うことができます。

今回は私が採用しているStackを例に説明します。

Stackでは、config.toml 対して以下のような設定を行うことでTwitter Social Cardの設定が可能です。

1
2
3
4
5
6
7
8

[opengraph.twitter]
site = ""
card = "summary" # summary or summary_large_image

[defaultImage.opengraph]
enabled = true
local = false
src = "/images/share.webp" # デフォルトで設定したいimageのパス

テーマに依存しない設定

テーマによっては、Twitter Social Cardの設定を行うことができません。 自前で実装して、設定を行う必要があります。

Hugoの公式で実装のテンプレートが公開されていますので、それを利用することで容易に実装することが可能です。

うまくいかない場合

うまくいかない場合はうまく設定が反映されていない、megaタグが正しく設定されていない可能性があります。 Twitterから提供されているデバッグツールを利用して、設定が正しく反映されているか確認してみましょう。

まとめ

この記事では、Hugoで作ったブログにTwitter Social Cardを設定する方法を説明しました。 Social Cardを設定することで、Twitterで記事をシェアした際に、より多くの人に記事を読んでもらうことができますのでぜひ設定しましょう。