web-dev-qa-db-ja.com

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

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

389
Sampson

自分のページを共有するときにどの画像を使用するかをFacebookに指示するにはどうすればよいですか。

Facebookには open-graphメタタグ のセットがあり、どのイメージを表示するかを決定するために見ています。

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 Image Selector

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

URLが共有されると、facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)のユーザーエージェントを持つFacebookのクローラがあなたのページにアクセスしてメタ情報をキャッシュします。 Facebookサーバーにキャッシュをクリアさせるには、 Facebook Url Debugger/Linterツール that を2010年6月に起動してください キャッシュを更新して、ページ上のメタタグの問題をトラブルシューティングします。

また、ページ上の画像はFacebookクローラーが一般に公開されている必要があります。 /yourimage.jpgだけでなく、 http://example.com/yourimage.jpg のように絶対URLを指定する必要があります。

JavascriptやjQueryのようなクライアントサイドのコードでこれらのメタタグを更新できますか?いいえ。ダウンロードページは画像選択に使用されるメタタグです。

これらのタグを追加すると、ページが検証されなくなります。どうすれば修正できますか?

あなたは必要なFacebookの名前空間をあなたのタグに追加することができ、あなたのページはそれから検証に合格するはずです:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">  
587
bkaid

あなたが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/ にあります

36
Matias

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タグをスタイルします。

28
Antonio Max

以下のタグをheadに入れます。

<link rel="image_src" href="/path/to/your/image"/>

から http://www.facebook.com/share_partners.php

このタグがない場合のデフォルトとして選択されているものに関しては、よくわかりません。

13
Matt Bridges

私の経験から、 http://www.facebook.com/sharer.php はメタタグを使用しません。渡す文字列を使います。下記参照。

http://www.facebook.com/sharer.php?s=100&p [タイトル] = THIS IS私のタイトル&p [ summary] =このIS私の概要&p [url] = http://www.MYURL.com&&p [images] [0] = http://www.MYURL。 com/img/IMAGEADDRESS

メタタグは、他のOpen Graph情報と同様に、Facebookの開発者のような/送信ボタンと連携します。そのため、コメントなどのFacebookの実際の要素の1つを使用すると、それはすべてOpen Graphのものと結び付きます。

更新:sharerを使用するには2つの方法があります。*クエリ文字列の?と?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

12
Jason Lydon

昔ながらの方法で、もう機能しません。

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

新しい方法を報告し、また動作しません:

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

それは私がそれを実装した最初の日の間にランダムに行ったり来たりしていました、それ以来全く働​​きませんでした。

あなたのページを検査するユーティリティであるFacebook linterページは、すべてが正しいことを報告し、私が選択したサムネイルを表示します。ただshare.phpページ自体は機能していないようです。私は彼らのシステムで見たこの問題に関するすべてのバグ報告がすべて解決されたか修正されたと言うのでFacebookのバグオーバーでなければなりません。

11
theo

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

ステップ1 :
headタグの下にメタタグを追加

<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/ )。 DEBUGボタンをクリックしてください。

完了しました。

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

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

楽しい !!!!

10
Gaurav123

安全なHTTPSのために

<meta property="og:image:secure_url" content="https://image.path.png" />
2
Stefan Michev

これは私のために働いたものです:私はタグの直後にページ上に希望のサムネイル画像を配置し、それを見るには小さすぎます..

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

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

また、Facebookがあなたのページのサムネイルをキャッシュしていて、常に新しいものがないかチェックしていないようです。あなたのサイトの他のページにこれを追加してみてください。

1
daniel bernal

私はこの問題を抱えていて、それをmanuel-84の提案で直しました。 400 x 400 pxの画像を使用してもうまくいきましたが、小さい画像は共有者に表示されませんでした。

Facebookはog:imageタグとして最小200pxの正方形の画像を推奨していることに注意してください。 https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#タグ

1
William

共有ダイアログの代わりにフェイスブックフィードダイアログを使用してカスタム画像を表示する

例:

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
1
kittu

特定の投稿から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つの投稿に対して変更したものは何でもそれに対してメタコンテンツを変更するようにします。これは面倒な解決策ですが、うまくいきます。

0