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

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

ソリューション

facebookの画像のmetaタグを設定する必要があります。

<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をご覧ください。

解説 (9)
<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×200px以上であること。

解説 (2)

Facebookのサーバーは、人々が共有するときに使用する画像を探して、あなたのウェブサイトをスクレイピングします。使用する画像を指定したい場合は、ウェブサイトの `` セクションに記述してください。

Facebookが前回のランダム画像のコピーをキャッシュしている可能性があります。facebookに再度取得させるためには。

解説 (0)

このようにHTMLドキュメントの < head>og:imageを設定します。

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

これはオープングラフプロトコルの一部であり、少なくとも以下のソーシャルメディアサイトで尊重されています。

-Facebook(https://developers.facebook.com/docs/sharing/webmasters/#imagesを参照)。 -Twitter(https://dev.twitter.com/cards/getting-started#opengraphを参照)。 -LinkedIn(https://developer.linkedin.com/docs/share-on-linkedinを参照)。 -Google+(https://developers.google.com/+/web/snippet/を参照)。 -Pinterest(https://developers.pinterest.com/docs/rich-pins/reference/を参照)。

(。.. そしておそらくもっとたくさん。)。

上記のタグを設定することに加えて、 も*したい場合があります。

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

解説 (0)

これは私の解決策です。



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

Facebookデバッグサイトでテストできます。

解説 (0)