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

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

May 22, 2020 · 2 min · 215 words · Yu