最新版 facebook noOGPをwordpressやウェブに表記して facebookへ反映させる方法

まさはしFPで実装

1  OGP画像として 200px  x  200px の画像を準備 余白として前後に20pxくらいあった方がよい。この大きさでないとwebサイト側にOGPコード張ってもOGP画像が認識されないので注意

 

2 facebook for developers へ行き管理者アカウントでログイン。

下記サイトにならいappを作る。一発目は何かプラットフォーム選択でwebが選べなかったのでもう一回新規にしたらできた。アプリIDと設定をする。公開表記若干違う。

FacebookのOGP設定に必要なfb:app IDの取得方法

 

3 wordpressには All in One SEOを仕様。jetpackはいらない

ソーシャルを有効にして、設定は、画像設定のOGP:imageソースは First image in contact  で大丈夫

デフォルトのイメージにOGPのイメージをアップ 
ホーム画像も同じく

 

facebook管理者IDを入力する箇所では、facebook設定内の管理者IDの調べ方

Facebook 管理者 IDの確認方法、ユーザーネーム取得方法

 

これでテキストのみの場合はOGPの画像で、画像アリの場合は最初の投稿画像がfacebook側にてページのリンクを張った時点で表示できる。

 

 

 

4   ウェブページ head内にOGPコードをはる

https://ferret-plus.com/610

 

<html prefix=”og: http://ogp.me/ns#”>

↑ html5の時は<html>タグに追加表記

 

 

<!–FaceBook OGP–>

<meta property=”og:title” content=”まさはしFP家計相談所”>
<meta property=”og:type” content=”website”>
<meta property=”og:description” content=”家計診断ならおまかせ!家計のやりくり・節約なら、まさはしFP家計相談所”>
<meta property=”og:url” content=”http://fuji-office.com”>
<meta property=”og:image” content=”http://fuji-office.com/image/fb1.jpg”>
<meta property=”og:site_name” content=”まさはしFP家計相談所”>

<meta property=”fb:app_id” content=”1967051363547689″ />

 

ウェブでのOGPが表記されない時はfacebookデバックを使ってキャッシュをクリアする

http://www.kagua.biz/fb/cacheclear.html