HugoでTwitterカードを表示させる

Fri, 22 May 2020 22:38:37 +0900

これまでこのブログは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 on YAGI BLOG

HugoでTwitterカードを表示させる

Twitterカードとは

Twitterカード表示対応