facebookにリンクする際の画像等の設定方法

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
  • >
  • >
  • facebookにリンクする際の画像等の設定方法
 
  facebookにリンクする際の画像等の設定方法

facebookにリンクする際の画像等の設定方法

facebookのサムネイル(アイキャッチや画像のこと)設定方法

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×630px 以上で 8メガ以内。

最小でも 600×315px で作成してくださいと書いてあります。

 

こちらは今後変更も考えられますので、詳しく知りたい方は以下よりご確認ください。

https://developers.facebook.com/docs/sharing/best-practices#images

 

それよりも小さいサイズの場合、以下のように表示されます。

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

更に 200px×200px 以下になるとエラーになってしまうようです。

 

以下URLからどのように表示されているかを確認できます

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;

 

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報

記事はありません

お探しの記事は見つかりませんでした。

東京・千葉の中国語教室

中国語教室