2019規格
WhatsApp、Twitter、Facebook、およびPCやモバイルデバイス用のブックマークアイコンに最適なプレビューを表示するには、いくつかの手順があります。あなたが読むのが好きなら ogp.me - に行くが、最高のWhatsAppプレビューを得るためにこの答えのステップ1から6を必ず読んでください。
ステップ1：タイトル
最大65文字
<title>your keyword rich title of the website and/or webpage</title>
ステップ2：説明
最大155文字
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
ステップ3：og：title
最大35文字
<meta property="og:title" content="short title of your website/webpage" />
ステップ4：og：url
あなたのWebページアドレスへのフルリンク
<meta property="og:url" content="https://www.example.com/webpage/" />
ステップ5：og：description
最大65文字
<meta property="og:description" content="description of your website/webpage">
ステップ6：og：image
サイズが300KB未満、最小サイズが300 x 200ピクセルの画像（JPGまたはPNG）をお勧めします。
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
ステップ7：og：type
オブジェクトをグラフ内に表示するには、その種類を指定する必要があります。これが利用可能なグローバルタイプのリストです： http://ogp.me/#types 。あなた自身のタイプを指定することもできます。
<meta property="og:type" content="article" />
ステップ8：og：locale
リソースのロケール他の言語の翻訳がある場合は、og：locale：alternateを使用することもできます。
Og：localeを指定しないと、デフォルトのen_USになります。
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
ステップ9：Twitter
最良のTwitterサポートのために this を読んでください。
ステップ10：Facebook
最高のFacebookサポートのために this を読んでください。
ステップ11：favicon
すべてのブラウザとデバイスのための最もfaviconサポートについては this を読んでください。
ボーナスステップ12：ビデオ/オーディオ
オーディオ/ビデオを共有することも可能です。例えばFacebookとTwitterはビデオをとてもよく共有しています。 ogp.me を読んでください。
私は同じ問題を抱えていました、そして、問題は絵の大きさでした。 Whatsappは300KBを超えるサイズの画像をサポートしていません。
そのため、Whatsappで画像を表示するための最も重要なプロパティは次のとおりです。
<meta property="og:image" content="url_image">
また、表示する画像のサイズは300KB未満でなければなりません。
問題が解決しない場合は、この同様の質問に対する回答 も読んでください
私は私のために働いた解決策を見つけたので、私はwhatsappにホワイトリストがないと思います。次のようにしてください。 3つのメタタグを挿入します。
<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>
<meta property="og:title" content="Your Title"/>
<meta property="og:description" content="Your description."/>
あなたのイメージは.pngフォーマットと600x600pxサイズでなければならず、そして 'logo-yoursite.png'と命名されなければなりません（それが私のためにちょうどうまくいったなら）
あなたのウェブサイトにwhatsappへのリンクを挿入することを忘れないでください：
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
これをしてください。
私はここで完璧な詳細な解決策を文書化しました - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 取得するために行うべき7つのステップがあります完璧なプレビュー。
タイトル：最大65文字で、キーワードの豊富なタイトルをWebページに追加します。
メタ説明：あなたのウェブページを最大155文字で記述してください。
og：title：最大35文字です。
og：url：あなたのWebページアドレスへのフルリンク。
og：description：最大65文字です。
og：image：サイズが300KB未満で、最小サイズが300 x 200ピクセルの画像（JPGまたはPNG）をお勧めします。
favicon：32 x 32ピクセルの小さなアイコン。
上のページでは、必要な仕様、文字数制限、およびサンプルタグがあります。あなたがそれが満足できると思ったら、投票してください。
バグで作業した後、IOSで、HEADの-要素がog：imageのWhatsApp検索を停止する可能性があることを確認しました/og：description/name = description。だから最初にそれらを上に置くようにしてください他のすべての。
これはうまくいきません
<head>
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>
この作品：
<head>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
</head>
Facebookではポリシー、コンプライアンス、およびAPIが変更されることが多いため、 https://developers.facebook.com/tools/debug/sharing を参照してプロパティを検証することをお勧めします。
あなたがメッセンジャーボットや他のFBアプリで作業するなら、あなたはWhatsappで機能するためにリンクイメージのためにプロパティfb：app_idを必要とするかもしれません。 Facebook開発者ウェブマスターサイトでもっと。 https://developers.facebook.com/docs/sharing/webmasters
私も自分自身でこれをやろうとしていました、そして私はすべての正しいメタタグを加えました：
<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />
しかし、WhatsApp内で自分のリンクを共有しているときにまだ画像を見ることができませんでした。
私は、WhatsAppが画像とURL情報のある種のキャッシュも行うことを発見しました。
正しいタグが挿入されていることを確認するには、別のURLを試してみます。たとえば、 http://domain.com ではなく http://www.domain.com 。
うまくいけば、これは他の人に役立ちます。
私は同じ問題を抱えていた、ここで解決することです。
Meta og：imageを追加すると表示されるはずです。
問題は、whatsappが、http：//なしで入力して/で終わると画像が表示されないことです。たとえば、 http://google.com/ と入力すると画像と説明が表示されますが、表示されません。 Google COM
誰かに役立つことを願っています。
WhatsAppイメージのプレビューを取得するには、次のタグが必要です。
<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
Facebook docs が示すように、og：imageサイズを指定すると、非同期ではなく高速でフェッチされます。
画像形式にはPNGをお勧めします。少なくとも600x600ピクセルを推奨します。
以下の行動は私の場合に役立ちました。
同じホストの下に画像を配置しています。
<meta property="og:url" content="https://www.same-Host.com/whatsapp-image.png" />
先頭の部分文字列でユーザーエージェントを検出することによって、必要なイメージをWhatsAppに渡す、の例
WhatsApp/2.18.380 A
実際に送信ボタンを押すまでに数秒待つので、WhatsAppはogメタデータから画像と説明を取得する時間があります。
同じ問題を抱えて、og：imageを追加しました、そしてそれはURLがスラッシュ記号（/）で終わっている間はうまくいきませんでした。 URLからスラッシュを削除した後 - 画像がロードされます..興味深いバグ...
あなたのWebサイトのURLの横にある写真をWhatsAppで共有したい場合は、URLがリンクしているページに次のようにメタタグを配置する必要があります。
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
これらの試みの後でも。私のウェブサイトの画像は何度か取得されたが時々取得されなかった。 https://developers.facebook.com/tools/debug/sharing で検証した後
私のDjango（python）フレームワークはイメージパスを相対的にレンダリングしていることに気付きました。私は完全なURLで画像のパスを変更しなければなりませんでした。 （http：//を含む）それからそれは働き始めました