FB OpenGraph og：画像が画像を引っ張らない（おそらくhttps？）
まず - 私は - しない これは重複した問題であると信じています。私はSOで同じまたは類似の問題を広範囲に検索しましたが、お問い合わせの前にトラブルシューティングが行われていたため、この問題は独特のものだと思います。
Facebookは私のog:imageファイルを理解することができず、私はあらゆる通常の解決策を試してみました。私はそれがhttps://...と関係があるかもしれないと考え始めています
- 私は http://developers.facebook.com/tools/debug をチェックしましたが、警告やエラーはありません。
- リンクしている画像を "
og:image"で見つけていますが、空白で表示されています。しかし、画像をクリックすると、それらは存在しており、それは彼らにとってまっすぐです。 - Https以外のサーバーでホストされている画像が1つ表示されます。
- 正方形の画像、jpegs、png、大きいサイズ、小さいサイズを試しました。画像をpublic_htmlに正しく配置しました。ゼロが現れています。
- これはキャッシュエラーではありません。別の
og:imageをメタに追加すると、FBのリンターがそれを見つけて読み取るからです。それはプレビューを表示しますか。プレビューは空白です。 only の例外は、このWebサイトに掲載されていない画像を対象としています。 cpanelや.htaccessに画像が表示されないようなアンチリーチがあるのではないかと私たちは確認しました。なかった。まったく別のサーバーで< img src="[remote file]" >をすばやく実行しても、イメージは正常に表示されます。- 私たちはそれが
og:typeまたは他のメタタグとの別の変わったものであろうと思った。一度に1つずつすべて削除し、確認しました。変化なし。ただの警告です。 - 別のWebサイト上の同じコードが問題なく表示されます。
- maybeは、複数の商品に同じ商品ページを使用しているため、画像を引き出すことはできません（取得値に基づいて変更します）。 .php？id = xxx "）しかし、（別のURLからの）1つの画像を引き込んでいます。
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"
}
],
1ページに見つかったすべてのリンクをテストしました。すべて完全に有効な画像でした。
編集2 ----
私たちはテストを試み、NONSECUREのWebサイトにsubdomainを追加しました（そこから画像はFacebookを通じて実際に表示されます）。サブドメインはhttp：// img。[nonsecuresite] .comでした。次に、すべての画像をメインのサブドメインフォルダに入れて参照しました。それらの画像をFBに取り込むことはありません。ただし、それでも非セキュアメインドメインで参照されていたイメージはすべて引き出されます。
対処方法----
Keeganのおかげで、これがFacebookのバグであることがわかりました。回避策として、サブドメインを別のNON-HTTPS Webサイトに配置し、その中のすべてのイメージをダンプしました。各製品ページのhttp://img.otherdomain.com/[like-image.jpg]で、調整中のog:imageイメージを参照しました。その後、FB Linterを通過し、OGデータを更新するためにEVERY linkを実行する必要がありました。これはうまくいきましたが、解決策はバンドエイドの回避策です、そしてhttps問題が修正され、自然なhttpsドメインを使用することに戻ると、FBは別のWebサイトからの画像をキャッシュしてしまい、問題を複雑にします。うまくいけば、この情報が他の誰かがtheirlifeの32コーディング時間を失うのを防ぐのに役立ちます。
私は同じ問題に出くわし、それをFacebook開発者サイトのバグとして報告しました。 HTTPを使用したog：image URIはうまく機能し、HTTPSを使用したURIは機能しないことは明らかです。彼らは今、「これを見ている」ということを認めています。
バグはここで見られることができます： https://developers.facebook.com/bugs/260628274003812
一部のプロパティには、追加のメタデータを添付することができます。これらは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" />
そのため、HTTPS URLのog:imageプロパティを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リンター
たとえ facebook debugger が正しいと表示されていても、それが自分だけのものであるかどうかはわかりませんが、og:imageが機能せず、サイトのロゴが選択されます画像。
しかし、og:imageをog:image:urlに変更することは私にとってうまくいきました。これが他の誰かが同様の問題に直面しているのを助けることを願っています。
tl; dr - 辛抱強く
Httpsサイトからの空白の画像が表示されていたので、ここで終わりました。しかし、問題はまったく違うものでした。
コンテンツが初めて共有されるとき、Facebookクローラは共有されたURLからメタデータを削り取ってキャッシュします。クローラは、レンダリングできるようになるまでに少なくとも1回は画像を表示する必要があります。つまり、コンテンツを最初に共有した人にはレンダリングされた画像が表示されません。
[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]
テスト中に、レンダリングされたイメージを最後に表示するのにfacebookで約10分かかりました。だから私は自分の頭を傷つけてFacebookでランダムなogタグを投げていました（そしてここで言及されたhttps問題を疑っていた）間、私がしなければならなかったのは待つだけでした。
これは、人々が初めてあなたのリンクを共有するのを本当に止めるかもしれないので、FBはこの振る舞いを回避するための2つの方法を提案します：a）すべてのリンクでOG Debuggerを実行する。 ）og：image：widthとog：image：heightを指定する。 （上記のリンクでもっと読む）
何がそんなに長くかかるのか、まだ疑問に思っています...
ここからグーグルから手に入れたが、これは私にとってあまり助けにはならなかった。ロゴには3：1の最小縦横比が必要であることがわかりました。私のものはほぼ4：1でした。私はGimpを使ってそれをちょうど3：1にトリミングしています - 私のロゴはFBに表示されています。
私は同じエラーがあり、以前のものは何も助けていなかったので、私は Open Graph Protocol のオリジナルのドキュメントに従うことを試み、私は私のhtmlタグにprefix属性を追加しましたそして、すべてが最高になりました。
<html prefix="og: http://ogp.me/ns#">
私は同様の問題を抱えていました。 property = "og：image：secure_url"を削除し、og：imageだけでスクラブします時々、もっと少ない
私の場合、問題は CAルート証明書を提供していないことにありました。 SSL設定を分析するために、 https://www.ssllabs.com/ssltest/analyze.html を使用した後、私はそれを考え出しました。
この問題を引き起こす可能性がある別のシナリオを発見しました。質問と回答に記載されているすべての手順を実行しましたが、それでも問題は残りました。
私の画像を確認したところ、 私の投稿の中には、og:imageに数千ピクセルから数メガバイトの範囲を超える大きさのサムネイル画像がありすぎることを発見しました。
これは最近のWPからJekyllへの移行が原因で起こりました。私は自分の画像をgulpで最適化しましたが、og：imageの元の画像を誤って使用しました。
高解像度デバイスで最高の表示を得るには、少なくとも1200 x 630ピクセルの画像を使用してください。リンクページの投稿に大きな画像を表示するには、少なくとも600 x 315ピクセルの画像を使用する必要があります。画像のサイズは最大8MBです。
それで、8MBの上限があります。
私が偶然見つけたように、透明な空白の画像は問題の考えられる原因を示す応答ヘッダが付いています。
- https://developers.facebook.com/tools/debug/og/object/ のデバッガにアクセスしてください。
- あなたのURLを入れてください
- 一番下に、facebookはあなたの「イメージ」（透明な1x1 GIF）を示しています
- 画像は元の画像にリンクされています - 無意味に押す
- 右を押して画像を見る（
https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...のようなものが表示されます）
- Firebug/developerツールのNetタブをオンにし、必要ならページを更新
- 説明付きの
x-error-detailレスポンスヘッダーが表示されます。
たとえば、私の場合はInvalid image extension for URL: https://[mydomain]/[myfilename].jpgでした
私の場合の本当の問題は prerender.io に関連していました。
結局のところ、画像がprerenderを介して要求された場合、それは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>
それはprerender自体のバグなのか、それとも*.jpgリクエストにprerenderを使わないようにあなたのプロキシで設定されるべきです（たとえそれらがFacebookボットによってリクエストされたとしても）.
Prerenderは特定のユーザーエージェントヘッダーでのみ使われるので、これに気付くのは本当に難しいです。
私は同じ問題に遭遇し、それから私は私がog:urlのために異なるドメインを持っていたことに気づきました
ドメインがog:urlとog:imageで同じであることを確認したら、それはうまくいきました。
お役に立てれば。
サイトのhttps証明書が完全に準拠していない場合、同様の症状（Facebookなどがhttps経由でog：imageやその他のアセットを正しく取得できない）が発生する可能性があります。
あなたのサイトのhttps証明書は有効に見えるかもしれませんが（ブラウザの緑色の鍵とすべて）、中間証明書またはチェーン証明書がないと正しくスクレイピングできません。これにより、さまざまなキャッシュやメタタグをすべてチェックして再チェックすることになり、多くの時間が無駄になります。
あなたの問題ではなかったかもしれませんが、似たような症状を持つ他人のものかもしれません（私のように）。あなたの証明書をチェックするには多くの方法があります - 私が使用したもの： https://www.sslshopper.com/ssl-checker.html
私が観察したことから、私はあなたのウェブサイトが公開されていて、たとえ画像のURLがhttpsであってもそれがちょうどうまく働くことを私は見ます。
私にとってこれはうまくいった：
<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"/>
さらに、この問題は、ユーザーが生成したストーリー（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を使用すると、「添付されたimage（）がアップロードに失敗しました」というエラーが表示されます。
デバッガがあなたのURLから4つのog:imageタグ を取得しているのがわかります。
最初の画像は最も大きく、したがってロードに最も時間がかかります。最初の画像を縮小するか、小さい画像を最初に表示するように順番を変更してみてください。
私の場合、クローラーにバグがあるようです。私はもう試した：
- リンクをhttpのみに変更する
- 末尾の空白の削除
- 完全にhttpに切り替える
- Webサイトの再インストール
- 多数のOGプラグインのインストール（WordPressを使用）
- サーバーの疑いがあると、ボットをブロックする奇妙な設定ミスがあります（すべてのOGチェッカーがタグを取得できず、サイトへの他のリクエストが不安定であるため）
これらはどれも機能しません。これには1週間かかりました。そして突然、どこからともなく動作するように見えます。
誰かが再びこの問題に遭遇した場合の私の研究は次のとおりです。
- Open GraphチェッカーがOpen Graphデータを検出できないのはなぜですか
- ウェブサイトのボットを知る方法、私が彼らに読むホスティングへのルートアクセスがない場合 t
- ???? Open GraphチェッカーがOpen Graphデータを検出できないのはなぜですか？-コミュニティサポートを暗号化しましょう
- ???? クローラーは画像を取得できませんが、新しい一意のクエリ文字列を追加すると、初めて動作するようになります-開発者向けFacebook
また、チェックするための Facebookのオブジェクトデバッガー 以外のチェッカーがあります： OpenGraphCheck.com 、 Abhinay RathoreのOpen Graph Tester 、- Iframelyの埋め込みコード 、 カード検証ツール| Twitter開発者 。
私は私のhttp://からog:imageを取り出し、それを普通の古いwww.に置き換えたところ、問題なく動作し始めました。
あなたは Facebookによってこのツールを使用することができます あなたのイメージスクレープキャッシュをリセットして、それがどのURLをデモイメージに引っ張っているかをテストします。
今日同様の問題がありましたが、 Sharing Debugger で解決できました。 Facebookは（現在）XMPメタデータが埋め込まれた画像を理解できないようです。私たちの記事の画像をXMPメタデータのないバージョンに置き換えて、（Sharing Debuggerを使用して）ページを再スクラップすると、問題は解決しました。画像にXMPメタデータが含まれているかどうかを16進エディタで確認できます。
メタタグを更新したら、コンテンツ（画像）リンクが絶対パスであることを確認して、ここ に移動しますhttps://developers.facebook.com/tools/debug/sharingあなたのサイトリンクを入力し、次のページでscrape againをクリックしてください