web-dev-qa-db-ja.com

画像のないWebサイトのFacebookでプレビューサムネイルを表示する方法

私は最近、imgタグのないウェブサイトをデザインしました。すべてが含まれる1つの大きな太いCSSスプライトのみです。ただし、そのWebサイトをFacebookで公開しようとすると、プレビューサムネイルが表示されません。おそらく、マークアップに画像が見つからないためです。助言がありますか？それにもかかわらず、私はまだそれを超高速のimgなしのウェブサイトに保ちたいです。

cssfacebookimagesdetectionthumbnail
2
João

この読書をお勧めします

Webサイトプレビューサムネイルを取得してFacebook共有に表示する方法

Google はあなたの友人です:)

次のようにコードにメタ情報を追加すると、すべて再開されます。

<link rel="image_src" href="http://site.com/website-thumb.jpg" />

その画像を幅250ピクセル以上にしないようにしてください。

2
balexandre

Facebookはimage_srcという独自のリンクタイプを使用します。

<link rel="image_src" href="location/of/image" />

<head>に挿入するだけで、Facebookは画像を取得できるはずです。

また、興味がある場合、Facebookはaudio_srcとvideo_srcという2つのrel値を認識します。 詳細はこちらを参照 。

3
Lèse majesté

<html>タグを<html prefix="og: http://ogp.me/ns#">に置き換えます

指定したメタタグをヘッドタグ内に追加します。

 <head>
    <meta property="og:title" content="TITLE TO BE DISPLAYED"/>
    <meta property="og:image" content="IMAGE URL"/>
    <meta property="og:description" content="DESCRIPTION"/>  
    </head>

タイトルと説明はオプションです。これは、オープングラフプロトコルを使用するサイトで機能します。

1
Shan Eapen Koshy