web-dev-qa-db-ja.com

Facebook Open Graph Imagesの最小の幅と高さはどのくらいですか？

Facebookのオープングラフで特定のURLに関連付けられた画像は50 x 50を超える必要があることを読みました

ただし、Facebook Objectデバッガーを実行すると、次の警告が表示されました。

「小さなog：image：og：imageで参照されるすべての画像は、両方の次元で少なくとも200pxである必要があります。指定されたURLのタグog：imageを持つすべての画像をチェックし、最小仕様を満たしていることを確認してください。」

URLは http://www.famousbirthdays.com/people/charlie-chaplin.html で、画像は[オブジェクトのプロパティ]の下に表示されます

画像を200 x 200より大きく変換する必要がありますか？または、そのままにしておくことはできますか？現在は65 x 75の画像です。

ご協力いただきありがとうございます！

facebookfacebook-graph-apifacebook-opengraph
50
Evan B

今日、私はこの質問に対してはるかに明確な回答を得ました（ Open Graphデバッガーツール から）：

Small og：image：og：imageで参照されるすべての画像は、両方の次元で少なくとも200px、1500x1500が推奨されます。 （最大画像サイズは5MBです。）指定されたURLのタグog：imageを持つすべての画像をチェックし、推奨仕様を満たしていることを確認してください。

og：imageは大きくする必要があります：og：imageが十分に大きくない場合。少なくとも200x200、できれば1500x1500の画像を使用してください。 （最大画像サイズは5MBです。）代わりに画像...が使用されます。

[〜＃〜] yes [〜＃〜]、開いているグラフ画像を少なくとも200x200ピクセルに変換する必要があり、大きいほど良い。

画像が200x200より小さい場合、Facebookはページで利用可能な大きな画像（使用している場合）を使用しようとします。

デバッガーによって返される同じ情報は、オープングラフのドキュメントの 「メディアコンテンツの配布の最大化」トピック、アイテム3：タグ にあります。

67
Luciano Carvalho

編集：Facebookドキュメントを修正：

ルチアーノの答え から：

og：imageは、両方の次元で少なくとも200pxである必要があり、1500x1500が推奨されます。 （最大画像サイズは5MBです。）

20
Zach Lysobey

かなり明確です。 130x110pxを超えることはできません。各辺は少なくとも200pxでなければなりません。 TARDISに画像を保存する場合、これは完全に可能です。

真剣に、私は自分自身にこれに出くわしました。ページが結構前に結構順調に通過したので、私はかなり混乱しました。これは、ドキュメントで更新されていないタイムラインレイアウト用に設計された変更であることを期待しています。私が見つけることができないのは、og：imagesが「少なくとも」片側あたり200pxでなければならない場合、最大値と現在の推奨サイズは何ですか。確かにWTF。

スコット

14
Scott Witte

私は頭を悩ませたのと同じ問題を抱えていました。wordpressサイトを使用しているので、wwwをドロップしなければなりませんでした。あなたのサイトアドレスの_wordpress admin > settings >general_/wordpress addressなど。これにより、他のURLエラーを克服できます。
画像の問題に関しては、ヘッダーファイルにこれを入れるとうまくいったということしか言えません。これを下に追加しました。

_<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:image" content="http://yourwebsite.com/images/yourimage.jpg"/>
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<meta property="og:title" content="your website page title"/>
<meta property="og:url" content="http://yourwebsite.com"/>
<meta property="og:site_name" content="site name and content etc"/>
<meta property="og:description"content="description of site" />
<meta property="og:type" content="Website"/>
_

ワードプレスでは、<title><?php wp_title( '|', true, 'right' ); ?></title>はそのままにしておきました。

また、私のインスタンスの他の投稿で示唆されているように、このコード：_<link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / >_が動作しませんでした。削除するとすぐに修正されました。

500 x 500の画像を使用しました。幸運..誰かの痛みを救うことを願っています。

7
Muz

次のルールに従ってください。

  1. 「高解像度デバイスで最高の表示を得るには、少なくとも1200 x 630ピクセルの画像を使用してください。」
  2. 「画像をトリミングせずにニュースフィードで完全な画像を表示するには、画像をできるだけ1.91：1のアスペクト比に近づけてください。」
  3. 画像の推奨幅は1500pxです

上記の原則に従って、優先画像の幅は1500px、高さは786px（アスペクト比1.91：1を保持）です。

出典： Facebook：ベストプラクティスの共有

6
eriklinde

仕様のバグのようです。回避策としては、画像を200pxにして、見たくないものをクリップするか、オリジナルが十分に大きい場合は縮小します。たとえば、画像が25x25ピクセルの場合、175pxを両方の次元に追加し、overflow：hidden cssプロパティと25x25の幅/高さを持つdiv内にその画像をネストできます。一番きれいではありませんが、うまくいくでしょう。

Facebookでバグチケットを開いて、不十分なドキュメントの問題に対処し、これが実際の仕様またはバグであるかどうかを明らかにしました。 http://developers.facebook.com/bugs/210269722417284

4
Mike

ドキュメントを更新したようです：

画像は少なくとも50px x 50px（最小200px x 200pxが望ましい）で、最大アスペクト比が3：1でなければなりません

developers.facebook.com/docs/reference/dialogs/feed

4
Josh

Facebook開発者ページから：

高解像度のデバイスで最高の表示を得るには、少なくとも1200 x 630ピクセルの画像を使用してください。少なくとも、600 x 315ピクセルの画像を使用して、より大きな画像のリンクページ投稿を表示する必要があります。

詳細については、こちらをご覧ください こちら 。ポイント番号4を確認してください

3
Prasad Nevase

高解像度のデバイスで最高の表示を得るには、少なくとも1200 x 630ピクセルの画像を使用してください。少なくとも、600 x 315ピクセルの画像を使用して、より大きな画像のリンクページ投稿を表示する必要があります。

リファレンス： https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images

2
ZoulRic

から https://developers.facebook.com/docs/plugins/checklist/#opengraphtags

  1. 適切なOpen Graphタグを使用して配信を促進する

Open GraphタグをページのHTMLに含めると、FacebookクローラーがコンテンツをFacebookで共有するときに、より良いプレビューを生成できます。

実装する必要がある基本的なOpen Graphタグは次のとおりです。

タグの説明

  1. og：titleブランディングを除く記事のタイトル。
  2. og：site_name Webサイトの名前。例えばimdb.comではなくIMDb。
  3. og：url投稿の一意の識別子であるURL。 SEOに使用される正規のURLと一致する必要があり、セッション変数、ユーザー識別パラメーター、またはカウンターを含めることはできません。これを不適切に使用すると、いいねや共有はこのURLに対して集約されず、URLのすべてのバリエーションに分散されます。
  4. og：descriptionコンテンツの詳細な説明。通常は2〜4文です。
  5. og：imageリンクを共有するときに表示する画像のURL。少なくとも1200x630ピクセルの画像を使用することをお勧めします。
1
user2164305

投稿から、OGコンセプトを使用してFacebookに投稿を共有したいようです。このため、画像のminimumサイズは200px（x ）200px。これはFBによる標準の寸法であり、特定のサイズの画像が利用できない場合、同じ寸法のページ内の次の画像が使用されます。

最小画像サイズ最小画像サイズは200 x 200ピクセルです。これより小さい画像を使用しようとすると、URLデバッガーでエラーが表示されます。 this Link >> で確認してください

1
Hari kris

ドキュメントが再び更新されました！

og：imageは、あなたが好きなだけ大きくすることができます-whoop

彼らは以下を推奨しています：

  • 少なくとも600x315ピクセル
  • 理想的には比率で1.91：1
  • ファイルサイズが5MB以下
  • しかし、あなたが好きなように大きい！

また、複数のog：imagesを追加して、ユーザーが使用する写真を選択できるようにすることも忘れないでください。

1
sidonaldson

私は同じ問題に遭遇しました。私は徹底的なテストを実行しなかったため、画像を表示するための要件を正確に言うことはできません。画像を200x> 200（具体的には350x350）に切り替えた後、表示されたと言えます。

0
sdouglass

（新しいドキュメントとして）200x200より大きい画像を通知する場合でも、 Debuger は画像が十分に大きくないと非難する場合、解決策は以下のメタタグを画像の寸法で追加することです：

例：

<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
0
Fred Wuerges