Facebook Sharerは、URLを共有するときに画像やその他のメタデータをどのように選択しますか？

393

Facebook Sharerを使用する場合、Facebookは、ソースから取得したいくつかの画像の1つをリンクのプレビューとして使用するオプションをユーザーに提供します。これらの画像はどのように選択されますか？また、ページ上の特定の画像が常にこのリストに含まれるようにするにはどうすればよいですか？

facebook  facebook-opengraph  facebook-sharer 
— サンプソン
ソース
metaプロパティを使用すると実際には機能しますが、これは無効なhtmlであり、非常に奇妙です。バリデーターを通して実行してみてください。いったいなぜ彼らはこれを有効なhtmlで動作させることができないのでしょうか？
1
developers.facebook.com/docs/opengraph <html xmlns：og = " opengraphprotocol.org/schema " ...を参照してください
— cope360
3
..そのページ用など、サムネイルを更新しますリンターやFacebookを通して、あなたのページを実行し、変更を行った後ヒント- developers.facebook.com/tools/lint
次の記事も非常に役立ちました。共有するURL、テキスト、IMGをカスタマイズする方法
— J0ANMM

回答:

593

ページが共有されるときに使用する画像をFacebookにどのように通知しますか？

Facebookには、表示する画像を決定するために参照する一連のオープングラフメタタグがあります。

Facebook画像のキーの1つは次のとおりです。

<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="https://stackoverflow.com/myimage.jpg"/>。どちらも存在しない場合、Facebookはページのコンテンツを確認し、共有画像の基準を満たすページから画像を選択します。 JPEGまたはGIF形式。

ユーザーが画像を選択できるように複数の画像を指定できますか？

はい、複数の画像メタタグを表示したい順序で追加する必要があります。その後、画像セレクタダイアログが表示されます。
Facebook画像セレクター

適切な画像メタタグを指定しました。Facebookが変更を受け入れないのはなぜですか？

URLが共有されると、ユーザーエージェントがfacebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)であるFacebookのクローラーがページにアクセスし、メタ情報をキャッシュします。Facebookサーバーに強制的にキャッシュをクリアさせるには、2010年6月にリリースされたFacebook URLデバッガー/リンターツールを使用してキャッシュを更新し、ページ上のメタタグの問題をトラブルシューティングします。

また、ページ上の画像は、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">
— bkaid
ソース
1
別の場所：（<link rel="apple-touch-icon" href="...">それがSOイメージを取得する方法です）
— Yarin
2
@ヤリン私はそれが本当かどうかわかりません。StackOverflowには、使用しているimage_srcプロパティセットがあります。apple-touch-iconのファイル名は異なり、使用されていません。
— bkaid
3
画像の注文を選択できますか？私の場合、メタタグの画像の前に別の画像が表示されます。
— vicenrele 2013年
23
画像の最小サイズは200x200pxになりました。
— Tr1stan 2013年
1
わっ！imgのサイズを300pxに設定しましたが、動作するようです。ありがとう@ Tr1stan
— Urs
37

Facebookで共有する場合は、htmlをヘッドセクションの次のメタタグに追加する必要があります。 

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

以上です！

FBの指示に従って、必要に応じてボタンを追加します。

必要な情報はすべてwww.facebook.com/share/にあります

— マティアス
ソース
28

2013年現在、facebook.com / sharer.php（PHP）を使用している場合は、次のようなボタン/リンクを作成できます。

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

クエリパラメータのリンク：

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

それは非常に単純です。jsやその他の設定は必要ありません。単なるHTMLの未加工リンクです。任意の方法でAタグのスタイルを設定します。

— アントニオ・マックス
ソース
p[images][0]まさに私が必要としたものでした。ogタグは同じ画像を共有するために機能しますが、同じページから複数の画像を共有する必要があります。
— thekingoftruth 2013
4
これは新しい「受け入れられた答え」であるはずです-とてもシンプルで簡単です。これをありがとう、仲間。
— マイク
アントニオ、あなたはあなたが上に示したものについてのソースリンクを持っていますか？私はdevelopers.facebook.comでこれを見しようとしているが、以外のものを見つけることができません、これを。助けてください。
— Mr_Green
それについての@Mr_Green。この機能は「非推奨」でしたが、現在は公式ドキュメントに戻っています。とにかく、私の答えはそれが機能するための基本的な設定をカバーしていると思います。
— Antonio Max
@AntonioMaxはs=100あなたの投稿の内容を説明してください。
— Mr_Green
12

私の経験から、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の開発者のlike / sendボタンと連携します。したがって、コメントなどの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

— ジェイソン・リドン
ソース
非常に役立ちます。ありがとう！：D
— アーロン・グレイ
別のWebサイトでその共有者を使用してURLからコンテンツを取得する法的な方法はありますか？Facebook APIやその他についてはよくわかりません...
— Lyth
URLオプションを使用してみてください。ページにOGタグがある場合、FBはそれらをスクレイピングします。：あなたがここに使いたいページをテストdevelopers.facebook.com/tools/debug
— ジェイソン・ライドン
11

古い方法、もう機能しません：

<link rel="image_src" href="http://yoururl/yourimage"/>

報告された新しい方法、また動作しません：

<meta property="og:image" content="http://yoururl/yourimage"/>

それは私がそれを実装した最初の日に無作為に機能し、その後はまったく機能しませんでした。

Facebookリンターページは、ページを検査するユーティリティであり、すべてが正しく、選択したサムネイルが表示されます。share.phpページ自体が機能していないようです。Facebookのバグである必要があります。システムで確認したこの問題に関するすべてのバグ報告はすべて解決または修正されているため、彼らは明らかに気にしないでください。

— テオ
ソース
私もこの問題を抱えています。リンターはエラーを報告せず、画像を正しく表示しますが、サイトの共有ボタンをクリックすると、共有インターフェイスに画像がまったく表示されません。
— ルークグリフィス
image_srcはFacebookでは機能しなくなりましたが、一部のサービスでは引き続き使用されています（テレグラムクライアントなど）
— Andres SK
10

タイトル、説明、画像を変更するには、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を追加します。DEBUGボタンをクリックします。

終わった。

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

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

楽しい ！！！！

— ガウラヴ123
ソース
デバッガは役に立ちました。
— konsolebox 2016年
1

これが私にとってうまくいきました：タグの直後のページに目的のサムネイル画像を配置し、表示するには小さすぎます。

<img src="imagename.jpg" width="1" height="1" />

高さ0と幅0でテストしていませんが、おそらく動作します。これは、ユーザーがこの画像を選択することを保証するものではありません。

また、Facebookはページのサムネイルをキャッシュし、常に新しいサムネイルを確認するわけではないようです。これをサイトの別のページに追加してみてください。うまくいくことがわかります。

— ダニエル・バーナル
ソース
1
タグの後 –意味：「BODYタグの後」？
— Alexis Wilke、2014
はい、そういうことだと私は信じています。私はずっと前にサイトでこれを行いましたがstyle="display:none;"、1x1ピクセルに設定する代わりに使用しました。
— マイク
1

共有ダイアログの代わりに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
— キツ
ソース
0

Facebookに特定の投稿から適切な画像を選択させることができなかったので、このページで概説されていることを行いました。

/webapps/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>

基本的には、ifステートメントをサイトのHTMLにハードコーディングして、その1つの投稿に対して変更したもののメタコンテンツを変更するようにします。面倒な解決策ですが、機能します。

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