Jump to the content

OGP設定に必須!Jekyllで記事の最初の画像を取得するプラグイン「jekyll-auto-image」

Jekyll

ブログで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
---

設定の優先順位は次のとおりだ。

  1. Yaml Front Matterに image プロパティに画像パスを手動で設定する。
  2. postpage の最初の画像を取得する。
  3. _config.yml で設定したデフォルト画像が使われる。
  4. nil

まとめ

上記の簡単な設定手順でOGP画像を設定できるこのプラグインは是非導入してもらいたい。
少しの手間でSNSでアピールする機能を追加することは、費用対効果は高いのではないだろうか。

注目記事

最近の記事

ぼくが書いてます

イソップ

フロントエンドエンジニア

イソップ

ページの先頭に戻る

Search results

×