WEBサイト作成

FacebookのOGP設定とは?無料テーマLightning(ライトニング)で連携する方法

FacebookとOGB設定

手順

  1. Facebookアカウントを取得
  2. FacebookのアプリID(app_id)を取得
  3. WordPressにプラグインを新規追加(インストール)

この流れで進めます。
FacebookアカウントIDとパスワードはすでに手元にある前提で進めていきます。

FacebookのOGP設定に必要なアプリID(app_id)の 取得方法

全体の流れは下記になります。順番にみていきましょう。

  1. Facebook for Developersに登録
  2. アプリの作成
  3. アプリを設定してID取得

※FacebookforDevelopersの登録には、Facebookアカウントが必要です。
先にFacebookでアカウントを作成し、電話番号認証を行っておきましょう。

Facebook OGP設定には、アプリID(app_id)と呼ばれる15桁の数字を使用します。

fb:app_idとは?

サイトやブログの管理者をFacebookに伝えるためのタグです。

いいねの数やどれくらいの人が見てくれたのか、どの時間帯がユーザーの目にとまりやすいかなどといった
Facebookからサイトへのトラフィック分析ができるFacebookインサイトを利用できるようになります。

FacebookでのOGP設定とは?

Facebookでは、基本的なOGP設定に加えて「fb:app_id」を設定します。

App IDはfacebook for developers (https://developers.facebook.com/apps)にて取得できます。

OGPの設定Facebook用アプリを作成する際に必要なIDです。
さっそく、登録していきましょう。

Facebook for Developersに登録

下記よりアクセスして、
(https://developers.facebook.com/apps)
画面右上の「スタートガイド」>「次へ」を押します。をクリックします。

電話番号認証が済んでいない場合、SMS・電話で電話番号を認証する作業があります。

チェックを入れて、「メールアドレスを認証」を選択します。

当てはまる役割を選択して「登録完了」>「開発者」を選択をします。
※Facebook for Developersの登録が完了しました。

次に、アプリを作成していきます。

アプリはFacebookやインスタグラムでアカウントを2つ作成するようなイメージです。
複数作成(もちろん削除も)できます。

「アプリを識別する番号 = アプリID」

「最初のアプリを作成」を押して、アプリを作成していきましょう。
※2つ目を作成する場合はグリーンのボタン「アプリを作成」を押します。

OGP設定用にアプリIDを取得することが目的のアプリを作成します

「他のオプション」を選択>アプリの表示名の入力>アプリを作成
OGP設定だけが目的であればなんでも良いので「サイト名+OGP」などでいいです。

※「例:サイトURL_ogp」
※表示名はいつでも変更できます。

セキュリティチェックを実行します。

これでアプリを作成できました。

・管理画面から「ベーシック」を選択します。
・アプリに関する設定項目がありますので、「プライバシーポリシーのURL」にプライバシーポリシーページのURLを入力し、当てはまるカテゴリを選択します。
・ページ下部にある「プラットフォームを追加」をクリックして、「ウェブサイト」を選択します。
・ウェブサイトのURLを入力して「変更を保存」をクリックします。

最後に作成したアプリを開発中からライブモードに変更します。

画面左上の「開発中」を押しましょう。
ライブモードに切り替えますか?>「モード切り替え」を押します。

ライブモードにできましたので、アプリID(例:012301230123012)をコピーします。

WordPressの作業→「Facebook OGPの設定」にて、アプリIDを入力し、OGP用画像を選択したら設定完了です。

次に進んでくださいね↓

参考サイト
https://tcd-theme.com/2018/01/facebook_app_id.html

WordPressにプラグインを新規追加(インストール)

WordPressにログインします。
VK All in One Expansion Unit(無料)と言うプラグインを追加します。

VK All in One Expansion Unit(無料)とは?追加の方法

無料テーマLightning(ライトニング)の制作会社が作った無料のプラグインです
ダッシュボード>外観>プラグイン>プラグインの新規追加>検索して「有効化」を押下します。

OG タグを簡単に設置

Facebook でシェアされる際に、画像や記事概要を Facebook のタイムラインへ表示するために必要なもの(meta)タグです。
VK Ex Unit> 有効化設定メイン設定 > SNS Settings>social media Cooperationにチェック

管理画面「メイン設定 > SNS Settings > OGタグ」にチェックを入れるだけです。
※自動的に html head 内へ OG タグを記述してくれる。

画像は「1280x720ピクセル」などの16:9の比率で画像を作るとキレイに表示できる

プラグインとは

拡張機能と呼ばれ、バージョンアップさせるものです。
難しい知識がなくても設置や管理が簡単にできたり、他のソフトと連携させるなど様々なものがあります。

不要になれば、アプリケーションに影響を与えることなく削除できます。

VK All in One Expansion Unit(無料)とソーシャルメディア

ブックマークボタン・OGタグ、twitterカードタグ・シェア時のタイトルの書き換えなどソーシャルメディアと連携します。

機能は個別に有効 / 無効の設定を行うことが簡単可能です。
必要な機能だけ有効化して使うことができます。

OGタグとは?

Facebookでシェアされる際に、画像や記事概要を Facebook のタイムラインへ表示するために必要なモノです。 (meta タグ)
OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、
設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのhtml要素です。

まとめ

いかがでしたでしょうか。
ここまででたくさんの用語が出てきて、難しかったかなと思います。
SNSでシェアする際に小さな画像=ヘッダー画像のようなものを表示させることは、
やっておいた方が、効果があると思うのでオススメです。

タグ

スポンサーリンク

  • この記事を書いた人

近所のWEB屋さん

WEBディレクター/動画編集/デザイナー/として活動。 都内のカフェによく出没する、カフェを愛する自由人。 食べること・カラダにいいこと・オーガニック・ファスティング・発酵の話題が大好き。 調べたこと、気になったこと「もしかしたら誰かのお役に立つかも?」なことを発信していきます。 趣味は動画とカメラ。好きな雑誌はHanako。

オススメの記事

-WEBサイト作成

© 2024 MUA Design Powered by AFFINGER5