FB OpenGraph og:imageが画像を取得しない(おそらくhttps?)


301

まず-私は 、これが重複した問題であるとはません。私はSOで同じまたは同様の問題を広範囲にわたって検索しましたが、質問する前にトラブルシューティングの性質上、この問題は独特であると思います。

Facebookはog:imageファイルを把握できず、通常の解決策をすべて試しました。何か関係があるのではないかと思い始めていますhttps://...

  • 確認しました http://developers.facebook.com/tools/debugをしましたが、警告やエラーはありません。
  • それは私たちがリンクした画像を「og:image」でいますが、空白で表示されています。ただし、画像をクリックすると、画像は存在し、そのまま表示されます。
  • https以外のサーバーでホストされている画像が1つ表示されます。
  • 正方形の画像、jpeg、png、大きいサイズと小さいサイズを試しました。画像をpublic_htmlに配置しました。ゼロが現れている。
  • og:imageのメタをメタに追加すると、FBのリンターがそれを見つけて読み取るため、これはキャッシュエラーではありません。プレビューを表示しません。プレビューは空白です。のみ私たちが取得している例外は、このウェブサイト上にないイメージのためです。
  • アンチリーチがあるcpanel.htaccess、画像が表示されない原因と思われるため、確認しました。なかった。私たちは素早く< img src="[remote file]" >まったく別のサーバーでに実行でき、画像が正常に表示されます。
  • 多分それは og:type別のメタタグの奇妙な。それらを1つずつ削除してチェックしました。変化なし。警告だけです。
  • 別のWebサイトにある同じコードが問題なく表示されます。
  • 複数の製品に同じ製品ページを使用しているため(おそらく get値に基づいて変更しているため、「details.php?id = xxx」など)、画像を取得しているのではないと考えましたが、それでも1つを取得しています画像(別のURLから)。
  • 任意のままog:imageかimage_srcのオフを、FBは、任意の画像を見つけることができません。

私は私のロープの端にいます。私や他の人がこれに費やした時間を言ったら、あなたはショックを受けるでしょう。問題は、これがオンラインストアであることです。私たちは絶対に、積極的に画像を持つことはできません。するべき。他に10か所ほどのサイトがあります... og:image問題があるのはこれだけです。これも上の唯一のものなhttpsので、多分それが問題だと思いました。しかし、そのためのウェブ上のどこにも前例はありません。

これらはメタタグです:

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

ご参考までに、私たちが取り組んでいる製品ページへのリンクを示します。[このサイトの検索結果へのアクセスを抑制するために短縮されたリンク]:http : //rockn.ro/114

編集----

「facebookに表示されるものを見る」スクレイパーツールを使用して、次のことを確認できました。

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

単一のページで見つかったすべてのリンクをテストしました。すべて完全に有効な画像でした。

編集2 ----

私たちはテストを試し、サブドメインをNONSECUREウェブサイトに追加しました(そこから実際にFacebookを通じて画像が表示されます)。サブドメインはhttp:// img。[nonsecuresite] .comでした。次に、すべての画像をメインサブドメインフォルダーに入れ、それらを参照しました。これらの画像はFBに取り込まれません。ただし、非セキュアなメインドメインで参照されている画像は引き続きプルされます。

回避策----

キーガンのおかげで、これがFacebookのバグであることがわかりました。回避策として、別のNON-HTTPS Webサイトにサブドメインを配置し、その中にすべての画像をダンプしました。各商品ページのコーディネートhttp://img.otherdomain.com/[like-image.jpg]画像を参考にしましたog:image。次に、FBリンターを実行し、すべてのリンクを実行してOGデータを更新する必要がありました。これは機能しましたが、解決策はバンドエイドの回避策であり、https問題が修正されて自然なhttpsドメインの使用に戻った場合、FBは別のWebサイトからの画像をキャッシュしているため、問題が複雑になります。うまくいけば、この情報は、誰かが自分の人生の32時間のコーディング時間を失うのを防ぐのに役立ちます。


27
よく文書化された質問。あなたのために賛成しました!
DMCS 2012年

トラブルシューティングについては、og:type: og_products:productタイプをWebサイトに変更して、画像を取得できるかどうかを確認してください。
DMCS 2012年

2
ジューシーです、外部のサイトから参照されているog:imageがhttpではなくhttpsであり、表示されます。
キプロス106 2012年

1
こんにちは、ありがとう、素晴らしい投稿。https-urlに戻ったらキャッシュを更新する必要があることを心配することについてのちょっとしたコメント:しばらくしてからfbキャッシュが解放されるので、心配しないでください。 1〜2日後、キャッシュは新しいURLを使用して自動的に解放されます。
Niclas Lindqvist

1
@NiclasLindqvist参考までに、私たちは古い画像を数か月前からキャッシュに残していたので、FBのキャッシュ標準を細かく調整しました。
キプロス106 2015

回答:


93

私は同じ問題に遭遇し、それをバグとしてFacebook開発者サイトに報告しました。og:imageHTTPを使用したURIは問題なく機能し、HTTPSを使用したURIは機能しないことは明らかです。彼らは今、「これを調査している」ことを認めました。

更新:2020年以降、このバグはFacebookのチケットシステムに表示されなくなりました。彼らは決して反応せず、私はこの行動が変わったとは思わない。ただし、HTTPS URIを指定og:image:secureしても問題なく動作するようです。


3
キーガン!ありがとうございました!HTTPSの問題がバグであることが文書化されているのを目にしたのはこれが初めてであり、私たちは懸命に調べました。回避策を質問のコメントに投稿してください。
キプロス106 2012年

2
2013年8月現在、そのURLにはバグが表示されていません。更新はありますか?
Andreas Andreou 2013

3
developers.facebook.com/bugs/256470807842897 この最新のバグも関連しています。質問への回答はありましたが、ここにリンクを追加すると思います。同様の問題を抱えている他の誰かがここにたどり着くと、リンクが見つかるでしょう。
ゾイドバーグ

4
問題は2014年3月18日に修正されたと言います5。
Mike Flynn 14年

1
@MattBrowneいいえ、それは私には修正されていません:-(
starbeamrainbowlabs 2017

131

一部のプロパティには、追加のメタデータを添付できます。これらは、propertyおよびを使用して他のメタデータと同じ方法で指定されますcontentが、propertyには余分ながあります。

og:imageプロパティには、いくつかのオプションの構造化プロパティがあります。

  • og:image:url -og:imageと同じ。
  • og:image:secure_url -WebページでHTTPSが必要な場合に使用する代替URL。
  • og:image:type -この画像のMIMEタイプ。
  • og:image:width -幅のピクセル数。
  • og:image:height -高さのピクセル数。

完全な画像の例:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

だからあなたは変える必要がある og:image、HTTPS URLのプロパティを次のようます。og:image:secure_url

例:

画像のHTTPSメタタグ:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

画像のHTTPメタタグ:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

出典:http : //ogp.me/#structured <-詳細については、このサイトにアクセスしてください。

これがお役に立てば幸いです。

編集:コードを更新した後、facebookサーバーにpingすることを忘れないでください-URL Linter


1
SIR、どうもありがとう。画像の追加のメタデータがあることを知りませんでした!image:secure_urlを単独で実行しようとしましたが、FBがエラーをスローしました。image&secure_url *をいくつかの方法で試しましたが、リンターはまったく変化を見せませんでした。
キプロス106 2012年

私にとっては、メタタグ画像ではなく、プレビュー画像を表示し続けます。私も間違いなく正しいURLを持っています!:( Ideas?
jaminroe

1
@jaminroe糸くずは出ましたか?糸くずが出なければそれから。これでほとんど問題が解決します。それでも選択されない場合は、ツールがスクレイピングできるものを確認します。また、正確にスクレイピングされているものを確認できSee exactly what our scraper sees for your URLます。結果の最後にリンクがあり、クリックして、リンクの完全なソースが表示されているか、ストリップされているかを確認します何でも。間違っcharsetて設定されている場合、スクレーパーは何らかの理由でスクレイピングできません(この問題について以前に同様の質問に回答しました)。したがって、これらすべてが正しいことを確認してください。
Syed IR

3
画像がサービス(/ foo / bar)によって作成されるため、誰かに役立つ場合-私たちのog:image URLにはファイル拡張子がありません。この回答により、おそらくog:type = "image / png"が原因であるFacebookリンターに関する問題が修正されました。ありがとうございました!!
2015年

3
@JohnWasham og:imageタグはHTTPSにすることができます(これはStackExchange、YouTube、WordPress.com、Amazonなどが行うことです)。それはちょっとあなたog:image:secure_urlは本当に何のためにあるのだろうと思いますか?
DocRoot

16

facebookデバッガーが正しい画像を表示しog:imageていても、それが私だけの場合で、私にとっては機能せず、サイトのロゴを選択するかどうかはわかりません。

しかし、私のためog:imageog:image:url働くように変更します。これが同様の問題に直面している他の人を助けることを願っています。


乾杯-私のために働いた-しかし、facebookデバッガーも画像を望んでいるので、両方を送信します。og:imageとog:image:
url-

1
og:image:urlは構文を認識していますか、それとも正しくないため解析されませんか?つまり、これはメタタグがまったくないのと同じですか。
ジョナサントンジ

@JonathanTonge ogp.meへのコード化は、「og:image:urlと同じですog:image
DocRoot

9

ここからGoogleにアクセスしましたが、これはあまり役に立ちませんでした。ロゴには最低3:1のアスペクト比が必要であることがわかりました。鉱山はほぼ4:1でした。私はGimpを使用してそれを正確に3:1にトリミングして出来上がり-私のロゴはFBに表示されています。


2
最大アスペクト比は3:1(developers.facebook.com/docs/opengraphprotocol)で、最小サイズは50px x 50px
rpearce

1
facebookデバッガーによると、サイズ要件は現在200px x 200px
braX

8

tl; dr – 辛抱強く

httpsサイトから提供される空白の画像が表示されていたため、ここに行きました。ただし、問題はまったく別の問題でした。

コンテンツが初めて共有されると、Facebookクローラーは共有されたURLからメタデータを取得してキャッシュします。画像をレンダリングする前に、クローラーは画像を少なくとも1回見る必要があります。つまり、コンテンツの一部を共有する最初の人には、レンダリングされた画像が表示されません。

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]

テスト中、それはfacebookを取った 最終的にレンダリングされた画像を表示するのに約10分かかりました。だから、頭をかいて、facebookでランダムなogタグを投げていたとき(そして、ここで言及されているhttpsの問題を疑っているとき)は、待つしかありませんでした。

これにより、人々が初めてリンクを共有することが実際に停止する可能性があるため、FBは、この動作を回避する2つの方法を提案します。a)すべてのリンクでOGデバッガーを実行します。 )og:image:widthおよびog:image:heightを指定します。(上記のリンクで詳細をご覧ください)

何がそんなに長くかかるのかまだ疑問に思っています...


この理由は、画像の比率です。画像寸法比が正確に1.91ではない場合:1および/またはog:image:widthおよびog:image:heightデータIが含まれていない、そしてFacebookはその寸法に合わせて、それを廃棄した後、画像を処理する必要があります。また、画像がトリミングされてしまい、不要な場合があります。詳細については、以下を参照してください。developers.facebook.com/docs/sharing/best-practices/#images
Slicktrick

1
修飾された解像度の非常に短いリストに含まれていない画像にog:image:widthおよびog:image:heightを指定しても、私のテストでは速度が向上しません。
Chris Moschini、

5

私は同じエラーを抱えていて、以前の何も助けにならなかったので、Open Graph Protocolの元のドキュメントを試してみて、htmlタグにprefix属性を追加したところ、すべてが素晴らしくなりました。

<html prefix="og: http://ogp.me/ns#">

2

同様の問題がありました。property = "og:image:secure_url"を削除すると、og:imageだけでスクラブされます。時には、少ないほど良い


1
あなたの答えはもっと多くの票を持つべきです!完全に正しいです。https経由でのみコンテンツを提供する場合は、og:image:urlを使用するだけで完了です。
marcvangend

1
これが解決策である理由を理解できません。質問には明らかにそもそもsecure_urlがありませんでした。なぜそれが機能すると思いますか?ランダムすぎる
Decebal

1

この問題の原因となる別のシナリオを発見しました。質問と回答で説明されているすべての手順を実行しましたが、それでも問題は残りました。

画像を確認したところ、私の投稿のいくつかには、数千ピクセルから数メガバイトの範囲の大きすぎるサムネイル画像が含まれていることがわかりましたog:image

これは、WPからJekyllへの最近の移行が原因で発生しました。gulpを使用して画像を最適化しましたが、誤ってog:imageの元の画像を使用しました。

Facebookは今日現在、次の推奨事項を提供しています

高解像度のデバイスで最適な表示を行うには、少なくとも1200 x 630ピクセルの画像を使用してください。より大きな画像を含むリンクページの投稿を表示するには、少なくとも600 x 315ピクセルの画像を使用する必要があります。画像のサイズは最大8MBです。

したがって、8MBの上限があります。


1

誤って見つけたように、透明な空白の画像には、問題の考えられる原因を示す応答ヘッダーが付属しています。

  1. https://developers.facebook.com/tools/debug/og/object/でデバッガーに移動します
  2. あなたのURLを入れて
  3. 下部には、facebookに「画像」が表示されます(透明な1x1 GIF)。
    1. 画像が元の画像にリンクされている-押しても意味がない
    2. 右を押して画像を表示(次のようなものになりますhttps://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...
  4. firebug /開発者ツールの[ネット]タブをオンにし、必要に応じてページを更新します
  5. x-error-detail説明付きの応答ヘッダーが表示されます

たとえば、私の場合、それは Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

私の場合の本当の問題はprerender.ioに関連していまし

結局のところ、プリレンダーを介して画像が要求された場合、画像はHTMLに変換されます。このようなもの:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

これはプリレンダー自体のバグか、プリレンダーを使用しないようにプロキシで設定されているはずです *.jpgリクエストで(たとえFacebookボットからリクエストされたとしても)。

プリレンダーは特定のユーザーエージェントヘッダーでのみ使用されるため、これに気付くことは本当に困難です。


1

私は同じ問題に遭遇し、それから私は私が別のドメインを持っていることに気づきました og:url

ドメインが同じであることを確認したらog:urlog:imageそれは機能しました。

お役に立てれば。


2
ただし、og:imageがcloudfront CDN URLである可能性があるため、これが常に可能であるとは限りません。また、私の場合、FB(2017では!)はページ自体からCDNイメージを取得していませんが、Cloudfrontでもある別のCDNイメージを取得しています。つまり、私のog:urlではありません。だからあなたのポイントは間違っています。
PKHunter 2017

それは本当です。CDN URLを使用していませんでした。私は自分のために何がうまくいったかを共有したいと思っただけです。
ダレンホール


1

サイトのhttps証明書が完全に準拠していない場合、同様の症状(Facebookなどがhttps経由でog:imageおよびその他のアセットを正しく取得しない)が発生する可能性があります。

サイトのhttps証明書は有効であるように見えるかもしれませんが(ブラウザーおよびすべての緑のキー)、中間証明書またはチェーン証明書がない場合、正しくスクレイピングされません。これにより、さまざまなキャッシュとメタタグのすべてをチェックして再チェックすることに多くの無駄な時間がかかる可能性があります。

あなたの問題ではなかったかもしれませんが、同様の症状を持つ他の人である可能性があります(私のような)。証明書を確認する方法はたくさんあります-私がたまたま使用した方法:https : //www.sslshopper.com/ssl-checker.html


1

私はそれをhttp://取り出し、og:imageそれをただの古いものと交換しましたwww.そしてそれはうまく始めました。

Facebookのこのツールを使用し、画像スクレイプキャッシュをリセットし、デモ画像用にプルしているURLをテストできます。


0

デバッガーが4つのタグを取得していることがわかりますog:image URLからをます。

最初の画像が最大であるため、ロードに最も時間がかかります。最初の画像を縮小するか、順序を変更して小さい画像を最初に表示してください。


リックス、ありがとう!長い間最初の画像として、実際には最大200x200程度の小さな正方形の画像がありました。私たちは何度も再配置と再スクレイピングを行いました。また、小さい、大きい、または代替の画像を唯一の画像にすることと、成功率がゼロの再構築を組み合わせました。
キプロス106 2012年

0

さらに、この問題は、ユーザーが生成したストーリー(og:​​imageを使用しない場合)を追加したときにも発生します。例えば:

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

上記はhttpでのみ機能し、httpsでは機能しません。httpsを使用すると、次のエラーが表示されます:添付画像()のアップロードに失敗しました


それを愛し、Googleはサイトにhttpsを含むサイトとの関連性を
高める

0

次の方法でサーバーを更新することを忘れないでください。

Facebookデバッガ

そして、「新しい情報を収集する」をクリックしてください


そのようなリンクやボタンはありません
ian

0

今日も同様の問題がありましたが、共有デバッガーが解決に役立ちました。Facebookは(現在)XMPメタデータが埋め込まれた画像を理解できないようです。記事の画像をXMPメタデータのないバージョンに置き換え、ページを再共有すると(共有デバッガーを使用)、問題は解消しました。16進エディタは、画像にXMPメタデータが含まれているかどうかを確認するのに役立ちます。


0

私の場合、クローラーにバグがあるようです。私はもう試した:

  • リンクをhttpのみに変更する
  • 末尾の空白を削除する
  • 完全にhttpに戻す
  • ウェブサイトを再インストールする
  • 多数のOGプラグインのインストール(私はWordPressを使用しています)
  • サーバーにボットをブロックする奇妙な設定ミスがあると思われます(すべてのOGチェッカーがタグを取得できず、サイトへの他のリクエストが不安定であるため)

これらの作品のどれも。これには一週間かかりました。そして突然、どこからともなくそれは再び機能するようです。

誰かが再びこの問題に遭遇した場合、これが私の研究です:

また、Facebookのオブジェクトデバッガー以外にチェックできるチェッカーが他にもあります。OpenGraphCheck.comAbhinay RathoreのOpen Graph TesterIframelyの埋め込みコードカード検証ツール| Twitter開発者


0

わかりました...このスレッドは古くて混雑していることに気づきましたが、誰かがog:imageタグをFacebookで正しく機能させるのに苦労していたような場合は、次のトリックが役立ちました。

このリンクは使用しないでください。

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

あなたの問題に取り組むために。または、すぐに一番下までスクロールして、Scrape VIA APIをクリックします。

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

エクスプローラツールに表示されるエラーで、「デバッグ」ツールには表示されないものがあります。狂っ!!! (私の場合、イメージファイル名にスペースが含まれていると、デバッグツールでイメージが表示されなくなりましたが、エクスプローラツールでエラーが表示されました)。


0

og画像がFBカードに表示されない別の理由に遭遇しました。さらに、FBスクレイパーツールを使用してogメタタグをデバッグすると、WordPressページに存在するすべての必要なタグを確認できましたが、次のファイルダウンロードエラーが発生しました。

提供されたog:image、<https-link-to-jpg-image>はダウンロードできませんでした。これは、サーバーがサポートされていないコンテンツエンコーディングを使用しているなど、さまざまな理由で発生する可能性があります。クローラーは、deflateおよびgzipコンテンツエンコーディングを受け入れます。

画像フォーマットに問題があり、画像へのリンクは機能していたが、メッセージはコンテンツエンコーディングに問題があることを示しているように見えます。

何度も検索したところ、WordPressサーバーに必要な php 拡張機能を調べたところ、pho-exifモジュールがインストールされていないことに気付きました。exifモジュールは、アップロードされたすべての画像にexifメタデータを書き込みます。その結果、FB og画像タグで使用される画像には、関連付けられたexifメタデータがありませんでした。

exifモジュールが有効になると、WordPressは画像(メディアライブラリ->選択および画像->詳細の編集->マップexifメタデータ)のexifメタデータをリセットできるようになり、期待どおり画像がFBカードに表示されます。


-1

私が観察したことから、あなたのウェブサイトが公開されていて、画像のURLがhttpsであるにもかかわらず、それがうまく機能していることがわかりました。


-1

私にとってこれはうまくいきました:

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/> 

-2

数時間のテストと試行の結果、...

私はこの問題をできるだけ簡単に解決しました。Facebook開発者ページ内で、「og」タグと、このogタグを参照するbodyタグ内のテキストのみを含む「テストページ」を使用していることに気付きました。

それで私は何をしましたか?

アプリケーションで2番目のビューを作成しました。これには、それらが使用するものと同じものが含まれています。

ビューを変更できるように、ページにアクセスしているFacebookはどのようにしてわかりますか?彼らはユニークなユーザーエージェントを持っています: "facebookexternalhit / 1.1"


-2

メタタグを更新したら、コンテンツ(画像)リンクが絶対パスであることを確認し、ここ https://developers.facebook.com/tools/debug/sharingに移動してサイトリンクを入力しscrape again、次のページをクリックします

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