Jekyll on Github に OGP/TwitterCardを対応させた

Eyecatch

きっかけ

このサイトはJekyll Bootstrapベースでテンプレートを生成した後、カスタマイズしたものをGithub Pagesに置いて公開していた。Jekyll単体では標準ではOGPに対応しておらず、プラグインもなさげだったので、OGP非対応のまま数年が過ぎていた。当初はあまり気にしていなかったが、さすがにこのままでは格好悪いよね、ということでOGP対応に取り組むことにした。

参考にしたサイト

やったこと

上記のサイトのスニペットをベースに、トップページの場合と、各記事の場合の２パターンで、それぞれog:type、og:image、og:descriptionの内容を切り換えるように設定した。

og:imageについては、アイキャッチの画像を入れている場合と、入れていない場合があるので、記事毎のメタ情報でimageタグが指定していたらその画像を、そうでない場合はサイトのロゴを表示するようにした。

最初はogp.html内でif文書いてケース分けしていたが、かなり見苦しいので、各ケースをextract fileしてogp.htmlではincludeだけするようにした。

ogp.html:

<meta property="og:type" content="{% include ogp/type.html %}" />
<meta property="og:url" content="{{ site.url }}{{ page.url }}" />
<meta property="og:description" content="{% include ogp/desc.html %}" />
<meta property="og:site_name" content="{{ site.title }}" />
<meta property="og:title" content="{% include ogp/title.html %}" />
<meta property="og:image" content="{% include ogp/image.html %}" />
<meta property="article:published_time" content="{% include ogp/date.html %}" />
<meta property="article:author" content="http://www.facebook.com/{{ site.author.facebook }}" />

ogp/image.html(実際には改行は含めていない):

{% if page.image %}
    {% capture page_image %}{{ page.image }}{% endcapture %}
{% else %}
    {% capture page_image %}{{ site.url }}/assets/logo.png"{% endcapture %}
{% endif %}
{{ page_image }}

ogp/type.html(実際には改行は含めていない):

{% if page.title == site.title %}
    {% capture page_type %}website{% endcapture %}
{% else %}
    {% capture page_type %}article{% endcapture %}
{% endif %}
{{ page_type }}

ついでにTwitterCard

元々はOGP対応だけしようと思っていたが、ついでにTwitterCardにも対応した。OGPのインクルードファイルを利用して以下のように記載。

twittercard.html:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@kkd">
<meta name="twitter:title" content="{% include ogp/title.html %}">
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
<meta name="twitter:description" content="{% include ogp/desc.html  %}">
<meta name="twitter:image" content="{% include ogp/image.html %}">

キャッシュが残っていて困った

既にfb上で投稿した記事については、FacebookのDebuggerで確認してもOGP対応されて表示されなかったし、デバッガ上でFetch new scrape informationをしても駄目。半ば諦めていたが、POST送信によるキャッシュクリアを試してみたらクリアできたみたいで一安心。以下のサイトからできた。

http://www.kagua.biz/fb/cacheclear.html