FB OpenGraph og:image が画像を取得できない (おそらく https?) 質問する

FB OpenGraph og:image が画像を取得できない (おそらく https?) 質問する

Facebookは私のファイルを把握できずog:image、私はあらゆる一般的な解決策を試しました。これは何か関係があるのではないかと考え始めています。https://...

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

もう限界です。私と他の人たちがこれにどれだけの時間を費やしたかを話したら、皆さんは驚くでしょう。問題は、これがオンライン ストアだということです。絶対に、絶対に、画像がないわけにはいきません。画像がないとだめなのです。私たちには 10 個ほどのサイトがあります...og:image問題があるのはこのサイトだけです。このサイトも にある唯一のサイトなのでhttps、それが問題なのかもしれないと思いました。しかし、Web 上のどこにもその前例を見つけることができません。

これらはメタタグです:

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

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

回避策を投稿しました ----

Keegan のおかげで、これが Facebook のバグであることが分かりました。回避策として、別の非 HTTPS の Web サイトにサブドメインを配置し、そこにすべての画像をダンプしました。各製品ページで調整http://img.otherdomain.com/[like-image.jpg]画像を参照しog:imageました。次に、FB Linter を調べてすべてのリンクを実行し、OG データを更新する必要がありました。これはうまくいきましたが、解決策は応急処置的な回避策であり、問​​題が解決して通常の https ドメインに戻った場合、FB は別の Web サイトから画像をキャッシュし、事態を複雑にします。この情報が、他の誰かが 32 時間httpsコーディング時間を無駄にすることを防ぐのに役立つことを願っています。

ベストアンサー1

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タグ:

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

画像の HTTP META タグ:

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

ソース:http://ogp.me/#構造化<-- 詳細については、このサイトをご覧ください。

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

おすすめ記事