Facebook投稿リンク画像

95

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

ユーザーが指定したい画像に対してFBが "image_src" relタグを優先することを確認しましたが、私のサイトでもそのサムネイルは生成されません。

私のURLは直接DNSに送られ、転送されないので、それが問題になることもないと思います。

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

facebook  thumbnails 
— ジオシェット
ソース
私たちにあなたのサイト（または機能しない別のサイト）へのリンクを提供してくれると助かります-それはいくつかのアイデアを引き起こすかもしれません。
— Nick Fortescue、
ここでそれがどのように機能するかを見ることができます！PHP + jQueryを使用してビルドします。ソースコードはダウンロードできます。お楽しみください！lab.leocardz.com/facebook-link-preview-php--jquery
— Leonardo Cardoso
そして、あなたがグーグルプラスで同じことをしたいなら、私が見つけることができる最も良い参照されたリンクはここにあります：stackoverflow.com/questions/7985398/…–
— cregox
— 2015年

回答:

119

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

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

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

グラフタグを開く

Open Graphタグは、 <head>は、バンド、レストラン、ブログなど、ページが表すエンティティを説明するためにWebサイトのにです。

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

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

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

  • og:title -エンティティのタイトル。
  • og:type-エンティティのタイプ。オープングラフタイプのリストからタイプを選択する必要があります。
  • og:image-エンティティを表す画像へのURL。画像は少なくとも50ピクセルx 50ピクセルでなければなりません。正方形の画像が最適ですが、高さの3倍までの幅の画像を使用できます。
  • og:url-エンティティを表すページの正規の永続的なURL。Open Graphタグを使用する場合、[いいね！]ボタンog:urlは、[いいね！]ボタンのコードのURLではなくへのリンクを投稿します。
  • og:site_name -人間が読める形式のサイト名（例： "IMDb"）。
  • fb:adminsまたはfb:app_id-ページ管理者のFacebook IDまたはFacebookプラットフォームアプリケーションIDのカンマ区切りリスト。少なくとも、自分のFacebook IDのみを含めてください。

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

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

— WyrdNEXUS
ソース
5
lintツールからこのエラーを受け取りました。 All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.。ただfyi
— Trevor
コードにogタグを追加しました。facebookのogオブジェクトデバッガーツールでテストすると、ogタグに保存したとおりに正しい情報が表示されますが、fbアカウントでページをリンクしようとすると、キャッシュされたコピーのみ。fbがキャッシュされたコピーを保持する時間はどれくらいですか？キャッシュされたコピーをフラッシュする他の方法はありますか？
— KAsh 2014
ただお知らせしておきますが、Facebookアプリ内でAppLinks（applinks.org）を使用しているときに画像を投稿に追加する唯一の方法は、<link>タグを使用することです。og：imageで<meta>タグを使用すると機能しません。 。
— emerino 2014
これにはタイプのリストなどがあり、他にも役立つ情報があります。
— Wilf、2014
61

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

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

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

  3. URLリンターツールに関しては、URLの各バリエーションがFacebookに個別にキャッシュされるため、「www.example.com」は「example.com」と同じではないことに注意してください。また、一意の大文字も保存されるため、「ExampleOne.com」は「exampleone.com」と同じではありません。（これにより、キャッシュが正常に更新されたように見え、クライアントが更新を表示していないとクライアントが主張したときに、クライアントと自分の間で多くの混乱が生じました。私がexampleone.comを見ていたところ、 Linterはキャッシュを更新しましたが、Linterに送信していないexampleOne.comを見ていました。その結果、ベースをカバーするためだけに、かなりの数のバリエーションのURLをLinterに送信してしまいました。）

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

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

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

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

— OneRuler
ソース
私は何日も苦労していて、サムネイルが正しく更新されていませんでした。Facebookのリンターツールで即座に私の問題が解決しました。Facebookのキャッシュを更新するためのFacebookがありました！やったー！
— Hady
そのリンターツールに感謝します。私のブログの一部の投稿には画像が表示されていましたが、データベース主導のサイトであるにもかかわらず、他の投稿には表示されませんでした。問題のページのURLをURLリンターに入れると、強制的に画像がキャッシュされます！ウフー！
— クリスティーナチャイルズ2013年
4
lintツールの名前が変更されました。今はただのデバッグです：developer.facebook.com/tools/debug-私が知ることができるすべてから、これはすべてのtl; drバージョンです：ただツールを使用してください！
— cregox 2013
11

タイトル、説明、画像を変更するには、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

タグを記述したテキストボックス（http://www.test.com/など）にURLを追加します。デバッグボタンをクリックします。

終わった。

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

上記のURLで、u =ウェブサイトのリンク

楽しい ！！！！

— ガウラヴ123
ソース
複数の質問にまったく同じ回答を投稿しないでください。すべての回答に適しているわけではないか、質問が重複しているため、フラグを立てる/クローズする必要があります。
— クレオパトラ2014
こんにちはクレオパトラ、私は他の人を助けるために答えを投稿することを考えていました。あなたの主張は完全に有効だと思います。私がこれを処理します。おかげで友達
— Gaurav123
@ Gaurav123テストリンクは死んでいます。しかし、私はFacebookで自分にメッセージを送ることによってそれをチェックしました。非常に役立つ回答をありがとうございました！
— gsamaras 2017
2

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

— ランディ
ソース
1

Facebookがhttpsで始まるWebサイトからサムネイルを取得しないことに気付きましたが、それはおそらくあなたのケースですか？

— raRaRa
ソース
1

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

— ディエゴ
ソース
0

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

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

— カレンコウフ
ソース
0

このようなものを使ってみてください：

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

画像へのフルパスを使用している限り、Firefoxで問題なく動作するようです。

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

— ユーザー2494810
ソース
私は愚かなので投稿しなかったリンクタグのコードを投稿するつもりです。ごめんなさい。
— user2494810 2013年
-1

seoのプラグインを使用している場合は、最初にseoプラグインの設定を確認します。次に、Noindexのメディアを有効にする場合にNoindexの設定を確認してから無効にします。

— ミロンパトワリー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.