MAXI design Blog

Webデザイン・Wordpress・SEO・ブログなど、収入とアクセスを改善させるノウハウ集!

ワードプレス

ワードプレスにフェイスブックのOGPを設定する方法

FacebookのOGPを設定するともろもろのメリットがある事がネット上でも数多く紹介されている。

このページに辿り着いた方はとっくにそのメリットを知っていて、設定方法を探してる方であろう。

ここではメリットや仕組みを全部すっ飛ばして、WordPressに簡単確実にFacebookのOGPを組み込む方法を紹介する。

Facebookでの作業

Facebookアプリ作成のページにアクセス
https://www.facebook.com/developers/createapp.php
Facebookパスワードを入力
Facebookのパスワード入力
右上「新しいアプリケーションを作成」をクリック

Facebook OGP設定

New App ウィンドウ
App Display Name 好きな名前を入力
App Namespace 好きな名前を入力
Facebook Platform Policies チェック
「続行」をクリック

セキュリティチェック
ここでApp IDとApp Secretをメモ

Facebook OGP設定

基本データにアプリのドメインを入力

Facebook OGP設定

Cloud Serviceはそのまま無視
下の結合方法でウェブサイトをクリック
サイトURLを入力

Facebook OGP設定

変更を保存
Open Graphは操作なし

WordPressでの作業

「open graph pro」プラグインをインストール 有効化
Set Object Type to Website
Header Image with 画像URLを指定
App IDを入力
変更を保存

「Facebook Comments」プラグインをインストール 有効化
Enable Open Graph チェック
Showは3つともチェック
App IDをいれる
設定を保存

「WP Social Bookmarking Light」プラグインをインストール 有効化
自分のWordPressのページに設置

Facebook OGP設定

デバッグ

Facebook Debugger
http://developers.facebook.com/tools/debug
自分のWordPressサイトのURLを入れる
locale Warnings が出るがこの項目がないので問題無し

これでOGP設定完了!

WordPressページのFacebook「いいね」をクリック
(WP Social Bookmarking Lightのいいね)

ヘッダー画像がまだ反映されていない!

Facebook OGP設定

ちゃんと稼働するまでに、しばらく時間がかかる。。。
翌日はどうかな?

Facebook OGP設定

出ましたー!!
タイトルも All in One SEO Pack で追加された「| MAXI design」が無くなっている。
そしてアイキャッチ画像が入っている。
バッチリできました〜

-ワードプレス
-,

Copyright© MAXI design Blog , 2019 All Rights Reserved.