無料テーマ「 Luxeritas(ルクセリタス)」でのOGP設定、とても簡単です

2019年2月12日

OGPとは、「Open Graph Protocol」の略で、Facebookや、Twitter、Google+などのSNS上でサイト(ブログ)ページを紹介するための設定情報についてのプロトコル(取り決め)のことです。Webページ(ブログのページ)をSNSでシェアした時に表示される画像は「OGP画像」「OGPイメージ」と呼ばれ、Webサイト(ブログ)側であらかじめOGPイメージに指定している画像が表示されるように取り決められています。

OGPを設定しておくと、URL(サイトのアドレス)が紹介(リンクを貼られたり、記載されたり)された際に、あらかじめ設定された画像やタイトル・説明文が表示されるようになります。
逆に設定をしていないと、不本意な画像が勝手に選ばれたり、内容が中途はんばに表示されたりと見る側にとっても情報の伝わりにくい記載になってしまう可能性があります。
最近ではテーマ設定することにより自動で組み込んでくれるもの、またプラグインで一括設定してくれるものなど、簡単に設定できる機能が色々あります。

この記事では無料テーマ Luxeritas(ルクセリタス)を使用した場合の、OGP設定について紹介します。

 

Luxeritas(ルクセリタス)のOGP設定について

Luxeritas(ルクセリタス)公式サイトでの説明は以下にあります、参照ください。
↓↓↓↓↓↓↓
SNS との連携に関する取り組み
この記事をスクロールして以下の項目に記載されています。
●Facebook、Twitter Cards の OGP 対応

 

では、実際の設定方法について

Luxeritasカスタマイズ画面の設定

WordPressのダッシュボード、左メニューで[Luxeritas]>>[カスタマイズ]をクリックします。
キャプチャー、カスタマイズ

Luxeritasカスタマイザーの画面が表示されます、[Headタグ]をクリックします。
キャプチャー、ヘッダータグ

 

画面をスクロールします。
[OGP関連] の蘭を表示されます。

デフォルト(初期設定)で以下のようになっています。
基本はこのままで問題ありません。
*チェックが外れている場合はチェックを入れましょう

キャプチャー、OGP

さらにスクロースして、
[デフォルト og:image の設定]蘭で、イメージの変更をします。

*初期設定ではルクセリタスの「猫の画像」が設定されています。
*記事にアイキャッチ画像が設定されていない場合に、この画像が使用されます。
*デフォルトのままだとSNSにシェアされたときに「猫の画像」が表示される可能性があります、ここの画像は必ず変更しておきましょう。

[画像を設定]のボタンをクリックします。
キャプチャー、画像の変更

メディアライブラリーが表示されます、
設定する画像を選択して [画像を設定]のボタンをクリックします。
キャプチャー、メディアライブラリー

[変更を保存]のボタンをクリックします。キャプチャー設定を変更

 

Facebookの設定とTwirrerカードの設定について

・Facebook:出来ればfb:app_idを使うほうが良いようです。
以下の記事にて記載しました
↓↓↓↓↓↓↓
Facebookの「app_id」の取得方法を[2019年2月]の画面で解説

 

・Twitterカードについて
以下の記事(サルワカさんブログ)がわかりやすいです

【2018年版】Twitterカードとは?使い方と設定方法まとめ

 

 

FaceBookでの設定確認

サイトのURL(TopページURL)をFBの記事に貼り付けた場合の表示状態です。

<設定前の表示>
キャプチャー、設定前

<設定後の表示>
キャプチャー、設定後

* たちまちサイトアイコン用の512x512pxの正方形の画像を選択したので、画像がぼやけて、表示内容が切れてしまいました。Facebook 画像サイズを1200px✕630pxにするように推奨していますので、そのサイズに合わせて専用の画像を作成することをお勧めします。
キレイに大きなサイズで表示されます。

 

サイトのOGPイメージを変更してもFacebookの表示画像が変更しない時は
FacebookでOGPの内容を修正しても、反映されない原因のほとんどは、キャッシュ(一度表示した内容を記憶して保存しているため、同じURLを表示しようとすると、保存済みの内容を表示する機能)によるものです。
いずれ時間が経てばキャッシュはクリアーされますが、急いで確認したい場合は以下のサイトを利用して、強制的にキャッシュをクリアーします。
Open Graphオブジェクトデバッガーのページを表示
↓↓↓↓↓↓↓(このURLをクリックします)
https://developers.facebook.com/tools/debug/og/object/ 表示された画面に該当のURLを入力し、[新しいスクレイピング情報を取得]をクリックします。キャプチャー、デバッカークリック後、スクロールして表示結果を確認します。
キャプチャー、デバック後*ただしこのサイトにもキャッシュはあります(^^)、変更後確認画像が変わらない場合は、ブラウザのキャッシュクリアーをお試しください。

 

 

投稿ページでのGOPイメージの設定

記事ページのGOPイメージ設定は、記事ページの投稿編集ページで設定できます。

ダッシュボード左メニュー、[投稿]>>[投稿一覧] をクリックします。
キャプチャー、投稿一覧

目的の投稿をクリックします。

キャプチャー、投稿一蘭

投稿の編集画面が表示されたら、一番下まスクロールします。

「og:image/twitter:image の画像」 の蘭で[画像を設定]のボタンをクリックします。キャプチャー、設定

表示させたい画像を選んで、[画像を設定]ボタンをクリックします。

キャプチャー、画像の設定

og:image が 設定されました。
キャプチャー、OGP設定

投稿の編集画面を[更新]します。

表示確認

Twitterに投稿して、表示確認した結果です。

キャプチャー、テスト投稿

 

以上です、違いは一目瞭然(^^)
せっかくシェアボタンを用意しているのなら、OGP設定も抜け目なくですね〜!