まさはしFPで実装
1 OGP画像として 200px x 200px の画像を準備 余白として前後に20pxくらいあった方がよい。この大きさでないとwebサイト側にOGPコード張ってもOGP画像が認識されないので注意
2 facebook for developers へ行き管理者アカウントでログイン。
下記サイトにならいappを作る。一発目は何かプラットフォーム選択でwebが選べなかったのでもう一回新規にしたらできた。アプリIDと設定をする。公開表記若干違う。
3 wordpressには All in One SEOを仕様。jetpackはいらない
ソーシャルを有効にして、設定は、画像設定のOGP:imageソースは First image in contact で大丈夫
デフォルトのイメージにOGPのイメージをアップ
ホーム画像も同じく
facebook管理者IDを入力する箇所では、facebook設定内の管理者IDの調べ方
これでテキストのみの場合はOGPの画像で、画像アリの場合は最初の投稿画像がfacebook側にてページのリンクを張った時点で表示できる。
4 ウェブページ head内にOGPコードをはる
<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デバックを使ってキャッシュをクリアする