HugoのZzoテーマでTwitter Card用の画像を設定する

※記事内に商品プロモーションを含むことがあります。

はじめに

HugoのZzoテーマでTwitter Cardに表示する画像を設定する方法をまとめた。
設定すると、以下のツイートのように画像が表示される。

最初に設定方法を述べ、その後に生成されるHTMLファイルに関して述べる。

環境は以下の通り。

Windows 10 Home version 21H1
Hugo version 0.79.0/extended
Zzo version May 23, 2021

検証日は2021/06/06である。
また、この記事では以下を実施していることを前提とする。

Hugoのインストール
Zzoテーマを導入して、記事のMarkdownファイルを作成

設定方法

実施事項は以下の2つである。

画像を用意する
記事のメタ情報 (Front Matter) に画像のパスを指定する

画像の用意

Twitter Cardに表示したい画像ファイルを用意する。使用可能な画像の条件は次の通り。

最小画素数：幅300×高さ157
最大画素数：幅4096×高さ4096
ファイルサイズ：5MB以下
フォーマット：JPG, PNG, WEBP, GIF

この画像ファイルを、hugo-root/static/imagesの下に置く。
imagesフォルダの下にサブフォルダを作り、その下に置いてもよい。

Front Matterの設定

次に、Twitter Cardを設定したい記事のFront Matterを編集する。
Front Matterにmeta_imageというキーを設定し、その値に、さきほど用意した画像のパスを指定する。

例：meta_image: images/ogp/conda.png

Front Matter全体は以下のようになる。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


---
title: Condaの仮想環境をYAMLファイルに保存する
description: Condaで構築した仮想環境をYAML形式のファイルに保存し、再構築する方法を解説する。
draft: false
date: 2021-05-30T09:30:00+09:00
author: Helve
enableTocContent: true
categories: 
- Python
tags: 
- Conda
- Python
image: images/icon/conda0.png
meta_image: images/ogp/conda.png
---
（この下に記事のMarkdownが続く）

この記事を投稿し、そのリンクをツイートに貼り付けると、Twitter Cardが表示される。

ちなみに、image: images/icon/conda0.pngはブログ内部の記事一覧で表示される画像である（「Condaの仮想環境を～」の左側）。

記事一覧の画像

生成されるHTMLファイルの解説

前述のようにmeta_imageに画像を設定すると、記事のHTMLでは次のように出力される。

1
2
3
4
5
6


<meta property="og:image" content="https://helve-blog.com/images/ogp/conda.png">
<meta property="og:image:url" content="https://helve-blog.com/images/ogp/conda.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:app:name:iphone" content="Helve Tech Blog">
<meta property="twitter:title" content="Condaの仮想環境をYAMLファイルに保存する">
<meta property="twitter:description" content="Condaで構築した仮想環境をYAML形式のファイルに保存し、再構築する方法を解説する。">

この1行目のog:imageで指定した画像が、Twitter Cardで表示される。
（なお、og:imageはTwitetrに限らず、Facebookなど他のソーシャルメディアなどでも利用される。）

また、3行目のsummary_large_imageは、大きなサイズでTwitter Cardに画像を表示することを指定している。
小さいサイズにするには、summaryに変更する。

なお、このHTMLは、以下のテンプレートに記述されている。
hugo-root/themes/zzo/layouts/partials/head/meta.html

一部を抜粋して以下に示す。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{{ if .Params.meta_image }}
  {{ with .Params.meta_image }}
    <meta property="og:image" content="{{ . | absURL }}">
    <meta property="og:image:url" content="{{ . | absURL }}">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:app:name:iphone" content="{{ $.Site.Title }}">
    <meta property="twitter:title" content="{{ $.Param "title" }}">
    <meta property="twitter:description" content="{{ $.Param "description" }}">
  {{ end }}
{{ else if .Params.image }}
  {{ with .Params.image }}
    <meta property="og:image" content="{{ . | absURL }}">
    <meta property="og:image:url" content="{{ . | absURL }}">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:app:name:iphone" content="{{ $.Site.Title }}">
    <meta property="twitter:title" content="{{ $.Param "title" }}">
    <meta property="twitter:description" content="{{ $.Param "description" }}">
  {{ end }}

すなわち、Front Matterでmeta_imageが指定されている場合、その画像をog:imageとして利用する。

なお、summary_large_imageではなく、小さいサイズのsummaryとしたい場合、上記のテンプレートの文字列を置き換えればよい。
（このとき、Zzoの元のファイルを直接修正するのではなく、meta.htmlをhugo-root/layouts/partials/head/にコピーして、そのコピーしたファイルを修正しても良い。そうすると、Hugoはhugo-root/layouts/以下のファイルを優先して使用する）

参考

Summary with large image _ Docs _ Twitter Developer Platform