Jekyllでオープン・グラフ・プロトコル(OGP)の設定

フェイスブックでシェアされたときに表示される画像は,オープン・グラフ・プロトコル(OGP)で制御されています. OGPの設定がなければ,自動で適当な画像が選択されますが,意図しない画像が選択されることも多いです. そこで,Jekyllで採用されている「YAML Front Matter」を利用してOGPを設定する方法をメモしておきます.

まずは,ブログ記事などのファイルの先頭に, 下記のようにimageという変数を用意して,参照する画像を設定しておきます.

---
layout: default
image: "https://i.gyazo.com/cdf2b2e7be4e80421f55152a4b348a7a.png"
---

これで page.image という記述で設定された値を取得することができるようになります. 次に,"_includes/head.html"に下記のように page.image を利用してOGPの設定をします. このとき,条件文を利用することで page.image が設定されている場合に限ってOGPの設定を有効にしています. OGPは<meta property="og:image" content="参照画像">と記述します.

これで,フェイスブックでシェアされたときの画像が設定されます. もし画像が反映されない場合は,フェイスブックのキャッシュが原因かもしれません. この場合は,Open Graph Object Debuggerでキャッシュを削除してみましょう.

愛知県名古屋市にある椙山女学園大学 文化情報学部 向研究室の公式サイトです. 専門は情報科学であり,人工知能やデータベースなどの技術要素を指導しています. この公式サイトでは,授業で使用している教材を公開すると共に, ベールに包まれた女子大教員のミステリアスな日常を4コマ漫画でお伝えしていきます. サイトに関するご意見やご質問はFacebookまたはTwitterでお問い合わせください.