Facebookでプレビューとして表示されるWebサイトの画像を設定するにはどうすればよいですか？

156

Facebookでリンクを共有すると、Webサイト上の画像が自動的に検出され、ランダムに1つがプレビューとして選択されます。プレビュー画像にどのように影響を与えることができますか？フェイスブックでウェブサイトのリンクを共有したときは？

image facebook preview

— マーク
ソース

回答:

234

1. HTML宣言にOpen Graph XML名前空間拡張を含める

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. <head></head>次のメタタグを使用して、使用する画像を定義します

<meta property="og:image" content="fully_qualified_image_url_here" />

オープングラフプロトコルの詳細については、こちらをご覧ください。

上記を行った後、画像が正しく表示されない場合は、Facebookの「Object Debugger」を使用してください。また、最初に共有されたときは、高さと幅も指定されていないと表示されません。Facebookで共有-サムネイルが初めて表示されないをご覧ください。

— シェフ
ソース

@Martin私は知りません。多分そうですが、私はそれがOpen Graph Protocol Docsで言及されているのを見ません。デバッガーを試して、キャッシュされた値がサイトに表示されているかどうかを確認します。この問題に関連するキャッシュをクリアしないFacebookのOpen Graphというタイトルの別の質問があるようです。

— シェフ、2011

@KDogによるコメント：問題がありますか？Facebookのデバッグツールでコードを確認してください。Facebookのキャッシュ画像、タイトル、本文テキスト。Webサイトにxmlを追加しているときにタイトルを変更しましたが、誤って検証エラーをいくつか作成したため、Facebookの共有プレビューに変更はありませんでした。Facebookは無効な新しいデータを表示する代わりに有効なキャッシュを使用しました。これらのエラーは、developers.facebook.com/ tools/debugを使用して解決できました。そうすると、新しいタイトルと画像がすぐに表示されます。

— Jeremy Thompson

@ScotterMonkey：はい、それは予想される動作です。使用するコンテンツをFBに指示できます。ところで、要素の<meta property="og:image" content="your_image_here" />間に複数を追加できるheadので、FBに投稿するときに選択できます。

— シェフ、2014年

html宣言のfbでそのことを逃しました。私の日を救った！（これが3年前の投稿であっても）。どうもありがとう！

— bestprogrammerintheworld 2015年

コンテンツリンクは実際のURLです-私が見つけた相対リンクではありません。すなわちhttp://mywebsite.com.au/Images/prettypic.png、ではない/Images/prettypic.png

— JumpingJezza 2015

また、ワードプレスを使用している場合は、編集モードでWebページの下部までスクロールし、「注目の画像」（画面の右下）を選択してください。

— davea0511
ソース

Weeblyを使用している場合は、公開されているサイトを表示し、画像を右クリックして[画像のアドレスをコピー]をクリックします。次に、Weeblyで、[サイトの編集]、[ページ]に移動し、使用するページをクリックします。[SEO設定]で、[ヘッダーコード]にShefの回答のコードを入力します。

<meta property="og:image" content="/uploads/..." />

/ uploads / ...をコピーした画像アドレスに置き換えるだけです。[公開]をクリックして変更を適用します。

名前空間に関するShefの回答の一部はスキップできます。これは、Weeblyでデフォルトですでに設定されているためです。

— クルボ
ソース