このようなリンクを共有するときに、WhatsAppに表示する画像をWebサイトに含めるにはどうすればよいですか？
回答:
WhatsApp、Twitter、Facebook、PCおよびモバイルデバイスのブックマークアイコンの完璧なプレビューを取得するには、いくつかの手順が必要です。読書が好きな場合はogp.meにアクセスしてください。ただし、この回答のステップ1〜6を読んで、WhatsAppのプレビューを最大限に活用してください。
注：一部のアプリやウェブサイトでは、キャッシュを使用したり、ウェブサイトのプレビューをデータベースに保存したりしています。これは、たとえばWhatsAppまたはFacebookでリンクをテストしている場合、ほとんどすぐに違いが見られないことを意味します。別のリンク（別のページ）を使用するとうまくいきます。しかし、そのリンクを一度使用するとすぐに、この「ご注意ください」セクションが最初からやり直されます。
ステップ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">* @RichDeBourkeが私にこれについて言及しましたが、どうやらWhatsAppはその最大画像サイズ（サイズとファイルサイズ）を増やしました。私はいくつかのテストを行いました。すべてのデバイスで毎回一貫して機能するわけではありません。私は2.x Mb画像をテストしましたが、それでも9/10回は動作するようでした。300KB未満が最も安全なアプローチですが、2020年2月18日の時点で、より大きな画像を使用することをお勧めします。ただし、ファイルサイズを2MB以下に保つことをお勧めします。そして、もしあなたがまだしていなければ、間違いなく TinyPNGまたは他の画像圧縮アルゴリズムを通してあなたの画像を投げます。
上記の手順を完了すると、WhatsAppにプレビューが表示されます。ただし、上記の「注意」セクションに注意してください。
ステップ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サポートについては、こちらをご覧ください。
ステップ10：Facebook
最高のFacebookサポートについては、こちらをご覧ください。
ステップ11：ファビコン
すべてのブラウザとデバイスで最高のファビコンをサポートするには、こちらをお読みください。
ボーナスステップ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形式で600x600ピクセルのサイズで、「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文字のキーワードのリッチタイトルをウェブページに追加します。
メタ説明：最大155文字でWebページを説明します。
og：title：最大35文字。
og：url：Webページアドレスへの完全なリンク。
og：description：最大65文字。
og：image：サイズが300KB未満で、最小サイズが300 x 200ピクセルの画像（JPGまたはPNG）をお勧めします。
favicon：サイズが32 x 32ピクセルの小さなアイコン。
上記のページには、必要な仕様、文字数制限、サンプルタグがあります。問題がなければ、賛成票を投じます。
og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
<meta property="og:image" content="image.png" />上記のどこかで提案されているように、単純なが機能しないことに注意を向けたいと思います（これにより、実際には何週間もループに陥っていました）。機能するのは、絶対URLのいずれかです。
<meta property="og:image" content="https://domainname.com/image.png" />
または、スラッシュで開始します（イメージがルートディレクトリにある場合）：
<meta property="og:image" content="/image.png" />
（コメントとして追加したはずですが、まだ許可していません。モデレーターは、必要に応じてこれを自由に移動できます。）
私もこれを自分でやってみて、正しいメタタグをすべて追加しました：
<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://www.domain.comではなくhttp://domain.comです。
うまくいけば、これは他の誰かに役立ちます。
バグで作業した後、IOSではHEADの要素がog：image / og：description / name = description のWhatsApp検索を停止する可能性があることがわかりました。だから、まず他のものの上にそれらを置くようにしてください。
これは機能しません
<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>twitter:image空であり、WhatsAppが取得できないようにしog:imageます。他の<meta>タグを削除してみると、ソーシャル共有機能のデバッグに役立ちます。
og:imageを上に置くように人々に伝え、それが確実に読まれるようにすること
Facebookはポリシー、コンプライアンス、APIを頻繁に変更するため、https：//developers.facebook.com/tools/debug/sharingを常に確認してプロパティを検証することをお勧めします。
メッセンジャーボットまたは他のFBアプリを使用している場合、Whatsappでリンク画像を機能させるには、プロパティfb：app_idが必要になる場合があります。Facebook開発者Webマスターサイトの詳細。 https://developers.facebook.com/docs/sharing/webmasters
私は同じ問題を抱えていました、ここで解決します。
meta og：imageを追加すると表示されます
問題は、http：//なしで入力して/で終わる場合、whatsappが画像を表示しないことです。たとえば、http：//google.com/を入力してgoogle.com を入力しない場合、画像と説明が表示されます。
それが誰かを助けることを願っています。
このスレッドに回答を追加して、上記のスレッドのどれが問題の解決に役立ち、根本的な原因を適切に理解して修正するために従うことができる順序を具体的に言及します：
このソリューションでソーシャルメディアのリンクを共有しているときに、豊富なプレビューを得ることができました。
私はこのスレッドでさまざまなオプションに従いましたが、以下は正しい答えに最も近いものであり、それらすべてが最終結果に貢献しました：
これにより、スクロールして正しい答えのセットを見つけるために必要な時間と、すべての試行錯誤に必要な労力を節約できると期待しています。
このスレッドと外部検索からいくつかの提案を試みましたが、それはまったく別の問題でした。og：imageタグで示される画像を使用するための私の特定の指示は、Jetpackプラグインによって提供されるオープングラフタグによって上書きされていました。ここで私の詳細な答えを見つけることができます。しかし、私はこのよりフォローされているスレッドに簡単にステップを追加する価値があると思いました。これが誰かを助けることを願っています。
Facebookの共有デバッガは、私は根本的な原因を特定し、そこから、私はこれらの手順に従って助けました。
Jetpackが使用するイメージを決定できないときに使用されるデフォルトのイメージを変更します
function custom_jetpack_default_image() {
return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );加えて、最小300px x 200pxやサイズ<300 KBなどの画像パラメーターが推奨されます。そして、そのような一般的な手順がうまくいかない場合は、これらの手順に従ってください。問題が私の問題と似ている可能性が高いためです。また、プラグインを削除することが最も簡単な解決策になる場合もあります（プラグインなしで実行できることを確認した場合）。
最後に、次のようなものが表示されるはずです- 
お役に立てれば。
NS
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のドキュメントあなたはOGを指定した場合、こう述べています。画像サイズは、それがそうでない場合は非同期にフェッチしっかり代わりになります。
画像形式にはPNGが推奨されます。少なくとも600x600ピクセルをお勧めします。
<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" />正しいですか？タグやその他の画像ピルセルで画像（その画像が持つ）の幅と高さを指定する必要がありますか？メタタグで幅と高さに言及すると、その寸法で表示されますか？@moreirapontocomを明確にしてください
WhatsAppで誰かが共有しているWebサイトのURLの横に写真を表示したい場合は、次のように、URLがリンクしているページにメタタグを配置する必要があります。
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>次のアクションは私の場合に役立ちました。
同じホストの下に画像を置く。
<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />具体的には、部分文字列をリードしてユーザーエージェントを検出することにより、必要な画像をWhatsAppに渡す、例
WhatsApp/2.18.380 A実際に送信ボタンを押す前に数秒待機するため、WhatsAppはogメタデータから画像と説明を取得する時間があります。
これらの試みの後でも。私のウェブサイトの画像が時々取得され、時々取得されませんでした。https://developers.facebook.com/tools/debug/sharingで検証した後
私のdjango（python）フレームワークが画像パスを相対的にレンダリングしていることに気付きました。画像のパスを完全なURLで変更する必要がありました。（http：//を含む）。それからそれは働き始めました
追加の役立つ情報：
複数のog：imagesを提供できますが、whatsappは最後のものを使用します。これは、例えばFacebookが1.91：1の比率とwhatsapp 1：1を必要とするという問題に役立ちます。
<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/