hugo-twitter-card

これまでこのブログはTwitterなどにリンクを貼った際にサムネイル画像を表示できていなかったので、Twitterカードで画像を表示できるようにしました。また、Twitterだけではなく、Slack（コミュニケーションツール）などでも画像が表示できるにしています。

Twitterカードとは

サルワカくんの記事が分かりやすかったので、詳しく知りたい人は以下記事を読んでみてください。
【2020年版】Twitterカードとは？使い方と設定方法まとめ

簡単に説明すると、Twitterでよく見かけるURLを貼ったときに表示されるやつです。

Twitterカード表示対応

僕が現在使っているHugoのテンプレートはBeautiful Hugoなので、このテンプレートでの対応方法を書きます。

今回重要なファイルは2つです。

  • themes/beautifulhugo/layouts/partials/seo/twitter.html
  • themes/beautifulhugo/layouts/partials/seo/opengraph.html

ファイルの中身を以下に書きます。

// themes/beautifulhugo/layouts/partials/seo/twitter.html


{{- with .Title | default .Site.Title }}
  <meta name="twitter:title" content="{{ . | truncate 70 }}" />
{{- end }}
{{- with .Description | default .Params.subtitle | default .Summary }}
  <meta name="twitter:description" content="{{ . | truncate 200 }}">
{{- end }}
{{- with .Params.share_img | default .Params.image | default .Site.Params.logo }}
  <meta name="twitter:image" content="{{ . | absURL }}" />
{{- end }}
  <meta name="twitter:card" content="summary" />
{{- with .Site.Author.twitter }}
  <meta name="twitter:site" content="@{{ . }}" />
  <meta name="twitter:creator" content="@{{ . }}" />
{{- end }}

// themes/beautifulhugo/layouts/partials/seo/opengraph.html


{{- with .Title | default .Site.Title }}
<meta property="og:title" content="{{ . }}" />
{{- end }}
{{- with .Description | default .Params.subtitle | default .Summary }}
<meta property="og:description" content="{{ . }}">
{{- end }}
{{- with .Params.share_img | default .Params.image | default .Site.Params.logo }}
<meta property="og:image" content="{{ . | absURL }}" />
{{- end }}
{{- with .Site.Params.fb_app_id }}
<meta property="fb:app_id" content="{{ . }}" />
{{- end }}
<meta property="og:url" content="{{ .Permalink | absLangURL }}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="{{ .Site.Title }}" />

ここでみてほしいのは、.Params.share_imgです。 Beautiful Hugoでは各記事のFront Matter（mdファイル内の一番上にtitleとかdateが書いてあるところ）に、share_img: "表示させたい画像のパス"のように書いてあげればTwitterカードに画像を表示できます。

僕はTwitterカードの画像を大きく表示させたかったので、
<meta name="twitter:card" content="summary" />
→ <meta name="twitter:card" content="summary_large_image" />に変更しました。 テンプレートを変更したいときはオーバライドをします。 オーバライドの仕方はプロジェクトのルートディレクトリ配下にlayout/partials/seo/のディレクトリを作成して、twitter.htmlを作成します。このファイルに修正したコードを書くことでthemes/beautifulhugo/のテンプレートより優先的に呼び出されます。

上記対応を完了させると、以下のように表示されます。

twitter-card-sample

対応完了したのに、Twitterカードが表示されない場合

Twitter側でキャッシュが残っているせいで、対応完了したのに反映されていないことがあります。 その場合は、下記のページにアクセスしてください。
Card validator

アクセスしたら、Card URLに表示させたいTwitterカードのURLをペーストして、「Preview card」ボタンを押してください。するとTwitterカードのプレビューが表示されます。これでキャッシュが更新できるはずですが、変化なしの場合は再度「Preview card」ボタンを押してみてください。

まとめ

Hugoのテンプレートには大抵の必要な機能はあるので、使いやすいです。カスタマイズするときも少し慣れれば、自由にいじれるのでぜひ使ってみてください。