web-dev-qa-db-ja.com

Facebook Open Graph初めて画像なし

共有/送信ボタンにリンクを設定しようとしています。ページ上でグラフのオープンイメージタグを適切に設定しましたが、共有/送信ダイアログを初めて開いたときに、イメージが表示されません。ページを更新せずに、もう一度共有/送信ダイアログを開くと、画像が表示されます。ページのURLと画像はすべて、HTTPSではなくHTTPです。

ページには一意のURLがあるため、URLリントツールを使用することはできません。ウェブサイトは仮想花を人々に送ることを目的としているため、共有されるページは新しく生成されます。

本当にいくつかの助けに感謝します:)

facebookfacebook-opengraph
17
Freeman L

問題が見つかりました。オープングラフタグを適切に設定しないと、どういうわけかこの問題が発生します。

不正解：

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />

正しい：

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />
40
Freeman L

[〜＃〜]更新[〜＃〜]

Iframeを使用したこのソリューションもう機能していません！ 2017年2月6日から働きます。FacebookはX-Frame-Optionsを[〜＃〜] deny [〜＃〜]と設定するだけなので、共有URLをiFrame。

私はog：image：widthとog：image：heightを追加し、すべてのプロパティタグをチェックしましたが、問題はまだ残っていました。

このFacebookのバグの回避策が見つかりました。ページフッターに共有リンクを含む非表示のiFrameを追加しました。このようにして、facebookクローラーは一度ロードされたページをチェックします。

<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>
3
Dan

これは誰かを助けるかもしれません。

Facebookが私が使用した正方形の画像（1000px x 1000px）が気に入らないことがわかりました。
だから私はそれを660px x 315xにトリミングし、Facebookはそれを受け入れた。

Ogの設定：幅と高さは役に立たず、文字通り画像の寸法に関するものでした。

2
Paulina Simkute

og:imageプロパティに画像リンクを正しく指定する必要があります。それでもサムネイルが表示されない場合は、次のように画像heightとwidthを追加します。

<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="298" />
1
Mahesh

私にとってうまくいったもう1つの可能な答え-他のすべてのタグの前にog：imageメタタグが設定されていることを確認してください。

1
Jonathan Plackett

それでも問題が解決しない場合は、次のようにMIME typeプロパティを追加する必要があります。

<meta property="og:image:type" content="image/jpeg">

NOTE：image/jpegではなくimage/jpgです—（そこにeが必要です）

FBクローラーはimage/gif、image/jpeg、image/pngを受け入れます

0
Rowe Morehouse

おそらく、それは誰かを助けるでしょう。理由はわかりませんが、これを「ヘッド」ブロックから削除した後

<link rel="image_src" href="{MY_IMAGE_URI_HERE}" />

問題は解決されました。

これが私のメタタグです

...
<meta property="fb:app_id" content="{APP_ID}"/>
<meta property="og:image" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:secure_url" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:width" content="450" /> 
<meta property="og:image:height" content="236" />
<meta property="og:url" content="{PAGE_URI}"/>
<meta property="og:title" content="{PAGE_TITLE}"/>
<meta property="og:description" content="{PAGE_DESC.}"/>
...

両方のメタタグ（og：image＆og：image：secure_url）で「https」を使用しています。これは、Webサイトがsslを使用しているためです。

0
Boris