Facebook Sharer を使用する場合、Facebook はユーザーに、ソースから取得したいくつかの画像の 1 つをリンクのプレビューとして使用するオプションを提供します。これらの画像はどのように選択され、ページ上の特定の画像が常にこのリストに含まれるようにするにはどうすればよいですか?
質問する
335536 次
12 に答える
597
ページが共有されたときにどの画像を使用するかを Facebook に伝えるにはどうすればよいですか?
Facebook には、表示する画像を決定するために 参照する一連のオープン グラフ メタ タグがあります。
Facebook 画像のキーは次のとおりです。
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<head></head>ページの上部にあるタグ 内に存在する必要があります。
これらのタグが存在しない場合は、イメージを指定する古い方法を探します: <link rel="image_src" href="/myimage.jpg"/>. どちらも存在しない場合、Facebook はあなたのページのコンテンツを見て、共有画像の基準を満たす画像をページから選択します。 JPEG または GIF 形式。
複数の画像を指定して、ユーザーが画像を選択できるようにすることはできますか?
はい、表示したい順序で複数の画像メタ タグを追加するだけで済みます。ユーザーには画像選択ダイアログが表示されます。
適切なイメージ メタ タグを指定しました。Facebook が変更を受け入れないのはなぜですか?
URL が共有されると、 のユーザー エージェントを持つ Facebook のクローラーがfacebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)ページにアクセスし、メタ情報をキャッシュします。Facebook サーバーに強制的にキャッシュをクリアさせるには、2010 年 6 月にリリースされたFacebook Url Debugger / Linter ツールを使用してキャッシュを更新し、ページのメタ タグの問題をトラブルシューティングします。
また、ページ上の画像は、Facebook クローラーがパブリックにアクセスできる必要があります。/yourimage.jpg だけでなく、 http: //example.com/yourimage.jpgのような絶対 URL を指定する必要があります。
これらのメタ タグを Javascript や jQuery などのクライアント側コードで更新できますか? いいえ。検索エンジンのクローラーと同じように、Facebook スクレーパーはスクリプトを実行しないため、ページのダウンロード時に存在するメタ タグはすべて、画像の選択に使用されるメタ タグです。
これらのタグを追加すると、ページが検証されなくなります。どうすればこれを修正できますか?
必要な Facebook 名前空間をタグに追加すると、ページが検証に合格するはずです。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
于 2011-10-02T01:09:07.620 に答える
38
Facebook で共有する場合、HTML を head セクションの次のメタ タグに追加する必要があります。
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
以上です！
FBの指示に従って、必要に応じてボタンを追加します。
必要な情報はすべてwww.facebook.com/share/にあります
于 2010-10-18T00:59:39.737 に答える
13
に次のタグを挿入しますhead。
<link rel="image_src" href="/path/to/your/image"/>
http://www.facebook.com/share_partners.phpから
このタグがない場合にデフォルトとして何を選択するかについては、よくわかりません。
于 2009-07-16T15:38:42.933 に答える
13
私の経験から、http://www.facebook.com/sharer.phpはメタ タグを使用しません。渡した文字列を使用します。下記参照。
http://www.facebook.com/sharer.php?s=100&p[title]=これは私のタイトルです&p[summary]=これは私の要約です&p[url]= http://www.MYURL.com&&p[images][ 0]=http://www.MYURL.com/img/IMAGEADDRESS
メタ タグは、他の Open Graph 情報と同様に、Facebook の開発者のいいね/送信ボタンで機能します。したがって、コメントなどの Facebook の実際の要素の 1 つを使用する場合、それはすべて Open Graph のものに結び付けられます。
更新: 共有者を使用するには 2 つの方法があります * クエリ文字列の ?s と ?u の値に注意してください
1 ==> STRING: http://www.facebook.com/sharer.php?s + 上記のコンテンツ
~ ~> 文字列から情報を引き出します。
2 ==> URL: http://www.facebook.com/sharer.php?u=urlここで、url は実際の URL と同じです~~>
URL 値で提供されたページをスクレイピングします
~~> 値をテストすることができますここ: https://developers.facebook.com/tools/debug
于 2013-01-30T17:14:39.690 に答える
11
古い方法では、機能しなくなりました:
<link rel="image_src" href="http://yoururl/yourimage"/>
報告された新しい方法も機能しません:
<meta property="og:image" content="http://yoururl/yourimage"/>
実装した最初の日にランダムに機能し、それ以来まったく機能していません。
ページを検査するユーティリティである Facebook リンター ページは、すべてが正しいことを報告し、選択したサムネイルを表示します... ただ、share.php ページ自体が機能していないようです。Facebook のバグである必要があり、私が彼らのシステムで見たこの問題に関するすべてのバグ レポートはすべて解決済みまたは修正済みと述べているため、どうやら修正する気はないようです。
于 2010-09-02T11:39:12.740 に答える
10
タイトル、説明、画像を変更するには、head タグの下にいくつかのメタ タグを追加する必要があります。
STEP 1 :
headタグの下にmetaタグを追加する
<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 = あなたのウェブサイトのリンク
楽しい ！！！！
于 2014-02-20T11:41:42.440 に答える
2
安全なHTTPSの場合
<meta property="og:image:secure_url" content="https://image.path.png" />
于 2012-12-28T11:12:54.767 に答える
2
共有ダイアログの代わりに Facebook フィード ダイアログを使用してカスタム画像を表示する
例：
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
于 2017-04-04T10:01:08.633 に答える
1
これは私にとってはうまくいきました:タグの直後に目的のサムネイル画像をページに配置し、小さすぎて見えないようにしました..
<img src="imagename.jpg" width="1" height="1" />
高さ 0 と幅 0 でテストしたことはありませんが、おそらくまだ動作します.これは、ユーザーがこの画像を選択することを保証するものではありません..
また、Facebook はあなたのページのサムネイルをキャッシュしているようで、常に新しいサムネイルをチェックしているとは限りません。これをサイトの別のページに追加してみてください。動作することがわかります。
于 2011-04-30T18:15:38.080 に答える
0
Facebook に特定の投稿から適切な画像を選択させることができなかったので、このページで概説されていることを行いました。
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts
つまり、次のようなものです。
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
基本的に、サイトの HTML に if ステートメントをハード コードして、その 1 つの投稿で変更した内容のメタ コンテンツを変更します。面倒な解決策ですが、うまくいきます。
于 2013-10-24T05:50:13.237 に答える