+++

「記事のリンクを一覧で並べた時、文字だけだと少し寂しくてクリックされにくい…」
「記事の内容が一目見て直感的に伝わる画像（サムネイル）を表示したい！」

そんなご要望にお応えして、記事ごとに個別の**アイキャッチ画像（サムネイル）**を設定し、表示できる機能を追加しました。
Front Matterに一行追加するだけの非常に簡単な設定で、サイトの見栄えと読者の反応が劇的に変わります！

設定方法

記事の Front Matter に、image という項目を追加して、画像のパスを書くだけです。

+++
title = '私の記事タイトル'
date = 2024-01-01T00:00:00+09:00
image = "images/my-thumbnail.jpg"  # 👈 これを追加！
+++

画像はどこに置く？

基本的には assets/images/ フォルダの中に置くのが一番簡単で、今後の自動最適化（Hugo Pipes）にも活用しやすく最新の標準です。（従来の static/images/ に置いても表示は可能です）。
例えば assets/images/cat.jpg に画像を置いた場合、パスは images/cat.jpg と書きます。

推奨サイズについて (OGP対応)

アイキャッチ画像は、SNSでシェアされた時（OGP）にも使われることが多いです。
そのため、1200x630px (比率 1.91:1) で作成するのが世界的な標準（推奨）サイズです。

  • 1200x630px: FacebookやTwitter(X)の大きいカードで綺麗に表示されます。
  • このサイズで作っておけば、サイト内のサムネイルとして縮小表示されても、SNSでシェアされても、両方でバッチリです！

どこに表示される？

設定した画像は、以下の場所でサムネイルとして表示されます。

  1. 記事のタイトル下（一番目立つところ！）
  2. 記事下の「あわせて読みたい」
  3. フッターの「前の記事」「次の記事」リンク

画像があるだけで、クリック率（回遊率）がグッと上がりますよ！
ぜひお気に入りの写真を設定してみてください。

【上級編】記事の冒頭に画像を表示するには？

「設定した画像を、記事のタイトルのすぐ下にも表示したい！」という場合は、テーマのHTMLファイルを少し編集します。

themes/my-tutorial-theme/layouts/page.html を開き、タイトルの下あたりに以下のコードを追加してください。

<!-- アイキャッチ画像 -->
{{ with .Params.image }}
  {{/* assetsフォルダから元画像を取得し、幅1200pxのWebP形式に自動変換（軽量化）する */}}
  {{ $image := resources.Get . }}
  {{ if $image }}
    {{ $hero := $image.Resize "1200x webp" }}
    <div class="featured-image">
        <img src="{{ $hero.RelPermalink }}" width="{{ $hero.Width }}" height="{{ $hero.Height }}" alt="{{ $.Title }}">
    </div>
  {{ else }}
    {{/* assetsに見つからない場合（今までのstaticにある場合などのフォールバック処理） */}}
    {{ $filePath := printf "static/%s" . }}
    {{ if fileExists $filePath }}
    <div class="featured-image">
        <img src="{{ . | relURL }}" alt="{{ $.Title }}">
    </div>
    {{ end }}
  {{ end }}
{{ end }}

これだけで、記事ページを開いた時にドーンと画像が表示されるようになります！

魅力的な画像を設定してクリック率を向上させよう

記事タイトル文字だけのリンクに比べて、アイキャッチ画像が存在するだけでサイト内でのクリック率・回遊率は大きく跳ね上がります。
最適な比率（1200x630pxなど）で作成した画像は、後述するSNSシェア設定（OGP）の際にも美しく表示されるため、ぜひすべての記事に内容が一目で伝わる魅力的なサムネイルを設定しておきましょう！