【コピペでできる、WordPressでの、FacebookのOGPをプラグインなしで作成する方法の解説です。
なぜ必要か？
Facebookでリンクを貼ると、OGPというサムネイル、タイトル、概要などがカード形式で表示されるので、ユーザービリティが高まります。
OGPのイメージ
Web365とは
本題のまえに、自己紹介です。
クライアントの外部・外注のWeb担当としてWebサイトを集客売上増を目的に、分析・改善・実行まで一貫体制で運用代行しております。
この記事でわかること
FacebookのOGPは、Facebookでマイアプリを作成する
FacebookのOGPは、FacebookでOGP用のマイアプリを作成する必要があります。
そのアプリのIDをサイトに決まったコードで埋め込むことで、FacebookのOGPが設定できます。
※Facebookアカウント登録済みの前提で進めます。
手順は下記です。
- Facebook for Developersに登録
- アプリを作成
- アプリを設定してIDを取得
Facebook for Developersに登録
まず、Facebook for Developersに登録しましょう。
下記、トップページ、赤枠がログイン済みなら、マイアプリ、スタートガイド、まだなら、ログイン、など表示されていますので、クリックします。
つづいて、アカウント登録です。
レジスターの登録です。次へをclickします。
コンタク情報です。メールアドレスを登録します。
次に、自身の属性について選択します。開発者を選択します。
アプリを作成
トップページから「アプリを作成」を選択
アプリを設定してIDを取得
アプリができたら、アプリ内のダッシュボードにいき、左メニュー、設定の下層の「ベーシック」を選択します。
- 表示名（記入済み）
- プライバシーポリシーのページURL（自身のサイトのプライバシーポリシーページ）
- カテゴリー（ビジネスを選択）
つづいて、同じ設定ページの最下部に、「プラットフォームを追加」で「Website」を選択し、自身のサイトを入力します。
設定は完了しました。
最後に、アプリ設定の上部にある「開発中」のタブを「ライブ」に切り替えます。
ライブに切り替えが完了しました。
これで、アプリが起動している状態で、OGPの利用設定は完了です。
アプリのIDをコピーします。こちらをサイトに設定していきます。
WordPressでプラグインなしで、FacebookのOGPを設定する方法
続いて、WordPressでプラグインなしで、FacebookのOGPを設定する方法の解説です。
プラグインなしで作成する理由
コードが扱えるなら、プラグインはできるだけ使用しないほうが良いです。
プラグインのメリットは
- 自分でコードを書かずに機能を利用できる
プラグインのデメリットは
- プラグインは機能過多で、重くなる要因
- 定期メンテンナンスが必要になる
- 開発者自体のメンテンナンスがないと、サイトセキュリティが下がる
です。
当方も、クライアントサイトなど、工数加味して、問題なければ、できるだけプラグインなしで実装をします。
さて、
FacebookのOGP設定が諸々できたら、
アプリのIDをコピペして、下記の手順に進みます。
function.phpに下記コードでheadに挿入させる
function.phpに下記コードでheadに挿入させ、対応
function my_meta_ogp() {//og:type$ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';
//og:imageif ( is_singular() && has_post_thumbnail() ) {$ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');$ogp_img = $ps_thumb[0];} else {$ogp_img = 'ここはデフォルトのアイキャッチ画像のURL';}
// facebookのapp_id（設定する場合）$insert.='<meta property="fb:app_id" content="ここにapp_idを">'."\n";echo$insert; }} //END my_meta_ogpadd_action('wp_head','my_meta_ogp');//headにOGPを出力FacebookのOGPテスト
諸々、設定完了したとろこで、OGPのテストをします。
下記で、対象のページを入力し、デバッグをクリックすると、OGPがプレビューできます。
シェアデバッガー – Facebook for Developers
すると、下記のような形でプレビューできます。成功ですね。
以上です。
ご活用ください。
■お気軽にご相談ください
Webサイトをより多くの方に認知してもらうために、OGPは大切です。
Webサイトの細かい改善は担当をつけて継続的に対応することをおすすめします。
Webサイトの分析提案や改善実行など相談したい方はこちらよりお気軽にご連絡ください。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
どうぞWeb365の「自社のWebサイトを自身で作りたい、改善したい人のオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
