web-dev-qa-db-ja.com

Facebook共有URLサムネイルの問題

重複の可能性：
Facebook Sharerはどのように画像を選択しますか？

ユーザーが http://www.facebook.com/sharer.php を使用してサイトの共有ボタンを使用してサイトのURLを共有するときに、サムネイルを共有したい。

サイトにはimgタグがなく、すべての画像はcssで定義されています。

画像のメタタグを追加しました：

 <meta property = "og：image" content = "/ images/branding/branding-logo.png" />

そして

 <link rel = "image_src" href = "/ images/branding/branding-logo.png" />

しかし、それは機能していません:(

facebookfacebook-likefacebook-sharer
15
Matej Baćo

オープングラフメタタグ の完全なリストを使用してください：

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

また、相対URLではなく絶対URLを使用してください。

編集：
Facebookは特定の期間ウェブページをキャッシュするため、変更にすぐに気付かない場合があることに注意してください。 Facebookが実際に変更を行っているかどうかを確認する良い方法は、URLのパラメーターを偽造することです。
たとえば、URLが次の場合：http://example.com/index.php
次のようなものを追加します：http://example.com/index.php?123そして、それを RL Linter で使用します。 ;-)

編集2：
Facebook Linter（現在は デバッガー と呼ばれています）を直接使用できますが、一部のデータは使用できないことに注意してください変更される場合があります、説明 ここ ：

メタタグの編集

ページのタグを更新することで、ページの属性を更新できます。 og：titleとog：typeは、最初は編集可能であることに注意してください。ページが50のいいねを受け取ると、タイトルが修正され、ページが10,000のいいねを受け取ると、タイプが修正されます。これらのプロパティは、ページをすでに気に入っているユーザーを驚かせないように修正されています。これらの制限に達した後でタイトルまたはタイプタグを変更しても何も起こりません。ページは元のタイトルとタイプを保持します。

20
ifaour

ここにulrを貼り付けます https://developers.facebook.com/tools/debug/ 。 FacebookのOpenGraph Debuggerは、ページから何を読み取っているのかを正確に教えてくれます。また、ページのFacebookキャッシュを更新して、ページから画像を再度読み取れるようにします。

6
Carlos Muñoz

Ifaourが言ったように、絶対URLを使用する必要があります。そうしないと表示されません。 <link>タグは正常に機能するはずです。

0
Manuel Pedrera