[Sentry]OGPタグを設定する手順

WordPressのテーマ「Sentry(セントリー)」でOGP設定をする手順を紹介します。
「All In One SEO」などOGPの出力をするプラグインをお使いの場合は、SentryでのOGP設定は不要です。プラグインを利用していない場合はSentryのOGP設定を行いましょう!

OGPとは?

OGP(Open Graph Protcol)とは、FacebookやTwitterなどでURLをシェアした際に、タイトルやURL、画像などをいい感じに表示してくれる仕組みのこと。
URLが表示されるだけの場合に比べ、目を引きやすくクリックもされやすい傾向にあります。

SentryでOGPを設定する方法

元々私もプラグインを使ってOGPの出力をしていましたが、プラグインがうまく動いてくれないことがあったので、Sentryの機能としてOGP設定を追加しました。
設定画面は、Wordpressの管理画面から「外観」→「カスタマイズ」と選択してカスタム画面を起動し、「[Sentry]SNS設定」を選択します。

プラグインを使わずにOGP設定するには、まず「OGPタグを出力する」のチェックボックスにチェックを入れましょう。

あとは、設定画面にある各設定項目を記入・選択していくだけです!

  • og:image(画像):シェアした時に表示される画像です。通常は各記事のサムネイルが利用され、サムネイルが設定されていない場合は記事内の最初の画像がog:imageに設定されます。それもない場合はこちらで設定したデフォルトの画像が使用されます。
    また、トップページをシェアした場合や、カテゴリページなど記事以外をシェアした場合も、こちらのデフォルト画像が使用されます。
  • fb:app_id(FacebookのアプリID):こちらはFacebookのアプリIDを指定。Facebookでシェアした際の表示に必要な設定値です。(アプリIDの取得方法は後述します。)
  • article:author/publisher:指定するするFacebookのURLによって設定が異なります。
    Facebookの個人アカウントを指定する場合は、article:authorを。Facebookページを指定する場合は、article:publisherを選択しましょう。
    テキストエリアには、Facebookの個人ページ、またはFacebookページのURLを記入します。
  • twitter:site(Twitterのアカウント名):Twitterのアカウント名を記入します。@なしのアカウント名部分のみを設定してください。
  • twitter:site(Twitterのアカウント名):Twitterでシェアした場合の表示のスタイルを選択します。Sentryは通常のブログ記事を想定したテーマなので、選択できるのは「Summery Card」「Summary Card with Large Image」の2パターンです。
    基本的には画像が大きく表示されるのが良いので「Summary Card with Large Image」がおすすめですが、サムネイルの画像が小さいなど環境によっては「Summary Card」を表示するのもアリだと思います。

↓Summary Cardを使ってシェアした場合の表示の例

FacebookのアプリIDの取得手順

fb:app_idに指定するアプリIDの取得方法です。

  1. Facebookの開発者向けページでアプリを作成する
    開発者向けFacebook」で、「マイアプリ」から「新しいアプリを追加」を選択。
    詳しいアプリ作成方法は以下:
    https://ultimate-ez.com/2017/02/23/4669/#Facebook
    ※アプリ作成の最後に、アプリIDが表示されるのでコピーして使います。
  2. 既存アプリのアプリIDを取得する。
    すでにアプリがある場合は、同じく「開発者向けFacebook」の「マイアプリ」から対象のアプリを選択。
    ダッシュボードが表示されるので、左のメニューから「設定」→「ベーシック」を選択。アプリIDが表示されるのでコピーして使います。

以上が、SentryのOGP設定の手順でした。
プラグインを使わずに運用したい場合は、是非活用してみてください!