はじめに
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