web-dev-qa-db-ja.com

ソーシャル共有のためのデフォルトのウェブサイト画像

FacebookでWebサイトを共有するときに表示されるデフォルトの画像を設定する方法はありますか？ Facebookは通常、サイトからサムネイルとして使用する最初の画像を取得することに気付きました。

htmlfacebooksocial-media
43
paz

Facebook画像のメタタグを設定する必要があります：

<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">

詳細については、docsを確認してください

64
Patsy Issa
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">

画像サイズは少なくとも200px X 200pxである必要があります

8
Raina Vinod

Facebookのサーバーは、人々が共有するときに使用する画像を探してWebサイトを「スクレイプ」します。使用する画像を指定する場合は、<head></head>ウェブサイトのセクション：

  • <meta property="og:image" content="http://url-to-your-image.png">

Facebookは、以前のランダム画像のコピーをキャッシュした可能性があります。 Facebookを再度取得するには：

6
full_prog_full

これは私の解決策であり、うまく機能しています：

<head>
    <!--FACEBOOK-->
    <meta property="og:image" content="https://www.website.com/logo.jpg">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1024">
    <meta property="og:image:height" content="1024">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.website.com/"/>
    <meta property="og:title" content="Website title" />
    <meta property="og:description" content="Website description." />
<head>

Facebook Debug site でテストできます。

5
iLandes

og:image<head>このようなHTMLドキュメントの：

<meta property="og:image" content="http://example.com/ogp.jpg" />

これは、少なくとも以下のソーシャルメディアサイトで尊重されているOpen Graph Protocolの一部です。

（...そしておそらく他にもたくさんあります。）

上記のタグを設定することに加えて、mayもしたい：

  • ページの画像のソーシャルメディアプラットフォームのキャッシュバージョンをクリアします（プラットフォームの開発者ツールを使用するなど）。これにより、変更がすぐに反映されるのを確認できます。たとえば、Facebookの場合は https://developers.facebook.com/tools/debug/ でこれを行うことができます
  • http://ogp.me/#structured で説明されている構文を使用して、画像の幅や高さなどを指定するための追加の「構造化プロパティ」を追加します。これは、Facebookの https://developers.facebook.com/docs/sharing/best-practices#images で「ベストプラクティス」として説明されています。
5
Mark Amery