ブログでOGPを設定する場合に、一番最初の画像をog:image や Twitter Cardsの twitter:image:srcに設定したい。
これをJekyllで設定するには、jekyll-auto-image を使って機能追加すれば実現可能だ。
jekyll-auto-image
これはmarkdownファイルの最初に出現する画像のパスを取得できるプラグインだ。
OGP以外にもアイデア次第で応用が効く。例えば記事ごとの最初の画像パスを、ループでまとめて取得したい場合ももちろん使える。
では早速インストール方法を見てみよう。
導入方法
例によって、今回もBundlerでインストールする。
もちろん gem install しても構わない。
gem install jekyll-auto-image
# もしくはbundlerの場合、Gemfileに次を追記
gem 'jekyll-auto-image'
_config.yml に使用するGemパッケージを追記。
gems: ['jekyll-lunr-js-search']
_config.yml に記事に画像がない場合のデファルト画像を設定。
image: /path/to/your/default/image.png
よし、これでいい
やることはたったこれだけだ。
使い方
設定が済めば、@page.image から記事の最初の画像を取得できるようになる。
画像がなければ、先ほど設定したデフォルト画像が使われる。
{{ page.image }} で出力可能だ。OGPであれば次のようにすればいい。
<meta property="og:image" content="{{ page.image | prepend: site.url }}">
また、Yaml Front Matterで image プロパティを設定することもできる。
この方法であれば、自分の好きな画像を記事個別に設定できる。
---
layout: post
title: Post
image: /assets/front_matter_image.png
---
設定の優先順位は次のとおりだ。
- Yaml Front Matterに
imageプロパティに画像パスを手動で設定する。 postやpageの最初の画像を取得する。_config.ymlで設定したデフォルト画像が使われる。- nil
まとめ
上記の簡単な設定手順でOGP画像を設定できるこのプラグインは是非導入してもらいたい。
少しの手間でSNSでアピールする機能を追加することは、費用対効果は高いのではないだろうか。