facebookのサムネイル（アイキャッチや画像のこと）設定方法
facebookにリンクを張ると以下のような情報が出てきます。
これはリンクさせる側のページの<head>・・・</head>内に記載します指定します。
上記の場合の記載方法は以下です。
<meta property="og:site_name" content="千葉県佐倉市のホームページ制作会社（株）ジェイプラン"><!--サイトの名前 --> <meta property="og:title" content="記事の場合はここにタイトル" /><!--サイト名などのブランド情報を含まない記事タイトル。 --> <meta property="og:type" content="website"><!--コンテンツのメディアのタイプ。 デフォルトはwebsite。ブログの場合はarticleを使用--> <meta property="og:description" content="千葉県佐倉市のホームページ制作会社です。ちらしやパンフレットのデザインや印刷もしています。ホームページやデザインのご相談等、お気軽にご連絡ください。" /><!--コンテンツの簡単な説明。 --> <meta property="og:image" content="http://jplan.me/wp-content/themes/jplantheme/img/hpfb.jpg"><!--コンテンツがFacebookにシェアされた際に表示される画像のURL。 --> <meta property="og:url" content="http://jplan.me/"><!--ページの正規URL記載--> <meta property="og:video" content="http://jplan.me/"><!--オブジェクトに対する動画のURL。ニュースフィードで動画を表示するには、og:imageタグが必要-->
画像等のURLは必ず絶対パスで指定します。
<meta property=”og:image” content=”http://xxxxxxxxx.com/img/ogimg.jpg” />
facebookのサムネイルに最適な画像サイズ（2016年10月15日確認）
Facebookのベストプラクティスには、高解像度デバイス上で最適に表示される為のサムネイル画像サイズは、
1200×630ｐｘ 以上で ８メガ以内。
最小でも 600×315ｐｘ で作成してくださいと書いてあります。
こちらは今後変更も考えられますので、詳しく知りたい方は以下よりご確認ください。
https://developers.facebook.com/docs/sharing/best-practices#images
それよりも小さいサイズの場合、以下のように表示されます。
更に 200px×200px 以下になるとエラーになってしまうようです。
以下ＵＲＬからどのように表示されているかを確認できます
https://developers.facebook.com/tools/debug/
facebookサムネイル画像など、設定した内容を変更する
Facebookクローラーは、以下の場合に内容を更新するようです。
-
オブジェクトURLがオブジェクトデバッガーに入力されたとき（オブジェクトブラウザのことかな？）
-
最初のスクレイピングから30日ごと
-
アプリがAPIエンドポイントを使用してスクレイピングをトリガーしたとき
また、変更後の画像のURLは、キャッシュにより、画像が更新されない場合があるので、元の画像のURLとは別にしたほうがいいようです。
以下の場合は更新ができません。
-
タイトル : オブジェクトに50個のアクション(「いいね！」、シェア、コメント)が関連付けられている場合
-
タイプ : オブジェクトタイプは、いったん記事で使用されると変更できません。
ページの移行とURLの変更
ページを新しいURLに移動する場合、旧URLを新URLの正規ソースとして使用すると、オブジェクトの「いいね！」、コメント、シェアを残せます。
方法については、「guide to sharing for webmasters (ウェブ管理者向けシェア機能ガイド)」をご覧ください。
参考資料：https://developers.facebook.com/docs/sharing/opengraph/using-objects#update
ちなみにFACEBOOKのタイムラインをサイトに埋め込む為には以下URLからタグを生成
https://developers.facebook.com/docs/plugins/page-plugin
Facebookイイネボタンの表示を早くする
headerに表示する javascript の以下の表示部分の後ろに
js = d.createElement(s); js.id = id;
以下のコードを追加することで、非同期読み込みにすることで表示が早くなります。
js.async = true;
コードを追加後、表示配下のようになります
js = d.createElement(s); js.id = id; js.async = true;
