Zenn
🅿️

Hugo-PaperModにおけるOpenGraph画像のフォールバック設定方法

2024/11/27に公開
Go
Markdown
Hugo
tech

タイトルについて、現状の公式ドキュメントの記載だと設定の優先順位が分かりづらかったので整理した。

参考

環境

  • Hugo: v0.137
  • PaperMod: v8.0
> hugo version
hugo v0.137.0-59c115813595cba1b1c0e70b867e734992648d1b+extended windows/amd64 BuildDate=2024-11-04T16:04:06Z VendorInfo=gohugoio
> git submodule foreach 'git log -1 --oneline'
Entering 'themes/PaperMod'
3e53621 (HEAD -> master, origin/master, origin/HEAD) Update PaperMod version to v8+ in license.css and license.js

結論

hugo.yaml の params の images でstatic/imagesに配置[1]したフォールバック対象の画像を設定する:

params:
  images:
    - "images/default-cover.jpg"

確認方法

ローカル環境

  1. hugoコマンドでビルドして以下を確認する。
    1. public/images/default-cover.jpgが生成されていること
    2. public/index.htmlのmetaタグに以下が含まれていること:
<meta property="og:image" content="https://example.com/images/default-cover.jpg">

デプロイ後

  • OpenGraphなどでデプロイしたURLを入力し、サムネイルが正しく表示されるかを確認する。

説明

PaperModのOpenGraph画像選択ロジックは以下の順序で処理される。

  1. opengraph.html
  2. _funcs/get-page-images.html

その結果、以下の優先順位で画像が選択される:

  1. Frontmatterのcover.imageで指定された画像
  2. Frontmatterのimagesで指定された最初の画像
  3. Page Bundle内のファイル名にfeature, cover, thumbnailを含む画像
  4. site.Params.imagesで指定された最初の画像

つまり、最後に読み取られるhugo.yamlの設定がフォールバックになる。

以上

脚注

  1. Hugoではstaticディレクトリに置いたファイルがそのまま公開URLに反映されるため ↩︎

GitHubで編集を提案

Discussion