web-dev-qa-db-ja.com

Facebook投稿リンク画像

誰かがFacebookにリンクを投稿すると、通常、スクリプトはそのリンクをスキャンして画像を探し、投稿の横に簡単なサムネイルを表示します。ただし、特定のURL（私のURLを含む）では、FBはそのページに多数の画像があるにもかかわらず、何も拾っていないようです。

ユーザーが指定したい画像にはFBが「image_src」relタグを好むことを読みましたが、これは私のサイトでもそのサムネイルを生成しません。

私のURLはDNSに直接送られ、転送されないため、それが問題になる可能性もありません。

FBが私のサイトからサムネイルを生成できない理由について誰かが考えていますか？

facebookthumbnails
95
RudeBoyRock

最も簡単な方法は、リンクタグのみです。

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

ただし、サイトをソーシャルメディアフレンドリーにするために、サイトに追加できるものがいくつかあります。

グラフタグを開く

Open Graphタグは、ウェブサイトの<head>に追加するタグで、バンド、レストラン、ブログなど、ページが表すエンティティを記述します。

Open Graphタグは次のようになります。

<meta property="og:tag name" content="tag value"/>

Open Graphタグを使用する場合、次の6つが必要です。

  • og:title-エンティティのタイトル。
  • og:type-エンティティのタイプ。 Open Graphタイプのリストからタイプを選択する必要があります。
  • og:image-エンティティを表す画像のURL。画像は少なくとも50ピクセルx 50ピクセルでなければなりません。正方形の画像が最適ですが、高さの3倍までの画像を使用できます。
  • og:url-エンティティを表すページの正規の永続URL。 Open Graphタグを使用すると、Likeボタンは、LikeボタンコードのURLの代わりにog:urlへのリンクを投稿します。
  • og:site_name-サイトの人間が読める名前、たとえば「IMDb」。
  • fb:adminsまたはfb:app_id-ページ管理者のFacebook IDまたはFacebook PlatformアプリケーションIDのコンマ区切りリスト。少なくとも、自分のFacebook IDのみを含めてください。

Open Graphタグの詳細とページの管理の詳細については、Open Graphプロトコルのドキュメントをご覧ください。

http://developers.facebook.com/docs/reference/plugins/like

119
WyrdNEXUS

私はこの質問が古いことを知っていますが、最近、まったく同じ問題に対処し、数週間にわたって何度もその問題に取り組みました。 Googleでの複数の検索で多くの有用な情報が見つかりましたが、そのほとんどはOpen Graphタグに焦点を当てていたので、使用することに興味はありませんでした。私のサイトには複数の問題がありましたが、ここにいくつかの基本事項があります。

  1. EightyEightが言ったように、HTMLが有効であることを確認してください-そして、JavaScriptとサーバーサイドコード（PHP、ASPなど）についても同じことが言えます。メインページからサーバーへの別の呼び出しとして実行されていたコードの一部に小さなPHPエラーがありました。いくつかの奇妙な偶然の一致により、そのコードは500エラーを生成していましたが、IE6およびW3CバリデーターやFacebookページクローラーなどの厳密な解析エンジンのみが対象でした。この問題は最新のブラウザー（Chrome 4、FF 3.5、IE 8など）には現れなかったため、すぐには表示されませんでしたが、古い/より厳しいクライアントは毎回500を表示していました。 FBがページをクロールしなかった主な理由でした（他のすべてが正しいと思われる場合）。

  2. Randyの応答に関して、彼は、Facebookがページを更新した後もページの古いキャッシュされたコピーを保持することを正しいとしています。 FBは24時間しか開催されていないと主張していますが、それよりもはるかに長い時間を経験しました。幸いなことに、FBはFBで共有されたときにページがどのように表示されるかのプレビューを表示する「URLリンター」ツールをリリースしました。and FBにページのキャッシュを即座に更新させます。これは命を救うツールでした。 http://developers.facebook.com/tools/lint/ で見つけることができます

  3. URLリンターツールについては、URLの各バリエーションがFacebookに個別にキャッシュされるため、「www.example.com」は「example.com」と同じではないことに注意してください。また、一意のcapitalizationも保存されるため、「ExampleOne.com」は「exampleone.com」と同じではありません。 （これにより、キャッシュが正常に更新され、クライアントが更新を見ていないと主張したときに、クライアントと自分の間でlotの混乱に至りました。 exampleone.comでキャッシュを更新するためにLinterを使用していましたが、彼らは私がLinterに送信していなかったexampleOne.comを見ていたため、結果として、基地。）

  4. Image_srcリンクタグを使用するというWyrdNEXUSのアドバイスはスポットオンです。これにより、FBがページに最適な画像をスクレイピングしていることを確認できます。画像ファイルの仕様についてはさまざまなガイドラインがありますが、128pxの正方形の画像を正常に使用し、130x97の画像も同様に使用できます。以下は http://developers.facebook.com/docs/reference/plugins/like/ からのFacebookの公式ドキュメントです。

    画像は少なくとも50ピクセルx 50ピクセルでなければなりません。正方形の画像が最適ですが、高さの3倍までの画像を使用できます。

    明らかに、FBは大きな画像のサイズを変更しますが、事前に自分でサイズを変更すると、ほとんどの場合、より良い結果が得られます。

  5. Mike CooperのeHow記事へのリンクについては、その記事のステップ1を使用しないでください。記事の執筆時とマイクがリンクを投稿したときは有効なアドバイスでしたが、共有時にページがどのように表示されるかをプレビューするためにURLリンターツールを使用する方が良いでしょう。 Linterを使用することで、FBを調整する機会を得る前に、FBが（潜在的に）不正なページのコピーをキャッシュすることはありません。

61
OneRuler

こちらから入手できるfacebookのリンターを使用してください。 http://developers.facebook.com/tools/lint/

これにより、リンクがチェックされ、画像が再取得されます。これにより、古いキャッシュもクリアされます。

またはこれを試してください- https://developers.facebook.com/tools/debug

11
mohamed azher

タイトル、説明、画像を変更するには、headタグの下にいくつかのメタタグを追加する必要があります。

ステップ1：ヘッドタグの下にメタタグを追加する

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

次のステップ：下のリンクをクリックしてください https://developers.facebook.com/tools/debug

タグに言及した場所にURLをテキストボックス（例： http://www.test.com/ ）に追加します。 [デバッグ]ボタンをクリックします。

終わった。

ここで確認できます https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

上記のURLで、u = Webサイトリンク

楽しい ！！！！

11
Gaurav123

これを試してください： http://www.ehow.com/how_4938148_thumbnail-show-up-facebook-share.html

6
Mike Cooper

サイトのHTMLは有効ですか？ w3c検証サービス で実行します。

2
EightyEight

実際、「image_src」リンクを追加する前にFacebookでそのページをリンクしようとしたことがある場合、Facebookは古いキャッシュされたコピーを使用し続け、変更も確認しません。 「www」を削除または追加してURLを変更するか、ページを複製してテストしてください。

2
Randy

FacebookがWebサイトがhttpsで始まる場合、Webサイトからサムネイルを取得しないことに気づきました。

1
raRaRa

同じ問題があり、私の頭を閉じるタグが間違った場所にあることがわかりました

1
Diego

次のようなものを使用してみてください。

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

画像へのフルパスを使用している限り、Firefoxで正常に動作するようです。

問題は、何らかの理由で垂直方向に下向きにオフセットされることです。画像は、私が読んだどこかで推奨されている200 x 200です。

0
user2494810

古い質問ですが、最近、Facebookのステータスの更新にリンクのサムネイル画像が表示されないという同じ問題に直面しているようです。私は多くのクライアントに投稿していますが、これは比較的新しいものです。

FBはもはや長いURLを好まないようです。goo.glやbitly.comなどのURL短縮サービスを使用すると、リンク/投稿のサムネイルがFBアップデートに表示されます。

0
karen kouf