この記事の推しの写真

はじめに

先日、Adobe Signを試したことを投稿しましたが、これをFacebookに投稿したら、なぜか弊社ロゴマークがプレビュー画像となってしまいましたので、記事に合わせた画像が選ばれるように変更してみました。

弊社はJekyllを使用していますが、テーマ次第で記述するファイルが変わります。通常は_layout中のdefault.htmlなどになりそうですが、弊社の使うjekyll-cleanでは、_includes下のheader.htmlを編集することになりましたので、この記事を参考にされる場合はご注意ください。

対象読者

  • Jekyllを使ってウェブサイトを作っている。
  • Facebookなどに投稿した時のプレビュー画像を指定したものにコントロールしたい。

設定

いくつかのサイトを見て回りましたが、自分のケースに「これだ」と当てはまるものが無かったので、適当に組み合わせてみました。具体的には_includes/header.htmlに以下のコードを<head></head>の間の最後の方に挿入しました。

    <meta property="og:url" content="\{\{ site.url \}\}\{\{ page.url \}\}" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="\{\{ page.title \}\}" />
    <meta property="og:site_name" content="\{\{ site.title \}\}" />

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@kkd" />
    <meta name="twitter:title" content="\{\{ page.title \}\}" />
    <meta name="twitter:url" content="\{\{ site.url \}\}\{\{ page.url \}\}" />

    \{\% if page.description \%\}
        <meta property="og:description" content="\{\{ page.description \}\}" />
        <meta name="twitter:description" content="\{\{ page.description \}\}" />
    \{\% else \%\}
        <meta property="og:description" content="\{\{ site.description \}\}" />
        <meta name="twitter:description" content="\{\{ site.description \}\}" />
    \{\% endif \%\}

    \{\% if page.preview \%\}
        <meta property="og:image" content="\{\{ page.image \}\}" />
        <meta name="twitter:image" content="\{\{ page.image \}\}" />
    \{\% else \%\}
        <meta property="og:image" content="\{\{ site.logo-image \}\}" />
        <meta name="twitter:image" content="\{\{ site.logo-image \}\}" />
    \{\% endif \%\}

※Jekyllで使う二重波括弧で括る記述や波括弧%で括る記述はコードブロック内でもJekyllエンジンが機能してしまいます。やむなくエスケープ文字”\“を追加しました。実際にコードを記述する場合はこの\{\{...\}\}や\{\%...\%\}から\文字を削除して記述して下さい。

OGPに沿うFacebook用とTwitter Cardという仕様を使うTwitterとの併記になっています。site.logo-imageは私が後から_config.xmlに追記したものですから、適切なものに置き換えてください。詳細な説明は省略します。

記事を書く

この設定をした後、記事を書きます。記事の冒頭のYAML形式の設定部分に以下のように書きます。

---
layout: post
title: "FacebookやTwitterで記事を投稿した時に期待する画像が表示されるように、弊社Jekyllの設定を変更してみました。"
date: 2022-04-27 19:40 +0900
keyword: Facebook, Twitter, Open Graph Protocol (OGP), Twitter card
description: "弊社の設定の場合です。Metaタグが埋め込める場所に記述しましょう。"
preview: https://mocketech.com/images/2022-04-27-setting-ogp-tag.assets/この記事の推しの写真.jpg
---

Facebookなどに投稿すると、previewタグに書かれたURLの写真がプレビュー画像として選択されます。以下のような感じ。

image-20220427202210473

まとめ

  • <head></head>の間にOGP等のための適当なMETAタグを記述するとFacebookやTwitterなどへ記事を投稿した際に、期待した画像をプレビュー画像にできる。
  • 手元テスト環境と実環境ではURLなどに違いが出るので、最終確認はちゃんとやりましょう。

謝辞

  • OGPを教えてくれたK.I.さん(元同僚)にSpecial Thanksです。

参考