「Facebook Publisher」は、共有Webサイトから画像、タイトル、コンテンツをどのように選択するのですか?


11

これはFacebook Publisherに関する質問です。リンクを共有すると、Facebookがテキストを取得し、サイトのタイトルと画像を取得して、ユーザーのプレビューを作成します。次に、ユーザーはプレビューを編集し、いくつかの異なるサムネイルの1つから選択して、これをFacebookプロフィールに投稿できます。

ポイントを説明するスクリーンショットは次のとおりです。

Facebookからのスクリーンショット

パブリッシャーアプリケーションはリンクから画像とテキストをどのように取得しますか?他の一般的なWebアプリケーション、Googleアプリケーション、Wordpressブログなどで動作する同様のアプリケーションはありますか?

数か月前に同様の質問をしたところ、FacebookはoEmbedを使用しているようですが、oEmbedはコンテンツのみを埋め込んでいるようです。また、oEmbedはoEmbedプロバイダーでのみ機能することも読みました。Facebookパブリッシャーは、ほぼすべてのWebサイトで動作します。



@phwd:@Edwardが投稿のバグについて話しているようです。それは「しかし、約2週間前から...」まで機能していました
Stefan Lasiewski

回答:


10

Facebookは、タイトルや画像などに存在する場合、オープングラフのメタタグを使用します(たとえば、og:title)。Open Graph ProtocolのFacebookのドキュメントでは、これについて詳しく説明しています。

Open Graphプロトコルは、4つの必須プロパティを定義します。

og:title-グラフ内に表示されるオブジェクトのタイトル( "The Rock"など)。

og:type-オブジェクトのタイプ(「映画」など)。サポートされているタイプの完全なリストを参照してください。

og:image-グラフ内のオブジェクトを表す画像のURL。画像は少なくとも50px x 50pxで、最大アスペクト比が3:1である必要があります。

og:url-グラフで永続IDとして使用されるオブジェクトの正規URL(例:http://www.imdb.com/title/tt0117500/)

さらに、ページをFacebookに接続するために2つの必須フィールドを追加するように、基本的なメタデータを拡張しました。

og:site_name-人間が読めるサイトの名前(例: "IMDb")。

fb:adminsまたはfb:app_id-このページを管理するFacebookユーザーIDまたはFacebookプラットフォームアプリケーションIDのカンマ区切りリスト。ページにfb:adminsとfb:app_idの両方を含めることは有効です。

以下のプロパティとこれらのマルチパートプロパティを含めることもお勧めします。

og:description-ページの1〜2文の説明。

これらのタグのないページでどのように機能するかはわかりません。この機能を複製しようとしている場合、これは役に立ちません。申し訳ありません。しかし、あなたが望むようにあなたのページがパブリッシャーに表示されることを確実にしようとしているなら、多分これはそうなるでしょう。

また、facebookのopengraphデバッガーを使用することもできます。これにより、プレビューに関する情報が提供され、変更を加えた場合にキャッシュされたリンクを(非常に便利に)更新できます。それ以外の場合は、共有するリンクに変更を加えることができ、その変更は数日間表示されません。

https://developers.facebook.com/tools/debug


オープングラフタグを提供していない場合は、メタタグを使用します。OGタグは、Webページを気に入ったときにより役立ちます
。coz

4

Facebookにどのテキストと画像を取得するかを指示するには、ページのヘッドに特定のメタキーを追加する必要があります。

    <meta name="title" content="title" />
    <meta name="description" content="description " />
    <link rel="image_src" href="thumbnail_image" / >

私は彼の詳細をここに投稿しましたhttp://umairj.com/2010/10/modify-how-the-shared-item-appears-on-facebook/


1
それは興味深いです。これらのメタタグは、多くのウェブマスターに推奨される方法です(検索エンジンなどに役立ちます)。ただし、flowingdata.com / 2010/09/15 /…のソースを確認してください。そのページにはこれらのタグがなく、<link rel=イメージイメージタグもありません。
Stefan Lasiewski、2010

@ Stefan、これは非常に良い質問です。新しいOpenGraph OGタグのメタタグが見つからない場合、FBは何をしますか。すべての画像を取得し、そのページのhtmlの先頭からテキストの一部を表示します。 。したがって、ユーザーは画像の選択肢を取得しますが、テキストは同じです。さらに、Facebookの指定基準までの画像のみが表示されます。
アペット

1

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

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

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

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

お役に立てれば。


0

Facebookは、共有しているページのメタタグを使用して、リンクを投稿するときに表示する画像、タイトル、説明を決定します。メタタグの構文は、FacebookのOpenGraph仕様に準拠しています。

定義する必要がある最も重要なメタタグは次のとおりです。

  • <meta property="og:title" content="The title of the sharing preview" />
  • $<meta property="og:description" content="The first few lines of content below the title" />
  • <meta property="og:image" content="http://site.com/your-image-1200x630px.jpg" />

もちろん、これは、共有するサイトを完全に制御できる場合にのみ機能します。外部リンク(ニュース記事など)を共有している場合、そのサイトにアクセスできないため、メタタグを変更できません。私はShareKit.ioを使用しています。これにより、メタタグをいじる必要なく、共有しているリンクのタイトル、説明、画像を変更できます。


-1

あなたの質問への答えはかなり複雑で、おそらくFacebookの企業秘密のようです。URLをスキャンし、関連するコンテンツ/メディアを取得してニュースストリームに表示する機能は、Facebookを使用する日常のユーザーにとって、サービスを非常にユニークで便利なものにしている理由の1つです。

そうは言っても、アルゴリズムはそれほど複雑ではないと思います。おそらく、Googleがウェブサイトからコンテンツをスクレイピングするために使用するのと同じ多くのルールを使用します(一般的な詳細はここに公開されています)。パブリッシャーの背後にある力は、Facebookのエンジニアによる多くの試行錯誤とテストにあると思います。


1
まったくそう思わない!
Umairジャバー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.