GitHub Pages＋PelicanでつくるBlog：アイキャッチ・プレビュー画像の設定

OGPの設定でSNSなどでプレビューを表示させるまでの手順メモ

みずのり 2025-12-28(日) 2025-12-28(日) 1 mins
環境構築メモ github pelican ogp

アイキャッチ

＜シリーズ全体のリンクはこちら＞

Blogをつくった後、Twitter(X)などで見た場合にプレビューが表示されないので、どうにかしたいなーという状況でした。今回はプレビュー表示までの手順についてまとめます。
 ※本記事のトップ画像がプレビューされるようにしてます。


プレビュー表示はOGPの設定を使う

Open Graph Protocolというもので、HTTPへのメタ情報がOGPのイメージ情報として記載されれば、プレビューがされるとのこと。
画像サイズは1200x630、pngファイルあたりで作成しておくとよいとのことです。

参考情報


pelicanでのOGPのイメージ指定方法（たぶんテーマ依存）

（自分の使用しているテンプレートでは）記事のメタデータ（記事用Markdownの最初に記載するアレ）のシリーズにCoverを追加して該当ファイル名を追加する想定のようでした。

以下のような感じで追記。パス設定しなきゃいけない作りで雑に仕込んでます。

Cover: setup/pelican/ogpimage_preview.png

テンプレート側にCoverのメタデータに応じて、プレビュー画像を選択設定するようになってました。
Coverが存在していれば指定した画像データ、無ければpelicanconf.pyにSITELOGOとして設定したファイルが指定されてました。

pelicanconf.pyでSITELOGOとして設定したデータ（logo.png）がここで使われるとのこと。
→なので、logo.pngは画像サイズは1200x630のpngデータなりで用意するのがよいでしょう
※自分は雑なlogo.pngのデータだったので、プレビュー画像表示されてませんでした…orz

参考情報


テーマのtemplateおよびpelicanconf.pyの修正メモ

テーマ依存と思われるので、ここについては参考程度（自分用のメモ）です。

templateの修正

OPGのメタデータがHTMLに反映される箇所を修正してます。

対象ファイルはog_article.html。たぶんテーマによって変わります。
<meta property="og:image"あたりでテーマのディレクトリの検索をすると、修正対象のファイルが見つかると思われます。

og:imageの周辺部分を以下のように書き替えてます。メタデータのCoverの有無で対象の画像データが変わります。

{% if 'cover' in article.metadata %}
    <meta property="og:image" content="{{ SITEURL }}/{{ ARTICLE_BASE_PATH }}/{{ article.metadata['cover'] }}">
{% else %}
    <meta property="og:image" content="{{ SITEURL }}/{{ SITELOGO }}">
{% endif %}


pelicanconf.pyの追加

上記のARTICLE_BASE_PATHは無くてもよいですが、まあ固定だろう内容なので入れてます。

以下の感じです。

ARTICLE_BASE_PATH = "blog"

各記事のCoverメタデータには、blog以下のファイルパスを入れる感じとなります。
 ※ちょっとイマイチ


動作確認方法

Slackに自分宛でURLを送ってみる、とかがよいかもしれないです。以下のように表示されるようになりました。

Cover指定なし（logo.pngが対象となる）

logo.pngが対象

Cover指定あり

アイキャッチ

ちなみに、Twitter(X)は一度投稿するとキャッシュが残るらしいので、Cover指定なしの表示に一度失敗した後などには、しばらく反映まで待った方がよさそうです。（参考）

本記事の設定をした場合の注意事項

注意事項が2点あります。

1. メタデータCoverのパス指定方法

前節までの設定をしたうえで、本記事のメタデータは以下となります（一部省略）。blog以下のディレクトリパスを書くのがちょいメンドイですね。

Title: GitHub Pages＋PelicanでつくるBlog：アイキャッチ・プレビュー画像の設定
Slug: github-pages-and-ogp-image-preview
Summary: OGPの設定でSNSなどでプレビューを表示させるまでの手順メモ
Cover: setup/pelican/ogpimage_preview.png
TOC: show


2. プレビュー用のデータ指定だけではデプロイ用のディレクトリにコピーされない

プレビュー用のデータ指定だけではデプロイ側のoutputディレクトリにコピーされません。そのため、本記事も記事の最初にプレビュー用の画像を入れることでコピーされるようにしてます。

この辺はルートのimageディレクトリで管理するなど、工夫した方がやりやすいかもしれませんね。



Read more:
Related posts: