https://blog.mocobeta.dev/posts/feed.xml

ZolaのブログテンプレートにOGPメタタグをつける

2025-05-05

このブログはZolaという静的サイトジェネレータと，Zolaコミュニティのブログテーマsereneで作っている。

Zolaもsereneもミニマルな思想で作られているためか，SNS用のOGPメタタグなどはデフォルトでは生成されない。Blueskyなどにポストしたときに少しさびしい感じなので，sereneテーマを少しカスタマイズしてOGPメタタグをつけることにした。

Zolaテーマのカスタマイズ方法は，Customizing a themeに書かれている。一つのテンプレートファイルを丸ごと置き換えで良い場合は簡単で，書き換えたいテンプレートファイルを/template以下にコピーしてきて編集すれば，デフォルトのテンプレートファイルよりそちらが優先されるようになる。たとえば今回はsereneテーマのpost.htmlを変更したいので，

  1. /themes/serene/templates/post.htmlを/templates/post.htmlにコピー
  2. post.htmlに，↓のような感じでOGPメタタグを追加する
# templates/post.html
...
{% if page.description %}
<meta name="description" content="{{ page.description }}">
<meta property="og:description" content="{{ page.description }}">
{% endif %}
...
<meta property="og:title" content="{{ page.title }} | {{ config.title }} by @{{ config.extra.id }} ">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ page.permalink }}">
{% if page.extra.cover %}
<meta property="og:image" content="{{ page.permalink }}{{ page.extra.cover }}">
{% else %}
<meta property="og:image" content="/img/search-system-book-penguin.jpg">
{% endif %}

https://github.com/mocobeta/blog/blob/main/templates/post.html

og:image は，ブログポスト内にカバーイメージがある場合はそれを使い，なければデフォルトのアイキャッチ画像にフォールバックするようにしている。

ZolaのテンプレートシンタックスはJinja2とほぼ同じで馴染みやすい。

Blueskyに投稿するとこんな感じ。

デフォルトのアイキャッチ画像は「検索システムー実務者のための開発改善ガイドブック」の表紙絵です。🐧