web-dev-qa-db-ja.com

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

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

imagefacebookpreview
144
Mark

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

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

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

After上記を行うには、 Facebook " Object Debugger " 画像が正しく表示されない場合。また、最初に共有したときに、高さと幅も指定しない限り表示されないことに注意してください。 Facebookで共有-サムネイルが初めて表示されない

224
Shef

また、wordpressがある場合は、編集モードのときにWebページの一番下までスクロールし、「機能のある画像」（画面の右下）を選択します。

4
davea0511

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

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

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

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

1
krubo