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

    ×